WordPress Theme Development: Logo, Search and Navigation Menu (Lesson-4)

Hi, This is Rashad from w3Programmers. I am writing this series tutorial step by step process where users can easily take the process for own wordpress theme development. Today I pick up the logo, search form and navigation menu development.

In this tutorial I will use:

  • header.php
  • functions.php
  • style.css

In the previous lesson of this series, I build header part of the website. Now I am going to add a logo, a search bar and a navigation menu.

To register a menu, I code the below in our functions.php file:

<?php
add_theme_support( 'menus' );
// Create Nav Menu
if (function_exists ('register_nav_menus')) {
	register_nav_menus ( array( 'primary' => 'Header Navigation' ));
}
?>

Here I register only single menu. For example, to register more then one menu:

<?php
add_theme_support( 'menus' );
// Create Nav Menu
if (function_exists ('register_nav_menus')) {
	register_nav_menus ( array( 'primary' => 'Header Navigation' ));
        register_nav_menus ( array( 'top' => 'Top Navigation' ));
        register_nav_menus ( array( 'footer' => 'Footer Navigation' ));
}
?>

In the above function, you can create as many as menu in your wordpress website by this code register_nav_menus ( array( ‘name’ => ‘Name Navigation’ ));

After register a primary menu in our functions.php. I am going to display it from header.php and total header code below:

<!DOCTYPE html>
<html language="en">
    <head>
        <title>
            <?php
            wp_title('|', 'true', 'right');
            bloginfo('name');
            ?>
        </title>
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css">
        <?php
        wp_head();
        ?>
    </head>
    <body>
        <div id="container">
            <header id="header">
                <div class="logo">
                    <a href="<?php echo get_option('home'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" title="<?php bloginfo('title'); ?>" height="200" width="399"></a>
                </div>
                <div class="search">
                    <?php get_search_form(); ?>
                </div>
                <div class="clear"></div>
                <?php wp_nav_menu(array('theme_location' => 'primary', 'container_class' => 'w3-menu', 'container' => 'nav')); ?>
            </header>
//Don't get confused as some code is in our footer.php

Here I have create a container class id and header class id in our style.css file. Into the container and header id, I input a logo class and search class to display logo and search form. After clear both I got an array and call the register_nav_menus function from functions.php to display our primary menu form header.php.

As I am scratching the w3Programmers wordpress theme. I copy and modify some CSS from the current theme of w3Programmers. Below the CSS code from our style.css file:

/*
Theme Name: w3Programmers
Theme URI: N/A
Description: Most Popular Tutorial For World Wide Web Programmers
Author: Rashad
Author URI: http://itsrashad.info
Template: w3pro
Version: 1.0
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0 none;
    margin: 0;
    outline: 0 none;
    vertical-align: baseline;
}
body {
    background-color: #F1F1F1;
}
body, input, textarea {
    color: #373737;
    font: 300 15px/1.625 "Helvetica Neue",Helvetica,Arial,sans-serif;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
#container {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 1.9em auto;
    max-width: 1000px;
}
#header {
    border-top: 2px solid #BBBBBB;
    padding-bottom: 10px;
    position: relative;
    z-index: 9999;
}
.logo {
    float: left;
    margin-left: 76px;
}
.search {
    float: right;
}
#searchform {
    position: absolute;
    right: 7.6%;
    text-align: right;
    top: 3.8em;
}
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
}
#s {
    float: right;
    transition-duration: 400ms;
    transition-property: width, background;
    transition-timing-function: ease;
    width: 72px;
}
#s:focus {
    background-color: #f9f9f9;
    width: 196px;
}
input#s {
    background: url("images/search.png") no-repeat scroll 5px 6px rgba(0, 0, 0, 0);
    border-radius: 2px;
    font-size: 14px;
    height: 22px;
    line-height: 1.2em;
    padding: 4px 10px 4px 28px;
}
input[type="text"], input[type="password"], textarea {
    border: 1px solid #DDDDDD;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
    color: #888888;
}
#searchsubmit {
    display: none;
}
.clear {
    clear: both;
}

Now back to wordpress admin and setting the menu from the image below.
menu-settings

Finally I found a look of our website image below.
current-look-of-wordpress-theme-1

Today We have learn how to add logo, header search form and register menu in wordpress cms from w3Programmers theme development. In the coming tutorial, I will shout with how to drop-down and JQuery toggle navigation menu in our wordpress theme development series.

Hello, This is Rashad. I like programming.
Print Friendly

Leave a Reply

Your email address will not be published. Required fields are marked *

*