So I’m using WordPress for the first time and I’m quickly learning that it’s neat and fun to play around with. The documentation seems good and the code easy to work with. I’m going to be tracking all the changes I make to the default installation of version 2.6.3 for reference. I may need this information later or someone else might find helpful.
So far I am using the default theme. I’m sure I’ll eventually change it but for now I’m just trying to understand how things are structured and how to tweak elements on screen. The WordPress Function Reference page was a great place to start. My first goal was to figure out how to get my sidebar to display a list of projects and topics. In the admin, I created a root level category called ‘Topics’ and another one called ‘Projects’. Then I created a few other categories that were under either topics or projects such as ‘Flash’, ‘Cars’, ‘PHP’.
I was trying to make my side bar look something like this:
- Flash
- PHP
- General
- QAlias
- Car
Unfortunately, once I reloaded my page I didn’t get these results. Instead, I had a root level element titled ‘Categories’ and the links under it were my sub topics. After talking to Moses, he explained the concept of widgets and I guess currently the default theme is using a categories widget that isn’t doing what I need it to do. So, I went back to the admin, clicked on ‘Design’, finally on ‘Widgets’. On the right side of the page, it showed I was using a ‘Categories’ widget so I removed it since I didn’t see any options to modify it from here to do what I wanted. I think this would be the right time to mention I like coding so I (depending on time constraints and the project) rather figure things out myself than to ask and/or find a guide online. it makes things more fun – ok, back to the topic.
After removing the ‘Category’ widget I had to modify the ‘sidebar.php’ file located at ‘wordpress root/wp-content/themes/default/’ to add my ‘Topics’ and ‘Projects’ lists. I opened the file and looked over it to see what it’s doing. It’s pretty much just one big <ul> with a bunch of checks to see what needs to be displayed. I went to the bottom of the file to add my two new <li>’s in there. Using the functions reference list, I found a function called ‘wp_list_categories‘. By using the ‘child_of’ parameter, I was able to get a list of all the sub topics for a particular topic. My code looked something like this:
<!-- topic -->
<li>
<h2>Topics</h2>
<ul><?php wp_list_categories('orderby=name&show_count=1&use_desc_for_title=0&child_of=1&title_li='); ?>
</ul>
</li>
<!-- project -->
<li>
<h2>Projects</h2>
<ul>
<?php wp_list_categories('orderby=name&show_count=1&use_desc_for_title=0&child_of=2&title_li='); ?>
</ul>
</li>
To get the id value for the ‘child_of’ parameter, I just went to the admin and clicked on ‘Manage’ and ‘Categories’. Then you can move the mouse over the categories and in the status bar of your browser see if the cat_id for each category. After a bit of researched, I found out that if you pass ‘title_li=’ with no value, the function won’t return a ‘Category’ title attached to the list of sub topics. Before this, the list returned by the ‘wp_list_categories’ function was ‘Categories->Flash/PHP/Other’. With ‘title_li=’ the return value is just the sub topics ‘Flash/PHP/Other’.
After hitting reload on my browser, my sidebar was displaying correctly but something was bothering me. I was hard coding the title of the categories and I didn’t like that. As you can see the code above, the <h2>’s have the names of the categories hard coded. This to me is a big no no so I did some browsing around the list of functions in WordPress and found ‘get_cat_name(id)’. Now I’m using this function and passing the correct id’s and I’m feeling better about the end result. Final code is:
<!-- topic -->
<li>
<h2><?php print get_cat_name(1); ?></h2>
<ul>
<?php wp_list_categories('orderby=name&show_count=1&use_desc_for_title=0&child_of=1&title_li='); ?>
</ul>
</li>
<!-- project -->
<li>
<h2><?php print get_cat_name(2); ?></h2>
<ul>
<?php wp_list_categories('orderby=name&show_count=1&use_desc_for_title=0&child_of=2&title_li='); ?>
</ul>
</li>