TheCreatology.com

Tag: Web Designing

How to add Google Analytics Code in WordPress using Thesis Theme ?
Google Analytics is a Web Analysis Tool, which gives insight of Page Visits and Daily Traffic. Google Team is improving Analytic Product day-by-day, to present more precise and accurate reports.

Google Analytics

In the article we will learn to add Google Analytics Code in WordPress using Thesis Theme. But before that, we will have to setup Google Analytics Profile.

How to Setup Google Analytics Profile ?

Setting up Google analytics profile is not a big deal, all you need is a Google Account. If you are using Gmail or any other Google Product, then it clears that you have a Google Account associated. Login into your Gmail or any other Google account, and click here to Access Analytics. You will find something like below as in screenshot:

Google Analytics Login Page

Once we gain access to Google Analytics account, we will have to setup a profile for our website.
- Click to add new profile on Dashboard.
- Next screen, enter domain name and select country. You may also refer to screenshot below:
New Google Analytics Profile
- Once done, click Finish button and we have created the Website Profile.
Get Google Analytics Code

Now that we have created our profile we will now, get Google Analytics Code to Verify website.
- On the Google Analytics Dashboard, click to Edit your listed profile.
- Next, Click on Tracking Status or Check Status Link.
- In the next screen it will show you instruction to add tracking code on your website. Grab the Google Analytics Code and paste is on a Notepad file for future reference. (Refer to Screenshot Below)
Grab Google Analytics Code

Add Analytics Code in WordPress Thesis Theme

Adding Tracking Code in Thesis Theme is a click-a-way job. Here is how we will be going to do that:
- Navigate to WordPress Dashboard Admin Panel > Thesis > Site Options.
- In site options, look for Stats Software/Scripts. Now expand the item and insert the Tracking Code in the Text Area similar to what you can see in the screenshot below:
Add Analytics Code in Thesis Site Options
- Once done, click the Big Green Save Button and we are done.
We Are Done!

Now, that we have installed the tracking code on our website, you can now Verify Google Analytics Profile so that Google bots can crawl website, and track each-n-every activity on your website.

If you have any queries for further help is required you can post comment as your opinion.
May 6, 2011
Create 404 Error page to decrease bounce rate on WordPress
As we all know about 404 error page which is a error message from the server over a HTTP response from client side. I have seen many theme developers ignore 404 error page on wordpress, which I believe is a big mistake, as it increases bounce rate of website and reflects bad impression on visitor who landed in a deadlock situation.

404 Error Page Illustration

Default 404 Error Page

Many visitors type wrong URL and end up landing to default error page from server. You can see the default 404 error page design below in screenshot.

Default Error Page Design

How Bounce Rate Increases ?

The above page is a dead end page where there is no navigation or any message to redirect to different link. In such a situation, visitor will either use Back button on browser or will type another URL in address bar. As mentioned above, default error page is displayed when there is no 404 error page code in wordpress theme, and now you can assume how you lost a visitor. Hence it increases the bounce rate, as a visitor just landed on your website and went away.

Add 404.php in WordPress

As we are familiar with wordpress themes, and most of them has 404.php page. But if somehow your theme folder doesn’t have 404 error page then you don’t have to worry. Follow the simple steps below to add 404 error page in wordpress:
- Open any text editor, for instance Notepad.
- Add below code snippet in the file.
[php]

<?php get_header(); ?>

<div id="content">
<h2>Sorry…</h2>
<p>The page you are trying to reach is unavailable or does not exist.</p>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

[/php]
- Save the file as “404.php” and move it, into the theme folder.
Enhance 404 error page

Now, we have added custom design error page in wordpress blog. Since it is a PHP file, we have extended capabilities to innovate and enhance 404 error code. We can add google adsense code in 404 page, so that you get paid atleast when visitor leaves your site. You can play with the custom error code in 404.php file by adding images and eye catchy quotes.

In the end, I will just conclude that, every website should have custom 404 error page, so that visitor shouldn’t feel deprived. I hope this tutorial was easy, but if you have any query or any further assistance required then you post comment as your feedback.
March 29, 2011
How to add scrolling text in header to increase blog hits ?
Moving Objects and animating text looks fascinating on a website and it increases number of hits on website. You must of seen websites with moving text in header, which contains latest news, or product offers, or some alert etc. In my recent project, a client just demanded to add text scrolling in header, just like you can see in the screenshot below:

