WordPress Tweaks & Tuts?

Subscribe to TheCreatology via RSS | Email

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

by Aky Joe

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.

alert grab people attention

Illustration – Alert

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.
Step-1-Add alert bar at top of Blog in Thesis Theme

Step-1-Select Custom Function php file for editing.

  • In custom_functions.php file editor, copy-paste the below code snippet very carefully.
Step-2-Add alert bar at top of Blog in Thesis Theme

Step-2-Add code snippet in custom functions file

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



// 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 } ?>
<?php }
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.


background:#333; /*Change Background Color of Alert-Bar*/
color:#fff; /* Change Text Color of Alert-Bar*/
margin: 0 auto 5px;
padding:5px 0;
border-bottom:3px solid #fff;
#joe-alertbar a{
color: #f60; /* Change Link Text Color of Alert-Bar*/
#joe-alertbar li.widget, #joe-alertbar li.widget p{
  • 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.
Step-3-Add alert bar at top of Blog in Thesis Theme

Step-3-Add Text Widget to alert box

  • 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.
Step-4-Add alert bar at top of Blog in Thesis Theme

Step-4-Add text in text widget to display on alert box

  • 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.
Add alert bar at top of Blog in Thesis Theme

Demo of alert box on website

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.

Similar Topics: , ,

TheCreatology Support

Got a Query? We're ready, Just Say it!

If you have a doubt or a feedback, then get-in-touch with TheCreatology Support Team now.

Start a Hangout or Email Us

Are you looking for...

  • Logo Design
  • Web Development
  • Thesis Skin Design
  • Graphic Designing
  • Virtual Assistance
Hire Us!


{ read them below or add one }

emai July 20, 2011 at 6:20 pm

the alert bar is affecting my footers column


Aky July 20, 2011 at 6:29 pm

Aah yes, actually WordPress Register Custom Sidebars in Ascending Order, and since its ‘A’lert bar…so probably its registered at the First. Well you will have to rearrange your Widgets again under the Appearances > Widgets. 😉


emai July 20, 2011 at 8:13 pm

how can i rearrange my widget,pls help me


Aky July 20, 2011 at 8:44 pm

As mentioned in the above comment, navigate to Appearances > Widgets and Simply Drag the widgets you want to add in the appropriate locations.

For further assistance, you can contact me using the Contact Form Below.


SEO Amsterdam - Remy Smit May 6, 2012 at 5:43 am

Hi Aky,

Love your tutorials… and design, my hat goes off to you.

Unfortunately I can’t seem to get this working. My text shows up in the header but the css (colors) won’t show up. I’ve tried removing the code and re-adding it through the custom file manager and my hostgator filemanager. All to no avail. Any idea what I’m doing wrong?

Take care,



Aky Joe May 6, 2012 at 9:29 am

Hey Remy,

I appreciate your comment for the praise and for the Alert Bar Code, but there seem to be some bug in the CSS. Try using the below code:

#joe-alertbar{background:#333;color:#fff;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: #ff0000;}
#joe-alertbar li.widget, #joe-alertbar li.widget p{margin:0; font-size:14px; list-style:none;}

I have removed the comments in the above CSS, which must be fading the overall CSS Code. This should work now. 😉


SEO Amsterdam - Remy Smit May 6, 2012 at 1:03 pm

Hi Aky,

Thanks for the help! Got it to work.

Time for me to get back to my programming classes so I get the hang of coding 🙂


Leave a Comment

Previous post:

Next post:

Contact Aky

Yes, I agree that all information above is valid.

Simple question, what's...