How to add blinking headline(hello bar) to top of thesis theme

Gowtham V
4 Min Read

Here is a post on how to add hello bar or alert bar to top of thesis skin without using plugins using headline thesis hack.

Why to add a hello bar?

Adding a  blinking headline or link of your famous posts at top of your blog can attract more views. As this  hello bar loads first in a website and is viewed by all your visitors you will get more views for your famous posts or can even promote your hosting promo codes and offers.

This hello bar can also be implemented by using The Hello Bar wordpress plugin.

Here is a screen shot of how it looks

Thesis-customization-shoutmeloud

Add blinking headline to top thesis theme :

#Open your custom functions.php file either by using a FTP software like filezilla through /public_html/wp-content/themes/thesis_18/custom/custom_functions.php

#You can also do through your wordpress dashboard by going to Thesis>>Custom File Editor tab and select your custom functions.php file to edit

Note:Download and backup your custom file before you add the code.You can replace the original one if you ever mess up with the codes.

#Then add the below thesis code to your custom_functions.php file at the first line

Note: Don’t leave a empty space or line at the top of the custom_function.php file as it would return an error

/* Begin thesis customization for adding headline or links to top */
<?php
function headline() {
?>
<ul id="headline">
<li><h2><a href="https://mytechshout.com/shoutmeloud-blogger-thesis-templates-theme-free-skins-download.html">Shoutmeloud Thesis Template Free!!!</a></h2></li>
</ul>
<?php
}
add_action('thesis_hook_before_html', 'headline');.
/* End thesis customization for adding headline or links to top */

#Just replace the post title and post url in the above code which is in blue color to your featured post or your own recommended links.

#To add more than to links before the header just use this code instead.

/* Begin thesis customization for adding hello bar to top */
<?php
function headline() {
?>
<ul id="headline">
<li><h2><a href="https://mytechshout.com/shoutmeloud-blogger-thesis-templates-theme-free-skins-download.html">Shoutmeloud Thesis Template Free!!!</a></h2></li>
<li><h2><a href="https://mytechshout.com/shoutmeloud-blogger-thesis-templates-theme-free-skins-download.html">Shoutmeloud Thesis Template Free!!!</a></h2></li>
</ul>
<?php
}
add_action('thesis_hook_before_html', 'headline');
/* End thesis customization for adding hello bar to top  */

#Replace the above blue links and Title as before

#Save your custom functions file

#You are done..

Headline Css Customization

1.Copy the below css code and paste it in your custom.css file of your thesis theme

#headline{background:#bb0000; color:#fff; margin:0 auto; border-bottom: 2px solid #FFF; height:30px; font-size:12px; box-shadow:0 2px 7px #000; position:fixed; z-index:1000; width:100%;}
#headline a{ text-decoration:blink; color:#ffff00; border-bottom:1px dashed;}
#headline p{line-height:30px; font-size:12px; text-align:center;}
#headline li.widget, #headline li.widget p{margin:0; line-height:30px; list-style:none; font-size:12px; text-align:center;}

2.Save your custom file

Now you can see an Fixed hello bar at the which moves along with the screen and always stays on top of the post like shoumeloud.

Customization of hello bar links using css which ll be shortly posted.

You have successfully added a  blinking link at the top of your thesis theme without using plugins.

Hope you enjoyed this Thesis Customization Tutorial.If you liked this post,Don’t forget to  tweet and share it.

Follow us at to receive more updates in this topic

Twitter –https://twitter.com/mytechshout

Facebook-https://www.facebook.com/MyTechShoutfans

Are you using a plugin to show a hello bar at the top of the page ?Do share your opinion with us in the comment section.

See you with more thesis customization tutorials 🙂

Share This Article
Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *