Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Show Recent Posts as a Drop Down in WordPress

You’re probably familiar with the Category widget in WordPress. Recently, one of our readers asked us if it was possible to display recent posts in a drop down as well. In this article, we will show you how to show recent posts as a drop down in WordPress.

Add recent posts as drop down menu

Why and Who Needs Recent Posts in Drop Down?

WordPress comes with a built-in recent posts widget that you can add to any sidebar or widget ready area.

This widget simply displays a list of recent posts, and you can choose the number of posts you want to show. But if you want to show more than 5-10 posts, then the list will take a lot of space in your sidebar.

Some WordPress users may need a compact way to display recent posts. In that case, using drop downs or collapsible lists can help you save space.

Let’s take a look at couple of different ways to show recent posts as a drop down menu in WordPress.

Showing WordPress Recent Posts in a Plain Drop Down Menu (Manual Code)

This method uses the built-in wp_get_recent_posts function. All you need to do is copy and paste the following code in your theme’s functions.php file or a site-specific plugin.

function wpb_recentposts_dropdown() { 
$string .= '<select id="rpdropdown">
			<option  value="" selected>Select a Post</option>';

$args = array( 'numberposts' => '5', 'post_status' => 'publish' );

$recent_posts = wp_get_recent_posts($args);
	foreach( $recent_posts as $recent ){
		$string .= '<option value="' . get_permalink($recent["ID"]) . '">' .   $recent["post_title"].'</option> ';
	}

$string .= '</select>
			<script type="text/javascript"> var urlmenu = document.getElementById( "rpdropdown" ); urlmenu.onchange = function() {
      		window.open( this.options[ this.selectedIndex ].value, "_self" );
 			};
			</script>';

return $string;
} 
add_shortcode('rp_dropdown', 'wpb_recentposts_dropdown');
add_filter('widget_text','do_shortcode');

Now you can use the shortcode [rp_dropdown] in your WordPress post, pages, and text widgets. It will look like this:

Recent posts in a drop down menu on a WordPress site

Adding Collapsible Recent Posts Using Plugin

The above method simply lists your recent posts in a drop down form. Another way to save space is by adding a collapsible list of recent posts which expands when users click on it.

First thing you need to do is install and activate the Collapse-O-Matic plugin. It works out of the box, and there are no settings for you to configure.

The plugin simply allows you to show anything in a collapsible menu using a shortcode.

Before we use this plugin, we need a way to easily show recent posts anywhere we want. Simply add this code to your theme’s functions.php file or a site-specific plugin.

function wpb_recentposts() { 

$string .= '<ul>';
$args = array( 'numberposts' => '5', 'post_status' => 'publish' );
$recent_posts = wp_get_recent_posts($args);
	foreach( $recent_posts as $recent ){
		$string .= '<li><a href="' . get_permalink($recent["ID"]) . '">' .   $recent["post_title"].'</a></li> ';
	}
$string .= '</ul>';
return $string;
} 
add_shortcode('recentposts', 'wpb_recentposts');
add_filter('widget_text','do_shortcode');

This code simply allows you to display a list of recent posts using the shortcode [recentposts].

Now we will add our shortcode in the Collapse-O-Matic shortcode to create a collapsible list of recent posts.

Simply add the shortcode like this:

[expand title="Recent Posts"][recentposts][/expand]

You can add this shortcode in a text widget, posts, or pages on your WordPress site. This is how it looked on our test site.

Collapsable list of recent posts

That’s all, we hope this article helped you show recent posts as drop down in WordPress. You may also want to see these 6 tips to create a killer editorial calendar in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

17 CommentsLeave a Reply

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Yvonne Manders

    I made a mistake and solved it.

    • WPBeginner Support

      Glad you were able to solve the issue :)

      Admin

  3. Yvonne Manders

    Hi,

    I installed the collapse-o-mattic and pasted the code in the functions.php file.
    After that I pasted the shortcode [expand title=”Recent Posts”][recentposts][/expand] in a textwidget, but nothing happened.
    Am I missing something?

    Best regards, Yvonne

    • WPBeginner Support

      You would want to place the shortcode in the text editor rather than the visual editor to ensure you don’t have styling blocking the shortcode from working.

      Admin

  4. Erika

    Line 3 has an error. The closing option tag is missing its closing “/”. This is generating a blank option in the menu.

    • WPBeginner Support

      Thank you for letting us know, the code should be fixed now :)

      Admin

  5. Amjad

    Hi there. I have used above code to show all my posts in a drop down but its not sorted. I have two questions here:
    1. How can i sort posts by title?
    2. How can i show posts of a specific category in dropdown instead of showing all posts?

  6. Rolando

    Nice article! How can you make it by a specific category and not just all your categories? Also, can it be done alphabetical?

  7. Farai Mugaviri

    Thank you so much for the great help there. I wouldalso want to display categories in a dop-down list, if you can help with that…. But now what if I update my Wordpress, is it even possible? I saw somewhere they talked about challengess when updating the wordpress and risking losing data because of hardcoding the PHP functions

  8. Robert

    Great tool, thanks for that!
    Is it possible to sort the post output in the list in alphabetical order?
    Thanks in advance for your reply!

    Regards,
    Robert

  9. Andre

    Its possible to show the posts dropdown with a button to submit?

    ‘function wpb_recentposts_dropdown() {
    $string .= ‘
    Select your School’;

    $args = array( ‘numberposts’ => ‘5’, ‘post_status’ => ‘publish’ );

    $recent_posts = wp_get_recent_posts($args);
    foreach( $recent_posts as $recent ){
    $string .= ” . $recent[“post_title”].’ ‘;
    }

    $string .= ‘
    FIND SCHOOL NOW
    var urlmenu = document.getElementById( “submitschool” ); urlmenu.onclick = function() {
    window.open( this.options[ this.selectedIndex ].value, “_self” );
    };
    ‘;

    return $string;
    }
    add_shortcode(‘rp_dropdown’, ‘wpb_recentposts_dropdown’);
    add_filter(‘widget_text’,’do_shortcode’);’

  10. Emily Johns

    Very neat Stuff!! Great Read and easy to understand.

  11. NG SHAIKH

    It is an excellent article. Beginners like me can understand power of WordPress and its plug-ins by such articles.

    I would be enlightened if some articles are written to display a message on specific page and not on all posts and pages.

    It will also help beginners if a few articles are written to display a form for user entry which can be saved in the database

  12. Julie S

    I really like the drop-down menu of recent posts. How can I control the width of this drop down menu? It defaults too long for my sidebar.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.