Screenshot showing Text Scrolling

Few days back I wrote about How to add alert bar to grab reader attention in Thesis Theme which grabs visitor attention and increase clicks on blog. In this article we will learn to scrolling text in header, which I believe is another way to increase hit on website.

How to add Scrolling Text in Blog ?

We are using a simple and smart concept here and the analogy behind is by registering scroll text widget in wordpress and further displaying it by function call in the header. You can follow the procedure below to add scrolling text in wordpress:
- Login to Dashboard Admin of WordPress blog.
- Navigate to Appearance > Editor and select functions.php of your WordPress Blog Theme.
- Now scroll to the end of the file and add the following code in it.
Make sure you take full backup of functions.php file using FTP before modifying it.

[php]

//Author: Aky Joe
//Email: akyjoe@thecreatology.com

function joe_scroll_text() { ?>
<div class="text-flash">
<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" >
<?php if (!function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘ScrollText’) ) { ?>

<?php } ?>
</marquee>
</div>
<?php }
register_sidebar(array(‘name’=>’ScrollText’, ‘before_title’=>”, ‘after_title’=>”));

[/php]
- Once done adding the code in file, click on the update button to save the file. Since we added the function now, now in order to display the scrolling text, we will have to make a function call.
- Navigate to Appearance > Editor and select header.php and add the below code snippet where you want to display scrolling text.
Make sure you take full backup of header.php file using FTP before modifying it.

[php]

<?php
//Function call to display Scroll Text
joe_scroll_text();
?>

[/php]
- After adding the above code, you see text scrolling in header by, it looks broken. We will have to add stylesheet code.
- Navigate to Appearance > Editor, select style.css file and copy paste the below code snippet.
[css]

.text-flash {
width:188px;
height:32px;
background:#fff;
float:right;
margin:30px 20px 20px;
font-size: 15px;
color:#bc2b21;
padding: 2px 5px;
line-height: 30px;
border: 1px solid #eee;
font-family: Arial;
list-style: none outside none;
}

[/css]
- Above code will style scrolling text for background color and text color. As installation is done, now we have to display some text and see how it goes live on the website.
- Navigate to Appearance > Widgets and you will see ScrollText slot in right pane.
- Now drag a “Text Widget” to the newly created slot ScrollText. Add some text in widget and save it (Make sure you don’t add the title).
- Once done, refresh the website and see the effect. It will look similar to the screenshot below:
Demo: Scrolling Text in Header

The scrolling text uses an old school html code “marquee” which scrolls from left to right and vice-versa. Using this tutorial, you will be able move dynamic texts of blog like latest post, news and offers with ease. If you are you using scroll text for your blog then you can share with us here by leaving a comment below.
March 15, 2011
How to reduce page load time of blog using Thesis WordPress Theme ?
Wesite Load Time is Annoying

Is your blog using Thesis Theme, takes a lot of time while loading a page or homepage ? If you are not sure, then you can check page load time for your website page using Pingdom Tools. These tools helps you in analyzing resources that are causing page loading. Usually Images and JavaScript are the major factor behind page load time on Website or on Blog.

How to Optimize Image ?

Pingdom Tools test will help you create a list of Images which are causing page load time and then you can use Smush It tool by Yahoo! to optimize images on website.

How to Optimize JavaScript ?

There are many JavaScript compression tools available online, which reduces the JavaScript code size. One of the tools, which I prefer is JavaScript Compressor. This tool till help you reduce the size of your JavaScript code, by truncating spaces and other used lines. But in case JavaScript is causing the delay in page loading, then it is a major concern as JavaScript is declared in the Head Section which loads before the body, hence causing delay. But if you are using Thesis WordPress Theme then you don’t have to worry about it. In this article, we will learn about how you can reduce load time using Thesis Theme.

Before we proceed with the tutorial, I want to make sure that you are using latest version of thesis, if not then you can refer to article and Safely upgrade to latest version Thesis 1.8

Thesis Theme has an advanced control panel featuring a lot of options to optimize SEO, typography and layout design. I have already mentioned the Design Options in an article Ease with Thesis WordPress Theme Design options panel. We will use design options to embed code in footer which will reduce page load time.

How to add Script using Thesis Options ?

I have seen many bloggers using JavaScript in head section, and even which is not mandatory. For instance, many people add stats-tracking code or other third party media codes in head section and causes delay in page loading.

