![dropdown quicklinks wordpress plugin dropdown quicklinks wordpress plugin](https://s3.us-east-2.wasabisys.com/gridpanekb/using-gridpane-teams/Create-a-team-11.jpg)
![dropdown quicklinks wordpress plugin dropdown quicklinks wordpress plugin](https://oxyplugins.com/wp-content/uploads/2021/02/oxy-toolbox-oxygen-navigator-2048x1153.png)
It's this that we want to drop down when the user hovers over the top-level menu item.Ĭoding the CSS to Create the Drop-Down Menu Inside one of the li elements is another ul with its own li elements inside-the second-level menu items.Each one also has a unique ID, with a number corresponding to the post ID of the navigation menu item in the database. Inside that, a number of li elements, each with the class of menu-item menu-item-type-post_type, plus other classes specific to the type of post that the menu item leads to and the state of that menu item at the time.Inside that, a ul with the ID menu-navbar and the class menu.A div with the main-nav class, defined in the wp_nav_menu() function.If you examine that code, you'll see that it consists of: Now here's the HTML output for that menu: Here's a typical menu for a small business, shown in the Menus admin screen: Here's the checkbox for the primary navigation in the Menus admin screen: Code Output by the wp_nav_menu() Functionīefore we can add CSS to create the dropdown menu, it helps to be familiar with the code that WordPress generates for menus. But you may want to use additional parameters, which you can find in the WordPress handbook page on wp_nav_menu(). Sometimes you might want to add a navigation menu elsewhere in your theme, for example in the footer, in which case you don't want to use theme_location => primary. If I create a menu in the admin screens and check the Primary box, then this menu will be used for this spot in the code. theme_location => primary tells WordPress that this is the primary navigation.That's what we'll be targeting with our CSS later on. container_class is the CSS class that will be given to the container in which the menu is wrapped.The parameters are then wrapped in an array.wp_nav_menu() is the function that fetches a navigation menu and outputs it.Your function may look a little different depending on the parameters, but let's break down the example above and see what each element does: You should be able to find this line: wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ) In your theme, open up the header.php file. Instead, WordPress uses a PHP function to query the database and fetch navigation menu items, then display them in the correct structure.Įach item in your navigation menu is actually a post in the wp_posts table in your database-not a normal post, but a special kind of post that's used just for navigation menu items, with its own metadata including the text to be displayed and the target of the link. Unlike for static sites, menus aren't hard-coded into your site. The first thing you'll need to understand is how WordPress generates menus. a theme you're coding yourself, or a child theme of a third-party theme if you want to modify the menu.a development installation of WordPress.To follow along with this tutorial, you'll need: However, if you're working with a third-party theme whose menu isn't drop-down and you want to add this, then you'll need to create a child theme and add your menu code to that.
![dropdown quicklinks wordpress plugin dropdown quicklinks wordpress plugin](https://xyzscripts.com/wordpress-plugins/insert-php-code-snippet/data/logo/216-21-1540547211.png)
![dropdown quicklinks wordpress plugin dropdown quicklinks wordpress plugin](https://s3.us-east-2.wasabisys.com/gridpanekb/Change-the-Site-Owner-System-User-of-GridPane-Site/change-system-user02.png)
This is designed to be used in a theme you're coding yourself, and not for a third-party theme, which will already have its own menu. In this tutorial, I'm going to show you how to create a drop-down menu in your WordPress theme, using CSS to target the HTML that's output by the WordPress menu function. How to Make a Drop-Down Menu in WordPress