How to Create Marquee of Latest Posts in WordPress

How to Create Marquee of Latest Posts in Wordpress
Spread the love

Do you want to create a Marquee line on your WordPress Blog, here is a trick to create a Marquee of the Latest Posts on your WordPress Blog Page, Single Page or on Single Post? This is a very simple way to create Marquee Line on your WordPress blog. If you are ready to create a Marquee line then let’s start to create.

Many Plugins and tools available on the web to create and design a Marquee on the WordPress but in this post, we will not install any Plugins and tools on our blog. In this post, you will get a simple HTML code for making Marquee on WordPress.

OK, Now open a Simple Text editor such as Notepad to type the HTML code that will be used on the WordPress Blog. Now login to your WordPress admin panel and go on Editor by Clicking on Appearance and then click on Editor and select the file where you want to put the Marquee line. Basically many bloggers want to put Marquee line on the Header of the Blog. You can choose another file such as Single, Blog Post, Index.php or other pages. Here I will be put my code in the Header of My Website.

Now copy all the codes of your Page such as header.php and paste the code on the Text Editor Like Notepad. Now you need to paste the following code where you want to see your Marquee line on your WordPress blog.

Also, Read this Post: How to make Multilingual Blog or Website on WordPress

&lt;div class=&quot;marquee&quot;&gt;&lt;marquee direction=&quot;left&quot; scrolldelay=&quot;90&quot; scrollamount=&quot;6&quot; behavior=&quot;alternate&quot; loop=&quot;0&quot; style=&quot;&quot; id=&quot;Marquee1&quot; onmouseover=&quot;this.stop()&quot; onmouseout=&quot;this.start()&quot;&gt;&lt;span style=&quot;color:#FF0000;font-family:Arial;font-size:13px;&quot;&gt;&lt;strong&gt;&lt;?php<br />
query_posts('posts_per_page=10');<br />
while(have_posts()) : the_post(); ?&gt;<br />
&lt;a href = &quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;&lt;?php the_title('', ' | ', '&lt;br /&gt;' ); ?&gt;&lt;/a&gt;<br />
&lt;?php endwhile; wp_reset_query(); ?&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/marquee&gt;<br />
&lt;/div&gt;

After pasting the the above code on your page where you want to see your marquee line you need to go back your WordPress Editor by clicking on Appearance > Editor and open style.css to create a Design for your Marquee and paste the following code on the end of your style.css.

.marquee{<br />
background-color: yellow;<br />
padding:10px;<br />
font-family:calibri;<br />
margin-bottom:5px;<br />
}

You can also put this code on your header.php file on between of <head> and </head> tag. Here you need to use the following code.

&lt;style&gt;<br />
.marquee{<br />
background-color: yellow;<br />
padding:10px;<br />
font-family:calibri;<br />
margin-bottom:5px;<br />
}<br />
&lt;/style&gt;

In the CSS code you can change the background color with your favorite color that you want to use as the background of your Marquee. After doing all the above things you have done to create a Marquee line for the Latest posts of your WordPress blog. In this code I’m display only 10 Latest posts if you want to show more posts then edit the following code.

query_posts('posts_per_page=10');

Here you can see 10 posts you can put any number that you want to show how many posts.

I hope, this post may help you to create a Marquee line on your WordPress blog. If you have any questions related to this post or any suggestion then leave a comment.

Arvind Singh is a Web Developer / Blogger and Also a Youtuber. He Explores what’s possible with WordPress, Blogger, Mobile Phones, Web Development and shares his Knowledge with the Readers.

You May Also Like