WordPress Tweaks & Tuts?

Subscribe to TheCreatology via RSS | Email

How to add scrolling text in header to increase blog hits ?

by Aky Joe

Moving Objects and animating text looks fascinating on a website and it increases number of hits on website. You must of seen websites with moving text in header, which contains latest news, or product offers, or some alert etc. In my recent project, a client just demanded to add text scrolling in header, just like you can see in the screenshot below:

horizontal text scrolling in header

Screenshot showing Text Scrolling

Few days back I wrote about How to add alert bar to grab reader attention in Thesis Theme which grabs visitor attention and increase clicks on blog. In this article we will learn to scrolling text in header, which I believe is another way to increase hit on website.

How to add Scrolling Text in Blog ?

We are using a simple and smart concept here and the analogy behind is by registering scroll text widget in wordpress and further displaying it  by function call in the header. You can follow the procedure below to add scrolling text in wordpress:

  • Login to Dashboard Admin of WordPress blog.
  • Navigate to Appearance > Editor and select functions.php of your WordPress Blog Theme.
  • Now scroll to the end of the file and add the following code in it.

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

//Author: Aky Joe
//Email: [email protected]

function joe_scroll_text() { ?>
 <div class="text-flash">
<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" >
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('ScrollText') ) { ?>

<?php } ?>
<?php }
register_sidebar(array('name'=>'ScrollText', 'before_title'=>'', 'after_title'=>''));

  • Once done adding the code in file, click on the update button to save the file. Since we added the function now, now in order to display the scrolling text, we will have to make a function call.
  • Navigate to Appearance > Editor and select header.php and add the below code snippet where you want to display scrolling text.

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

//Function call to display Scroll Text

  • After adding the above code, you see text scrolling in header by, it looks broken. We will have to add stylesheet code.
  • Navigate to Appearance > Editor, select style.css file and copy paste the below code snippet.
.text-flash {
margin:30px 20px 20px;
font-size: 15px;
padding: 2px 5px;
line-height: 30px;
border: 1px solid #eee;
font-family: Arial;
list-style: none outside none;

  • Above code will style scrolling text for background color and text color. As installation is done, now we have to display some text and see how it goes live on the website.
  • Navigate to Appearance > Widgets and you will see ScrollText slot in right pane.
  • Now drag a “Text Widget” to the newly created slot ScrollText. Add some  text in widget and save it (Make sure you don’t add the title).
  • Once done, refresh the website and see the effect. It will look similar to the screenshot below:
Add Scrolling text in header

Demo: Scrolling Text in Header

The scrolling text uses an old school html code “marquee” which scrolls from left to right and vice-versa. Using this tutorial, you will be able move dynamic texts of blog like latest post, news and offers with ease. If you are you using scroll text for your blog then you can share with us here by leaving a comment below.

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 }

Emrul October 18, 2011 at 12:05 am

very good articles as well. can i do this on thesis?


Aky October 18, 2011 at 12:17 am

Yes, it can be implemented on Thesis Theme. You just have to put the above Function in custom_functions.php file and register the sidebar after applying the Thesis hook. (There is no need for extra function call while using Thesis Theme). Play Safe. 😉


Manoj Kumar Sethi November 21, 2015 at 3:32 pm

Hi Aky,

This is my first visit to your website and I was looking to add marquee feature in my blog so that I can create more professional touch to the content.

Is is possible to use the above code in free themes ? If yes then do I have to follow process one by one and add in Function.php file ?
I am looking something like http://www.huffingtonpost.com/belle-beth-cooper/10-surprising-social-medi_b_4325088.html?ir=India&adsSiteOverride=in . You can see they have Previous and Next option with some articles but I want that those articles should be moving automatically

Is it possible in marquee ?



Leave a Comment

Previous post:

Next post:

Contact Aky

Yes, I agree that all information above is valid.

Simple question, what's...