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. These areas of website creation are best left to the pros like the guys at Vision Smash, but it also pays to be familiar with the basics.
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.
An outstanding title can increase tweets, Facebook Likes, and visitor traffic by 50% or more. Check out online services from Tweak Your Biz title generator for more details.
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.
Finally I found a look of our website image below.
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. When you need button generator for web based tool and help web designer/programmer to generate CSS programs, visit www.lucidcrew.com and learn more. If you’re not into html codes and you really need help from SEO services for your web development, website maintenance, company identity and branding, internet marketing and search engine optimization, Click the Following Page of webdesign499
Hello, This is Rashad. I like programming.
very nice