Author: Aky

It is a normal Human tendency, that we read a blog from top to bottom as with our interest, which means anything placed at top of the website will grab reader attention. For publishers it is very important to grab reader’s attention at the top of the website, by placing an advertisement or add alertbox at top.

Thesis WordPress Theme is enriched with content management capabilities, and a best SEO theme. Thesis doesn’t come with top headline bar or ads slot but allows to add them for your 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.

In this article, we will learn to add alert bar at top of blog to grab reader attention in thesis theme.

How to grab reader attention ?

We will add a solid color headline alert bar at the top, where you can write anything and making it eye catchy by playing with colors. If a line or phrase is interesting like “20% off on WordPress Hosting + Free Blog Setup ”, will increase CTR or will increase clicks on blog.

How to add alert bar in thesis ?

We are using a simple and smart concept here and the analogy behind is by registering alert bar widget in wordpress and adding it before header. You can follow the procedure below to add alert bar in thesis theme:

• Login to Dashboard Admin of WordPress blog.
• Navigate to Thesis > Custom File Editor and select custom_functions.php in drop-down list and click edit selected file.

• In custom_functions.php file editor, copy-paste the below code snippet very carefully.

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

Code:

[php]
// Adds Alert bar
function joe_alert_bar() { ?>
<div id="joe-alertbar">
<?php if(! function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘jOe-AlertBox’)) { ?>
<p>Looking for Thesis Theme Tutorials ? Click <a href="http://www.thecreatology.com/blog" target="_blank" title="Thesis Tutorials">Here</a>Now!</p>
<?php } ?>
</div>
<?php }
add_action(‘thesis_hook_before_html’,’joe_alert_bar’);
register_sidebar(array(‘name’=>’jOe-AlertBox’, ‘before_title’=>”, ‘after_title’=>”));

[/php]

• Now that we can added the alert bar, but you will find it broken or beyond the layout. To fix, we will have to style alert bar using 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.

Code:

[css]

#joe-alertbar{
background:#333; /*Change Background Color of Alert-Bar*/
color:#fff; /* Change Text Color of Alert-Bar*/
margin: 0 auto 5px;
text-align:center;
padding:5px 0;
font-size:14px;
border-bottom:3px solid #fff;
}
#joe-alertbar a{
font-size:14px;
color: #f60; /* Change Link Text Color of Alert-Bar*/
}
#joe-alertbar li.widget, #joe-alertbar li.widget p{
margin:0;
font-size:14px;
}
[/css]

• Above code will style alert bar for background color and text color. I have commented few lines in above code snippet, where you can change color of alert bar and font color matching your theme.
• Once we are done with installation of Alert bar, we move ahead to display some text and see how it goes live on our website. Since we have registered a sidebar named as jOe-AlertBox, so navigate to Appearance > Widgets.
• Now drag a “Text Widget” to the newly created “jOe-AlertBox” just like in the below screenshot.

• In the text widget, add any html code or a text which is to be displayed on the alert bar. (Refer to the screenshot below) Make sure to restrict the text in single line and word limit should not exceed 30-35, else it will look congested.

• Once done with the text, click on the save button below text area and now refresh the website, it will look something like this below.

Alert bar has many possibilities to grab people’s attention. You can use alert to announce new products or discount coupons, featured post or may be a favorite quote of Sir Albert Einstein. Let us know how you used the alert bar at top by posting a comment below.

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

A Thumbnail on a blog page makes it alive and increase more visits on articles.

Some premium themes features to add thumbnail using the custom field, like in Thesis WordPress theme you can customize a thumbnail and add it on blog page. But, custom field option can be complicated and time consuming process from bloggers.

At present, most of the blogs are using plugins like thumbnail-for-excerpts to show thumbnail on front page, which saves time & complexity. But the only issue I find using plugins is that it increases more of php calls, hence increasing server load and slow page loading. This post will guide to auto generate thumbnail in Thesis Theme without using any Plugin or custom fields.

This article is only for blogs using Thesis WordPress theme, and if you are interested in thesis theme you can Download Thesis Theme here.

The analogy behind the tutorial will integrate a function to get the first image from the post content, and further that image will be resized using the TimThumb open source script, to generate a thumbnail. Below is the procedure in detail to add thumbnails in Thesis Theme without Plugin:

Step 1: Get TimThumb.php open source script

TimThumb.php is an open source script and you can download it and place it in the custom folder of the Thesis theme directory. You can also open the script in the web browser and copy-paste the code in a text file and save is as TimThumb.php

Step 2: Add code in Custom_Functions.php

Once we have placed the TimThumb.php file, we now have to add code in custom_functions.php file located in custom folder. The code is divided in to two sets of functions. One will get the first image from the content, and will be initialized using init function to invoke default values. Other part contains code to show Thumbnail before post.

Code to get first image from the content:

[php]

//Get Image Function
function get_image_joe(){
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<img.+src=[\’"]([^\’"]+)[\’"].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img))
{     //Default Image Path
return $first_img= "/images/default.jpg";
}
else
{
return $first_img;
}
}
add_action(‘init’, ‘get_image_joe’);

[/php]

Code to show thumbnail before post:

[php]

//Auto Generate Thumbnail
function auto_thumb_joe(){?>
<?php if(!is_single() || !is_page()){?>
<div class="thumbnail">
<?php $values = get_post_custom_values("thesis_thumb");
if ($values) { ?>
<a href="<?php the_permalink() ?>" title="Click to read more on<?php the_title(); ?>"><img alt="<?php the_title(); ?>" src="<?php $values = get_post_custom_values("thesis_thumb"); echo $values[0]; ?>" /></a>
<?php }
else {?>
<a href="<?php the_permalink() ?>" title="Click to read more on<?php the_title(); ?>" ><img src="<?php bloginfo(‘template_directory’); ?>/custom/scripts/timthumb.php?src=<?php echo get_image_joe(); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" /></a>
<?php }?>
</div>
<?php }}
add_action(‘thesis_hook_before_teaser’,’auto_thumb_joe’);

[/php]

Place the above code in custom_functions.php file in Thesis folder make sure you do it precisely, else it might crash your access to WordPress Dashboard.

In above code you can specify width and height of the image as well according to your requirement, for instance I have specified 150 x 150 as a standard thumbnail size.

Step 3: Thumbnail CSS Styling

Everything needs a finishing touch, and here we do it by adding some styling to the thumbnail generated. Below is the code which will float thumbnail on left of the content excerpt. If you want the thumbnail to float on right, you can simply change the below code with float property. Here is the CSS code:

[css]

.thumbnail {
float:left;
background:#EEE;
border: 1px dashed #aaa;
margin: 3px 10px 0 20px;
padding: 5px;
}

[/css]

Place the code in the custom.css file located in custom folder of Thesis theme directory, and refresh to result something like this in the screenshot below:

With this we come to end of this tutorial, with no more pain uploading images or depending upon the plugins. If you have any query or require any further assistance, post your feedback as comments below.

If your WordPress blog is currently using a custom theme, then you can redesign it using the Thesis Theme Services.