{"id":77510,"date":"2012-05-05T11:00:20","date_gmt":"2012-05-05T15:00:20","guid":{"rendered":"http:\/\/wpmu.org\/?p=77510"},"modified":"2022-04-19T02:09:14","modified_gmt":"2022-04-19T02:09:14","slug":"how-to-create-a-drop-down-list-for-posts-on-wordpress","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/how-to-create-a-drop-down-list-for-posts-on-wordpress\/","title":{"rendered":"How to Create a Drop Down List for Posts on WordPress"},"content":{"rendered":"<p>Want to add a dropdown list to your WordPress site? There are ways to do it quickly and easily. This article shows you how.<\/p>\n<p>The following two options will allow you to create a drop-down list for your posts. You&#8217;ll see the more technical way (code) and the more straightforward way (WordPress admin). Both will do the trick!<\/p>\n<p>Continue reading, or jump ahead using these links:<\/p>\n<ul>\n<li><a href=\"#code\">Creating a Dropdown Menu Using Code<\/a><\/li>\n<li><a href=\"#no-code\">Creating a Dropdown Menu Using No Code<\/a><\/li>\n<\/ul>\n<h2 id=\"code\">Creating a Dropdown Menu Using Code<\/h2>\n<p>The first solution is fairly simple. Just insert the following code into your theme &#8212; for example, in your sidebar (Appearance &gt; Editor &gt; Sidebar).<\/p>\n<p>You can control the number of posts it displays by changing the number in this line of the code:<\/p>\n<pre><code>$args = array( 'numberposts' =&gt; -1);<\/code><\/pre>\n<p>To show all your posts, leave the \u201c-1\u201d in place. To show ten posts, for example, replace the \u201c-1\u201d with the number \u201c10.\u201d<\/p>\n<pre><code>&lt;form action=\"&lt;? bloginfo('url'); ?&gt;\" method=\"get\"&gt;\r\n &lt;select name=\"page_id\" id=\"page_id\"&gt;\r\n &lt;?php\r\n global $post;\r\n $args = array( 'numberposts' =&gt; -1);\r\n $posts = get_posts($args);\r\n foreach( $posts as $post ) : setup_postdata($post); ?&gt;\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option value=\"&lt;? echo $post-&gt;ID; ?&gt;\"&gt;&lt;?php the_title(); ?&gt;&lt;\/option&gt;\r\n &lt;?php endforeach; ?&gt;\r\n &lt;\/select&gt;\r\n &lt;input type=\"submit\" name=\"submit\" value=\"view\" \/&gt;\r\n &lt;\/form&gt;<\/code><\/pre>\n<p>And here\u2019s the code in action.<\/p>\n<figure id=\"attachment_77513\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-77513\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/05\/drop-down-code-in-action.jpg\" alt=\"A look at dropdown code.\" width=\"634\" height=\"447\" \/><figcaption class=\"wp-caption-text\">As you can see, there&#8217;s a dropdown in action!<\/figcaption><\/figure>\n<p>Now that we went over ways to do this with code, there&#8217;s another simple way. It&#8217;s by&#8230;<\/p>\n<h2 id=\"no-code\">Creating a Dropdown Menu Using No Code<\/h2>\n<p>Not a fan of using code? No problem. Here&#8217;s another method that works just as well (if not better).<\/p>\n<p>First, you just need to create a navigation menu. That&#8217;s easy to do. Simply go to <strong>Appearance&gt;Menus<\/strong> and at the top of the menu, click <strong>Create a New Menu<\/strong>.<\/p>\n<figure id=\"attachment_209078\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-209078\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/05\/create-a-new-menu.png\" alt=\"The create a new menu button.\" width=\"600\" height=\"379\" \/><figcaption class=\"wp-caption-text\">This is where a new dropdown all begins&#8230;<\/figcaption><\/figure>\n<p>You&#8217;ll <strong>add a name<\/strong> to your navigation menu. The name you give it won&#8217;t be publicly visible, however, it&#8217;ll help you identify the menu in your admin.<\/p>\n<figure id=\"attachment_209081\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-209081\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/05\/menu-name.png\" alt=\"Where you add the menu name.\" width=\"600\" height=\"379\" \/><figcaption class=\"wp-caption-text\">Name it anything you&#8217;ll remember and recognize.<\/figcaption><\/figure>\n<p>After naming, click <strong>Create Menu<\/strong> and WordPress creates a new empty menu.<\/p>\n<p>It&#8217;s now just a matter of selecting the pages you want to add from the left column and clicking on <strong>Add to Menu<\/strong> button.<\/p>\n<figure id=\"attachment_209084\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-209084\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/05\/add-to-menu.png\" alt=\"Where you add to menu.\" width=\"600\" height=\"436\" \/><figcaption class=\"wp-caption-text\">You can select individually or in bulk.<\/figcaption><\/figure>\n<p>Once added, the pages appear in the right column.<\/p>\n<figure id=\"attachment_209086\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-209086\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/05\/new-menu-options.png\" alt=\"The new menu options.\" width=\"600\" height=\"436\" \/><figcaption class=\"wp-caption-text\">They&#8217;re all located under the new menu you just set up.<\/figcaption><\/figure>\n<p>Next, we&#8217;ll be adding Sub-items. The sub-items are what will appear inside the dropdown menu. You can add them under any existing items &#8212; it&#8217;s up to you.<\/p>\n<p>It&#8217;s a matter of simply dragging and dropping. By dragging a page to the page that you want it to be a submenu, it will instantly become one. You can even add additional submenus under a submenu!<\/p>\n<figure id=\"attachment_209089\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-209089\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/05\/submenus.png\" alt=\"The submenus.\" width=\"600\" height=\"431\" \/><figcaption class=\"wp-caption-text\">For this example, I have Book Club as my main page, and Contact and Hub as submenus underneath it.<\/figcaption><\/figure>\n<p>When done, click <strong>Save Menu<\/strong> &#8212; and you&#8217;re all set and ready to publish.<\/p>\n<p>If this is a menu that was edited on your main site, then once the new menu is created, it&#8217;ll be displayed right away. But, if the menu is new, you&#8217;ll choose a theme location.<\/p>\n<p>This opinion is under <strong>Menu Settings<\/strong>. Simply pick the best option under <strong>Display Location<\/strong> and click <strong>Save Menu<\/strong>.<\/p>\n<figure id=\"attachment_209111\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-209111\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/05\/save-menu.png\" alt=\"The save menu button.\" width=\"600\" height=\"317\" \/><figcaption class=\"wp-caption-text\">All options of where to save the menu will appear here.<\/figcaption><\/figure>\n<p>Your new dropdown menu is live and ready.<\/p>\n<figure id=\"attachment_209112\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-209112\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/05\/menu.png\" alt=\"Dropdown menu example.\" width=\"600\" height=\"338\" \/><figcaption class=\"wp-caption-text\">Add as many menus and submenus as you want.<\/figcaption><\/figure>\n<p>Edit the menus at any time in the WordPress admin. Additionally, you can unpublish or move locations if needed.<\/p>\n<h2>That&#8217;s How You Drop a New Menu<\/h2>\n<p>And that&#8217;s how you easily create a new dropdown menu in WordPress! As you can see, it&#8217;s simple and easy to do. Plus, you have a couple of options on how to go about it.<\/p>\n<p>So, go drop a new menu today!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>These options will give you a drop down menu that you can put anywhere you like.<\/p>\n","protected":false},"author":84404,"featured_media":207802,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4],"tags":[87],"tutorials_categories":[],"class_list":["post-77510","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","tag-menus"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/77510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=77510"}],"version-history":[{"count":13,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/77510\/revisions"}],"predecessor-version":[{"id":209228,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/77510\/revisions\/209228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/207802"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=77510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=77510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=77510"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=77510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}