meinterest

n this lesson I will continue working on sidebar and also I will talk about footer. The last thing we added last lesson is blogroll, today I will add search from and meta to the sidebar and how to widgetize it. Finally how to add a footer of the theme.

 

Here we go…

 

Step *1: open the usual (xampp control, your theme folder and index.php). now, I want to add search form to the sidebar but first we should create searchform.php file. So, open your editor notpad or whatever you want, add this code and save it as searchform.php in your folder theme.

<form method="get" action="<?php bloginfo('home'); ?>/">
<div>
<input value="<?php echo wp_specialchars($s, 1); ?>" size="15" /><br />
<input value="Search" />
</div>
</form>

this is the form tag in html, the only difference here that it allows searching within your blog. The (wp_specialchars) is a function used to process the search input with all single and double quotes safely encoded. And I put it in div tag so that I can style in later using CSS.

 

Step *2: add this code to your index.php, and you should add it between sidebar tags in the top of everything of your sidebar (between <ul> and <?php wp_list_pages(‘title_li=<h2>Pages</h2>’); ?>)and save.

<li id=”search”>
<?php include(TEMPLATEPATH . ‘/searchform.php’); ?>
</li>

<li id=”search”>..<li> this code starts a list item, I give it an id so that I can style it later using CSS.

 

<?php include(TEMPLATEPATH . ‘/searchform.php’); ?> this code is for calling searchform.php.

 

Step *3: now I will add the meta, meta is a part contains log in and register links.Type the following codes under the get_links_list() and save.

<li><h2><?php _e(’Meta’); ?></h2>
 <ul>
 <?php wp_register(); ?>
 <li><?php wp_loginout(); ?></li>
 <?php wp_meta(); ?>
 </ul>
 </li>

<li>…</li> adding another list item.

 

<h2><?php _e(’Meta’); ?></h2> typing the word meta.

 

<ul>…</ul> starting a new unordered list.

 

<?php wp_register(); ?> This function displays either the “Register” link to users that are not logged in or the “Site Admin” link if a user is logged in. and it generates its own set of <li> and </li>.

<li><?php wp_loginout(); ?></li> it displays a login link, or if a user is logged in, displays a logout link. it doesn’t generate its own list item tags. Therefore, I wrapped list item tags around it.

 

<?php wp_meta(); ?> it does nothing for now.

 

Step *4: now I will talk about widgets. So what is widgets? WordPress Widgets (WPW) is something like a plugin, but designed to provide a simple way to arrange the various elements of your sidebar content without having to change any code. First create functions.php file using notepad or any other editor, add the following code and save.

<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>

This file basically acts like a plugin.

 

Step *5: type this code within sidebar div in index.php file just after the first <ul> in sidebar and before <li>, and save.

<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>

This code is an (if statement) checking if the function exists or not

 

then type this just before the </ul> tag in the end or sidebar div tag.

<?php endif; ?>

ends of if statement.

 

Step *6: now, I will add the footer of the theme, add div tag for the footer after the sidebar div and save.

<div id=”footer”>
<p>
 Copyright are reserved &#169; 2007
 </p>
</div>

<div id=”footer”>…</div> div for footer to separate it from the sidebar and content.

 

<p>…</p> html tag used for add a paragraph.

 

Copyright are reserved &#169; 2007 just a text refers to the copyright and &#169; used to display @ sign.

 

Now, the whole code for sidebar and footer will be as followed:

<div class=”sidebar”>

<ul>
<pre><?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>

<li id=”search”>
<?php include(TEMPLATEPATH . ‘/searchform.php’); ?>
</li></pre>
<?php wp_list_pages(‘title_li=<h2>Pages</h2>’); ?>

<li>

<h2><?php _e(’Categories’); ?></h2>

<ul>
 <?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0?); ?>
 </ul>

</li>

<li><h2><?php _e(’Archives’); ?></h2>
 <ul>
 <?php wp_get_archives(’type=monthly’); ?>
 </ul>
 </li>

<?php get_links_list(); ?>

<li><h2><?php _e(’Meta’); ?></h2>
 <ul>
 <?php wp_register(); ?>
 <li><?php wp_loginout(); ?></li>
 <?php wp_meta(); ?>
 </ul>
 </li>

<?php endif; ?>

</ul>

</div>

<div id=”footer”>

<p>
 Copyright are reserved &#169; 2007
 </p>

</div>

Now we finished from sidebar and footer, next lesson I will talk about CSS and how can you styling your theme, seeya.

 
Important: I highly recommend you to rewrite all the single quotation ( ' ) and the double quotation ( " ) of the code, to make sure you won't get an error message.

Filed under: coding, design