Add a Fully Functional Custom Meta Box to WordPress Navigat

Einfach Dinge, die nichts mit XAMPP, Apache Friends, Apache, MySQL, PHP und alle dem zu tun haben. Allerlei halt. ;)

Add a Fully Functional Custom Meta Box to WordPress Navigat

Postby unleash_it » 28. December 2019 10:36

How to Add a Fully Functional Custom Meta Box to WordPress Navigation Menus

inspired by John Morrisons ideas (cf https://johnmorrisonline.com/how-to-add ... ion-menus/ )

i tried to rework the idea of addding some menu-parts:

john writes:
Of course, this was before WordPress added menus, so I didn’t have much choice… but, now WITH WordPress’ menus, it seemed silly to create a redundant interface… especially when the WordPress menus handled all the things need to added a menu link in a much clear way than my original interface did. All that led me to figure out how to add my own meta box to the WordPress navigation menu interface with (important) the ability to add a custom link that contained certain parameters I needed in order to hijack the link’s display on the front-end.

Notice the CSS class. This was really the most important part because it’s what allows me to identify this link later and change it to a login link if the user is logged out and a logout link if the user is logged in.

Here’s a look at the code to make this happen:


and he continues

You hook into WordPress using the “add_nav_menu_meta_boxes” hook.
You call add_meta_box() in your callback function setting “nav-menus” as the $post_type parameter.
Finally, in your callback function for add_meta_box() you lay out your meta box HTML.
It’s that last part that can get tricky in order to make the adding of your custom link item to the nav menu… so, we’ll look at this more in-depth.

And, that’s it. Once you have that all set up. Your users will be able to add your custom link item from your custom meta box to any of their menus and it’ll have the information pre-loaded in it that you may need later on when displaying menus.
Later, I’ll write up a tutorial on how to hijack menu items when you display the menus, so you can alter your custom link as you need.



i followed the instruction and tried to create a mega menu walker.
but walkers completely escape my coding knowledge. I could really use some help getting it working.

the ideas:
Wrap the second-level <ul> in <section>.
When a user sets the class "break" on an <li> in the second level <ul>, make that <li> the start a new <ul>. If it's the first <li> in the list, don't do anything, to prevent the formation of empty unordered lists.
When a user sets the class "widget" on an <li> in the first level that has a sub <ul>, append a widget to the end of that <ul>.
Add class mega-menu-columns-# to first level <li> elements that contain drop downs with multiple columns and/or a widget. The # represents the number of <ul> elements, +1 for the widget if it exists.
I have a bit of code to do some of this, but not all of it. There are cut-out sections below:

Wrap second level <ul> in <section>:

i found some helping approach to look like so:

do the break and widget class counting within the wp_nav_menu_objects filter.
Here's an example, it's rather expanded because of the extra debug part:

https://wordpress.stackexchange.com/que ... enu-walker
Code: Select all

add_filter( 'wp_nav_menu_objects',
    function( $items, $args  ) {

        // Only apply this for the 'primary' menu:   
        if( 'primary' !== $args->theme_location )
            return $items;

        // Here "x_" means the latest root li (depth 0)
        static $x_pid           = 0;      // post ID of the latest root li (depth 0)
        static $x_key           = 0;      // array key of the latest root li (depth 0)
        static $x_cols          = 0;      // n breaks or widgets gives n+1 columns 
        static $x_has_dropdown  = false;  // if the latest root li (depth 0) has dropdown

        // Internals:
        $tmp            = array(); 
        $debug_string   = '';
        $show_debug     = true;  // Edit this to your needs:

        foreach( $items as $key => $item )
        {
            // Debug:
            $debug                              = array();
            $debug['ID']                        = $item->ID;
            $debug['title']                     = $item->title;
            $debug['key']                       = $key;
            $debug['x_key']                     = $x_key;
            $debug['depth']                     = '';
            $debug['menu_item_parent']          = $item->menu_item_parent;
            $debug['has_widget_class']          = 0;
            $debug['is_depth_1_first_child']    = 0;
            $debug['x_has_dropdown']            = 0;
            $debug['has_break_class']           = 0;
            $debug['x_cols_increase']           = 0;

            // Collect columns increaments:
            $inc = 0;

            // Depth 0:
            if( 0 == $item->menu_item_parent )
            {
                $debug['depth'] = 0;


well but walkers still exceed my coding knowledge - i guess that in need more in depth going help and tutorials

i will look after them and try to solve the issues. Finally i wll come back here and continue

regards
+many many thanks for this great place.
Interessen: Bikes & steel frames: Linux & SBC https://www.allaboutcircuits.com :: die neuen Knowledge-Base: AFFiNE: There can be more than Notion and Miro. auf affine.pro :: WordPress Entwicklung - sic: make.wordpress.org/core/
User avatar
unleash_it
 
Posts: 779
Joined: 10. December 2011 18:32
Operating System: linux opensuse 12.1

Return to Allerlei

Who is online

Users browsing this forum: No registered users and 40 guests