how to I add <a> id in wordpress menu for dashboard?

Question

How do I covert this html menu in wordpress menu and how do I enable <a id=""> ?

Markup:

<ul>
    <li><a id="home" href="">???</a></li>
    <li><a id="description" href="">???</a></li>
    <li><a id="about" href="">?</a></li>
    <li><a id="shop" href="">????</a></li>
    <li><a id="blog" href="">???</a></li>
</ul>

I'm trying to make a default wordpress menu code in header.php

<?php

if (function_exists('wp_nav_menu')) {
    wp_nav_menu(array(
        'theme_location' =>  'wpj-main-menu', 
        'fallback_cb' => 'wpj_default_menu')
    );
}
else {
    wpj_default_menu();
}

?>

add_action('init', 'wpj_register_menu');

function wpj_register_menu() {
    if (function_exists('register_nav_menu')) {
        register_nav_menu( 'wpj-main-menu', __( 'Main Menu', 'brightpage' ) );
    }
}

function wpj_default_menu() {
    echo '<ul>';
    if ('page' != get_option('show_on_front')) {
        echo '<li><a href="'. home_url() . '/">Home</a></li>';
    }
    wp_list_pages('title_li=');
    echo '</ul>';
}

I also am trying to make echo '<li><a id="home" href="'. home_url() . '/">Home</a></li>';

But how I change those <a> id in dashboard?

Please help me. Thanks.

Answer 1

Instead of ids you can add Classes to each item.

In menus within Wordpress back end you can select screen options and check the tick box for css classes.

You will then be able to add a unique class name to each menu item.

Your classes will add to the LI elements and then select links by doing

.home a {}

.description a {}

.about a {}

.shop a {}

.blog a {}