Wordpres Theme Development – Lesson 2

Navigation menu to your WordPress theme

Now if you want to add a navigation menu on your website then there is a basic primary function i.e wp_nav_menu();

Here this is that how can we use this function.

Explanation: There is no full code of header.php, we have included the wp_nav_menu() in header area so we use only the header HTML code of header.php in above example.

Same like above we can use the same function into the footer.php file.

Now by performing the above task, you will show you menu items on your web page.

Header Output:

Navigation menu to WordPress theme

Footer output:

Navigation menu to WordPress theme

Here you will show all the pages which you have created yet. If you want to customize this predefine menu function so the good news is, of course, you can.

 

Let’s start with a little customization of the above menu function.

Again in the header file, we will use the same function again but with a parameter this time. Forget the last code which we created for the menu.

The same thing we will repeat for footer.php

Now we have done with both of the header and footer files for their menu but wait this is not enough. In the last step, we will register this created menu with WordPress by using the functions.php file.

Now that’s it. You can create the menu for your header and footer location separately from your admin area now.

Note: If you have completed the above task then we would recommend to you. Please test the menu yourself by creating more options into primary and footer menu both.

Adding style to menus

The created menu looks very old fashioned and boring. Now we added some styles into it.

Explanation:

.site-header                                                                             : Created bottom border with thickness of 2 px
.site-footer                                                                               : Created the bottom border with thickness of 2px
.site-nav ul                                                                              : Set padding and margin 0
.site-nav ul:before, .site-nav ul:after                          : Display into the tabular format
.site-header nav ul li a:link,

.site-header nav ul li a:visited                                       : Display  as a block element also set border and padding.
.site-header nav ul li a:hover                                         : Also we added background color in hover effect

Now our menu will be looks like:

What will we have to do if we want to make some difference into our all pages instead of index.php.

Our intention to make index.php (Homepage) should be with a different layout with others. So for this task, we have to make another PHP page manually and that is-

Page.php

Now we paste all the code from index.php to our newly created PHP file page.php with some little differences.

If you get noticed, so we remove hyperlink from the title tag and also added a class i.e page with replacing of the post and added a new piece of code into the style.css.

Now, this is our sample page will be looked after the little effects.


Navigation menu to WordPress theme That’s it for this lesson. Hope it will worth you. Take a rest of today and then go for the next lesson.