EN VI

add a checkbox for menu items in wordpress?

How to add a checkbox for menu items in wordpress

I need to add a checkbox for menu items from Appearance -> Menus -> Menu structure -> Item. If the checkbox is checked, the target="_blank" attribute is added to the a tag.

I want something like this screenshot:

Can you tell me if this is possible? And can you help me with this?

Thanks!

EDIT:

This is a rendering of the menu in my case:

<?php wp_nav_menu([
   'theme_location' => 'primary',
   'container'      => '',
   'walker'         => new description_walker(),
]); ?>

class description_walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0)
    {
        $title = trim($item->title);
        $classes = (!empty($item->classes)) ? implode(" ", $item->classes) : '';
        $button = (!empty($item->classes) && in_array('menu-item-has-children',
                $item->classes)) ? '<span class="button-show">+</span>' : '';    
        $output .= "<li class='" . $classes . "'>";
        $output .= '<a href="' . $item->url . '">';
        $output .= $title;
        $output .= '</a>';
        $output .= $button;
    }
}

Solution:

You can show this option from the "Screen Options"

And then you have it

Edit: So I see that you are using a custom walker for your navigation - new description_walker()

In the code of this custom walker, you should usually have something like

$attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
$attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
$attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
$attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';

Those are attributes based on selected options from the admin panel, for example the checkbox that you are referring to.

And then, those attributes are being attached to the link like that

<a' . $attributes . '>

This is the default way of having that functionality in a custom walker. You can check this example https://github.com/sarn1/example-wordpress-menu-walker/blob/master/wp_bootstrap_navwalker.php or search for another one that adds attributes to the link based on selected choices from the admin panel. They will be mostly the same, just with a different coding style.

Edit: Here is your complete code

<?php wp_nav_menu([
   'theme_location' => 'primary',
   'container'      => '',
   'walker'         => new description_walker(),
]); ?>

class description_walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0)
    {
        $title = trim($item->title);
        $attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
        $attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
        $attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
        $attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
        $classes = (!empty($item->classes)) ? implode(" ", $item->classes) : '';
        $button = (!empty($item->classes) && in_array('menu-item-has-children',
                $item->classes)) ? '<span class="button-show">+</span>' : '';    
        $output .= "<li class='" . $classes . "'>";
        $output .= '<a' . $attributes . '>';
        $output .= $title;
        $output .= '</a>';
        $output .= $button;
    }
}