How to Customize your WordPress Sidebar

WordPress

The sidebar is one of the best things about the WordPress content management system and allows you to add widgets that can help improve the functionality and usability of your website as well as giving you the chance to make the features on your site unique. Adding widgets to the sidebar is a simple task and something that we have talked about in the past, so today we are going to look at more advanced ways to customize the sidebar by adding navigation, Meta data, nestled links and images.

Adding navigation

Navigation is a big part of WordPress – and any other website for that matter – and helps users find their way around the site with minimum fuss. There are three navigation options in WordPress: Pages, Archives and Categories; you can add one or all three to your site by editing the sidebar.php file of your theme.

To do this (after logging in to your dashboard) go to Appearance > Editor. In Editor, scroll down until you find the Sidebar option.

Open the sidebar.php file and, under the following line of code:

<div id= "secondary" class= "widget area" role= "complimentary">

Enter appropriate code for your chosen navigation:

Pages: <?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>

Archives: <?php _e('Archives:'); ?> <ul> <?php wp_get_archives('type=monthly'); ?> </ul>

Categories: <?php _e('Categories:'); ?> <ul> <?php wp_list_cats(); ?> </ul>

Click on Update file to confirm the change.

Adding Meta data

The sidebar, while more commonly used for navigation purposes, can also be used to input Meta data, for example a short paragraph about the site. To do this, simply follow the instructions above to access the sidebar.php file and under the following line of code:

<div id= "secondary" class= "widget area" role= "complimentary">

Enter the following:

<p class="aboutsite">This is my website. I hope you like what you see and find the content useful.</p>

Obviously, you’ll want to change the text to something that’s appropriate. Click on Update file to save the change.

Adding nestled links

In the default WordPress themes and some third-part themes, sidebars include nestled links to present information, which look something like this:

  • Vehicles
    • Cars
    • Motorcycles

You can use the sidebar.php file to add some nestled links of your own. Once again, under:

<div id= "secondary" class= "widget area" role= "complimentary">

Enter the following code:

<ul style="list-style-type: disc;">

<li>Vehicles

<ul style="margin-left: .5em;">

<li>Cars</li>

<li>Motorcycles</li>

</ul></li></ul>

Input a nestled link topic that suits your website and click on Update file.

Adding image links

Finally, let’s look at how to add image links to the sidebar, so that your site displays an image, maybe something like a company logo.

You know the sidebar.php file process by now, so we’ll skip that and tell you that you simply need to enter the following code in the appropriate place:

<a href="http://xml.com"

title="My website log">

<img src="http://mywebsite.com/mywebsitelogo.jpg"

alt="Valid XHTML 1.0!" />

</a>

<br />

The “title” is the name of the saved picture and the <img> tag is the URL of the image on your site.

Click on Update file to confirm the change and see the image in your sidebar.

Share it!Share on FacebookTweet about this on TwitterShare on Google+Email this to someone

Our Recommended Wordpress Web Hosting Provider

WordPress

WHC.CA
Get a 50% Discount by using our link.

WHC.ca

Reliable host, with excellent customer service and an easy one-click Wordpress installation. Our recommendation to host a Wordpress blog.

Leave a Reply

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