theme development - Create wordpress header with custom logo in between the menu splitting the menu into two equal parts

admin管理员组

文章数量:1277290

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 3 years ago.

Improve this question

I would like to Create A Wordpress header with {the_custom_logo();} custom logo in between the menu splitting the menu into two equal parts so that the logo is always aligned to the center of the page,where the number of menu items is not predetermined . Like shown bellow

,I'm looking for a solution that avoids creating two different menus because this is going to be part of a template with many select-able headers which only feature one menu and users are supposed to be able to switch between menu styles without having to change menu content , Please help with code examples,Code Examples will be most appreciated And more helpfull to me and future researchers!

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 3 years ago.

Improve this question

I would like to Create A Wordpress header with {the_custom_logo();} custom logo in between the menu splitting the menu into two equal parts so that the logo is always aligned to the center of the page,where the number of menu items is not predetermined . Like shown bellow

,I'm looking for a solution that avoids creating two different menus because this is going to be part of a template with many select-able headers which only feature one menu and users are supposed to be able to switch between menu styles without having to change menu content , Please help with code examples,Code Examples will be most appreciated And more helpfull to me and future researchers!

• theme-development
• menus
• headers
• theme-options
• walker

Share Improve this question edited Oct 7, 2021 at 12:22 Kevin Kenan asked Oct 7, 2021 at 9:30 Kevin KenanKevin Kenan 1577 bronze badges 5

• You'll probably have to copy & paste the menu code you're using into your plugin or theme and modify the loop there: I doubt this would be solvable with hooks. – Rup Commented Oct 7, 2021 at 11:19
• But unless someone's got some code lying around that already does this they're happy to post, I think you're going to have to write this yourself. – Rup Commented Oct 7, 2021 at 11:20
• @Rup Im not using any plugins and yes of course i need to write this myself but i dont know how – Kevin Kenan Commented Oct 7, 2021 at 12:15
• 1 Inspect the html and css on stmarytx.edu - either flexbox or grid can help you snap the logo to the middle when in html markup it's actually right before the one menu. – WebElaine Commented Oct 7, 2021 at 14:11
• @WebElaine thanks Im heading over to that website right now – Kevin Kenan Commented Oct 7, 2021 at 14:42

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

After some testing I found the best way is to use a walker.

For this example lets say that this is the code that calls our menu

wp_nav_menu([
    'container'        => false,
    'theme_location'   => 'right-side-top-menu',
    'walker'           => new Menu_Middle_Logo()
]);

Now for our walker, there isn't an easy way to determine which of the parent menu items is the middle one but this code should handle every top menu item scenario you have.

class Menu_Middle_Logo extends Walker_Nav_Menu {
    function end_el (&$output, $item, $depth = 0, $args = [], $id = 0) {
        parent::end_el($output, $item, $depth, $args, $id);
        
        // the menu slug
        $theme_location = 'right-side-top-menu';
        
        // check for top level depth and if correct menu
        if ($depth === 0 && isset($args->menu) && isset($args->menu->slug) && $args->menu->slug === $theme_location) {
            // get current menu items
            $menu_items = wp_get_nav_menu_items($theme_location);
            
            // will indicate how many top level menu items we have
            $parent_menu_items = [];
            
            // get top level menu items
            foreach ($menu_items as $menu_item) {
                if ($menu_item->menu_item_parent == 0) $parent_menu_items[] = $menu_item;
            }
            
            // get total menu items halved
            $half_menu_items = floor(count($parent_menu_items) / 2);
            
            // the menu item we want to add the logo to
            // before or after, depends if menu items are odd or even
            if (is_float($half_menu_items)) {
                // if you have odd menu items lets say three this will add after the first
                // [1] [custom html] [2] [3]
                // if you want it to add after the second remove the - 1, this will result in
                // [1] [2] [custom html] [3]
                $middle_item = $parent_menu_items[$half_menu_items - 1];
            } elseif (is_int($half_menu_items)) {
                // this handles even menu items
                $middle_item = $parent_menu_items[$half_menu_items - 1];
            }
            
            // if current menu item is middle item, add our custom html
            if (isset($middle_item) && $middle_item->ID === $item->ID) {
                $output .= '<li class="my-logo">';
                
                ob_start();
                the_custom_logo();
                // this is for testing because the_custom_logo()
                // is not available in my theme
                // echo 1234; 
                $output .= ob_get_clean();
                
                $output .= '</li>';
            }
        }
    }
}

Copy this walker code to your functions.php and it should work.
Dont forget to add the walker property in wp_nav_menu args.

本文标签：