WP Theme Lesson #6: Sidebar
- Filed under: Tutorials
Have you been looking forward to the Sidebar? At first glance, the Sidebar looks difficult, but it isn’t tricky at all. Once you get used to its structure, you’ll be able to code and style it very quickly.
Before jumping on the Sidebar, here’s what your index.php file should look like.
Don’t forget to open Xampp Control…
Step 1: Let’s wrap a box with a class named, sidebar around everything in the Sidebar. Type this code under the container box and above the </body> tag:
<div class=”sidebar”>
</div>
Step 2: Start an unordered list within your new sidebar box.
<ul> - open unordered list
</ul> - close unordered list
Step 3: Add a list item (LI) inside the unordered list (UL) and put a sub-heading inside the list item (LI).
<li><h2><?php _e(’Categories’); ?></h2>
</li>
Notice the tab spacing added before the <li> and </li> tags for organization.
<li> - open list item
<h2> - open sub-heading
<?php _e(’Categories’); ?> - print the word Categories
</h2> - close sub-heading
</li> - close list item
Again, you don’t need to wrap <?php e(’ ‘); ?> around the word Categories. If you’re building this theme for yourself, it’s okay if your sub-heading is <h2>Categories</h2>
Save the index.php file and refresh your browser. You should see the Categories sub-heading structured like this:
The little bullet or dot before your sub-heading indicates that the sub-heading is sitting in a list item (LI). If you have two list items within your unordered list (UL), there should be two bullets. It’s like taking bulleted notes. Dot each item right?
Step 4:
Add the following codes within the list item:
<ul>
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′); ?>
</ul>
Here’s what that means:
<ul> - open another unordered list
<?php wp_list_cats(); ?> - call for the list of category links
</ul> - close unordered list
Save it and refresh the browser. Here’s what my category links look like:
Your default category is Uncategorized. If you did not publish under multiple categories, then your list of category links should have only one link, the Uncategorized.
Further explanations:
- sort_column=name - list category links alphabetically
- optioncount=1 - display the number of posts made under each category
- hierarchial=0 - don’t turn sub-categories into sub-list-items, which explains why my Sub Category link is listed in the first level of the list.
- & - each time you add on another attribute, you have to type & before it to separate it from the existing attributes. For example & sits in between sort_column and optioncount.
Why you didn’t wrap the <li> and </li> tags around <?php wp_list_cats(); ?>:
When you call for the category links list using wp_list_cats(), it automatically attaches a set of <li> and </li> (list item) tags around each link. Look at your browser, go to View > Page Source or Source; after the window pops up, scroll to the bottom to see the codes for the category links list; notice that each link has a set of list item tags around it.
When dealing with the sidebar, unordered list, and list items, it’s very important to remember:
Rule #1: Close everything in the order that you open them.
Follow this WordPress Theme Tutorial Series from the beginning.
The template that I use has the sidebar included in the main file - as we’re doing in this tutorial. But I see that most templates seem to use separate files for the sidebar. Are there advantages to this (as there are in using external CSS, for example)?
I’m really looking forward to this part of the course - I simply can’t use wp_list_cats without breaking my template, I’ve had to leave it with list_cats, so I hope I’ll be able to work out why at last!
Later on, we’ll give the sidebar its own file, sidebar.php. With the sidebar sitting in it’s own file, you’ll get to easily move it to wherever you want it to be.
oh yeah maybe, maybe you can teach me later how to locate sidebar in a bottom (like hemingway-style, or at the the top problogger.net )
nice tutorial
will this sidebar be widget enabled?
Yea, I’ll show you the regular sidebar first, then make it widget-ready. Sorry about that, I didn’t notice your comment on the comment list.
Ohh thats cool I realize your busy but I really want to learn how to widgetize. I was also wondering. From reading aorund from tutorial to other tutorial. They always talk about editing the httpd.conf file…..DO you suggest this? I believe to have perma link structures to work you are supposed to remove a # from one of the codes ie; #load etc.
I don’t understand httpd.conf. I never messed with it.
Is this for offline or online?
For some reason whenever I include the argument ’sort_column=name&optioncount=1&hierarchical=0′ inside the list cats function I get a parser error (unexpected “=”). With no argument it works fine, any idea what could be the cause?
Are you using list_cats or wp_list_cats? I’m not familiar with list_cats
Theme is really great. Maybe we could start something like a help place to share our problems and ideas how to make this and this.
I can make a forum topic for this on my forum.
If you want obviously.
joko,
Thanks for the suggestion, but Wpdesigner already have a forum set up for support:
http://www.wpdesigner.com/forums/
Im having the same problem as John W. I get error “Parse error: parse error, unexpected ‘=’ in C:\wamp\www\wp-content\themes\tutorial\index.php on line 57″. Line 57 happens to be
All works well until I add that line. Any suggestions? Thanks
Joe,
I can’t see codes you posted because it’s uncommented php.
Are you using list_cats or wp_list_cats?
You can show me the codes through the forums or send it to me through email.
wp_list_cats, just like you did in the example. It works fine without an argument, but when one is used that errors comes up.
That’s weird. I even copied and tested the codes you gave me. It works fine.
- What version of WordPress are you using?
- Send me a copy of your index.php file
WAIT
Did you remember to wrap the single quotes ” around:
sort_column=name&optioncount=1&hierarchical=0
?
That would explain why the equal sign is unexpected.
Just a though …
wasn’t the “container” div called “content” in lesson 5?
Yea, I thought so too. I typed container instead of content while coding. Took a screenshot of it and now container (instead of content) has to stay hahaha. D’oh!
I’m a wordpress n00b - is there any way to change the wp functions for things like categories and pages so that the formatting does NOT have to be done like theirs?
A la http://margaretmarcuson.com/blog - I already have ULs and LIs and I don’t want extra uls and lis making things all dippy and screwy - it should be changeable, no? I know it’s somewhere obvious that I just overlooked, I bet. :/
PS - I know I could hack (er.. style, yeah) around it, but this is one of those semi-pro bono jobs that I really can’t afford to spend much more time on. Any help or nudge in the right direction would be greatly appreciated
Yea, there is a way, but you’d have to do it link by link. It’ll take you much, much, much, MUCH, much longer to do it link by link.
Ah, that’s too bad. Client’s not knowledgable enough to be messing with all that stuff after I release everything to her. Well, thanks!
SP, my
wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′)
would only display one catergory even though il already have more than one.. pls help?
chris,
If you haven’t made posts under BOTH categories, only one will show.
How do I display the list in 2 columns? Say, I have 10 categories, displayed in 2 columns - 5 each.
Thanks!
Then, you’d have to make two sidebars and use the category function twice. Within each category function, you have to filter out five categories to display the remaining five categories for each column.
SP! Thanx Very much!!!
aww this one is finished, thought we would get through it all and puttint it on the side, time to keep on reading, thanks for the tuts again
When i press on a category i get a page with noting? he won’t open the messages in that catagory?
Please help?
(sorry for my bad englisch)
I don’t know what you’re problem is. Please post this on the forums and if you can, take a screenshot for me.
I had this error also “parser error (unexpected “=â€)”
this happens when u copy paste directly from this post, the sign( ‘ ),( `), and ( ’ ) that are used in this post are sometimes printed different in your editor, change it to ( ‘ ) to fixed the error.
Great post btw, thx, could u elaborate more function that are available in sidebar like recent comment or recent post?
Thank you for introducing the index.php file in the lesson so that we may check if everything is going well. You did a great job with this tutorial. I never taught I can learn HTML, CSS and PHP at the same time and so easy. May God bless and give you eternal life!
One more quesiton. I want to ask your permission to translate your tutorial in Romanian but also to use Bible examples through the lessons. Let me know what do you think about it.
You can summarize, then translate it, but don’t copy and paste the lessons because I’ve had that problem with others wanting to translate my tutorials.
Also, please don’t directly link to files hosted on this blog. Thanks Vasile.
Thank you very much! I will do it. First, I want to finish the tutorial. In 2 days I got to know a lot and I am exited about it. I want fist to finish learning on this tutorial, then do my own theme and only after that to translate the tutorial in Romanian. Thank you and may God bless you!
I got a question:
We gave the header’s div an id, and so did we for the content. But, why did we give the sidebar’s div a class instead of id?
Sometimes, you want to be able to duplicate the sidebar for another column, a three-column theme. If you want two sidebars without the hassle of styling for the second sidebar all over again, use class instead of id :).
Now I know! Thanks again
For some reason, when I added the php_e thing, it says this:
Fatal error: Call to undefined function php_e() in C:\xampplite\htdocs\wordpress\wp-content\themes\tutorial\index.php on line 70
I hope to someday offer free themes and stuff like that (since I am making this for my personal site, I just removed that declaration- was it called?) Anyways. Any idea why it says that?
It looks like the php and _e() weren’t separated.
how can I add a nofollow tag to the main list of category links
I need to this for site optimization reasons
Regards
I have no clue Bill.
[…] #5 The Loop #5b The Content #5c Postmetadata #5d Else, Post ID, Link Title #5e Posts Nav Link #6 Sidebar (and Categories) #6b Page-Link Listing (wp_list_pages) #6c Get Archives and Links #6d Search Form and Calendar #6e […]
Any chance of this series as a pdf or something?
*please*
Just asking, Nathan
Nathan - There’s an ebook version, but it shows you how to build a three column theme.
From looking through the code it seems wp_list_cats has been depreciated and replaced by wp_list_categories.
Yes and this tutorial series was written durring WP 2.0, not 2.1.
Hi Small Potato.
Can you show us later how to add a second column or third, and how we can position them in different parts of the theme? I know there are other tutorials out there, but they’re not as user or newbie friendly.
Omi
Hi,
I need my categories to be displayed in sidebar like this
Main Category 1
—-> Sub Category 1
—-> Sub Category 2
—-> Sub Category 3
Main Category 2
—-> Sub Category 1
—-> Sub Category 2
—-> Sub Category 3
Where to make changes????
well.. im up to this chapter so far and i found out that you released an ebook for better design using photoshop (optional) and coding. but in any case… i will continue this tutorial to understand better all of it before reading your ebook. thanks for the knowledge sharing.
Thanks so much for this awesome tutorial!
I got so frustrated when my page didnt validate.
i had a lot of errors including the quotation problem.
and since i was using your tutorial as a guide to create my own template i added a few unneccesary UL tags.
i had to go back and retrace my steps. Thanks again!
Hi!
I get the following error after adding the step 4 code: Parse error: syntax error, unexpected ‘=’ in E:\xampp\htdocs\mysite\wp-content\… on line 70
During step three i get question marks before and after “categories”, like this: �Categories�
Link to a print screen
I’m using the latest version of wordpress (2.3.1). Maybe that could be the reason of some problems?
Something haven’t been closed correctly. That’s what I’m assuming. 2.3.1 isn’t the problem.
Both problems are caused by not closing something correctly?
All I have to work with is your image. I can’t say for sure. Please use the support forums for help.
hi small potato. why do i get question marks around my categories?
i noticed that too on my URL for this:
<a href=â€â€>
oh! oh! i get it!
i copied and pasted the codes. that’s why the quotation marks are incorrect displaying the question marks.
well, let’s follow small potato’s instructions: type the codes!
Hi Small Potatoe,
this tutorial ist great! thank’s a lot for it.
One thing: I found this on Wordpress.org about wp_list_cats():
This template tag has been deprecated and is replaced by wp_list_categories() for WordPress 2.1
http://codex.wordpress.org/Template_Tags/wp_list_cats
A happy New Year
from good ol’ Germany
Frank
Ok so I’ve been going through the tutorial on windows vista, using the notepad and everything has been going well. A couple of times I got large black diamonds with white question marks in them, specifically when I entered
I changed the coding to unicode because ‘ isnt a ANSI coding and this has been getting all messed up, any suggestions?
Small Potato!
Thanks a bunch for your tutorial. Love it!
Everything’s been great up to Lesson 6, Step 4. Inserting the code
within the list item produces a Parse error in that specific line. I’ve checked/validated the whole document and all tags are closed.
What to do?
is it necessary to put the h2 tags inside the li? i mean, would it not be semantically more correct to have it before the ul?
nest it in LIs. that’s the structure of WordPress.
So I’m trying to follow your tutorial. So far everything worked great. I’m aware that some things might have changed with WP 2.3.3 (which I’m using) but this is what I get when using the php_e(’Categories’) funtion:
Fatal error: Call to undefined function php_e()
If I use just Categories it’s working fine. Could you tell my why this is not working for me?
Thx,
nick
Me again…one should read comments before posting…sorry for that.
The php end _e weren’t separated. It’s working and I’m going on with building my own theme. Great tutorial, thx!
I am asking this question about the header, not the sidebar. I would like to know about the code after (endif) function, that code for Not Found.
I think you told us that it would only show when there would be no posts. But in my case, its showing beneath every post. I am sure I am doing something wrong, I have checked everything on my part.
Now I need your help, could you please let me know about this.
I have written several other questions and some days has been passed but there is no reply. I hope everything is fine at your side.
Thank - you!
Sorry, Not Found comes only at the end of all the posts but still why does it shows. Is it ok?
It’s suppose to come before endif. For future support questions, please use the support forums.
SP…
done with your supremely laymans way of wp tutorial…its awesome dude!
im now in the process of creating horizontal navigation links after my header DIV…any suggestions on which would i use best? : (similar to your nav links above…HOME, THEMES CLUB, SUPPORT FORUMS etc)
1) pages - wp_list_pages
2) categories - wp_list_cats
or could you suggest another tutorial (besides wordpress’s) that teaches techniques in creating horizontal navbars?
tnx!
more power!
::nonoy::
You should learn how to create a horizontal menu with regular xhtml and css before trying to integrate the wp_list_pages function. Once you’re done, place the wp_list_pages function where you want the list to appear. CSS.MAXDESIGN.COM.AU is a very good tutorial site for what you’re looking for.
SP…
thanks for a speedy reply…maxdesign was a gem for me…thanks for sharing
at the most of my belief money isn’t the factor of selling this site…could be a time factor…
we can’t serve two Gods at the same time they say…well? good luck to whatever that is you’re into…
after all life is a journey not a destiny…and in case you wanna visit the Philippines just give me a ring or a beep
“madamo nga salamat!” ~ much thank you
stay cool
::nonoy::
hi i dont know if anyone mentioned this, but when you add the attributes to the list categories call, hierarchial is mispelled and also the single quotes surrounding the attributes are not actually single quotes, that is probably why people can’t just copy and paste that without their theme messing up. hope this clears some things up. thanks for the tutorial by the way, its great.
Is it normal for the sidebar to appear after each post or is it only supposed to occur once?
Awesome tutorial by the way!
You made a little syntax error I think.
* *
should be
* *
else it gives an error.
You made a little syntax error I think.
wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′);
should be
The ‘ has to be “. It was the equal sign who gave the error, so you should use “.
I agree to NoNoy J, If you wanna visit Philippines just give me a ring and i will show you the beauty of our country and hospitality of the Filipinos, I am very excited to finish this tutorial and make my own..
Daghang salamat sa imu insik….
Ok I am bit confused with an erro:
Fatal error: Call to undefined function php_e() in C:\xampplite\htdocs\wordpress\wp-content\themes\tutorial\index.php on line 66
I do not get this with any of the other times I am using Only when I use it in the sidebar class
What am I missing here?
thanks
R