TheCreatology.com

Tag: WordPress

Style Previous Next Links in WordPress to decrease bounce rate

Everyone is digging deep for blogs tips and WordPress tutorials, on internet, to improve blog performance and efficiency. Most of the Search engine traffic, lands on Single Post of blog and mostly a visitor escapes, if it couldn’t find anything relevance after reading the article. This is annoying for a blogger as it increases Bounce Rate of blog.

Bounce Rate

In my previous article I explained about how 404 error page helps to decrease bounce rate. But, as mentioned above, that the search engine traffic redirects visitors on single page entries of the blog, hence by styling single post entry will lower bounce rate of blog. In the article we will learn to style Previous Next Links in Thesis Theme. Previous-Next Links adds single post entry pages a navigation so that flow of reading is not affected.

Previous Next Post Links

Previous Next Links in Thesis Theme

In thesis theme design options allows to enable and disable previous next on single entry pages. Since in this article we are manually customizing previous next links so we will be using Thesis Hook to configure it. But before we proceed further I recommend you to safely upgrade thesis theme.

Below is a simple procedure to add and style previous next post in WordPress.

Add Previous Next Links in WordPress

In order to add custom previous next links in single entry pages, edit custom_functions.php file and copy-paste the below code snippet.

Make sure you take full backup of custom_functions.php file using FTP before modifying it.

[php]
//Author: AkyJoe
// Custom Previous Next Links
function show_previous_next_links() {
if (is_single()) { ?>
<div id="prev-next">
<div class="previous-post"><?php previous_post_link(‘%link’, ‘Previous Post’, TRUE); ?></div>
<div class="next-post"><?php next_post_link(‘%link’, ‘Next Post’, TRUE); ?></div>
<div style="clear:both;"></div>
</div>
<?php } }
add_action(‘thesis_hook_after_post’, ‘show_previous_next_links’);
[/php]

Style Previous Next Links on Single Post

Now as we have added the previous next links using the Thesis Hook in single entry page, but in order to make it eye catchy and prominent, we will have to style it by adding the below CSS code snippet in custom.css file.

[css]
/*Previous Next Post*/
#prev-next{font-size:40px; font-family:Arial;border-top: 2px dotted #EEE;}
#prev-next a{color:#5d9800; display:block;}
#prev-next a:hover{ text-decoration:underline;}
.previous-post{background:url(‘images/previous-post-arrow.png’) no-repeat left center; float:left; padding:30px 0 30px 70px;}
.next-post{background:url(‘images/next-post-arrow.png’) no-repeat right center;float:right; padding:30px 70px 30px 0;}
[/css]

Add Image to Previous Next Links

To make the navigation look more prominent, we can add the below images. Download the images and save upload them under the Thesis Theme custom/images folder.

We Are Done!

After adding the code and the images, we are done with the styling of next previous links. Once done, refresh any single entry post and you will find it similar to screenshot below.

Final Output: Previous Next Links

Here we come to the end of this tutorial, where we learned to Style Previous Next Links in WordPress. If you have any query or any assistance is required, feel free to post comment as your feedback.

April 17, 2011
How to add twitter feed in WordPress Blog using Jetpack plugin
If are you on twitter, then you can display latest tweets on WordPress Blog. By adding twitter feed in Website, visitors can keep track of your latest tweets and one-click to follow you on twitter.

Twitter Stream Illustration

A latest plugin by automatic JetPack features to add twitter stream in sidebar with ease. In the article we will learn how to add twitter feed in WordPress using Jetpack plugin. Below is a simple stepwise procedure:

Step 1: Install Jetpack plugin

I have already mentioned in the article how to install jetpack plugin on wordpress. Once the jetpack is installed proceed to Step 2.

Step 2: Configure Twitter Widget

When Jetpack plugin is installed and configured, by default it activates Twitter Widget which can be configured by Navigating to Appearance > Widgets, as you can see in the screenshot below.

Twitter Widget Jetpack dashboard

Step 3: Show Tweets on Blog

In order to display latest tweets on sidebar, follow the procedure below to add twitter widget:
- Navigate to Appearance > Widgets.
- Find Twitter (Jetpack) widget in the list and Drag it to sidebar.
Twitter Jetpack Widget
- Now configure twitter jetpack settings for title, twitter name, number of tweets to show etc. Refer to screenshot below:
Twitter Widget Settings
- Once done with the settings, click on Save button.
We are Done!

