Alright, now you are in the 5th lesson of my ‘WordPress Development for noobs’ tutorial series. Am not repeating all regular openings, make sure you have understood all the previous lessons and localhost is running. This post is a continuation of the Episode 4, there we have leaned to make a header template with meta stuffs and Blog title. Today we will make the page navigation, and a search form.
Step 1: Step one of our tutorial will be same in most case 
- Start local server if it is not running.
- Open http://localhost/wordpress (local WP installation) in Web Browser.
- Open the theme folder ‘tutorial‘ in file manager (explorer :O )
- Open the header.php from the theme folder in intype (any Text Editor) .
Step 2: Now you must be waiting for me with header.php opened in your computer. Now your header.php may be similar to one we created last day. Now the Blog Title is too small right ? We need to make it a bit bigger, for that we can use xHTML tags like h1, h2, h3, h4, h5, h6. Here I am using h1 to give more focus. Add <h1></h1> to the starting and end of the code that we created last day. Like this:
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>Seen the change after refreshing the http://localhost/wordpress ? Next time you must do this by yourself, I will not say 
. Next we need to add a tag line below the Blog Title, The tag line are also called Blog Description. It can be edited from the Settings of the WordPress blog. Like we did to get the title, we can use same snippet with some modification to get the Blog Tag line printed. like this :
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a>Shall I hope that you have seen the change we made in the codes ? Yes bloginfo('name'); is modified to bloginfo('description'); Its so simple na ?
Step 4: Alright now we are about to add a navigation bar to the design, by adding the proper codes we will get the published pages listed in the top of the design after title and Tag line. For that below code snippet will help you.
<ul>
<li><a href="<?php bloginfo('url'); ?>"><span>Home</span></a></li>
<?php wp_list_pages('title_li='); ?>
</ul>for your better understanding of the above codes :
<ul></ul> : As you know, this XHTML tags are used to list the page title.
<li><a href="<?php bloginfo('url'); ?>"><span>Home</span></a></li> : We must place the link to Home page manually, in this tutorial !
<?php wp_list_pages('title_li='); ?> : This WordPress loop will vomit all the other pages.
Next we need a search form in the navigation bar. The following snippet will add search bar to the design, we need CSS to beautify it with the whole design, it will be don’t in future class.
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input value="To search, type and hit enter" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" type="text" class="search_box" name="s" id="s" />
</form>Understand the code
line 1: We starts the form with opening a new <form> tag. Here method attribute is defined as get, So it will get values from the field. Attribute action is pointed to the blogs url, the home page. so the content will be sent to the home page.
line 2 : With the <input> tag, we have opened a new field to take the user input. and I have included some tricks too. its in the value attribute. It is used to show some text in the input field which will be automatically hided when the user place cursor inside the field.
line 3 : With </form> we have made and end to the Search area.
To know more about the forms, read it in W3Schools. Refresh the http://localhost/wordpress to see the changes we made. ( I hope you know a bit of CSS and xHTML, else this TUT won’t help you, as I have said earlier I am not going to teach you the whole CSS and xHTML ! )