Home / posts / Display all posts within a dropdown menu
  • How to Display all posts within a dropdown menu

    display-all-posts-within-a-dropdown-menu

    Adding this snippet to your wordpress theme will display a list of all your posts within a dropdown menu. You can adjust the number of posts displayed by changing the -1 value within the $args array.

    ( click code to copy )

    wordpress snippet : PHP

    <>
    <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>
    

    ( WordPress codex functions, hooks, in this snippet. )

    the_title, bloginfo, get_post, get_posts, setup_postdata,
  • Fin

    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!

          • Julia

            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.

  • Austin

    What about if you wanted to do it by category? So show all posts under each category?

  • Perfect!!!

  • Ferry Verhoeve

    Where do I place this??

    • Hi Ferry, place the code where you wish to display it in your theme.

      • Ferry Verhoeve

        thanks

  • garfield853

    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

  • DV

    Hello, any way to change drop down or drop down field size?

    Thank you

    • kachan64

      In CSS, add
      .dropbox {
      height: 30px; /* Change according to your like*/
      }

  • Roberta Mahasti

    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.

      • Roberta Mahasti

        Thanks ^^

      • Roberta Mahasti

        Thanks ^^

  • Chris Moore

    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!

  • CekasWeb

    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.

  • Marta Mystkowska Johnsson

    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.