Download the PHP package davidwebca/wordpress-menu-classes without Composer
On this page you can find all versions of the php package davidwebca/wordpress-menu-classes. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download davidwebca/wordpress-menu-classes
More information about davidwebca/wordpress-menu-classes
Files in davidwebca/wordpress-menu-classes
Package wordpress-menu-classes
Short Description Allow adding custom classes to WordPress menu ul, li, a and at different depths. Perfect for TailwindCSS and AlpineJS usage.
License MIT
Informations about the package wordpress-menu-classes
WordPress Menu Classes
Allow adding custom classes to WordPress li, a and submenus at different depths. Perfect for TailwindCSS and AlpineJS usage.
This package adds WordPress filters to allow custom arguments to wp_nav_menu to, in turn, allow custom classes to every element of a menu. You can apply a class only to certain depth of your menu as well.
This is probably as far as you can go without creating a custom nav walker which I've always hated to do.
Requirements
Installation
Install via Composer:
If your theme already uses composer, the filters will be automatically added thanks to the auto-loading and auto-instantiating class. Otherwise, if you're looking for a standalone file you want to add to your theme, either look for src/WordPressMenuClasses.php in this repository.
Instructions
The filters use the depth argument given by WordPress which is an index, thus starts with level 0 (zero).
Here's a list of the custom arguments you can pass to wp_nav_menu that are supported by this package :
- or or
-
or or
- Add any attribute or class to elements
- or or
-
or or
- Add any attribute or class to elements
- or
- or
- Add any attribute or class to submenu elements. Note that submenus do not support order.
Ex.: add a "text-black" class to all links and "text-blue" class only to 3rd level links
Ex.: Supports classes as array (this is non-native to WordPress, but provided by this package as a convenience)
Ex.: More complete example with some TailwindCSS classes and AlpineJS sugar. This is a fully functional accordion navigation without additional JavaScript (requires Alpine's x-collapse plugin).
Widgets menus
This package allows you to pass custom arguments to wp_nav_menu calls that are found in your theme, but what about that case where you want to use a menu inside a widget? Well, there's a WordPress filter for that!
Since the filters declared by this package work with any wp_nav_menu call, which the widgets do internally, we can simply add a filter per sidebar and declare how we'd like to style them here.
Known issues
If you're using TailwindCSS like I am, you'll encouter a weird limitation that is still being tracked by the WP internal team which doesn't allow you to specify some CSS spec allowable characters like the colon which is heavily used by Tailwind, but only inside the WordPress admin. In other words, they parse out special characters that shouldn't be removed when you enter classes in the multiple "classes" fields everywhere, such as in the Nav Menus.
Because of that, I've added a default replacement for triple underscores '___' to ':'. If you encounter some other limitaitons with different characters, I've provided a custom filter to add your own replacements in the form of preg_replace arguments.
Those are passed straight to preg_replace which accepts either an array or a string for either values. The classes that you add to your nav menus in the admin can now use Tailwind css classes like so : .
Bug Reports and contributions
All issues can be reported right here on github and I'll take a look at it. Make sure to give as many details as possible since I'm working full-time and will only look at them once in a while. Feel free to add the code yourself with a pull request.
License
This code is provided under the MIT License.