আগামী ২৩ অক্টোবর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML,CSS,Bootstrap,PHP,MySQl, AJAX and JQUERY কোর্সের ৮৬ তম ব্যাচ। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722817591, Email : [email protected] কোর্সের সিলেবাস এর জন্য এখানে ক্লিক করুন ।

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.
One comment on “WordPress Theme Development: Logo, Search and Navigation Menu (Lesson-4)

Leave a Reply

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