Let's look at solving one trivial problem that developers encounter from time to time. It happens that on sites you need to display two menus at once, which are interconnected: one is the top horizontal menu of the 1st level, and the second is in the sidebar of the 2nd level. Moreover, only those sub-items for which the corresponding parent element is selected in the main menu are displayed in the side menu. For example, if you have a list of countries in the header of your site, then by selecting, say, Italy, you will only get a list of Italian cities in the sidebar.
Theoretically, you can implement such a trick using a function and some tricky PHP code, but I suggest using a ready-made solution - a menu widget for WordPress called Advanced Sidebar Menu. This is as simple as possible and you don’t need to make any changes to the template.
You can download the plugin from here or install it through the admin panel. The main function is the creation and display of a dynamic side menu, taking into account the “parent / heir” relationship for pages and categories of the site.
You don’t need to make any additional settings after installation; in the “Appearance” - “Widgets” section, 2 new elements will simply appear: Advanced Sidebar Pages Menu and Advanced Sidebar Categories Menu. The settings for these menu widgets for WordPress are similar, plus or minus:
- Title — widget title.
- Include Parent Page - whether to add a parent element to the menu.
- Include Parent Even With No Children - whether to include pages without subpages.
- Order By—sorting options (sequence number, title, date).
- Use this Plugin’s Styling - use styling styles from the plugin.
- Pages to Exclude (ids) - pages to be excluded.
- Always Display Child Pages - always display subpages.
- Levels to Display — number of menu levels to display.
As you can see in the screenshot above, for categories everything is basically the same, but without sorting and levels. Plus, an option is added to display an element on the page with the full text of the post (Display Categories on Single Posts).
So, in most cases, you just need to add a menu widget for WordPress to your sidebar and it will start working right away. Of course, the site must have a corresponding hierarchy with subpages. To be honest, it is not entirely clear how to set up a dependent menu for complex projects with a parent page, starting from the 2nd level. The module description says that you need to assign a parent page/category, but I didn’t see anything similar in the settings. On the other hand, such situations are extremely rare; as a rule, you often have only 2 menus (side and main), so the Advanced Sidebar Menu widget is completely suitable.
Finally, it should be noted that the Pro module has a version with more advanced settings (design options, accordion style for menus, etc.). I advise developers to take a look at the Developer Docs page where information about special filters/functions for more complex use cases of the plugin is collected.
If you still have any questions about the side menu in WordPress or know other suitable menu widgets for solving this problem, write in the comments.
jQuery Vertical Mega Menu Widget
- a free plugin designed to create a vertical drop-down menu in the sidebar. The plugin is intended for WordPress in general, but is clearly tailored for e-commerce and can be used not only with WooCommerce, but also with other e-commerce plugins.
I've seen several different plugins for creating different kinds of structured, drop-down sidebar menus, but this plugin stands out. Most of them automatically create menus based on blog posts and categories, based on date and month. Convenient if you just have a blog.
The plugin in question allows you to create absolutely any menus based on pages, products, categories, tags - anything! This is exactly what you need for a product catalog, although you will have to tinker a little - items are added manually.
After downloading, installing and activating the plugin, the first thing to do is create the necessary menu that will be displayed through the plugin. In the site settings, go to the “Appearance” -> “Menu” tab and create a new one - well, let’s say “menu2”. Then we fill it out as we want, making nested items. You can experiment later, the first thing is to create at least something. Each item is made manually by reference. That is, if you insert a catalog page into the menu, the link to the catalog will work, but the positions from the catalog will not automatically appear in the menu. For the greatest effect, it is recommended to make three-level menu items, then the plugin will show its best performance.
Once the menu is created, you need to make the plugin start displaying it. Go to “Appearance” -> “Widgets”, find the new widget “jQuery Vertical Mega Menu” there and place it in the right place on the sidebar. Here you can rummage around a little in the settings, although the main thing now is to select our pre-created menu “menu2” and click “Save”. The menu has been created and can be viewed on the website!
Menu– one of the most important elements on any website. It is the simplicity and ease of navigation that determines how comfortable it will be for a visitor to navigate the site. There are 2 types of menus in WordPress: vertical and horizontal. In this article we will consider the following questions: How to create? How to add a menu to a theme that doesn't have one? Displaying menus, creating nested pages, as well as general settings in WordPress.
A horizontal menu is built into most modern WordPress themes. Some templates allow you to make additional navigation settings, while others do not. By default, all added pages will be displayed in the menu.
Quite often, novice WP users wonder whether how to create a multi-level dropdown menu, whether vertical or horizontal.
Multi-level horizontal or vertical drop-down menus are implemented by assigning a specific page hierarchy. Accordingly, this can be done at the creation stage, or when editing pages in the “Pages” section of the WP admin panel, where you can find a block with the following settings:
So, to create multi-level nesting, you need to assign a parent page to another page.
To organize the structure shown in the screenshot above, it was necessary to assign the parent page “Example Page” to the pages “Sub 1” and “Sub 2”, as well as the pages “Sub Sub 1” and “Sub Sub 2” to the parent page “Sub 1” . I think the construction principle is clear.
How to add your own horizontal menu
What to do if the theme (template) does not support horizontal menu display?
Cases of the absence of a built-in menu in a theme are extremely rare, but they do happen. This is due to the fact that in such templates the function of displaying a menu is simply not specified:
You just need to add this line to the desired place in the template, be it Header, Footer or Sidebar, which are located in the Header.php, Footer.php, Sidebar.php files of your theme. It’s worth immediately wrapping the function in tags , these html 5 tags affect the optimization of the site, and will also make it possible to easily assign styles for the menu. That is, like this:
I mentioned that you will have to assign CSS styles, this is quite logical, because the theme developers did not do this and there is no menu in it by default. And those who have problems with CSS can and will experience certain difficulties. For these people, I would advise turning to search engines with the request “horizontal menu” and finding suitable styles for the site template.
As an example, I’ll post one version of a black drop-down multi-level menu -. Once you have downloaded the file, open it, copy the contents and paste it into the style.css file located in your WordPress theme folder. You can see a demo menu.
WordPress Vertical Menu
We've sorted out the horizontal menu, but with the drop-down vertical menu... everything is much simpler with it, it is implemented using plugins. There are quite a lot of them, here are a few of them:
- jQuery Accordion Menu Widget
- jQuery Vertical Mega Menu Widget
- jQuery Drill Down iPod Menu Widget
- jQuery Mega Menu Widget
If the drop-down menu is not needed, then all the work comes down to the fact that you just need to use the widget "Custom menu", having previously created it.
How to Create a Menu in WordPress
Creating a menu is very simple, you need to go to the “Appearance” - “Menu” tab, enter a name and click “Create”.
WP developers took care of their users and did everything to make them comfortable using the product, so there will be no unnecessary comments. Using the left column, you can add the necessary items to the menu. These items include:
- Pages;
- Arbitrary links;
- Categories
After the items are added to the menu, you need to create nesting and organize all the links. This is done very simply: by dragging the items, you arrange them in the desired order, and if you need to specify the parent page, you need to drag the desired item under the parent element.
Want to create multi-level, complex menus for your website without fiddling around with it too much? There is a solution. Assembling and designing a website menu is easy using special plugins for WordPress.
WordPress themes provide great options for developing great websites. However, modern navigation menus are different from the menus used a few years ago. However, WordPress themes continue to provide menus that work with the theme concept.
This is not always suitable for large sites with many pages containing a variety of products or services.
Special menu plugins for WordPress will help you add convenient, adaptive navigation to your site.
WordPress Responsive Menus
A website's menu is one of the most important elements as it helps you navigate through the pages. A menu defines the choices presented to users. By clicking on the selected menu item, the user goes to a specific web page or performs an action.
From both an aesthetic and navigational point of view, a visually appealing menu is critical to website design.
Menus come in different types, and ideally you can choose one based on the number of pages and overall design of your site.
Horizontal are displayed at the top of the web page, with the remaining space reserved for the main content. It is intuitive, since most people prefer to read text horizontally.
Vertical used alone or in combination with a horizontal menu. Mainly used when content cannot be placed horizontally across the entire page.
Dropdowns can be used with both horizontal and vertical. They separate visible main menu items from submenu items that only appear on mouseover.
Mega menu are large two-dimensional panels grouped by navigation options. This is a relatively new concept that is gaining popularity because the full menu is immediately visible without scrolling. It is a combination of simple menus and drop-down menus, similar to the Ribbon in Microsoft Office.
WordPress Menu Plugins
Today we will introduce you to plugins that allow you to create just the last type of menu.
WordPress itself provides built-in functionality for creating different types of menus. However, these functions are general and do not allow the implementation of mega menus.
Special WordPress plugins integrate with the existing WordPress menu system and provide additional functionality. Plugins help you create professional looking mega menus.
Most plugins have a built-in admin panel for adding or changing menu items that are styled to match your site design. There are settings for fonts, colors, background texture, icons, etc. Shortcode elements allow you to add contact forms, images, videos, Google maps, and dynamic content to your menu.
Most WordPress Mega Menu plugins are optimized to work with multiple devices. These plugins include support for multiple menus, hover effects, and other animations.
Max Mega Menu is a complete menu management plugin. With complete ease, you can change your existing menu into a convenient, fully accessible and responsive one. Options include built-in settings for reinstalling, adding widgets, changing behavior, and converting a simple menu to a mega menu. This plugin has a built-in editor in its free version. Max Mega Menu Pro adds features like vertical, hamburger menu, logo menu, Google font support, WooCommerce and EDD support.
This is a custom plugin for WordPress. The interface is easy to use and provides many customizable options. Various menu customization options include menu type, background image, menu animation, menu alignment and placement, screen size. In the free version, the plugin provides features such as menu logos, reordering components including scripts, custom menu triggers. Advanced and Pro functionality provides support for design preview, menu item animation, built-in title bar, etc.
Customizable plugin for mobile menu. The plugin allows you to transform your existing WordPress menu into something elegant, user-friendly and responsive. This plugin easily integrates with the WordPress menu system and works on all types of mobile devices. The free version provides an easy to use admin interface. It offers many options and the ability to show categories, subcategories, and posts. The plugin provides built-in support for adding colors, logos, and hiding certain elements on mobile devices.
The Nextend Accordion Menu plugin is user-friendly, customizable and easy to integrate. Hamburger Menu allows you to use different levels of submenus. Provides full control over menus, levels, colors, animation effects. It can be used to create a “hamburger” from any WordPress menu. The Lite version comes with one theme. 3 additional themes are available for purchase with the PRO version of the plugin. The list of powerful features also includes full control over colors, background, images, fonts. Also added are multiple menu levels and built-in support for Google fonts.
The Mega Menu plugin by WooRockets is a powerful, responsive, user-centric plugin. Provides you with a dedicated and intuitive builder. Provides complete control over menu design and customization. Menu orientation and icon display options, real-time preview, and profiles for menu settings are supported. You can also paste content and embed Google Fonts from the Plugins panel.
The above mentioned plugins are well known and highly rated WordPress plugins. With their help, you can easily create a mega cool menu on your website.
Hello everyone, today I want to tell you how you can add a menu in WordPress. It would seem not a difficult task, but a good 10 - 15% of questions are related specifically to the menu, because despite the fact that WordPress has a special function wp_nav_menu- template developers constantly toil with nonsense and do it through a well-known place. Next, I will show you step-by-step instructions on how to create a menu template.
As an example, I suggest you, together with me, make a simple, one-level, horizontal WordPress menu.
If you were looking for information about WordPress dropdown menus, I advise you to pay attention to these articles:
These articles describe the mechanism for creating a menu; all you need to do is copy the html and CSS from the examples and display a menu for WordPress via php as described below in this article.
Page navigation:
First, we need the HTML code for the menu, and that’s what we’ll do.
WordPress horizontal menu using HTML+CSS
I won't spend much time on creating Html and CSS for our menu. I will try to simply provide parts of the code and a brief description of them.
The HTML code for our menu will be the simplest:
This is the default ul list that the WordPress menu generates.
The styles for this horizontal menu will also be simple, although here you can find the code to stretch the menu to the full width of the block.
CSS Styles
#nav1( position:relative; width:100%; height:62px; background:#0076c6; border-bottom:5px solid #e5eef4; box-sizing:border-box; z-index:11; font-family:Arial, sans-serif; ) #nav1 ul( display:block; list-style:none; margin:0px; padding:0px; text-align:justify; font-size:1px; line-height:1px; width:100%; height:57px; ) #nav1 ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #nav1 ul li( display:inline-block; width:auto; height: auto; font-size:15px; line-height:1.4em; vertical-align:top; ) #nav1 ul li a( display:block; width:auto; height:57px; box-sizing:border-box; padding: 18px 20px 0px 20px; font-size:15px; color:#ffffff; ) #nav1 ul li a:hover( background:#11476C; text-decoration:none; )
A horizontal WordPress menu that stretches across the entire width of the block.
This is what the menu looks like in the browser:
The CSS code must be copied into your theme in style.css. The Html code can also be copied to the desired place in the theme, usually it is header.php + you will need to adjust the CSS styles a little so that the menu looks the way you need on the site.
How to add a menu template in wordpress
I hope you copied the CSS and HTML into your template. Now we need to adjust our code.
1) Open the place where the menu is located and instead
- home
- About Us
- Reviews
- News
- Articles
- Question answer
- Contacts
We put the following WordPress function call:
"menu1", "container"=>false, "depth"=>"1", "echo"=>"1")); ?>
As a result, we will get something like this:
Pay attention to the name “menu1”, with exactly this identifier we must reserve space for the menu.
"container"=>false – we say that we do not need to wrap our menu in a container.
"depth"=>"1" – displays only 1 menu level
"echo"=>"1" – the menu template is displayed immediately. If you specify 0, you can get the menu into a variable.
2) We open the functions.php file of your template and register our menu there, but first it’s worth checking if the function register_nav_menus already in use. To do this, use the search Ctrl+F. If there is still no such function, add the following code:
"Menu top"); ?>
As you understand, “menu1” is the name of the identifier; if you rename it here, you will need to rename it in the previous function.
WordPress add menu in admin area
3)
We go to the admin panel of the site, now we need to create and add a menu in WordPress. You need to go to this address your_site/wp-admin/nav-menus.php 
And we create a new menu. I called it “Top”, click create like on my skin:
Now you have a window in which you can add menu items. Let’s look at the skin below, I added a couple of pages, and also selected the checkbox opposite “Menu top”, and this, as we remember, is our “menu1”. 
4) Save the menu and see the result. If you did everything correctly, you should have a fully working WordPress horizontal menu.
Problems with WordPress menu
In version WordPress 4.4, terrible problems with the menu began, namely:
- There are no spaces between menu items;
- the menu does not stretch across the entire width of the block;
- Separators are added incorrectly.
In general, in the new version, the developers drove a little and decided to correct the menu template, as a result of which on the Internet you can increasingly find queries “Wordpress 4.4 menu does not work”, “problems with the Wordpress menu”.
Now I will show you the code that solves this problem:
It should be written at the very end of your theme's functions.php file. Using this simple code, you can return the correct operation of the menu.
That's all for me. In this lesson, I told you how easy it is to add a horizontal menu in WordPress, and also provided the code for creating a WordPress menu template.
I advise you to read the article, and I will also be grateful if you click on the share button
