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.