How to add alert bar to grab reader attention in Thesis Theme

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:

// 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'=>''));

• 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:

#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;
}

• 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.