how to put the logo in the center of other items in the navigation bar

by

You have lots of options. I mean it could be achieved with just css. Most people spend too much time trying to make wordpress more complex when it’s suppose to simplify things for us. Odds are when you’re done you’ll realize you could have done things in 1/10th the amount of time by just using html.

The simplest option is to just create two menus left and right and then add an image in between:

<nav id="primary-navigation" class="site-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'left', 'menu_class' => 'nav-menu' ) ); ?>
<a itemprop="url" href="http://www.example.com/" title="My Company"><img src="http://www.example.com" alt="My cool company" /></a>
<?php wp_nav_menu( array( 'theme_location' => 'right', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

Or even cooler, add an uploader to your theme customizer to do it right from the frontend.

Menu (probably located header.php) :

    <nav id="primary-navigation" class="site-navigation" role="navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'left', 'menu_class' => 'nav-menu' ) ); ?>
<?php if ( get_theme_mod( 'mytheme_logo' ) ) : ?>
        <a href="https://wordpress.stackexchange.com/questions/148956/<?php echo esc_url( home_url("https://wordpress.stackexchange.com/" ) ); ?>' title="<?php echo esc_attr( get_bloginfo( "name', 'display' ) ); ?>' rel="home"><img src="<?php echo esc_url( get_theme_mod( "mytheme_logo' ) ); ?>' alt="<?php echo esc_attr( get_bloginfo( "name', 'display' ) ); ?>'></a>
<?php else : ?>
    <hgroup>
        <h1 class="site-title"><a href="https://wordpress.stackexchange.com/questions/148956/<?php echo esc_url( home_url("https://wordpress.stackexchange.com/" ) ); ?>' title="<?php echo esc_attr( get_bloginfo( "name', 'display' ) ); ?>' rel="home"><?php bloginfo( 'name' ); ?></a></h1>
        <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    </hgroup>
<?php endif; ?>
    <?php wp_nav_menu( array( 'theme_location' => 'right', 'menu_class' => 'nav-menu' ) ); ?>
    </nav>

Then add this to your functions.php :

function themeslug_theme_customizer( $wp_customize ) {

$wp_customize->add_setting( 'mytheme_logo' );

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'mytheme_logo', array(
    'label'    => 'Logo',
    'section'  => 'mytheme_logo_section',
    'settings' => 'mytheme_logo',
) ) );
}
add_action('customize_register', 'themeslug_theme_customizer');

Don’t complicate things when you don’t need too.

Walkers can make things more complicated if you ask me because they override one another and with all the cool plugins that change the menus functionality none of them work together.

However, if you don’t care about that just download a plugin that already does what you want :

http://wordpress.org/plugins/menu-image/
http://wordpress.org/plugins/nav-menu-images/screenshots/

Persoally, I think shortcodes are the way to go when it comes to menus. You can pretty much do anything you want with them and not waste days extending walker class.

How do you do this?
Pick the fields that you want shortcodes applied to first. Here’s a “walker” filter for the description field. Odds are you don’t use that anyway. Might as well make it useful.

Add this to you’re functions.php:

function shortcode_menu_description( $item_output, $item ) {
    if ( !empty($item->description)) {
         $output = do_shortcode($item->description);  
         if ( $output != $item->description )
               $item_output = $output;   
        }
    return $item_output;
}
add_filter("walker_nav_menu_start_el", "shortcode_menu_description" , 10 , 2);

You can now put shortcodes in your description filed and it will output them in your menu. It also shouldn’t affect your theme if you do have description support.

How do you add image shortcodes?
https://wordpress.org/plugins/stag-custom-sidebars/

Lets you create unlimited sidebars that aren’t assigned anywhere. Add a text widget to a new created sidebar and just add:

<a itemprop="url" href="http://www.example.com/" title="My Company
Lawyers, Chicago"><img src="http://www.example.com" alt="My cool company" /></a>

These are also some great shortcode additions that both will let you add shortcodes. I’ve found this to be the most consistent way to build complex wordpress menus because it adds endless options by using widgets/content/images/icons/etc. to menus and doesn’t disable any functionality of the menu. Note that if you do add a shortcode to the description field it obviously wont output the normal title field in that one specific menu list item.

http://wordpress.org/plugins/widget-or-sidebar-per-shortcode/

http://wordpress.org/support/view/plugin-reviews/custom-content-shortcode

Leave a Comment