Nav menu custom html:

admin管理员组

文章数量:1022743

I've been looking to the answers on this site, but they lack information on what files to edit and/or the path to them, and where or how you activate and can see the changes.

For example, this question:

Edit html for menu items in default frontend menu

or this:

I want to add my custom html items in the nav menu, and I guess that I have to add my code, in this case copied from the questions and answers provided here, to functions.php, but I can't see any change anywhere.

As an example, if I want to add an item to de nav menu like the code below (taken from one of the question I posted):

add_filter('wp_nav_menu_items', 'wps_add_login_logout_link', 10, 2);
function wps_add_login_logout_link($items, $args) {
    $login = __('Sign in');
    $logout = __('Sign out');


    $menu_id = '15';
    $menu_id2 = '16'; 

    if ( ! is_user_logged_in() )
        $link = '<a href="' . site_url('log-in-log-out')  . '">' . $login . '</a>';
    else
        $link = '<a href="' . wp_logout_url('log-in-log-out') . '">' . $logout . '</a>';

    if ( $args->menu == $menu_id )
        $items .= '<li>'. $link .'</li>';
    elseif ( $args->menu == $menu_id2 )
        $items .= '<li>'. $link .'</li>';

    return $items;
}

• Which file should I add this?

• Once added, where can I see the changes made effect?

Thanks for your patience.

I've been looking to the answers on this site, but they lack information on what files to edit and/or the path to them, and where or how you activate and can see the changes.

For example, this question:

Edit html for menu items in default frontend menu

or this:

https://wordpress.stackexchange/a/64034/166781

I want to add my custom html items in the nav menu, and I guess that I have to add my code, in this case copied from the questions and answers provided here, to functions.php, but I can't see any change anywhere.

As an example, if I want to add an item to de nav menu like the code below (taken from one of the question I posted):

add_filter('wp_nav_menu_items', 'wps_add_login_logout_link', 10, 2);
function wps_add_login_logout_link($items, $args) {
    $login = __('Sign in');
    $logout = __('Sign out');


    $menu_id = '15';
    $menu_id2 = '16'; 

    if ( ! is_user_logged_in() )
        $link = '<a href="' . site_url('log-in-log-out')  . '">' . $login . '</a>';
    else
        $link = '<a href="' . wp_logout_url('log-in-log-out') . '">' . $logout . '</a>';

    if ( $args->menu == $menu_id )
        $items .= '<li>'. $link .'</li>';
    elseif ( $args->menu == $menu_id2 )
        $items .= '<li>'. $link .'</li>';

    return $items;
}

• Which file should I add this?

• Once added, where can I see the changes made effect?

Thanks for your patience.

• menus
• html

Share Improve this question edited Apr 25, 2019 at 22:34 schrodingerscatcuriosity asked Apr 25, 2019 at 19:42 schrodingerscatcuriosityschrodingerscatcuriosity 10155 bronze badges 2

• @RiddleMeThis Sorry, I didn't add code because it's more about the procedure of adding an item, and what files youneed to edit, that code itself. I can add the example code of one of the questions I posted as example. – schrodingerscatcuriosity Commented Apr 25, 2019 at 22:30
• 2 "what files to edit and/or the path to them" Answers don't explain this because the it's never specific to the answer. Code for actions/filters need to go in your theme or a plugin. See the Developer Handbook for how to code with WordPress. – Jacob Peattie Commented Apr 26, 2019 at 8:33

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

