TheCreatology.com

Tag: tutorials

How to add Facebook Send Button in Thesis Theme ?

You must be aware of latest development from Facebook, that is New Send Button. The Send button allows user to directly share favorite link with friend/s on Email. Recently I explained in the article to add Facebook Send button on WordPress Blog. In the following article we will learn to add Facebook Send Button in Thesis WordPress Theme.

Facebook Send Button for Thesis Theme

Add Send Button on Thesis

As we all know about Thesis Theme and its content management with SEO capabilities. Though it is a raw wordpress theme, allowing endless customization for wordpress blog. If you don’t have a copy of Thesis Theme then you can download thesis theme here. If you are using an old version of Thesis Theme then I recommend you to safely upgrade thesis theme.

Standalone Send Button in Single Post

As we all know that Thesis customization is done using thesis hooks which are the overriding functions. To show send button in single post, copy-paste the code snippet in the custom_functions.php.

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

[php]
function joe_adds_send_btn () {
if (is_single()) { ?>
<div style="float:right; margin:0 10px;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:send href="<?php echo get_permalink(); ?>" font=""></fb:send>
</div>
<?php
}}
add_action(‘thesis_hook_before_headline’,’joe_adds_send_btn’);
[/php]

Facebook Like with Send Button Code

As mentioned in article add Facebook Send button on WordPress Blog standalone placement for Facebook send button is not that effective. Below is the code to add like with send button in thesis, copy-paste the code snippet in the custom_functions.php.

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

[php]
function joe_adds_send_btn () {
if (is_single()) { ?>
<div style="float:right; margin:0 10px;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="<?php echo get_permalink(); ?>" send="true" layout="button_count" width="300" show_faces="true" font=""></fb:like></div>
<?php
}}
add_action(‘thesis_hook_before_headline’,’joe_adds_send_btn’);
[/php]

We’re Done

Once we have added the code, now you can refresh any single page entry and you will find it similar to screenshot below:

Facebook Send Button Demo on Single Post

You can now test the new facebook send button on your Thesis Theme, like playing with different hooks in Thesis Theme and let us know your opinion, which placement is effective for facebook send button, by posting a comment below.

May 7, 2011
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
Tutorial to add Facebook Send Button on WordPress Blog ?

In a recent update from Facebook which now allow publishers to add Send button on website or blog. Almost everyone on internet has a facebook account and too have a social circle around the globe. Using a new send button user can share information in their network. In a recent post I explained about the Tell a friend button for WordPress, and facebook send button is quite similar to it. In the article we will learn to add new Facebook Send Button on WordPress blog.

Facebook Send button for WordPress

How Facebook Send Button Works ?

The new facebook send button allows users to share your content with their friend using an email to any email address or inbox them on Facebook. A user can also mention the name of the Group and post the URL on the group wall.

Facebook Send Button Code

In WordPress blog, effective placement for send button is on single post, as usually a visitor will only share it after go through the post. Below is the send button code for WordPress to add facebook send button on single post and you can add the code in single.php file.

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

[php]
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:send href="<?php echo get_permalink(); ?>" font=""></fb:send>
[/php]

Is that it ?

No it is not. The above code snippet will just add Send button on your WordPress blog, but so far I believe this method will not be that effective, as Stand Alone Send button will be less prominent. But, if we combine and add a Facebook Like Button with Send Button and it will increase your Like Counter as well. Below is the code snippet to add facebook send and like button together, and you can add the code in single.php file.

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

[php]

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="<?php echo get_permalink(); ?>" send="true" layout="button_count" width="300" show_faces="true" font=""></fb:like>

[/php]

Now, the above code will add Like button followed by new send button. I hope facebook send button will be effective for visitors and sharing information around their networks will be flexible now. Let us know about this new development from facebook by posting a comment below.

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

May 2, 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
Add featured content slider to showcase Portfolio Work in Thesis Theme
In my recent work on advertising website design, client being a flyer designer had an amazing portfolio on automotive flyer design. In order to show portfolio work, client demanded for a presentation or a slide show of work on landing page. A featured content slider was added on the homepage using thesis theme. A screenshot below will clear you about the featured content slider.

Featured Slider on Client Site

Featured content slider uses JavaScript which takes your blog to next level along with SEO advantage. In this article, we will learn to add image slider in wordpress thesis theme. But before we proceed with this article I recommend you to safely upgrade thesis theme.

Step 1: Add Content Slider Plugin in WordPress

In order to add featured slider in wordpress we will have to install a plugin. Below is a simple procedure to add slider plugin:
- Login to Dashboard Admin of WordPress site.
- Navigate to Plugins > Add new Plugin.
- Type “Content Slide Plugin” in search box and click on the submit button.
- In the listed result, click Install Now link under WordPress Content Slide Plugin by Snilesh. (Refer to the screenshot below)
Step 1: Install Plugin
- Install the plugin by clicking on install link underneath it and further Activate it.
Step 2: Configure Content Slider Settings

