WordPress Tips: Create Your Own WordPress Random Posts Widget

How to create random posts widget for your WordPress blog? As we know there are many Random Posts plugins are available. But the more plugins you use to make your blog feature rich the more heavy it becomes. In this article we discuss about how to create our own Random Posts Widget for your wordpress blog. No plugin required but you just need to copy and paste few lines of code.
You can display the random posts on your sidebar , page , posts or even footer. In fact displaying random posts on your sidebar will increase the page view rate of your blog. Every time the page is loaded the random posts widget will display a different set of posts.
Related :WordPress Tips: Create Your Own WordPress Recent Posts Widget
If you want to include our Random Posts Widget in sidebar or posts you need to do an extra step. As we discussed in earlier post ,usually wordpress won’t allow you to include PHP code in pots or sidebar. Read how to Insert, Execute, Embed or Include PHP Code in WordPress Post, Page or Sidebar. Once you have setup this you can add the below widget code where ever you want. Be it in sidebar , page , post or even footer.

How to Create Your Own Random Posts Widget for WordPress

To create random posts widget we are using the wordpress API functions. First we retrieve 10 random posts and then we extract details from each of the posts and display inside a <DIV> container. You can always change the number of posts retrieved by just editing the code given below.
The widget also displays the Post Date, Author Name and the number of reader comments so far.
The CSS style used in the widget can be moved to your theme’s style.css file or similar. You can change the CSS style to match your theme. The code is given below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div style="background: none repeat scroll 0 0 ##ffffff;
    border: 0.2em solid #1177AA;
    color: #222222;
    font-family: HelveticaNeue,Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    padding: 0 3px 0 8px;
    text-decoration: none;
    vertical-align: baseline;
    width: 400px;;">
 
<h2>Random Posts</h2>
<ul>
<?php
$args = array( 'numberposts' => 10, 'orderby' => 'rand' );
$rand_posts = get_posts( $args );
foreach( $rand_posts as $post ) :  setup_postdata($post);  ?>
	<li><a style=" font-size: 12px; font-weight:bold; text-decoration: none;" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
	<ol style=" font-size: 10px; font-weight:bold; color:#CC0000; text-transform: uppercase;"><?php the_date(); ?> | Author : <?php the_author(); ?>  |  <?php comments_number('no responses','one response','% responses'); ?></ol>
	</li>
<?php endforeach; ?>
</ul>
</div>

The above code will create a widget as below.

Before you Go,

Before you go, subscribe to get latest technology articles right in your mailbox!.

EmailEnter your email address

Subscribe