As we are done with installation and configuration, now its time to see things live in action. Refresh the website and you will find twitter stream in sidebar similar to the screenshot below.

Twitter Stream Live on Sidebar

Here we come to the end of this tutorial, where we learned to add twitter feed in WordPress blog. If you have any query or any assistance is required, feel free to post comment as your feedback.
April 2, 2011
How to add Tell a Friend button without plugin on WordPress Blog ?

We often find stories and interesting articles online which are worth sharing with friends. Mostly people never miss sharing product reviews, special discounts and offers on website. Tell a friend button is used to share article with your friends by personal email. Tell a friend button is also known has Email This button, which is similar to share button like tweetmeme button, facebook like or linkedin.

Sharing something with Friend

There are many plugins made to add Email button on WordPress, but depending upon third party plugins for simple code is just waste of resources and increasing server load by php calls. In this article, we will learn how to add tell a friend button without plugin in WordPress blog.

Tell a Friend Button Code

The analogy behind is that on click of the button, it will open a default email software and will add subject, link of the article and will prompt to enter friend’s email address. Below is the Email button code for WordPress, and you add the code in single.php file.

Make sure you take full backup of single.php file using FTP before modifying it.

[php]

<a class="email-share" href="mailto:?subject=Check this out&BODY=I found this article interesting and thought of sharing it with you. Check it out: <?php the_permalink(); ?>" target="_blank"></a>

[/php]

Once done editing the php file, now apply some CSS on it. Copy-Paste the below code snippet in style.css file.

[css]

.email-share{
background:url(‘images/email.png’) no-repeat;
width:97px;
height:23px;
display:block;
margin:10px 20px 10px 0;
}

[/css]

Download the the following image, by right clicking and Save Image as.. “email.png”

Place the downloaded image in the Theme Directory as {theme folder}/images/email.png

We are done!

After adding all code snippets, refresh the website and open any blog post, and you can see the email button demo below:

Email button Demo:

On click of above button, it will send the link of this blog that is cms.thecreatology.com/ to the email address you enter.

If you have any query or require further assistance, you can post comment as your feedback.

March 31, 2011
How to redirect 404 error page to Homepage in WordPress ?
In my previous article I explained about significance of 404 error page in website development. If you missed it, then you can read it here Create 404 Error page to decrease bounce rate on WordPress.

Road block 404 Error, redirect to Home

The WordPress 404 error page is usually custom coded, and hence it can be enhanced as per our requirements and needs. In this article we will learn how to redirect 404 error page to homepage in WordPress.

Redirect 404 error page

Below is a simple procedure to add redirection on 404 error page to homepage of blog.
- Navigate to Theme Directory and locate 404.php file.
- If found, open it in any text editor. If you couldn’t find one, then just read how to create 404.php file in wordpress.
- Copy the below code snippet, and replace it completely with existing code.
[php]
<!–?php $URL= get_bloginfo(‘url’); header("Location: $URL"); ?–>
[/php]
- Done adding the code ? Now, save the file and upload it to server.
We are done!

Adding the above code, will redirect any visitor to Blog’s homepage, if encountered any error or broken links. In a way it can be modified to set custom link as well. only thing is you need to edit line number 3 and add the custom like after “Location: http://www.thecreatology.com”.

If you think its complex then you can hire me for this virtual assistance.
March 30, 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
Interesting Fact about SiteStats JetPack Plugin WordPress

Almost every WordPress user is familiar with the JetPack Plugin by Automatic. JetPack WordPress plugin has been really innovative and has made things much easy for the bloggers.

Install JetPack Plugin

If you haven’t installed JetPack plugin up till now, then you are really missing the show. You can refer to my article on how to install jetpack plugin on WordPress blog and experience the power of WordPress jetpack plugin. On analyzing WordPress site stats, I found an interesting fact about Site Stats JetPack plugin, so I am sharing it with you.

As we know about WordPress Site Stats plugin error and the problem was resolved by the JetPack plugin. New Site Stats plugin, has two types of representation for Site Stats. One is Bar Graph type and the other is Humanize Type. Bar Graph is a graphical representation of the site visits. Bar graph type can be tricky for users, who don’t even know what bar graph is. Respecting the fact, WordPress developed the Humanize type, as it explains the site stats value in a very humanly manner. Below is a screenshot of a WordPress site showing stats in Humanize Type. (Click to Zoom)

