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:
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: akyjoe@thecreatology.com
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 } ?>
</marquee>
</div>
<?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.
<?php //Function call to display Scroll Text joe_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 {
width:188px;
height:32px;
background:#fff;
float:right;
margin:30px 20px 20px;
font-size: 15px;
color:#bc2b21;
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:
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.