WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Customize the nav menu items by Adding specific (8 posts)

  1. la_chouette
    Member
    Posted 1 year ago #

    Hello,

    i want to display my menu exactly like this with WordPress wp_nav_menu

    <nav class="main">
        <a href="/" class="home">
            <span class="logo"></span>
            <span class="company-name">My Company</span>
            <span class="page-name">Home</span>
        </a>
        <a href="one-page">One page</a>
        <a href="two-page" class="selected-current">Two page</a>
        <a href="three-page">Three page</a>
        <a href="about">About</a>
        <div class="account">
            <a href="login" class="login">Login</a>
        </div>
    </nav>

    I can not customize the first part of my menu as follows:

    <a href="/" class="home">
        <span class="logo"></span>
        <span class="company-name">My Company</span>
        <span class="page-name">Home</span>
    </a>

    and add a style (class = "current-selected") to the menu item corresponding to the current page.

    For this I proceed in this way:

    /theme/function.php

    <?php
    // Adding Log in/out links to a Specific WordPress Menu
    add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
    function add_loginout_link( $items, $args ) {
        if (is_user_logged_in() && $args->theme_location == 'primary') {
            $items .= '<div class="account"><a href="'. wp_logout_url() .'" class="login">Logout</a></div>';
        }
        elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
            $items .= '<div class="account"><a href="'. site_url('wp-login.php') .'" class="login">Login</a></div>';
        }
        return $items;
    }

    /theme/header.php

    <nav class="main"><?php
    $menuParameters = array(
      'theme_location' => 'primary',
      'fallback_cb'     => 'starkers_menu',
      'container'       => false,
      'echo'            => false,
      'items_wrap'      => '%3$s',
      'depth'           => 0,
    );
    echo strip_tags(wp_nav_menu( $menuParameters ), '<a><div>' );
    ?></nav>

    Thank you in advance for your help.

    cordially

  2. Marventus
    Member
    Posted 1 year ago #

    Hi.
    Inserting your site logo inside your <nav> tag is big "No no!" in HTML5 from a semantics standpoint (AFAIK). What I would suggest is separating your logo from your nav and wrap them in the same container.
    As to your menu per se, I found a thread in these forums that deals with your same question. The OP went for a custom nav walker, which is what I think you might want to do if you want more flexibility customizing wp_nav_menu() output.
    Cheers!

  3. la_chouette
    Member
    Posted 1 year ago #

    Hello,

    Thank you for your answer.

    As I said earlier, I need the menu to be essential as well. (for a specific purpose)

    I have not found an answer in the post you quoted ...

    cordially

  4. Marventus
    Member
    Posted 1 year ago #

    The user in question made it work using a custom nav walker as suggested in my previous reply. Here is a nice tutorial about them.
    So, to put evth together:

    1. Your logo:

    <div id="logo">
        <a href="/" class="home">
            <span class="logo"></span>
            <span class="company-name">My Company</span>
            <span class="page-name">Home</span>
        </a>
    </div>

    It should should sit outside of your <nav> tag and both logo and nav elements be wrapped inside a containing div.

    2. Your menu:
    Create a custom nav walker in your theme's functions.php file and make sure you move the menu item classes (that WP adds to your <li> items by default) to your <a> tags.

    3. Create your menu from the Admin panel:
    You have to go to Appearance --> Menus. If you can't add a login/out item to your menu, you would have to drop the code below inside your functions.php file before the last ?> symbol. If you are using a child theme or have a specific user-functions.php file, drop it in your child theme's functions.php file or main theme's user-functions.php file respectively:

    function userf_add_login_item ($items) {
        // Define Login link
        $loginout = wp_loginout( $_SERVER['REQUEST_URI'], false );
        // Add login link to menu
        $items .= $loginout;
        return $items;
    }
    add_filter('wp_nav_menu_first_items', 'userf_add_login_item');

    Make sure you replace first with your menu location in the hook name, wp_nav_menu_first_items. In your case, it is likely to be main, so that last line should read:

    add_filter('wp_nav_menu_main_items', 'userf_add_login_item');

    Up to that point, if you did everything right, your HTML should look like this:

    <div class="head-container">
    	<div id="logo">
    	    <a href="/" class="home">
    	        <span class="logo"></span>
    	        <span class="company-name">My Company</span>
    	        <span class="page-name">Home</span>
    	    </a>
    	</div>
    	<nav class="main">
    	    <a href="one-page" class="WP-classes">One page</a>
    	    <a href="two-page" class="WP-classes">Two page</a>
    	    <a href="three-page" class="WP-classes">Three page</a>
    	    <a href="about" class="WP-classes">About</a>
                <a href="login" class="WP-classes">Login</a>
    	</nav>
    </div>

    wp-classes are the classes that WP adds to your menu items dynamically (including a specific one for your current menu item).

    4. Add some JS:
    In order for your login menu item to be wrapped inside a <div> tag and have the class login assigned to it, you are going to need some Javascript. Drop this code in your theme's main JS file.

    jQuery(document).ready(function() {
    jQuery("nav.main a:last").addClass("login").wrap('<div class="account" />');

    That's about it. LMK if you havee any doubts.

  5. la_chouette
    Member
    Posted 1 year ago #

    Hello,

    Thank you for your help Marventus

    I absolutely need to keep the logo in the tag <nav>, I seek a way to customize only the first menu item and then add a class to the element that the page is active.

    Sorry for my bad english, I try to be as specific as possible.

    cordially

  6. Marventus
    Member
    Posted 1 year ago #

    Hi.
    In that case, you would skip step 1. and in step 2. also add the logo link (<a href="/" class="home">) to the menu. That way, your HTML code at the end of step 3. should look like this:

    <nav class="main">
        <a href="/" class="WP-classes"></a>
        <a href="one-page" class="WP-classes">One page</a>
        <a href="two-page" class="WP-classes">Two page</a>
        <a href="three-page" class="WP-classes">Three page</a>
        <a href="about" class="WP-classes">About</a>
        <a href="login" class="WP-classes">Login</a>
    </nav>

    Then, in step 4., you can add some more JS code to customize your link item. Then, assuming your logo link comes in first and your login link last, the revised JS code for that step would be:

    jQuery(document).ready(function() {
        jQuery("nav.main a:last").addClass("login").wrap('<div class="account" />');
        var logoHTML = '<span class="logo"></span><span class="company-name">Your Company</span><span class="page-name">Home</span>';
        jQuery("nav.main a:first").addClass("home").append(logoHTML);
    });
  7. la_chouette
    Member
    Posted 1 year ago #

    Thank you for your help Marventus.

  8. Marventus
    Member
    Posted 1 year ago #

    No pb. Let me know if you need further indications or assistance.
    Good luck!

Topic Closed

This topic has been closed to new replies.

About this Topic