How To Add A Cool Header Navigation Menu In P2 Theme Of Your WordPress Blog ?

P2 is a group blog theme for short update messages, inspired by Twitter only for WordPress users. It doesn’t give you a header navigation by default but if you like adding a cool minimalist header navigation menu the you can do it very easily. Just follow simple steps mentioned here.

Following image shows how your navigation will look like after following given steps. You can easily change its look by editing CSS.

Step-1

Open your P2 theme’s function.php file location in your theme’s main folder.

Step-2

Add the following code for registering navigation menu:

function register_my_menus() {
register_nav_menus(
array(
‘header-menu’ => __( ‘Header Menu’ ),
‘extra-menu’ => __( ‘Extra Menu’ )
)
);
}
add_action( ‘init’, ‘register_my_menus’ );

Step-3

Now for displaying them on your P2 theme, open your header.php file and add the following code wherever you like to display you navigation menu:

<div id=”page” class=”clearfix”>
<header id=”branding”>
<nav id=”main-menu” class=”clearfix”>
<?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?>
</nav>
</div>

TIP: It looks cool in my site, I added it just before </div><div id=”wrapper”>

Step-4

Open your P2 theme’s style.css file and add the following CSS,

TIP: You may edit it as per your like. This is the CSS I was using in my site, you may remove lines that you don’t need in your site.

/** — Navigations — **/
#branding #main-menu {
margin-right: 0em;
margin-top: 0.6em;
max-width: 70%;
float:right;
word-wrap: break-word;
}

#branding #main-menu ul li {
float: left;
list-style: none;
position: relative;
}
#branding #main-menu ul li a {
display: block;
font-size: 1.1em;
color:#FFF!important;
background-color:#017de0;
margin-left: 0.5em;
margin-bottom: 0.8em;
padding: 0.5em;
}
#branding #main-menu ul li:first-child a {
margin-left: 0em;
}
#branding #main-menu ul li ul li:first-child a {
margin-left: 0.3em;
}
#branding #main-menu ul li a:hover {
color:#FFF!important;
background-color:#444!important;
text-decoration: none;
}
#branding #main-menu ul ul {
display: none;
float: left;
position: absolute;
top: 3em;
left: 0.3em;
z-index: 500;
background-color:#FFF;
}
#branding #main-menu ul ul ul {
left: 100%;
top: 0;
}
#branding #main-menu ul ul li a, #branding #main-menu ul ul ul li a {
font-size: 0.9em;
color:#000!important;
background-color:#FFF!important;
width: 9em;
height: auto;
text-transform: none;
padding:0.2em 0.2em 0.2em 0.5em;
border: none;
margin: 0.2em 0 0.3em 0.2em;
}
#branding #main-menu ul li:hover > ul {
display: block;
}
#branding #main-menu ul ul a:hover, #branding #main-menu ul ul ul a:hover {
color:#017de0;
background-color: #EEE!important;
}

How It Works ?

First thing I have done is I registered navigation menu on theme’s function file because that is must for adding navigation to any WordPress theme.

Secondly, You need to show your navigation menu in your theme’s header file. So the code I added in header file contains div ID and Class tags, well these are used (in simple language) for connecting your header navigation to CSS style so that you can give your own looks etc.

And other than div tags I used this code <?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?> which is the main line that displays your header navigation.