X

Comment afficher tous les articles dans un menu déroulant ?

Snippets by IsItWP

Vous cherchez un moyen d’afficher une liste de tous vos articles dans un menu déroulant ? Bien qu’il existe probablement un plugin pour cela, nous avons créé un extrait de code rapide que vous pouvez utiliser pour afficher tous les articles dans un menu déroulant dans WordPress.

Vous pouvez ajuster le nombre d’articles affichés en changeant la valeur -1 dans le tableau $args.

Instructions:

Tout ce que vous avez à faire est d’ajouter ce code au fichier index.php de votre thème :

<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 : Si c’est la première fois que vous ajoutez des extraits de code dans WordPress, veuillez vous référer à notre guide sur la façon d’ajouter correctement des extraits de code dans WordPress, afin de ne pas briser accidentellement votre site.

Si vous avez aimé cet extrait de code, n’hésitez pas à consulter nos autres articles sur le site comme : 50+ meilleurs thèmes WooCommerce pour votre boutique en ligne et comment créer un formulaire de don sur WordPress.

Commentaires   laisser une réponse

  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 octobre 30, 2014 à 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 avril 4, 2014 à 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 avril 4, 2014 à 8:16 pm

        Thanks ^^

      2. Roberta Mahasti avril 4, 2014 à 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 août 9, 2013 à 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 août 9, 2013 à 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.

Ajouter un commentaire

Nous sommes heureux que vous ayez choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre privacy policy, et que tous les liens sont en nofollow. N'utilisez PAS de mots-clés dans le champ du nom. Engageons une conversation personnelle et constructive.

WordPress Launch Checklist

L'ultime liste de contrôle pour le lancement de WordPress

Nous avons rassemblé tous les éléments essentiels de la liste de contrôle pour le lancement de votre prochain site Web WordPress dans un ebook pratique.
Oui, envoyez-moi le gratuit !