Additional Scripts: Thesis Site Options

In order to overcome page loading issues, simply add the code after footer section. Here is a simple procedure to move scripts from head section to footer section (If there is no code in head section, then you can simply skip this procedure):
- Login to WordPress Admin panel and navigate to Thesis > Site Options.
- Click on the Additional Scripts to expand.
- Copy the unnecessary JavaScript code on Clip Board or on a Notepad for safer side.
- Click Big Green Save Button.
- Now, navigate to Thesis > Design Options and expand JavaScripts.
- Paste the code in the text area, you can refer to the screenshot below.
JavaScripts: Thesis Design Options
- Now click Big Green Save Button and you are done.
Refresh the site, and test it out using the Pingdom Tools again. Let us know your page load time after using this tutorial, by posting a comment below.

Page load time should not be more than 10-15 seconds, as accordingly to Google terms, your website can be black listed. But you can surely optimize website using thesis, and I hope this tutorial get productive for you. If you have any query or further assistance is required, you can simply post a comment below as your feedback.
March 9, 2011
Tutorial to Password Protect Website directory using htaccess
As web technology is growing and making advancements, vulnerabilities are also increasing with the same rate. Website security is a major concern today and planning effective strategy is the resolution. If your website has confidential content or premium content, which needs to be limited within a scope of few users, then you can simply password protect premium content on website. All visits made to that content will be prompted to enter username and password to gain access to premium content, just like in the screenshot below.

Login Screen: Access to Protected Area on website

And if a failure to login happens, visitor is redirected to 401 error page, just like the below screenshot.

401 Error Page: Failed to Access Protected Area

How to Password Protect Website ?

If your website is hosted on Apache web server, then website or website directory can be password protected using the htaccess method. In previous article I explained about protecting website by disabling directory browsing, if you missed it, then you can read it here: Disable directory browsing to protect website using htaccess method.

HTACCESS file sets security attributes to the web directory which you want to protect. In order to set password on website, HTPASSWD file will created which will store all usernames and followed with the passwords. For instance, if username is aky and password is joe, then it will be written as “aky : joe”.

How to create HTPASSWD file ?

HTPASSWD is the file which contains usernames as well the passwords for the HTACCESS file to validate during authentication.
- Using any ftp client, login to the web directory of your website.
- Create a simple text file using any text editor and add the below code snippet precisely.
[php]

aky : joe
username2:password2
username3:password3

[/php]
- The above code contains username and passwords. Any word before colon (:) is username, while word after colon (:) is password.
- Once done, save the file as “.htpasswd” and upload it to the root of the directory.
How to create HTACCESS file ?

HTACCESS file sets security attributes on a web directory for user accessibility. HTACCESS file can be created using any text editor like a notepad and should be save as… “.htaccess” (without quotes). To create htaccess file to password protect website directory, follow basic steps below:

Make sure before modifying file for any changes, I recommend you to backup all the website data.
- Using any ftp client, login to the website directory, you will find .htaccess file located in the root of your directory.
- Open .htaccess file to edit it using a text editor and add below code snippet precisely.
[php]

AuthUserFile /path/to/file/.htpasswd
AuthName "Premium Content Area"
AuthType Basic
require valid-user

[/php]
- On line 1 in the above code, specify the location of the HTPASSWD file, which we created in the section above. Once done, save the file as “.htaccess” and upload it to the web directory which is to be password protected. For instance, if the web directory is “www.yourwebsite.com/secure/” then browse into this directory using ftp client and place the HTACCESS file in secure web directory.
Now open the webpage or website, for instance “www.yourwebsite.com/secure”, will prompt you to login to gain access to protected area, else it is redirected to 401 Authorization Required Exception Page. Now that your content is password protected, and is safe from the vulnerabilities and hackers. Make sure you don’t share your password with anyone.

Here we come to end of this tutorial, if you have any queries for require any further assistance, post comment as your feedback.
March 3, 2011
Disable directory browsing to protect website using htaccess method
If your website is hosted on a Apache Web Server, then you should know that directory browsing feature is enabled by default. When a default file or index.html file is not present, server list downs all directory contents. In order to protect website from hackers or other unwanted vulnerabilities, one should disable directory listing on the Apache server.

Disable Directory browsing

How to disable directory browsing ?