WordPress themes can be set up in many different ways, which is both a blessing (you can do things however you like) and a curse (there's not always a single file you need to look at to make a particular change).

You're on the right track, looking into the theme. What you'll need to do first is to create a child theme. That way, when you update your theme, your edits won't be overwritten.

Once you have a child theme, you'll want to look in the parent theme to find out how they are calling the particular nav menu you want to modify. Many themes use more than one menu, so you need to isolate that one. Then, look and see how it is called. You will see something like this:

<?php wp_nav_menu(
    // everything inside this array will vary, depending on your theme
    array(
        'menu' => 'topnav'
        'walker' => new custom_walker()
    )
); ?>

What you want to find out is whether there is a "walker" in the array. (There is above.) If there is, you're in for more complexity, as your theme (now the "parent" theme) is already using a custom walker that builds different HTML than WP Core does by default. You'll then need to search through your parent theme's files. Most often the walker class is inside functions.php but not always. Find that class, then copy it into your child theme's functions.php and then change the name of the class.

Or, if the nav menu you want to affect doesn't use a walker at all, go into your child theme's functions.php and create a walker.

In either case, you now need to look into what it takes to create a walker. Look for examples online and start very simple, and then as you run into questions you can check back here with a new question.

One last note - if you're doing something like top navigation and you have a static set of pages to include there, along with your custom HTML, it might be a lot simpler to just not use a WP nav menu. You can use other functions like wp_list_pages() to list all the Pages, or even hard-code, depending on your needs and how willing you are to maintain the code.

I've been looking to the answers on this site, but they lack information on what files to edit and/or the path to them, and where or how you activate and can see the changes.

For example, this question:

Edit html for menu items in default frontend menu

or this:

I want to add my custom html items in the nav menu, and I guess that I have to add my code, in this case copied from the questions and answers provided here, to functions.php, but I can't see any change anywhere.

As an example, if I want to add an item to de nav menu like the code below (taken from one of the question I posted):

add_filter('wp_nav_menu_items', 'wps_add_login_logout_link', 10, 2);
function wps_add_login_logout_link($items, $args) {
    $login = __('Sign in');
    $logout = __('Sign out');


    $menu_id = '15';
    $menu_id2 = '16'; 

    if ( ! is_user_logged_in() )
        $link = '<a href="' . site_url('log-in-log-out')  . '">' . $login . '</a>';
    else
        $link = '<a href="' . wp_logout_url('log-in-log-out') . '">' . $logout . '</a>';

    if ( $args->menu == $menu_id )
        $items .= '<li>'. $link .'</li>';
    elseif ( $args->menu == $menu_id2 )
        $items .= '<li>'. $link .'</li>';

    return $items;
}

• Which file should I add this?

• Once added, where can I see the changes made effect?

Thanks for your patience.

I've been looking to the answers on this site, but they lack information on what files to edit and/or the path to them, and where or how you activate and can see the changes.

For example, this question:

Edit html for menu items in default frontend menu

or this:

https://wordpress.stackexchange/a/64034/166781

I want to add my custom html items in the nav menu, and I guess that I have to add my code, in this case copied from the questions and answers provided here, to functions.php, but I can't see any change anywhere.

As an example, if I want to add an item to de nav menu like the code below (taken from one of the question I posted):

add_filter('wp_nav_menu_items', 'wps_add_login_logout_link', 10, 2);
function wps_add_login_logout_link($items, $args) {
    $login = __('Sign in');
    $logout = __('Sign out');


    $menu_id = '15';
    $menu_id2 = '16'; 

    if ( ! is_user_logged_in() )
        $link = '<a href="' . site_url('log-in-log-out')  . '">' . $login . '</a>';
    else
        $link = '<a href="' . wp_logout_url('log-in-log-out') . '">' . $logout . '</a>';

    if ( $args->menu == $menu_id )
        $items .= '<li>'. $link .'</li>';
    elseif ( $args->menu == $menu_id2 )
        $items .= '<li>'. $link .'</li>';

    return $items;
}

• Which file should I add this?

• Once added, where can I see the changes made effect?

Thanks for your patience.

• menus
• html

Share Improve this question edited Apr 25, 2019 at 22:34 schrodingerscatcuriosity asked Apr 25, 2019 at 19:42 schrodingerscatcuriosityschrodingerscatcuriosity 10155 bronze badges 2

• @RiddleMeThis Sorry, I didn't add code because it's more about the procedure of adding an item, and what files youneed to edit, that code itself. I can add the example code of one of the questions I posted as example. – schrodingerscatcuriosity Commented Apr 25, 2019 at 22:30
• 2 "what files to edit and/or the path to them" Answers don't explain this because the it's never specific to the answer. Code for actions/filters need to go in your theme or a plugin. See the Developer Handbook for how to code with WordPress. – Jacob Peattie Commented Apr 26, 2019 at 8:33

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

WordPress themes can be set up in many different ways, which is both a blessing (you can do things however you like) and a curse (there's not always a single file you need to look at to make a particular change).

You're on the right track, looking into the theme. What you'll need to do first is to create a child theme. That way, when you update your theme, your edits won't be overwritten.

Once you have a child theme, you'll want to look in the parent theme to find out how they are calling the particular nav menu you want to modify. Many themes use more than one menu, so you need to isolate that one. Then, look and see how it is called. You will see something like this:

<?php wp_nav_menu(
    // everything inside this array will vary, depending on your theme
    array(
        'menu' => 'topnav'
        'walker' => new custom_walker()
    )
); ?>

What you want to find out is whether there is a "walker" in the array. (There is above.) If there is, you're in for more complexity, as your theme (now the "parent" theme) is already using a custom walker that builds different HTML than WP Core does by default. You'll then need to search through your parent theme's files. Most often the walker class is inside functions.php but not always. Find that class, then copy it into your child theme's functions.php and then change the name of the class.

Or, if the nav menu you want to affect doesn't use a walker at all, go into your child theme's functions.php and create a walker.

In either case, you now need to look into what it takes to create a walker. Look for examples online and start very simple, and then as you run into questions you can check back here with a new question.

One last note - if you're doing something like top navigation and you have a static set of pages to include there, along with your custom HTML, it might be a lot simpler to just not use a WP nav menu. You can use other functions like wp_list_pages() to list all the Pages, or even hard-code, depending on your needs and how willing you are to maintain the code.

本文标签： Nav menu custom html