Frank Schulte-Ladbeck

Altering Your Sidebar

August 18th, 2009 | Author: Frank Schulte-Ladbeck

An out of the box free theme will not have all of the elements that you may want, or set up for your business’ needs. Adding elements is quite simple, and the sidebar may be your first stop.

Before I understood the code, I was able to change the order of widgets and elements in my sidebar. You can look at the code to see patterns, and by keeping those patterns, you can make your changes. The simplest change involves the order of the items in a sidebar, or eliminating an element, like a blogroll. Understanding some basics of code will make this process faster, and you may find that your sidebars can become effective in your marketing.

The Basics

In your WordPress theme, you will find a file called “sidebar.php”. You can edit this file in WordPress through the Editor found under the Appearance section. Feeling more adventurous? Use Notepad or Notepad++ to edit these files when not logged onto the internet. If you have more than one sidebar, you will see sidebar1.php, sidebar2.php, and so on.

When you open this file, you will be greeted with <div id=”sidebar”>. This bit of code sets up everything following as part of the sidebar. The code <div> and </div> create a section (division) of your site- one opens the section and the next one closes it. Anything that you put into those tags will go into the sidebar.

Here is where you need to pay attention. Let me give two examples that define the same element in two different themes.

Example 1

<ul>

<?php wp_list_bookmarks(‘title_before=<h3>&title_after=</h3>&category_before=&category_after=’); ?>

</ul>

</li>

Example 2

<div>

<?php _e(‘Links:’, ‘kubrick’); ?>

</div>

</div>

<ul>

<?php wp_list_bookmarks(‘title_li=&categorize=0′); ?>

</ul>

</div>

Both pieces of code do the same thing, list the sites listed in your blogroll. They both tell the browser how these bookmarks will be displayed. Obviously, one bit of code is much shorter.

Let us take example 1 apart. The first tag that opens this element is <li>. Think of this as setting up a section within the larger section established by the <div> tag. Inside the <li> tag, you see attributes that define what this section includes. In this case, we find that the section is for the links. We then find a tag <ul>. This indicates that what comes next is an unordered list. If it was an ordered list, the tag would be <ol>. Your list is unordered, because you will be adding to it from your WordPress administration panel. All of these bits of code were HTML. Now we come to our first bit of code in php. Within the parentheses that start with ?php, we see a command that asks the server to find the list of blogroll links. Then within another set of parentheses, we see a command that tells the browser that these links will be placed under a header with the a title “Links” inside a tag <h3>. The <h3> tag tells the browser that this is a header of size 3. Size 1 being the largest header, down to size 6, the smallest. We then find the closing tags for this section. A closing tag uses the / mark inside the <> before the type of tag, li or ul.

Why is example 2 so complex? Well, the code was generated to create a specific look for a box surrounding the blogroll, and the elements inside that box. It has a lot of <div> tags. Just because we set up the sidebar with a <div> tag does not mean we cannot use them again. If you look inside all of these tags, you will recognize that the command telling the server to list the bookmarks is in the middle, and it is place within a unordered list. However, the code inside this command does not tell the server to create a header. It does tell the sever how they will be presented in that list. If you look, you will find the header mentioned in this command <?php _e(‘Links:’, ‘kubrick’); ?>. You will see that there are no <h3> tags, or any other <h> tags. In this case, the header is placed into a header image defined in the stylesheet. Getting back to this command; it simply tells the server to tell the browser that the title of this section is Links.

When looking at your own theme, look for those basic elements to find what is included to make one of your sidebar elements. You will be looking for <li> and <ul> tags, and you may need to look for <div> tags, but check for the repeating pattern.

Switching the Order

To move the order of the elements, you can open your editor to cut and paste theme in the order that you want. You have to save the file to implement those changes. Why would you want to switch elements? Maybe you would want to emphasize your links, but you want search to be down on the bottom of the sidebar. If the links are to your other business sites, you may want a visitor to go to those sites, so by bringing them up, a visitor is more likely to see them. Maybe they would only need to search, after they looked at those sites.

Adding an Element

What is important to you? Most WordPress themes have a blogroll. These are great ways to share your links with readers, but if you are a business, maybe you do not want to send your visitors to other sites, or you do not have other sites that you want to link. On my home inspection blog, I came to the conclusion that the blogroll was ineffective. On my site, visitors were quite likely to click on a link inside a post, but very rarely clicked on a link in the blogroll, even when I suggested that they do so. In fact, the only links visitors typically clicked on in my blogroll was to my other sites, and not to the other businesses that I was linking. I also so no reason for the Archives, because I found other ways for the user to navigate my site. There were other elements that I wanted. Here is a list of common elements found in a sidebar, but not necessarily in all free themes.

<?php wp_dropdown_pages(); ?> this lists the pages of your site in a drop down list. For example, if you have special pages attached to your About page, the About page would show up on the browser, while the special pages show up when it si clicked.

<?php wp_list_bookmarks(); ?> the links or blogroll

<?php wp_dropdown_categories(); ?> these are the categories for the articles on your site, listed by main categories, and subcategories when come in a dropdown list.

<?php wp_get_archives(); ?> This lists the archives, so posts can be accessed by date published.

<?php get_calendar(); ?> places a calendar in your sidebar

<?php wp_tag_cloud(”); ?> You will probably write down keywords as tags for your posts to help with SEO, but tags also help related pages plug ins find common topic posts, and tags are a great way for a user to search your site. This command produces a tag cloud (a list of tags) used on your site.

<?php wp_dropdown_users(); ?> This lets your site become a little more social by listing the users of the site.

<?php wp_list_comments(); ?> Want visitors to see the latest comments, then use this command. If you do not have many comments, you may not want this one.

Note: for any command that uses a dropdown in it, you will need to follow the following form in your sidebar to make it work:

<h2>Users:</h2>

<form action=”<?php bloginfo(‘url’); ?>” method=”get”>

<?php wp_dropdown_users(); ?>

</form>

</li>

I am going to deal with advertising and adding social media elements in your sidebars in different posts. I do want to mention one element that does not call upon the server or produce some standard blog/site feature. If you go to my home inspection site, you will see that the first element is a mission statement with my phone number. On this site, the mission statement with phone number are in the header. This statement is a good marketing tool. By having a mission statement, I let my readers know at a glance what my site is concerning. By including my phone number, I give a way for people to contact me quickly. You will find that not all users will go to your form or send you an email, so make your phone number easy to find on any page. Here is how to set up this element:

<li>

<h2>Title if you want one</h2>

<p> Mission statement or other info</p>

</li>

Here we have a title tag <h2> which stands out. You may not want it, or you may want to make it smaller with <h3>. We then have a tag that defines a paragraph of text, <p>. We then close these tags.

Alright, this post is becoming to long, but I hope this gives you a good overview of how to start changing your theme.

Tags: altering a theme, sidebar, sidebar codes |

No Comments »