Directory browsing can be disabled by two ways, one is by editing the .htaccess file and add security to website which is located in root of the directory. Other method is by editing the httpd.conf file, which is the apache server file.

In my previous article How to improve website performance by Image Caching using htaccess, I explained about improving website performance and this article will cover a tip about website security.

Make sure before modifying file for any changes, I recommend you to backup all the website data.
- Using any ftp client, login to the website directory, you will find .htaccess file located in the root of your directory.
- Open .htaccess file to edit it using a text editor.
- Find “Options-Indexes” in the text editor, you can use Ctrl+F to search for exact match. In case no “Options-Indexes” line exists, add “Options-Indexes” without quotes in the new line of htaccess file.
- Once done, save the file and upload to root directory of website.
Once htaccess file is uploaded, refresh the website / url, which is listing directory content. I hope this tutorial will secure your website. If you have any queries or any further assistance is required, you can post comment below, as your feedback.
February 27, 2011
How to improve website performance by Image Caching using htaccess
A website or a blog, usually are designed using images which looks creative but increases page load time. Sometimes it gets annoying for daily visitors and it leaves a bad impression for the website. With the advancements in technology and WWW, now web browsers have image cache feature, which has resolved many problems for websites like page load problem for photo blogs.

The analogy behind browser cache states that when a page is loaded, all the images are saved in a cache pool of browser itself. And when a visitor visits the site again, finds no delay while opening a page, as the images are pulled locally from the browser. Hence, enabling image cache for a website, decrease page load time. In the this article, you will learn how to enable image cache for website using htaccess method.

How htaccess file improve website performance?

Improve performance by enabling Image Cache

htaccess is a file to add security attributes to root directory or to any other specified directory. Every browser reads .htaccess file, and further reads header information of the website. On the complementary, browser check for attributes whether to save image in cache pool or any media which also specify the expiration time and a cookies are created accordingly. For instance, if cookies are created for an image which specify it to expire in 2 weeks, and after two weeks, browser will clear image from the cache pool, and browser will have to reload image again. Hence, this states image caching also save website bandwidth.

How to enable image cache ?

Below is the tutorial, to enable image cache for wordpress blog or website.

Make sure before modifying file for any changes, I recommend you to backup all the website data.
- Using any ftp client, login to the website directory, you will find .htaccess file located in the root of your directory.
- Open the .htaccess file using text editor. In case there is no htaccess file, create a new text file and save is as “.htaccess” (Make sure you don’t miss the “. (DOT) access”).
- Further add the below code snippet in the text file.
Code:

[css]
# Image and Flash content Caching for One Month
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
[/css]

Be very precise with the code you copy and paste in the file, else your website may not be accessible.
- After pasting the code in htaccess file, review it and save it. Once done, it will turn on the image caching for one month, as the ‘max-age’ parameter value equals 2592000 seconds. If you want that image caching never expires, edit “max-age=29030400”, as 29030400 seconds = 1 year.
As we come to the end of this simple, yet beneficial tutorial to improve website using htaccess method . Do let us know what methods did you apply to improve website performance ?

If you have any queries or any further assistance is required, you can post comment below, as your feedback.
February 27, 2011
Design glass button image sprite for website in Photoshop

Are you looking for glossy button design for website, similar to the image below ? Then you can design glass button by yourself in simple steps using photoshop.

Glass button image sprite for website

In this article, I will use Adobe Photoshop to create glass button sprite. Image sprites are purposely used by CSS developer to design mouse over image, function smoothly and efficiently. Here is the tutorial to design glass button image sprite for website in photoshop.

Step 1: Create Simple Button Base

To start from scratch, Open Photoshop and create new image canvas with approximate pixels for width and height. If you want create transparent website button then choose Transparent in Background Contents, or you can stick with White background as well. (Refer to the screenshot below)

Step1-1 Create New Image Canvas

Create a new layer and name it as button. On the button layer, select Rounded rectangle Tool and give it a desired radius, for instance I give it 20px in this example. Now left click and draw out a rectangle on the canvas. (Refer to the screenshot below)

Step1-2: Draw Rounded Rectangle base

Now that we have created base for the button, so we now proceed to our next step 2 to add glossy effect.

Step 2: Apply Glass Effect to Button

In order to add glass effect, create another layer and name it as a glass. Select the marquee tool and draw a selection over the lower half of the button. (Refer to the screenshot below)

Step2-1 Select Marquee Tool

