Are you looking for a way to display a list of all your posts within a dropdown menu? While there’s probably a plugin for this, we have created a quick code snippet that you can use to display all posts within a dropdown menu in WordPress.
You can adjust the number of posts displayed by changing the -1 value within the $args array.
Instructions:
All you have to do is add this code to your theme’s index.php file:
<form action="<? bloginfo('url'); ?>" method="get">
<select name="page_id" id="page_id">
<?php
global $post;
$args = array( 'numberposts' => -1);
$posts = get_posts($args);
foreach( $posts as $post ) : setup_postdata($post); ?>
<option value="<? echo $post->ID; ?>"><?php the_title(); ?></option>
<?php endforeach; ?>
</select>
<input type="submit" name="submit" value="view" />
</form>
Note: If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly add code snippets in WordPress, so you don’t accidentally break your site.
If you liked this code snippet, please consider checking out our other articles on the site like: 50+ best WooCommerce themes for your online store and how to create a WordPress donation form.
Sir,I`m using avada portfolio post type and your code is working right but breaks all normal page layout.
I added ‘post_type’ => ‘avada_portfolio’,
Dropdown works good but all normal page content have portfolio thumbnail.
How can I fix this?
Please Hlep.
<form action="” method=”get”>
— Select Item —
-1,
‘post_type’ => ‘avada_portfolio’,
);
$posts = get_posts($args);
foreach( $posts as $post ) : setup_postdata($post); ?>
<option value="ID);?>” class=”ID; ?>”>
The code sample you included has some syntax errors. For example, the PHP and HTML are not properly separated.
Hi but when you click on one selected option the link is not working.
How to sort it out?
If the submit button is clicked, does the console show any error messages?
Hi ,
Please i wanted to know how to display this dropdown on and other page then the index.php ?
In this case, you would need to add the code to the corresponding theme template file.
I want to put a shortcode in a text widget to show a dropdown menu with links to all my posts. Therefore I need a php code to put in the PHPCode Snppets plugin. Can you help me?
Kevin your code is working fine for me. Just need to confirm can we remove /?submit=view from URL once you click on view post button at the end of URL it’s added auto. How I remove that.
This seems to be added by WordPress. You could try removing the query string with JavaScript after the page loads, but this is not recommended.
Hello i am working on a classified web application on wordpress, Do you have Snippet code that change drop down selection(Category) to list view. Like Olx.in ad posting style. So the user can select easily by viewing everything at once instead of scrolling down. Hope you understand my problem.
I added the above code to my sidebar in a text widget but nothing shows up in the dropdown area (it’s just white). Any idea why? Thanks!
Hi, great tutorial but I wounder if it is possible to make two dropdowns. The first one chose a category and the second one shows all post in that category and than there is a button (link) that allows to go to that chosen post? Do you think it is possible? I did write some code that takes hardcoded values and changes the list with javascript but I would like to have it dynamic, right now I have to add every new post to my hardcoded list on right category, lot of mess….Thank You!
Yes something like this could be done however you would need to use ajax to grab all posts within a specific category when selected. It’s not just a matter of a simple change the to the code above.
Hi Kevin, thank for your tutorial. How to create selected option? I use your code showing my custom post type title, but when I selected one and press submit button, it back to the first (I mean nothing selected).
This snippet only creates the menu it does not do anything more than that. However you can use the following script on wpsnipp.com ‘s sister site jqsnipp.com for the jquery side.
http://jqsnipp.com/create-jquery-select-dropdown/
Then in the snippet above change
<option value="ID; ?>”>to
<option value="”>
This will add the permalink to the value and the javascript on jqsnipp will let
you jump to the location when you select the menu item.
thank alot
Hey Kevin,
Thanks so much for posting this. Was looking all over for how to accomplish it with custom post types. Do know how I can accomplish this so that when the item is selected from drop down it automatically goes to the page without having to have a “submit” button?
Thanks!
Hi Chris,
Rather than just $post->ID for the value you could add
get_permalink($post->ID) then use javascript to see what option has been selected.
If you are using jQuery I have a snippet on my other site http://jqsnipp.com that you can
use for just this type of thing. http://jqsnipp.com/create-jquery-select-dropdown/
Hi, can I list my portfolio items? I’m trying but… 🙂
Hi Roberta,
I assume you want to display a custom post type ? You need to add the post type to the $args array. If you add ‘post_type’ => ‘post’, that should do the trick after you change post to the name of your custom post type.
Thanks ^^
Thanks ^^
Hello, any way to change drop down or drop down field size?
Thank you
In CSS, add
.dropbox {
height: 30px; /* Change according to your like*/
}
Thx, for this snippet. Sorry for my english, i`ll do my best 🙂 I need a “first line” like “Please Chosse…”. Can you help me to put this line into your code? garfield853
Where do I place this??
Hi Ferry, place the code where you wish to display it in your theme.
thanks
Perfect!!!
What about if you wanted to do it by category? So show all posts under each category?
Does this work with custom post types too?
Hi Fin, yes you can add the post type to the args array, eg:
array(
‘numberposts’ => -1,
‘post_type’=> ‘post’,
);
This works great and thank you!
Can you advise for displaying all posts from a certain category
Just add cat and the category ID
array(
‘numberposts’ => -1,
‘post_type’=> ‘post’,
‘cat’ => ‘2’,
);
Cheers Kevin!
Hi Kevin, thank you for posting the coding on this page. It has been quite helpful to me in organizing the sidebar at (link removed). Please “Churches of NY” box, I would like for the box to start up with “Select Post” — how may implement that option? Also, how may I get the selection to go straight to the post with out the “view” box? Thanks.