Automatically Hierarchic Categories in Menu - WP Plugin
How to automatically add hierarchic categories in WordPress Navigation Menus ?
You can use this WordPress plugin:
Automatically Hierarchic Categories in Menu - WordPress Plugin
This plugin works with most of WordPress themes. Sometimes you have to use some extra parameters. Here is informations and examples.
Some themes using custom html and css rules, like OceanWP, Kadence, Neve ...
First release is not supporting them, but new versions will. Keep watching.
Parameter Default Description taxonomy category taxonomy type exclude false exclude taxonomy id(s) level 2 hierarchy max level prnt_tag ul parent tag, dom name prnt_cls sub-menu parent tag, class chld_tag li child tag, dom name chld_cls menu-item child tag, class chld_chc menu-item-has-children child tag, has children class chld_cid false add id to class a_cls false default link class subi_bfr false sub item, before for has children item subi_aft false sub item, after has children item nline "\n" new line linkget false extra get parameter after link hide_empty 1 hide categories with empty items
Note: For WooCommerce product categories set 'taxonomy' to 'product_cat':
[autocategorymenu taxonomy="product_cat"]
Shortcode Helper
Your shortcode:[autocategorymenu]
Reset
| Menu items: | |
| Exclude item id(s): | |
| Maximum hierarchy level: | |
| Extra get parameter after link: |
[autocategorymenu]
1 - Twenty Twenty-One
<ul id="primary-menu-list" class="menu-wrapper">
<li id="menu-item-16006" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16006"><a href="#">Lost password</a></li>
<li id="menu-item-16004" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-16004"><a href="#">Account</a>
<button class="sub-menu-toggle" aria-expanded="false" onClick="twentytwentyoneExpandSubMenu(this)"><span class="icon-plus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" fill="currentColor"/></svg></span><span class="icon-minus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 11h12v2H6z" fill="currentColor"/></svg></span><span class="screen-reader-text">Open menu</span></button>
<ul class="sub-menu">
<li id="menu-item-16003" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16003"><a href="#">Address</a></li>
<li id="menu-item-16001" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-16001"><a href="#">Orders</a>
<ul class="sub-menu">
<li id="menu-item-16002" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16002"><a href="#">Downloads</a></li>
</ul>
</li>
<li id="menu-item-16005" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16005"><a href="#">Logout</a></li>
</ul>
</li>
</ul>
level : 2
chld_cls : menu-item menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children
chld_chc : menu-item-has-children
subi_aft : <button class="sub-menu-toggle" aria-expanded="false" onClick="twentytwentyoneExpandSubMenu(this)"><span class="icon-plus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" fill="currentColor"/></svg></span><span class="icon-minus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 11h12v2H6z" fill="currentColor"/></svg></span><span class="screen-reader-text">Open menu</span></button>
Shortcode :
[autocategorymenu hide_empty="0" level="2" chld_cls="menu-item menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children" chld_chc="menu-item-has-children" subi_aft='<button class="sub-menu-toggle" aria-expanded="false" onClick="twentytwentyoneExpandSubMenu(this)"><span class="icon-plus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" fill="currentColor"/></svg></span><span class="icon-minus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 11h12v2H6z" fill="currentColor"/></svg></span><span class="screen-reader-text">Open menu</span></button>']
2 - Twenty Twenty
<ul class="primary-menu reset-list-style">
<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#">Bulk 0</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8">
<a href="#">Bulk 1</a>
<span class="icon"></span>
<ul class="sub-menu">
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Bulk 1 . 1</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="#">Bulk 1 . 2</a></li>
</ul>
</li>
</ul>
subi_aft : <span class="icon"></span>
Shortcode :
[autocategorymenu hide_empty="0" level="3" subi_aft='<span class="icon"></span>']
3 - Twenty Nineteen
<div class="menu-main-menu-auto-container">
<ul id="menu-main-menu-auto" class="main-menu" tabindex="0">
<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#">Bulk 0</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8">
<a href="#" aria-haspopup="true" aria-expanded="false">Bulk 1</a>
<span class="submenu-expand" tabindex="-1">
<svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path><path fill="none" d="M0 0h24v24H0V0z"></path></svg>
</span>
<ul class="sub-menu">
<li id="menu-item--1" class="mobile-parent-nav-menu-item menu-item--1"><span class="menu-item-link-return" tabindex="-1"><svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>Bulk 1</span></li>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Bulk 1 . 1</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="#">Bulk 1 . 2</a></li>
</ul>
</li>
</ul>
</div>
subi_aft : <span class="submenu-expand" tabindex="-1"><svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path><path fill="none" d="M0 0h24v24H0V0z"></path></svg></span>
Shortcode :
[autocategorymenu hide_empty="0" subi_aft='<span class="submenu-expand" tabindex="-1"><svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path><path fill="none" d="M0 0h24v24H0V0z"></path></svg></span>']
4 - Astra
<ul id="ast-hf-menu-1" class="main-header-menu ast-nav-menu ast-flex submenu-with-border astra-menu-animation-fade stack-on-mobile">
<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#" class="menu-link">Bulk 0</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8"><a href="#" class="menu-link">Bulk 1</a><button class="ast-menu-toggle" aria-expanded="false"><span class="screen-reader-text">Menu Toggle</span></button>
<ul class="sub-menu">
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#" class="menu-link">Bulk 1 . 1</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10"><a href="#" class="menu-link">Bulk 1 . 2</a><button class="ast-menu-toggle" aria-expanded="false"><span class="screen-reader-text">Menu Toggle</span></button>
<ul class="sub-menu">
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="#" class="menu-link">xx</a></li>
</ul>
</li>
</ul>
</li>
</ul>
a_cls : menu-link
level : 3
Shortcode :
[autocategorymenu hide_empty="0" level="3" a_cls="menu-link"]
5 - PopularFX
<ul id="primary-menu" class="menu">
<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#">Bulk 0</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8"><a href="#">Bulk 1</a>
<ul class="sub-menu">
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Bulk 1 . 1</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10"><a href="#">Bulk 1 . 2</a>
<ul class="sub-menu">
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="#">xx</a></li>
</ul>
</li>
</ul>
</li>
</ul>
level : 3
Shortcode :
[autocategorymenu hide_empty="0" level="3"]
Hi. Love this plugin, I have been looking for something like this for ages. I am just having a little problem with it though - my categories are for a custom post type which has its own url, plus each category has its own category base set in the permalinks (which I can't remove). The plugin seems to simply go to the base URL and the category slug, ignoring the inbetween bits! Is there any way to fix this?
ReplyDeleteThanks
Hi.
DeleteWhich shortcode did you use?
How was a link in the menu created?
What is the link in the menu supposed to be?
Hello hello, Usually specific “menu-item-…” is added as id + class to the li elements with normal WordPress menus. When using your plugin those classes, ids are not added to li‘s which makes it hard to hide certain entries etc.
ReplyDeleteI only get this:
li class="menu-item " or this:
li class="menu-item menu-item-has-children"
but no specific classes.
I’m running “Hello” theme.
Any ideas? Thanks!
Hi, I updated the "Development Version". So please update plugin manual and add chld_cid="true" parameter to your shortcode. Let me know if you have any other issues.
DeleteI'm not totally sure where to download it. Could you send me a link to the zip? Thanks a lot!
DeleteScroll down on the plugin’s page and click on the "Advanced View".
DeleteScroll to the bottom of the page and you will see an option to download previous versions of the plugin. Select "Development Version" option and click "Download" button.
Perfect. Now it's working. Thanks for taking your time. Really appreciated!
DeleteHave fun 😉
DeletePlugin is awesome! I have 1,300 product categories on a website we are building and this really helped organize much easier.
ReplyDeleteBut, it just stopped working. It was working, and then stopped and now just displays the shortcode as text instead of the drop downs.
Here is website: https://everybodyuniforms.com/
The Theme is Divi which is so widely used I figured we would be okay. And it was working, then stopped. so, confused.
Ideas to solve?
Thanks.
DeleteCan you share your installed theme and plugin details with me?
Tools \ Site health \ Info
Thank you for the positive opinion.
DeleteIf the shortcode appears as plain text, it's because of a plugin or theme. Read the documentation of the theme/plugin you are using and see how the shortcode is used. This plugin works the same as before.
Hi, please is there possibility to show menu collapse? I am using Woodmart theme, and I need automatically added Product categories. Everything works, but I need only to show main category, and when hover on it, then shoe subcategory. Now its everything under main category as list. Thank you.
ReplyDeleteHello,
DeleteCan you share the working demo link of the result you want to have?
Hello hello, could you imagine adding a "category image to nav items" funtionality. I'm using it for a "fake" polylanguage page and want to add language flags to my parent language categories. Thanks for your work. The plugin is really great! Cheers
ReplyDeleteI guess category images can be used with or without names. I will keep this in mind. I can work on it later.
DeleteThank you for your praise.
Hello! Thank you for this great plugin!
ReplyDeleteI'm using TheGem theme and WooCommerce, and I have many product categories. I want to have in the main menu a "Product categories" button and when the mouse is on this button to collapse with all product categories. The problem is that for now my menu contains buttons with all categories, but the "Product categories" button is missing. Otherwords, the button label is missing, but I have a lot of buttons with the categories.
I used this shortcode: [autocategorymenu taxonomy="product_cat"]
Could you please to advise me?
Thanks. Is there a demo address where I can see it working?
DeleteI cannot provide you a link to my working site because it is local, but you can see the menu of the theme here: https://preview.themeforest.net/item/thegem-creative-multipurpose-highperformance-wordpress-theme/full_screen_preview/16061685
DeleteI need a "Product categories" button and when hover on it, then show all categories.
Try this:
Deletehttps://tncyazilim.com/temp/iccWhh9AzH.png
You can use tastewp.com for tests.
Hi. What parameter I need if I want to specify category name to display all posts under that category not all categories.
ReplyDeleteWhat I understand is this: In the menu; Under the category, you want the posts included in that category. For example:
Delete- Colors (Cat.)
-- Red (Post)
-- Green (Post)
-- Blue (Post)
Sorry, this Plugin doesn't work that way. All of the menu items are categories. Maybe it will be possible to add this feature later.
Great plugin! I am having trouble though with a custom post type taxonomy: [autocategorymenu taxonomy="case_studies_category"]. The url comes out without the base of the custom taxonomy. I would expect the link url to be ".../case_studies_category/something/" but it is giving ".../something/" and those links give a 404 without the taxonomy base. Am I missing something? Thank you!
ReplyDeleteThank you for the positive opinion.
DeletePlease, can you try with "Development Version". So please update plugin manual. I explained how to do it above.
How can i add some levels in hierarchy? I have about 3 subcategories like "doors > small doors > handle. Now i've set 10 levels and it shows only subcategories
ReplyDeleteUse the "level" parameter. The default value is 2. In this way, you only see the root and its first sub-branch elements. How many level branches do you want to use, assign this value. For example:[... level="3" ...]
Deleteadd class with current menu should be there
ReplyDelete