Humanize Type Site Stats Presentation

As you can see in above picture, how it says that “Today you have had 2 visits” and then how it explains the fact about number two (2) it says

Two and three are the only two consecutive prime numbers. 2 is the first Sophie Germain prime, the first factorial prime, the first Lucas prime, …

And WordPress jetpack plugin explains the facts for every number, like for number zero (0) it says

The number 0 is the smallest non-negative integer. The natural number following 0 is 1 and no natural number precedes 0.”

It though looks easy, but the concept behind is very innovative and thoughtful. I really appreciate WordPress Team behind the JetPack Humanize concept.

Did you think over it ? Let us know, if you came across any more interesting facts about WordPress, and share with us. Don’t forget to share your views about this concept, by posting a comment below. I will be waiting. 🙂

March 26, 2011
How to increase upload media file size limit in WordPress
Are you unable to upload media file in wordpress ? Well, you don’t have to worry about this common limitation set by wordpress. Usually, upload file size error occur when we try to upload a heavy file like a video, or a PDF file, or any other media, exceeding the upload file limit. WordPress throws an exception saying “This file exceeds the maximum upload size for this site”, a similar can be seen in screenshot below.

Error Media file size exceeds limit

For different web hosting like hostgator or bluehost , WordPress sets different upload file size limit depending upon the PHP configuration on server. For instance, hostgator sets the default limit to 64MB. But there are many more web hosting, which set default limit to only 2MB. In this article we will learn to increase upload media file size limit in wordpress.

How to increase file upload limit in wordpress?
- Login to CPanel of your website hosting, for instance hostgator or bluehost etc…
- Navigate to /public_html/wp-admin using the file manager.
- In the wp-admin directory look for php.ini file and if found then right-click to edit php.ini file in text editor. But if not found, then create a new file and name it as “php.ini” and then open it in the code editor.
Edit Php.ini File
- When you click the edit button, as in the screenshot above, it will open the php.ini file in text editor. If you have just created new a file php.ini file, then simply copy-paste the below code and save it.
[php]

upload_max_filesize = 32M
post_max_size = 32M

[/php]
- But if you have edited the already existing php.ini file then, search for “upload_max_filesize” line and change the numeric value to 32M, or as desired, 64M, 128M etc…
- Click save button and close the file.
- Now login to WordPress Admin panel and navigate to Media > Add new media.
- Now you will notice the maximum upload file size has been increased to the value we just set in the php.ini file, just like in the screenshot below.
Upload Media Size Increased
- Now you can upload your media with file size up to 32MB, but if you want to increase the limit then you again edit php.ini file and change its desired value.
I hope this tutorial was not that complex as it seemed initially, but all’s well, that ends well. If you have any query or any further assistance required, then you can post comments as your feedback.
March 19, 2011
WP Stats not working on WordPress Blog says not authorized to view the stats

A recent update from the Automatic company which runs WordPress is innovating its cloud architecture day by day. Today, when I logged in my Dashboard, I found that my WordPress Stats not working, as it said “Your WordPress.com account, akyjoe is not authorized to view the stats of this blog.”

WP Stats error on Blog

I logged in my WordPress account to check my WordPress API key, but everything seemed to be fine. Then I looked up on web and found couple of announcements from the WordPress regarding WP Stats plugin issue. In this article we will learn to fix wp stats problem on wordpress blog.

How to fix WP Stats issue ?

Since WordPress Stats plugin has been updated with the launch of latest plugin by Automatic, is JetPack. So, in order to fix wp-stats plugin, refer to the article to install jetpack plugin for wordpress.

After you install jetpack plugin for wordpress, you will see the a message saying that “Jetpack contains the most recent version of the WordPress.com Stats plugin. The old version has been deactivated and can be removed from your site.” You can refer to the screenshot below.

JetPack Plugin Welcome Message!

Now once the plugin is installed you will notice that the old wordpress stats plugin will be deactivated and the stats will be replaced by the new wp stats by jetpack, as you can see the screenshot below.

New WpStats by JetPack

