Making a wordpress theme. Menus

Adding a menu for your site. WordPress uses a great menus option in your theme. And sincce i want to enable great features i started on this one.

To add a menu create a function in your functions.php

function dimme_kube_setup() {
  // This theme uses wp_nav_menu() in one location.
  register_nav_menu( 'primary', __( 'Navigation Menu', 'dimme-kube' ) );
add_action( 'after_setup_theme', 'dimme_kube_setup' );

Here we register the settings if the theme is set up. We will later be adding header, backgrounds text domains and such. But for now just the menu. We name it ‘primary’, for use in the header template, wich we will do now. In your header.php add:

<div class="nav-tabs">
  <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'dimme-kube' ); ?>"><?php _e( 'Skip to content', 'dimme-kube' ); ?></a>
  <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

The nav-tabs are a kube css class. For styling purposes, so useful. I had the screen-reader class from the wordpress themes and like to incorporate them. So i left those here. And now for the easy part, Add the wp_nav_menu in the header. Add a theme_location with the name we gave it earlier, ‘primary’.

This will load the default menu automatically crated by wordpress. But if you want to create a custom menu you can under the ‘apearances‘ -> ‘menus‘ tab in the admin. Great for creating custom order of pages or just adding a page with some categories you use in your blog or pages.

But, i use kube css framework and this uses a .active class in the menus for styling. WordPress gives the .current-menu-item to the parent li element. So i had to create a bit of custom css code couse i didn`t find a way to add a class to the link <a> element. You do have a way to add classes to your list items a filter ‘nav_menu_css_class‘ in wich you can check if you have the ‘current-menu-item’ class and add an ‘active’ when necessary.

So i added some rules of css instead.

.nav-tabs ul li.current-menu-item > a {
  background: #ddd;