X

Cómo mostrar todas las entradas en un menú desplegable

Snippets by IsItWP

¿Estás buscando una forma de mostrar una lista de todas tus entradas en un menú desplegable? Si bien es probable que haya un plugin para esto, hemos creado un fragmento de código rápido que puede utilizar para mostrar todas las entradas dentro de un menú desplegable en WordPress.

Puede ajustar el número de entradas mostradas cambiando el valor -1 dentro del array $args.

Instrucciones:

Todo lo que tienes que hacer es añadir este código al archivo index.php de tu tema:

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

Nota: Si es la primera vez que añades fragmentos de código en WordPress, consulta nuestra guía sobre cómo añadir correctamente fragmentos de código en WordPress, para no romper accidentalmente tu sitio.

Si te ha gustado este fragmento de código, por favor, considere la posibilidad de revisar nuestros otros artículos en el sitio como: 50+ mejores temas de WooCommerce para tu tienda online y cómo crear un formulario de donación en WordPress.

Comentarios   Deja una respuesta

  1. 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; ?>”>

    1. The code sample you included has some syntax errors. For example, the PHP and HTML are not properly separated.

  2. Hi but when you click on one selected option the link is not working.
    How to sort it out?

    1. If the submit button is clicked, does the console show any error messages?

  3. Hi ,

    Please i wanted to know how to display this dropdown on and other page then the index.php ?

    1. In this case, you would need to add the code to the corresponding theme template file.

  4. 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?

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

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

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

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

  8. Marta Mystkowska Johnsson octubre 30, 2014 en 8:21 am

    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!

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

  9. 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).

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

      1. thank alot

  10. 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!

    1. 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/

  11. Roberta Mahasti abril 4, 2014 en 12:10 pm

    Hi, can I list my portfolio items? I’m trying but… 🙂

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

      1. Roberta Mahasti abril 4, 2014 en 8:16 pm

        Thanks ^^

      2. Roberta Mahasti abril 4, 2014 en 8:16 pm

        Thanks ^^

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

    Thank you

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

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

  14. Ferry Verhoeve agosto 9, 2013 en 8:04 am

    Where do I place this??

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

      1. Ferry Verhoeve agosto 9, 2013 en 8:51 am

        thanks

  15. Perfect!!!

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

  17. Does this work with custom post types too?

    1. Hi Fin, yes you can add the post type to the args array, eg:

      array(
      ‘numberposts’ => -1,
      ‘post_type’=> ‘post’,
      );

      1. This works great and thank you!

        Can you advise for displaying all posts from a certain category

        1. Just add cat and the category ID

          array(
          ‘numberposts’ => -1,
          ‘post_type’=> ‘post’,
          ‘cat’ => ‘2’,
          );

          1. Cheers Kevin!

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

Añadir un comentario

Nos alegra que haya decidido dejar un comentario. Tenga en cuenta que todos los comentarios se moderan de acuerdo con nuestra política de privacidad , y que todos los enlaces son nofollow. NO utilice palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.

WordPress Launch Checklist

La lista definitiva para lanzar WordPress

Hemos recopilado todos los elementos esenciales de la lista de comprobación para el lanzamiento de su próximo sitio web de WordPress en un práctico ebook.
Sí, envíeme el ¡gratuito!