Is it possible to add classes to list items in wp_nav_menu()?

Question

I am using

<?php
wp_nav_menu(
    array(
        'theme_location' => 'header-menu',
        'menu_class' => 'nav-bar',
        'container' => 'nav'
    )
);
?>

to output my navigation menu list. Currently they automatically get classes added to them like page-item-8, page-item-6. I work on a local machine and upload to my server. My problem is the page-item numbers are different and I can't select them properly. What I want to do is add a class home, shop, services, etc to the respective list item.

Is there a better way to do this.

Thanks in advance.

Answer 1

The simple way would to add the css class to the individual titles in the wp-admin/menus section.

First, go to the screen options and select the css checkbox:

Next, open the menu item and give it a class. In my example it would have the class .home-page:

Answer 2

Ok I just added to my functions.php file went to appearance menus, changed screen options to allow classes. Then Added a individual class for each one. Awesome!

<?php
function register_my_menus() {
  register_nav_menus(
    array('header-menu' => __( 'Header Menu' ) )
  );
}
add_action( 'init', 'register_my_menus' );
?>