On activating the plugin, a left pane menu item “Content Slide” is added. In order to customize content slider, we will have to configure its settings for width height and content. Below is a simple procedure to configure slider.
- Navigate to Dashboard > Content Slide.
- Content Slide options are divided into three sections General Settings, Effects & Animation Settings and Image Source Settings.
- General Settings for content slider can be configured by referring the screenshot below:
Step 2: General Settings
- Effect & Animation Settings can be configured by referring the screenshot below:
Step 2: Effect & Animation Settings
- Image Source Settings can be configured by referring the screenshot below:
Step 2: Image Source Settings
- Once you are done with the settings click the update button to save the configurations.
Step 3: Show Featured Slider in Thesis Theme

Now that we are done with the configuration of featured slider, we are left with to display slider on homepage template. Copy-paste the code snippet in the custom_functions.php, below:

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

[php]
//Author: AkyJoe
//Email: akyjoe@gmail.com
function content_slider() {
if (is_home())
{ ?>
<div id="slider"><?php if(function_exists(‘wp_content_slider’)) { wp_content_slider(); } ?>
</div>
<?php }
}
add_action(‘thesis_hook_before_content’, ‘content_slider’);
[/php]

We are Done!

Now, that we have added the code, you can refresh the website and see the slider in homepage. If you find the slider not adjusting the layout, you can repeat Step 2, above to change width, height and color settings for slider, till you are satisfied.

We come to the end of this tutorial to add featured content slider in thesis theme. If you have any query or further assistance is required, post comment below as your feedback.
March 22, 2011
Add Author Bio below single post in Thesis WordPress Theme
With the increasing number of people writing articles on web, blogs are working hard to present them in best way. Being a blogger, I always get excited when I see my name published on web, for instance, a short bio explaining about you after each article you publish. By Blogs presenting its Author, I mean that a self-respect, delights a blogger and make them more enthusiastic towards their blogging. This is can be done, by adding an image of the author add adding a short bio about author, like you can see in the screenshot below.

Author Bio on TheCreatology

In this article we will learn to add author bio in Thesis Theme. As we all know about the DIY thesis theme and its SEO optimization and design customizations. Thesis being a simple wordpress theme, is incomplete with few options like Author Bio, share buttons, etc. But since thesis theme does allows customization, so we will add author bio after post on wordpress blog. But before we proceed with this article I recommend you to safely upgrade thesis theme.

Author BIO after post in Thesis

As we are know that Thesis customization is done using thesis hooks which are overriding functions. To show author bio in single post, copy-paste the code snippet in the custom_functions.php.

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

[php]
//Author: AkyJoe
//Email: akyjoe@gmail.com

function add_author_bio() {
if (is_single())
{ ?>
<div class="postauthor">
<?php echo get_avatar( get_the_author_id() , 120 ); ?>
<h4>Article by <a href="<?php the_author_url(); ?>">
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
<p><?php the_author_firstname(); ?> has written <strong><?php the_author_posts(); ?></strong> articles for us. <br/><br/><?php the_author_description(); ?></p>
</div>
<?php }
}
add_action(‘thesis_hook_after_post_box’, ‘add_author_bio’);

[/php]
- Now that we have added the author bio code, next we will have to style author bio by CSS code.
- Navigate to Thesis > Custom File Editor, select custom.css file and copy paste the below code snippet very carefully in Custom.CSS file.
[css]

.postauthor {background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; }
.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }
.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; }

[/css]
- Above code will style author bio for single post and you can change color of box background and font color accordingly in the above code to match the theme.
- Now, that we have added the code, you can refresh the website and see the author bio after post detailed page.
I’m sure by adding author bio in single post, will increase blog rating and a check plus to boost your author’s enthusiasm. Do let us know the after effects of adding Author Bio in your blog, by a simple feedback.

If you have any query or further assistance is required, then you can post comment below.
March 20, 2011
How to add facebook like button on post page in Thesis Theme ?

I have already mentioned about facebook like button for wordpress and in this article we will learn to add like button in thesis theme.

Get Thesis Theme Now

As we all know about Thesis Theme and its content management as well SEO capabilities. Though it is a simple wordpress theme allowing endless customization for wordpress blog. If you don’t have a copy of Thesis Theme then you can download thesis theme here. If you are using an old version of Thesis Theme then I recommend you to safely upgrade thesis theme.

Add Facebook Like button in Single post

As we all know that Thesis customization is done using thesis hooks which are overriding functions. To show like button in single post, copy-paste the code snippet in the custom_functions.php.

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

[php]

function joe_adds_like_btn () {
if (is_single()) { ?>
<div style="float:right; margin:0 10px;">
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID));?>&layout=button_count&show_faces=false&width=90&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:90px; height:25px;"></iframe>
</div>
<?php
}}
add_action(‘thesis_hook_before_headline’,’joe_adds_like_btn’);

[/php]

Save the custom_functions.php file, once you are done adding the above code. Now upload the edited file on server using ftp client and when you will refresh website, you will find something like in screenshot below.

Facebook Like button on Single Post

As we have added facebook like button in thesis theme, we come to the end of this article. If you have any queries then you can post comment below as your feedback.

March 19, 2011