X

Como exibir todos os posts em um menu suspenso

Snippets by IsItWP

Está procurando uma maneira de exibir uma lista de todas as suas publicações em um menu suspenso? Embora provavelmente exista um plug-in para isso, criamos um trecho de código rápido que você pode usar para exibir todas as postagens em um menu suspenso no WordPress.

Você pode ajustar o número de posts exibidos alterando o valor -1 na matriz $args.

Instruções:

Tudo o que você precisa fazer é adicionar esse código ao arquivo index.php do seu 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>

Observação: Se esta é a primeira vez que você adiciona trechos de código no WordPress, consulte nosso guia sobre como adicionar corretamente trechos de código no WordPress, para não danificar acidentalmente seu site.

Se você gostou desse snippet de código, considere dar uma olhada em nossos outros artigos no site, como: 50+ melhores temas de WooCommerce para sua loja on-line e como criar um formulário de doação no WordPress.

Comentários   Deixe uma resposta

  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 outubro 30, 2014 em 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 em 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 em 8:16 pm

        Thanks ^^

      2. Roberta Mahasti abril 4, 2014 em 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 em 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 em 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.

Adicionar um comentário

Ficamos felizes por você ter optado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossa política de privacidade, e todos os links são nofollow. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.

WordPress Launch Checklist

A lista de verificação definitiva para o lançamento do WordPress

Compilamos todos os itens essenciais da lista de verificação para o lançamento de seu próximo site WordPress em um ebook prático.
Sim, envie-me o livro eletrônico gratuito grátis!