Now select the Fill Bucket Tool and with white color #ffffff and opacity level adjusted to 18%, fill the selected area. And it should look something like this.

Step2-2: Fill lower half of the rectangle

Now right click on the button layer, open Blending Options and adjust the settings for the following:

Inner Shadow

Step2-3 Inner Shadow Adjustment

Bevel and Emboss

Step2-4 Bevel and Emboss Adjustment

Satin

Step2-5 Satin Adjustment

Gradient Overlay

Step2-6 Gradient Overlay Adjustment

After adjusting the blending options, the button should look like this.

Step2-7 Button with Glossy effect

Step 3: Button Text and Finalize

As in Step 2, we have created the glass button, now we have to add Text and finalize it. To insert text to the button, use the Horizontal Type Tool and add text to the button.

Step3 Adding text to the Button

After adding the text, and nudging a bit we will get the final image. In order to create another button, simply repeat step 1 and then adjust different colors in step 2 to create multiple buttons, just like below.

Multiple Glass button Designs

Here I come to the end of this tutorial, I’m sure that these glass web buttons will add elegance on your website. If you have any query or further assistance is required, post comment as your feedback.

February 18, 2011
Create transparent background post box for a website
Are you looking for a Transparent content box for website ? It can be very useful in case you have a creative background for website, and it is overlapped by the content box or post box of website. Have a look at the image, which will clear you a bit more.

Non-Transparent background post box

And if you have spent lot of bucks for the attractive background image, then it is just a waste of money. But there is a resolution for it, and by applying transparency to background, it will give website a fresh look.

In this article I will guide you how to restyle post box with transparency, and hence it will create transparent background post box for a website. Just like in a screenshot below:

Transparent background post box

Below is a three step procedure to give transparency effect on website.

Step 1: Pick background Color Code of Post Box

The initial step of the tutorial is to pick the background color code of the post box. If you already know the background color code post box, then you can skip to Step 2. If you don’t know the background color code, find it using:
- Firefox ColorZilla Addon
- Firefox Firebug Addon
- Print Screen key, and pasting it on any image editor and picking the color code from there. Refer to the screenshot below, I’m using Adobe Photoshop’s Color Picker tool.
Step1 Create transparent background post box

Once you have the background color code, proceed to Step 2.

Step 2: Create Transparent Image Pixel

In this step we will create a new image file using adobe photoshop. To create new image, open Photoshop and navigate to File > New or you can also use Ctrl+N. Specify the width and height as 1 pixel, as we will use CSS, which I will explain you in Step 3. You can also refer to the screenshot below:

Step2-1 Create transparent background post box

After creating the new file, we will now fill the image pixel with color code we find in Step 1. Below screenshot will explain you to how to fill the pixel.

Step2-2 Create transparent background post box

Now, once we have the pixel filled, we will now apply transparency effect to it. For applying transparency effect, we will use the Blending options of the layer. Refer to the screenshot below:

Step2-3 Create transparent background post box

When you are satisfied with the preview, click Ok button to apply the blending options. As our image is ready to be used, we will have to export the image as PNG format, as it is the only type of format with supports transparency without loosing any pixel. In order to save image as PNG navigate to File > Save for Web… or you can also use Ctrl+Alt+Shift+S. It will open a new window with different options to export the image. Choose PNG-24 option from the drop down list as explained in the image below and save the file in your theme directory.

Step2-4 Create transparent background post box

Step 3: Add transparency to post box

This is final step of this tutorial, in other words we say final touch up for transparent website. In this step we will edit the CSS code for the post box which we want to apply the transparent effect. Locate the code for the post box in the CSS file and replace it with below code snippet.

Please Note: This is a syntax code, where you will have to replace “#your-post-box-div” and “transparent-image-path-location.png” with real values which will vary as per your scenario.

[css]

#your-post-box-div {

background: url("transparent-image-path-location.png") repeat;

}

[/css]

After editing the CSS file, upload the transparent image as well as the updated CSS onto your web server. Now refresh to the website to see the effect, as I have in below screenshot:

Demo Transparent background post box

What do you think after seeing the image above? It did made the site look different now, as the background on the website is visible. If you ain’t satisfied with the transparency effect then, you can repeat the Step 2 and Step 3 again until it meets the satisfaction level.

With this we come to the end of this tutorial, if you have any query or need further assistance you can simply post comments below as the feedback.
February 17, 2011