Make your Own WordPress Theme – Part 5

You are reading Make your Own WordPress Theme – Part 5. To read other parts, click on the link below.

For sidebar, there are some WordPress tags that we can use here. For an example, to display the pages, categories, archives, etc.

First what we will do is to put unordered list to make it easier to manage our sidebar. Here what I mean.

In sidebar id, we put the <ul> and <li> like this.

<div id="sidebar">
<ul>
<li>
our sidebar content goes here
</li>
</ul>
</div> <!– close sidebar –>

Because we can use CSS, so it will be better if do like this.

<div id="sidebar">
<ul>
<li>

<h2>sidebar title</h2>
<ul>
<li>sidebar link1</li>
<li>sidebar link2</li>
<li>sidebar link3</li>
</ul>

</li>
</ul>
</div> <!– close sidebar –>

So we can make each section has their own title and content. For an example, we display our site categories like this.

<div id="sidebar">
<ul>
<li>

<h2>Categories</h2>
<ul><BR><?phpwp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>

</li>
</ul>
</div> <!– close sidebar –>

Some of you may noticed that I did not include <li> tag for the Category. This is because WordPress already list down the output in <li> and </li>. So we no need to put the <li>.

Some other WordPress tags that you can use in sidebar.php

<?php wp_get_archives(‘type=monthly’); ?>
– display Monthly Archives

<P><?phpwp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?>
– display our site categories

 

<?php get_links_list(); ?>
– list down our Blogroll

You can get more tags here, WordPress Template Tags .

Here is the sidebar code that I make that you can use in your sidebar.php

<div id="sidebar">
<ul>
<li>

<?phpwp_list_pages('sort_column=menu_order&title_li=<h2>Pages</h2>' ); ?>
<li>
<h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>

<li>
<h2>Categories</h2>
<ul><BR><?phpwp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</li>

</li>
</ul>
</div> <!– close sidebar –>

Next, Part 6 – Footer . [tags]diy, how to, skin, theme[/tags]

Comments

  1. mr magoo says:

    i am getting this error:

    Parse error: parse error, unexpected ‘=’ in sidebar.php on line 4

    what does that mean?

  2. Can you send me your sidebar.php file to my email?

  3. Yeah, same error as mr magoo. I’ll try finding the error. ;]

  4. Found it, was a typo.

    Needs to be:

  5. Marco Moura says:

    I’ve found it too (I don’t know why Xevo didn’t report it). Here it goes:

    In the line

    “<?phpwp_list_pages(’sort_column=menu_order&title_li=Pages’ ); ?>”

    put a space between ”<?php” and “wp_list_pages […]” so it gets like this:

    <?php wp_list_pages(’sort_column=menu_order&title_li=Pages’ ); ?>

    Nice tutorial dude
    😀

  6. hey men..where are the dynamic bar for drag and drop option for latest wordpress ?

    in this method as far as i know its old way, thats put the sidebar content manually…

    i have been read your tutorial from part 1, dont want dissapointed

    thanks

  7. It would be great if you could up date this to feature the newer widget style sidebar set up.

  8. mcm mane nak buat 2 side bar?