When I fixed this issue and I found that the latest version of stats is more precise and it gives more detailed reports about the site visits and hits. I hope this tutorial will fix problem of wp stats easily.

If you have any query or need any further assistance, you send us feedback by posting a comment below.

March 17, 2011
Add Facebook Like Button to Increase traffic on blog

Social market is growing with web major dominants Twitter and Facebook. With increasing traffic on websites around the globe everyday, millions of people are reading and sharing articles on these social markets. Like the tweetmeme button on twitter, Facebook has “Fshare” and “Like” button.

Facebook Like button

Most of the blogs are using “like” and “recommend” button, which helps in increasing blog traffic and social media promotion. In this article, we will learn that by adding facebook like button can increase blog traffic and how to add like button on wordpress blog.

How Facebook Like Button Increase Blog Traffic ?

Facebook is the most visited website in the online world where people with age 8-80 exists. Each user has news feed and has ability to see updates of their connections and vice-versa. Now for instance, a user Gaurav with 500 friends, when clicks a “like” button on a blog, its News Feed gets updated. When news feed is updated for a user, it automatically update it for each of the 500 friends News Feed. You can also see a screenshot below of a user Gaurav liking a post.

News feed preview of User liked the post

This cycle continues to function when any friend of 500 connections again clicks the “like” button on its wall. And then it gets updated on its news feed and it goes on. Have you ever heard of free automatic social promotion of blog ? Well, adding like button on blog, is what is the answer to this question. Learn how to integrate like button on wordpress below.

How to add Facebook Button on WordPress Blog ?

I hope now you know the advantages of facebook “like” button and how useful is for your blog. Adding “like” button on post, will require to edit single.php like we did in our article to add Official Twitter Button Count on WordPress Blog. Paste the code snippet below and add it in single.php located in Theme Template Directory.

Make sure you backup file before you paste the code below.

[php]
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID));?&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px;"></iframe>
[/php]

After adding the code in single.php, upload file on server, and you will be done. In order to adhere functionality for facebook like button, configure it using the following parameters:

show_face=true (true/false):- Enable friend icons below like button.

layout=button_count (standard/box_count/button_count):- Choose the layout suits best for your scenario.

Different Facebook button layout

colorscheme=light (light/dark):- You can choose the color scheme as per your blog theme.

action=like (like/recommend):- You can select between “like” and “recommend” button, though functionality is the same.

The above code uses iframe tag, which can be customized further by css styling for width and height.

With this we come to the end of this tutorial, and we have added Facebook Like button on wordpress blog. If you have any queries or need any assistance, post comment as your feedback.

March 7, 2011
How to add Official Twitter Button Count on WordPress Blog ?

Twitter announced an official share button, which works same as a Tweetmeme button, but it is developed by twitter. You can see the screenshot below with different types of twitter button shapes to fit best for your layout. As mentioned above twitter button is similar to Tweetmeme button which I explained in Tutorial to add Twitter Share Retweet Button on WordPress Blog.

New Twitter Share

The new twitter button features to have better customization and in addition to it includes account recommendation. For instance if you have two different twitter handles, you can customize new twitter button in a way, a vistor can share post using one handle, and recommend with the another handle.

In this tutorial, we will learn to add new twitter button on wordpress blog.

Step 1: Configure twitter button

Go to Twitter Button Page and configure the twitter button for size, url and twitter handle. (Refer to the screenshot below)

Customize Twitter button

Step 2: Get Twitter Button Code

Once you are done with the configuration of twitter button, scroll down and get twitter button code for your blog integration. (Refer to screenshot below)

Twitter Button Code

You can also copy the code below directly into theme file, and make sure you change the twitter handles. Here is the code below:

[php]
<a href="http://twitter.com/share" data-url="<?php the_permalink(); ?>" data-count="vertical" data-via="thecreatology" data-related="Aky Joe:He is Cool!">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
[/php]

Make sure you take backup before editing the code.

Now that you have the twitter button code, add twitter code in single.php or custom_fucntions.php in case of Thesis Theme. Use any FTP client and upload file on server. Refresh website to see the effect.

With this we are done adding new twitter button on blog, and come to the end of the tutorial. A lot of people have already switched with new twitter button, I hope this tutorial will be easy for you. If you have any query or need assistance post comment, as your feedback, I will get back to you asap!

March 6, 2011