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
I keep getting the error Parse error: syntax error, unexpected ‘=’ in C:\wamp\www\wordpress\wp-content\themes\tutorial\index.php on line 70 - can someone please help me with this? Otherwise, this has been a great tutorial, nice and easy to follow.
For people with issues regarding “” , looks like a typo as it should read “”
NOTE THE SPACE AFTER PHP AND BEFORE _E.
Hope it helps.
damn loks like the comments does not like php code. DUH! Let me try again!
For people with issues regarding “?php_e(’Categories’); ?” , looks like a typo as it should read “?php _e(’Categories’); ?”
NOTE THE SPACE AFTER PHP AND BEFORE _E.
Hope this helps, again….
Hi,
I’m having an odd problem with this part.
All I’m getting is a bullet point, not “Catagories” and even when
I added the PHP afterwards that didn’t do anything.
I’ve put my index.php and a quick screengrab of the prob
up on my server the link is http://www.deepdarknoise.net/smallpotato/
Send me an email if you can figure out the problem.
Thanks
Its fixed. Friend realised I hadn’t left a space between <?php + _e
Anyway don’t worry about it
there is a lot of error if i only copied from this website cause the (’ sign) change to (`sign) after i change the sign
zap ! success
Great tutorial so far!:) I am a complete beginner at all of this but understand and do everything as you tell and it’s going great so far..
The first thing to open is the , but the first thing to close is not the
Still great tutorial!:)
But you keep saying close everything in the order of opening. Isn’t it quite the opposite.. In your example
Order of opening:
1.
2
Order of closing:
1.
2.
Isn’t this the reverse order of opening?
in fact it’s the last:) Not that it matters so much… everybody can see how it’s done on the screenshot..
thanks for the heads up on the space
This is a great tutorial, and all these comments/replies are great too. I’ve been working through the tutorial but got “hung up” on this lesson - started getting the parser error and didn’t know what to do. I read through the replies, made the chances, and VOILA it’s fixed! Thank you so much for your patience in working with us wordpress n00bs!
the reason people are getting this error:
Parse error: parse error on the = is because they are copying and pasting your code from the tutorial. You are using magic quotes or whatever they are called, and they need to be replaced with regular old single quotes.
[…] WP Theme Lesson #6: Sidebar oleh Small Potato diterjemahkan oleh Mochammad […]
Parse error: syntax error, unexpected ‘=’ in C:\Program Files\Abyss Web Server\htdocs\wordpress\wp-content\themes\tutorial\index.php on line 74
Why am i getting this?
Wow its the line called
(()) (ignore the brackets)
?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′); ?
Sorry about the 3 posts..
[…] #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 […]
Looks like the index.php link at the top is broken. Any way to get it fixed please?
Thanks!
Hey Small Potato, thanks for the great tutorial… I can’t seem to find an answer for one question that is proving quite difficult for me to grasp for some reason. Is there a way to edit each WordPress page so that you can have a different side-bar for each page?
What I am hoping to do is make a portfolio page, that has sub-pages of specific parts of the portfolio (business cards on one page, custom t-shirts on another page, signs on another, and so on…). So on the main page I would just want the generic “portfolio” option to be visible, but on the portfolio page itself I would only want “home” and then the particular sub-pages of the portfolio to be visible on the sidebar.
Hope I worded that right… looking forward to hearing back. Thanks again!
(I tried finding the answer on those forums but couldn’t find it anywhere, and I must be slow today or something because I didn’t even see a way to create an account to use the forum.)
Okay, I think I may have found it… “conditional tags” seems to be the solution.. thanks again for the informative site.
I get this error: Parse error: syntax error, unexpected ‘=’
From this line of code:
And apparently I have a good crowd with me above, having the same issue!
I even changed it to wp_list_categories and it has not improved..
I read your articles and I got several ideas for my bloging job. Love your site!
Hello Small Potato
This lesson was the first time I got an error regarding a = on line 71
I read through this extra info in the form of posts and I might of spotted a mistake
you wrote —-> Add the following codes within the list item:
I did that typed it out 5 times and got errors but when I substituted the single quotes for double quotes
it worked
Could you tell me about the difference between single quotes and Double quotes ?
Thanks in advance
Dolph Cooke
I’m not understanding what you mean here. What does the _e stand for. The part that I don’t understand also is where you make mention that there is a difference between templates you make for yourself or others
“Again, you don’t need to wrap around the word Categories. If you’re building this theme for yourself, it’s okay if your sub-heading is Categories”
Can you elaborate please?