WP Theme Lesson #16: Comments Template
- Filed under: Tutorials
Follow this WordPress Theme Tutorial Series from the beginning.
You’re almost done. Hang on for just one more lesson. Today, you take on the life of all blogs; the comments template. In my opinion, a blog is not a blog if it doesn’t allow readers to comment. To some, comments are not important, but it’s strange for me to imagine blogs without them.
You should know:
- There’s no right way to set up the comments template in comments.php.
- Most WordPress designers use the default comments template from the WordPress Default Theme, Kubrick.
- Some designers modify the default comments template to suit their needs.
- You will use my modified version of the default comments template.
Step 1
- Create a new file: comments.php.
- Copy my comments.txt file to your comments.php.
- Save comments.php.
Step 2
- Copy my comments-template-css file to your style.css.
- Place it at the end of style.css or right above #footer.
Step 3
Type this under the entry DIV, in the single.php file:
<div class=”comments-template”>
<?php comments_template(); ?>
</div>
The comments_template() function is what calls for the comments template from the comments.php file. The comments.php file then follow its template (or codes) to display the comments listing. Each item in the listing is a comment.
You can also use the comments_template() function in the page.php file to allow people to comment on them too. Whether to do that is up to you. If you like, repeat step 3 for page.php.
Step 4
Step four is validate, validate, and validate your codes some more. However, there is no step four because you’re using my cleaned-up and modified version of the default comments template. I’ve validated the codes for you.
To validate offline:
- Go to View > Page Source or Source.
- Copy all the source codes.
- Go to the validator.
- Paste your codes in the Direct Input box.
- Click Check.
For future reference (when you build your own theme and comments template), here are the pages to validate:
- Home page
- Archive pages
- Category pages (if you customize category pages)
- Search result pages
- Pages (i.e: About)
- Single post view page
- Single post with no comments
- Single post with comments
- Single post with must login message
- Single post with no login required message
- Password protected single post with comments
Further Comments Template Explanations
- The comments template is basically one Ordered List (OL), not unordered. Although, they basically work the same way. Unordered is organized by bullet listing. Ordered is organized by number listing (each item has a number, starting from one).
- In the single.php file, you wrapped the comments-template DIV around comments_template(). Now, your comments template is an ordered list within a DIV.
When you password protect your post, your comments option is also password protected:
The modified version of comments template that you’re using has an H2 sub-heading that says Password Protected. The default comments template doesn’t have that.
Here’s what makes up the comments listing:
And here’s what that actually means:
The comment_text() function is what calls for each comment.
I will not explain what the CSS codes for the comments template means. Unlike the codes in the comments.php file, you can actually play with the CSS codes without breaking the comments template. They’ll do you more good if you play with them instead of reading an explanation from me.
And guess what? There’s no lesson review, today. You’re done.
The initial batch of lessons for this tutorial series is complete. Future lessons will cover more advance design and styling techniques.
Great to hear you’ll be doing more styling stuff after this tutorial is through – that’s exactly what I need.
This is all gold dust.
Yesterday I was talking about links to multiple blogs. You’re right – it wasn’t clear.
I’m trying to set up WordPress so that three of us can contribute towards three very differently styled blogs. And have them all kinda interwoven so that visitors can easily go from blog to blog within the single WP system.
I’m just investigating the best ways to go about this.
My other big issue right now – and despite having read all the support forums in WP, I’m still short on answers – is how to migrate the established header section from my established website, into a WP environment. The header contains a bunch of code that makes the nav structure (five tabs running across the header) work.
I’m guessing we’ll probably cover something like this in lesson #356!
Anyway, great work as ever my good man. Max respect to you for your commitment, you’re helping A LOT of people.
I wouldn’t know where to start with the three-blog project. I would just install three blogs. Set a blogroll on each blog to link to the other two.
But, it seems like you’re looking to control the blogroll from one place, rather than setting up three blogrolls manually.
And for the header, if you want the nav tabs to work with WordPress, check out my Digg 3 Column theme.
Thank you very much for all these lessons!! Now I will try to play around with the templates LOL.
btw, can you teach us how to put “About Author” profile on the sidebar (like how Blogger.com does?). I understand that only works in a loop but it is ridiculous to have the profile repeatedly appear on every single post.
Thanks man – will have a good look at the Digg 3 code.
You’re truly an inspiration, you deserve to get something out of this. Why don’t you set up an Amazon wish list – it’s the least you could ask for?
@Winston
As far as I know, About Author profiles on WordPress blogs are custom. There’s no function to call for a picture and a short paragraph. But, I can show you how to set it up manually.
@Dave
It’s ok. Thanks for the thought Dave.
Now I’ve got a huge amount to do on my template – I’ve just validated it, and the validator doesn’t like it at all! Obviously not everyone has your high standards, SP!
I hate validating codes, but I do it anyway because it feels good to know my codes are correct. So…don’t be a baby and do it.
I’ve cleared all the errors except several that come from the Goodblogs code that I’m using – I’ll have to work on widgetising my sidebar and see if their widget prevents these errors.
Thanks for all the tutorials it was really an inspiration, I got my framework done now all I have to do is the fun part and play around with the settings in the style file. Looking forward to more of these.
Thanks a lot for putting all of this together. I started from scratch and the tutorials were extremely helpful for understanding how WordPress themes work. I’m definitely looking forward to follow-up posts for more advanced features.
[...] the password-protected message. For a list of pages and template versions to validate, go to lesson number 16 of the tutorial [...]
I really enjoyed these tutorials, thank you so very much. Now I “just” need to make some styling and adding some graphics, before putting my new template online. You have helped a great deal and I am looking forward to seing more tutorials. I am going to post your link on my blog once I upload it, you truly deserve a lot of credit
Thanks Heidi
Spent the afternoon going through these from beginning to end. You have done an excellent job. You deserve all the thanks you are getting.
I like the modular design. Seemed like progress was always being made. Feel I know a lot more than than a did a few hours ago about building a WP theme.
Now I just need to put some of the learning into action on my live blog. If the saying about having a little knowledge being dangerous is true I am now lethal!
Thanks SP for doing the series.
Hi Small Potato,
I just wanted to say thank you for creating this tutorial series. It has helped me hugely in understanding how to design for WordPress. I think it is the best beginner tutorial out there… you have a knack for teaching. Once I get my blog up, I’m linking it to you. THANKS!
monaxle and William – thanks
BEST text tutorial ever! Thanks again.
Hey, i thought i will never be able to do a wordpress theme but i followed your tutorial, step by step and now i was able to have my own theme, thank you so much, you deserve lots of cookies!!
or let us know your amazon list, i know lot of us will send you something for this
What a ride! I’ve been trying to learn WP for some time by using the Codex. I’ve been able to tweak templates to my liking with (usually) decent results. However, I found the task of staring a new theme from scratch has been too daunting until now. Thanks for taking the time to put this together.
Thanks a lot for your time needed to write this. I made few WP themes already but this should help me improve me skills.
Bookmarked.
hey man,
thanks for all your help! this is some really good stuff. keep it up.
looking forward to your advanced tutorials
hey man i have a question,
i have no errors on my site, but it seems to move things around once i stretch the window on my widescreen monitor, i didn’t notice it before.
email me back please when you have time
Congratulations, I made it
Now time to quickly revise every thing.. And also check out the Codex for more technical stuff..
In order to make the pages validate (at least with XHTML 1.1), find the line in comments.php:
ID); ?>
and stick opening and closing divs around them:
ID); ?>
Has to do with needing inputs to be contained within some specific kind of tag.
——-
As for the lessons, THANK you! They were very helpful. For someone like me, who has previous html and css experience, these tutorials are perfectly understandable and quick. I ran through all of them in 2 days. The only thing I would add would be to explain how to post the post time with each post. You make references to it, but as far as I could see, you never actually say how. It should be as simple as adding one or two of these tags, right?
http://wiki.wordpress.org/?pagename=TemplateTags#Chronologicalx20.tags
Dwight, I did forget to include the date tag. And yes, it is as easy as adding a tag.
Very Nice Tutorial…
SP, I just need to let you know that you have literally saved a table-hack addict from Missouri.
I was a successful web designer during the late 90′s and when the CSS revolution got in 1999-2000 I tried to adapt. But I couldn’t leave my old habits behind…and so while the world was off learning and getting good at CSS design I was falling farther and farther behind.
Quite frankly, I got out of public pages and just started building intranets for folks so that I could hide my addiction. But in the area where I live, you can only build so many intranets, if you know what I mean.
So I was like a crazed addict wandering the city, trying to figure out what to do…and out of the blue an old friend contacted me and said he had a big project for me. I knew that this was it for me…it had to be XHTML and CSS and it had to be standards compliant.
But…argh! How do I start? How do I begin? My whole world had to be forgotten…I had to start over…but I resisted. I purchased three CSS books…and had no trouble understanding the syntax, the coding, all of the technical stuff.
But I sat in front of my IDE and it was blank except for a few lonely div elements. “How do I begin?!?” I screamed!
And then I found your tutorial. I know it sounds strange, because I wasn’t really in the market for a WP template, but I went through the tutorial and for the first time in seven years it all makes sense to me…
You showed me what I needed to see: the process of how to implement CSS in a design, something none of the books or articles did.
Just know that a recovering table-hack addict in Missouri has a new life. I’ve got four large sites to build this summer and I’m now confident that I can succeed.
Thank you sir.
Yippie! I got to the end, thank you so much for this tutorial!
Small Potato, you really should think about writing a text book. You have a very straightforward and effective teaching style. Slow and thorough. Think about it and I look forward to more tutorials.
Eli
(eliasfeghali.com)
Thanks, this tutorial helps out a lot of people who just want to know a little bit more about the way WP works.
great!
This tutorial is a blessing to rookie and NOOB coders!
thanks again,
nada
Hey, wanted to show you what your tutorial has done.
Here’s the site now, with small, image-related modifications to the standard theme:
http://dwightdesign.com/hosted/forumPosts/sfoOldTheme.jpg
And here’s what it will look like soon, with some additional modifications I’m in the process of making:
http://dwightdesign.com/hosted/forumPosts/sfoThemeDemo4.jpg
How’s that for a before and after?
I stayed up all nite coding and I like how easy this is to style now! Thanks again!
nada
Very very good tutorial!! You’ve really managed to teach me basic CSS and XHTML! I’ve always wanted to learn them. (Though I had manuals for both, I somehow never got the hang of them!)
It was my wish to design my own template for my blog and to be unique. You’ve just helped me do it!!
KAZZILION thanks to you!
Looking forward to more of your tutorials..
hello SP, i’ve been following your tutorial and done with out any errors. But when i’m about to design the tutorial theme like putting some background images. it didnt work, like i want to put background all over the header, content, sidebar and footer without affecting the entire body. i tried to put background element at #wrapper but its not working….
anyways thank your for this very clear tutorial..
This was an EXCELLENT tutorial!! I’ve been glued to my computer for 2 days and just completed it. I had done lots of HTML and CSS tutorials over on W3C and HTML Dog — which were both great for learning the syntax and “vocabulary” — but now I understand the essential of “how” to put it all together. It was so great to see how a master designer organizes the code as well. Oh, and you don’t speak some foreign geek-speek either, I understood everything instantly even at my complete noob level (i had struggled to understand DIVs up to now – your brillant invisible box” analogy fixed that in a second!).
Thank you! Thank you! Thank you! Thank you! Thank you! Thank you!
-Milla
Hey Small Potato… Randy here..
Thanks for the tutorial. I have been poring over templates to get a handle on their construction on and off for a couple of years now. I started out playing with the Blogger templates and have migrated to WordPress.
It’s the CSS stuff that I enjoyed the most. I have played with PHP some and had an understanding of it thru playing in Dreamweaver and having written HTML for my websites. The biggest hurdle I had was making sense of the hierarchy and although it should have been intuitive, the ability to slice out the ‘divs’ from the main index to create the subsidiary executables. It’s a “forest for the trees” thing I think.
Anyway, thanks again for the lessons. They have been really informative.
I suggest that if any of your folks need a good text editor to create their template upon, they might think about using the “Programmer’s Notepad”. I do and it really helps. Especially if you spew out code like I tend to do and don’t always like I should. It’s keeps me honest.
Keep up the good work, SP!
Randy Wells
Profit Masters Admin
ITM ServShop Admin
@Milla and Randy – Thanks guys.
Thank you very much for such a great tutorial. I did it with learning to make a new theme. Do you know something like this on learning PHP, MySQL and Python? I love your way of teaching. Thank you and may God bless you!
your code doesnt validate!
i got error an error when i validated the page source for my blog homepage, it says id cannot start with a number
this is because you have used
id=”"
for the post div
i sugeest you replace it with something like
id=”post-”
and also there are two errors in your comments-template css
Hevletica inplace of Helvetica and the other is your obvious mistake
ff for Sans-serif
angrys0ul – It does validate. You missed step 2 of lesson #5d. Read it over again. I did use a post- prefix in front of the_ID.
Thanks for pointing out the CSS mistakes; they’re fixed.
How to “highlight” comments by blog author. For example, every comment by you (Small Potato) have border. How to check in comments.php loop that’s comment from blog author or not and insert “highlighted” in class for that comment?
TIA
TIA – I use the Author Highlight plugin to do that.
Thanks man.
Regards
Thanks for this great tutorial. It helped a lot.
I was searching for days on how to make a WP theme and this tutorial was the answer.
It was very easy to understand.. even though I messed up once or twice to the point where I had to start from lesson one. :p Hehe, my own fault though.
Anyway, thanks for taking the time to make this tutorial!
Thanx alot for your great tutorial. I’m looking forward for your next writings.
Seriously—-That was awesome. In the few years of having a WP blog, there has never been a time when my theme was VALID!
Thank you!
Thank you so much for this! This is truly helpful!
Thanks for reading my tutorial.
Hello Small Potato..
I’m creating a wordpress theme, and I would like to do some changes. So, could you help me with some doubts of mine.
I don’t know if I can ask you here, but.. well.
The Site I’m developing will have menus and submenus ok, so I saw that I gotta relate the links with categories, then I can divide the site in parts…..
So I want to use the function “the_content()” but just to call the posts from a specifc category, not from all.
Then I don’t know how to call, for example, the posts with a function “the_content2()” for contents from the category 2….
well if you cand help in some way I would be delighted.
Thanks for your attention.
Your tutorial helped me a lot.. Great work =)
AHm.. I’m brazillian so… Sorry if I made some mistakes…
Very nice tutorial, it has helped me a ton. But I need a little help, what is the most effective way to create a border around the entire template? I’ve tried to put a border on the wrapper but the wrapper doesn’t seem to wrap around the template.
Oh sorry, I didn’t read the “If your comment is a support question, please post it at the forums.” part above the comment box…
and the link to template, if you just want to answer the Q here, is http://maddgijoe.com/drumline/ .
Evandro – Search for get_post() on wordpress.org
Brandon – Wrapper doesn’t wrap around the main column and sidebar because Wrapper isn’t also floating. Search on Google for “containing floats” tutorials.
this was an absolutely excellent tutorial, i wish all people made tutorials as easy to understand as this, superb!
Thanks for the great tutorial.
I keep going back to it because I’m trying to create my own theme. I actually don’t want to do it this way, but I can find nothing out there that meets my exact specifications.
Header and Footer, with a content area in two columns, four sidebars, one column over three columns below the content, all widget ready. Sound confusing eh? It’s actually more simple than it sounds. Top to bottom.
one column over two columns over one column over three columns over one column.
I’m inspired by a few themes: Into the Ocean (for content layout), Japanese Cherry Blossom (the look and feel), and Lime (three sidebars widgetized).
Anyway, it would be helpful to have lesson one link to lesson two, lesson two link back to lesson one, and to lesson three and so on and so forth.
Also, it would be helpful to have all the final files in one place, at the end of Lesson 16.
PS: I know you say this theme you are using on your blog is problematic for many reasons. But it is simply beautiful. Nice work.
Hi,
I got till here; and I have two problems.
1. In Firefox, when I go to a post which has no comments, the end of the sidebar slightly overlaps over the comment box. This occurs only when I am logged in.
2. In IE, on both posts the sidebar has been pushed down.
Any ideas why? Thanks! This tutorial has been great help.
Sarat – Please do quick search on the Wpdesigner forums for your answers. If you need more help, post at the forums. Thanks.
Thank you so much for these fantastic tutorials!! I really was so apprehensive when I started and I have left feeling quite comfortable and confident working with the themes.
As Kahlil Gibran said : “A little knowledge that acts is worth infinitely more than much knowledge that is idle.”
Thanks so much for your generosity and sharing your knowledge with us newbies!!!
Another graduate of my tutorial series huh? Congrats and thanks for the compliments!
I can’t thank you enough for these tutorials! I started at 9:00 tonight and I’m now finished at 12:00 midnight! I already had my design styled with CSS, so I was able to breeze right through. But this was my first time creating my own theme for WordPress and you made it so easy! I’ve searched and searched for a good tutorial and I finally found it.
Thank you again!!
Great tutorial, I really needed it (cause i sucked at themes modifying)
I’ll be watching you trough my rss eye
Thanks again.
Thanks Niktto
Another grateful punter.
Thanks very much Small Potato. You’re a legend.
Alan.
Hey SP
Just want to add my thanks to what everyone else has said, Really appreciate you taking the time and effort to type this all up.
Wanted to ask you about the wigetizing sidebar, you said that it would need to be added as a plug-in and that you would show that to us later, I would just like to get that up and running
Thanks again for the help
Ben
Ben – If you’re using WordPress 2.2, that plugin is already built in. My tutorial series was written back in WordPress 2.0.
Hi SP
I’m trying to create one background for the container and the side bar. I have tried encapsulating them both in a new DIV so that they are children of this div, but it doesn’t show that’s divs background at all
Thanks
Ben
that new div has to float left also. the problem you’re coming across is called “containing your floats”
search for that on google and you’ll get several solutions.
Yay! I survived! Great tut SP! I am a COMPLETE beginner, but feel like I have a half-decent grip of things after going through your lessons!
One question–I added the date tag and it worked just fine. Should it include the time as well? All that shows up on my page is the date the post was made, and not the time.
No, it doesn’t include the time. Do you really need to time stamp your post by the hour though?
I actually do….not so much for my regular blog, but for some business related-needs that I have on another blog. Is there a way to include it?
Yes there is, look further into the_time()
Awesome, awesome, awesome. Fantastic work, Small Potato. You are a Big Potato in my book! Thanks for putting all this together. I look forward to going through the rest of your site for more info! More, I say, more!
Loved this series of tutorials. Probably the most well-written bunch I’ve ever seen for ANYTHING. I did up with one error that doesn’t really seem like an error as the function still works, but it’s irritating. Perhaps someone could assist?
When I post a comment, I get
“Warning: Cannot modify header information”
. But it will still post the comment. I also get this error when deleting a comment. I would search for the solution myself, but I wouldn’t even know where to begin. Thanks in advance for any help you can offer.
Travis – Make sure there’s no white space at the end of your files. For other questions, please use the Wpdesigner support forums.
Oh, thank you very much, and I sincerely apologize for posting here…I know better and I should have checked around. I assure you it won’t happen again. Thank you for your help though!
Hi SP,
Thanks alot for the tutorial was very easy to follow and you made it interesting. I’ve never heard of wordpress until a few days ago and i was able to design a theme
I’ve attached a screenshot of how i layed out my background images just to help some people out.
http://www.orici.net/...
Very nice looking blog considering it’s your first WordPress theme
Cheers Small Potato
Set up WP on a new account, created a blank XHTML/CSS wireframe, followed your superb tutorial and I now have a fully functioning site using WP exactly how I want it …………. All in about 5hrs
All I’ve got to do now is put the finishing touches in and start creating my content. Last time (using a different tutorial) this whole process took me 1-2 weeks on and off and lots of head scratching.
Thanks Again ……… Aaron
Wow. Amazing tutorial. I think it’s awesome how not only do we walk away with the knowledge to customize a wordpress blog, but also a basic knowledge of xhtml, php & css. Seeing this usage of php really makes me want to code sites differently. THANK YOU!
Congrats on finishing the tutorial Matt!
Yey SP! I finished you’re tutorial in 3 hours (and burnt my dinner in the process) but what the hey, I can make wp themes now, thanks!
*I wish for you to go to fried-food heaven for helping us out*
Mary – 3 hours? You’re insane, but congrats! Fried food heaven sounds nice, but I don’t want to go there yet for obvious reasons.
LMAO.. yer…uhm that did sound like I’m wishing for you to go quickly, wasn’t it? Hehe.. Sorry about that.
thanks for the tutorial SP. you made it looks easy. now.. i need to challenge myself to re-do it again without looking much on your site to stick the codes in my mind. At least for the layouting and formating parts
No, don’t re-do it. Download some free themes. Tear them apart and see what you can learn. Find the similarities.
Waah! It’s good to redo it… coz some of your points only sink in on the second read (at least for stubborn people like me). Yey I made my 2nd theme now and kinda got brave and played around with the php codes. Thanks again, ‘tato! ;D
great tut… but i thought at a moment that i can’t finish it… i understand u like notepad, but don’t say it 100 times or it will get the oposite effect.
the point is: YOU MADE ME UNDERSTAND!
but you didn’t tell anything about the 2 tiny buttons in the footer and i mean: “next page” or “previews posts”
how do i make them to go one to the left and one to the right, and how can i style them separately?
Amazing tutorial, Small Potato. There are not many good and informative tutorials like yours. It helped me a lot!
Before this tutorial I knew basics of xhtml, css and couldn’t edit much of the theme files. I also didn’t understand the theme structure and meaning of the codes quite well. But now, with the help of your tutorial, I understood what they are about and I can make my own
Thank you again for the tutorial! Looking forward to your future tutorials. Keep up the nice work!
Just completed the tutorial after 2 days. This is so awesome and I have shared it with many of my friends and co-workers. Thanks a million SP!
OriginalChris
Hello BIG Small Potato,
I have already thanked you for your work here, but was wondering if you would be kind enough to offer advice with regards to drop down navigation menus? I have seen other examples of vertical drop down navigation in the header (where the parent item is also a link), but I have my navigation in a left column (where the code is at the page level) and I want any parent items with children to not be a link, but when hovered over, produce drop downs links to all the child and sub-child pages. I am using WordPress to create a large site with many nested pages.
I found one plugin which only worked at the header level and generated a multitude of errors relating to categories (which I am not using). Any ideas on this one, or am I pushing WordPress beyond what it was developed for?
Thanks Colleen
For a drop down like that, I think you’d have to custom code your page links instead of using wp_list_pages.
Also, I wouldn’t suggest using navigation menus like that because it’s hard to make them user friendly.
When will you be putting up the next lesson?!
Thanks 4 this tut!
I tried very much tutorials, but I have 2 say, your’s is the best!
Greets from Germany
DJ.deeside
Wah, that was a GOOD tut you made there
D
really nice & helpfull, I’ve been trying to put my regular div layout on WP & I never found a tutorial for that, but yours is simple and well done.
So I suppose it should work the same for frame/iframe and table layout?
-Thanks, Saekuto!
It should work with tables and iframes, but in general you should practice creating layouts without tables and iframes.
Wow mr Small Potato, I reached the end with no major problems! This tutorial rocks!
(The only problem I have is that the template switches to a blank page, after leaving a comment. Normally you just go back to the post or ‘home’ page? I’ll go check this out.
Again thank you very much for this tutorial. I guess I will be learning a lot more on your website. First bring some major league tastfull stuff in the css.
cheers and greeetings from Holland!
herman
Hi small,
this is a great tutorial, thanks……
Could you let me know how to change posts div tag colors?
ie:
first post with #dddddd background and
second post with #cccccc background and again
third post with #dddddd background and so on….
Thanks
Nihal
Nihal – You can learn how to do that by downloading my Dream On theme.
Using your theme “Lust” since a while, I was curious about the making of… and landed here…
I did your tutorial in one day… and WOW!
I knew nothing about that, a part from playing at changing images and colours… I learned quite a lot!
Thank you!
I finished the tuts and I’m going to start going though your 3-part e-book. Thanks so much for this tutorial!
Got to the end. You can’t imagine how grategul I am. Some things are still somehow obscure to me, but I got most of it. Great work
Thanks for the tutorial series! I wanted to jump into CMS template building and found this to be the best tutorial for it on the web.
I look forward to the next line of tutorials. : )
Hey, thanks for the tutorials. I could have very easily spent 20+ hours banging my head against the wall trying to look this stuff up on sites that end up being too technical or that are more reference sites for people who already know what they’re doing. It was divided into manageable steps very well. I am trying to change my html website into a blog so that it is easier to regularly update and search for entries and I really needed to build it from scratch so that it looked like the old one so muchas gracias.
Do you know of any good places that explain how to space and incorporate Photoshop images so that the blog looks very distinctive? Lotsa the best websites have small images all over the place and complicated spacing and tables so that everything is spaced exactly, and I don’t want to spend days guess, test, and revising the spacing.
Emily – Although there are general tutorials online if you search for theme, there’s no shortcut to slicing a Photoshop image into a web page.
Small Potato: You are the greatest, without your help I would´ve never learnt how to do this stuff.
Thanks, a lot.
hello SP!
let me say, you did a great job! and we are all happy for you, thx very much, i will soon do my own template, and i will give an url to show you my work!
but there are 1 thing i will know!
and its the date to a post, like yours,
“Mar 17, 2007
Filed under: Tutorials”
the Mar 17 2007? whats the code?
for the comments its but i dont think its the same for posts? or are they?
thx very much, harem.
Here is my first blog template:
http://jt-bg.com/flamer/Projects/…
but i can’t understand why in Internet Explorer the comments template breaks apart, but in firefox it looks great with me?
Please, give me some tips on how to fix the problem.
You should create your theme using Firefox and IE at the same time. That way, you’d be able to grind out any bug during the development process.
Now that you’re nearly finished, there’s no specific tip I can give you.
Yes i know that and i used them both. I have the IE Plug-in for firefox and it gives me the chance to change quicker between the to browsers, but this problem is ONLY for the comments template, which i’ve copied from yours. So this is why, i’m asking you if there are some reasons for this to happen. The other pages are perfect!
I looked at your blog. It’s not just the comments template. At this point, I have no suggestion.
Aside from teaching me how WordPress themes work, I now also feel more confident talking about PHP and CSS to web developers (I’m primarily a graphic designer).
Many thanks and long live your philanthropy.
–K x
thanks Keds
I made it to the end! Thank you so much for spelling things out the way you did in this tutorial. It wasn’t just easy to follow for someone new to WordPress like I am… I’ve actually learned more about PHP in the last week than I have in my last 10 years of dabbling in web design. On top of that, your attention to detail helped fill in some of the blanks in my knowledge of CSS.
You are gifted teacher-type-dude
. I hope you don’t mind that I’ve linked to you from my blog.
Thanks again!
I’m glad you appreciated the level of details
All done. Thanks so much for putting the time and effort in making these lessons easy to follow and comprehend. I will recommend your lessons to others wanting a basic understanding of WP themes.
I couldn’t wait to finish reading the whole tutorial to comment, but apparently as I reached the end now I wanted to congratulate you for this very great and crystal clear tutorial, you’ve got one here.
Let nothing stop you from continuing to make tutorials like this one.
Once again, congratulations.
THANK YOU SO MUCH. This is the best tutorial I’ve ever read on the web, and I’ve read a ton. I’m sure by now, based on all the gracious comments you’ve received, how appreciative so many web designers/developers out there are of your work. Well, let me say it yet again – THANK YOU!
Thanks guys and congrats on finishing the series.
i wish i know this site tutorial early.
thx man. ur tutorial is REALL2 awesome.
now i know the basic to create my own theme.
thx2 once again.
=]
Hey, potato, is your comments.php supposed to indent the comments whenever I’m not logged in? Because when I log in, they display flat… but when I logout, it’s all indented! It’s nice if they have some kind of threaded layout, but I don’t see an option to reply to this or that comment.
It isn’t supposed to change based on whether you’re logged in.
thanx dude. BEST tutorial I ever read I guess.
Big thanks for the tutorial, it was very helpfull
Hi SP
Thanks a lot for the tutorial man was really helpful.
Where can we print out this tutorial?
Thanks!
I had to learn wordpress quickly and your tutorials made it easy and understandable. without your help I know I would still be piecing many separate tutorials together. what im really trying to say is thank you, thank you, thank you. your a good man.
i finished the whole tutorial.. everything worked well except that i had to remove the dynamic tag in the sidebar because it was giving me a:
Parse error: syntax error, unexpected ‘:’ in the sidebar
i removed the dynamic tag and it worked well. what’s up with that?
but over all.. GREAT TUTORIAL! it helped me a lot!
oh, i got it working now. i made mistake.. i placed a ; instead of a : in one of the lines.
^^; you should make the pdf format for this tutorials i think…
thanks for the great tutorials…
I really want to thank you for this tutorial. I was trying to fond one that would explain how to all of this in wordpress so I can make a good looking site. I just loved how the tutorial was easy to follow, yet still has much more depth than most. Just wanted to say thank you, and I’m looking forward to going through your slicing theme tutorial (I already downloaded all 3 parts).
Thanks for the feedback Brandon.
This tutorial was fantastic and so thorough. It really helped me out tons! I have a good grip on this now and I was completely daunted before. Thanks so much!!
Thank you very much for the tutorial.
I enjoyed it right from installing XAMMP
To the end when you explained the difference from page, single etc. This really helped me understand how wordpress works.
I completed the tutorial from start to finnish and the only problems were my spelling mistakes.
Thanks so much!
Kev
I just want to send you a big thank you as well. This tutorial has taught me a hell of a lot. I understand some coding, but the manner in which you have broken it down and explained it’s functionality has allowed me to understand it even further. I now feel confident enough to build my own themes!
I take it there is still more to come? My only “fear” now is that the pace will slow down a lot – I have done everything in the tutorial so far in a few hours, but I think I will be able to improvise a little and get information about other things I can do with WordPress (from your site of course!) in the meantime.
Good luck with the sale of your site and with whatever you decide to do in the future.
btw – love the comment your mum made about not crossing the road when you smile!
Thank you so much for this wonderful tutorial : D Not only I can create a simple wordpress theme now, but the best thing is I can understand most of the WordPress codes! And this is the result of your fantastic tutorial: http://somniamemorias.com
Well it’s not a common WordPress layout actually, but always wanted to create a layout just like that one.. I never thought I can even created it using WordPress (I’m talking about those <?php stuff).
Thanks SP, you’re the best. I adore you.
This was so helpful for me. It took me most of the day, though I did take some breaks. I can much more clearly see what I need to do to make WordPress work for my more complex sites the way I want it to.
This was all very helpful & it made the junk understanding but…
I have no idea why & I’ve followed all the steps but my site doesn’t display anything but this is the only message i get:
???
WHAT IN THE WORLD is going on? please help!
i also have a problem with xampp because apparently i can’t view the progress i make in a browser.
Complete help for the New Blogger, blogger Hacks, Blog design, Blog Template, SEO, Adsense, Blogging Tips and Tricks, Making money through blogs, Global Warming, Articles, programming and web 2.0
Hollywood, Bollywood Star Wallpapers – Get all Hollywood, Bollywood Star Wallpaper, Hot Videos, Download Movies, Download Songs, Bollywood News, Bollywood Gossip, online hindi radio, live radio and more…
Hey thanks for the tuts… it’s gotten me on my way. Now the hard work begins!
Thank you so much, I’ve spent my day reading yout turorial and I finally learnt it!
Thak you once again.
Liza ^_^
thanx
AWESOME! Helps me a lot making sense of and getting familiar with WP environment.. THANX!!!
I have a problem on comments… ummm… it’s better if you look at this…
http://img87.imageshack.us/img87/3259/53817014xj9.jpg
thanks for the tut.
I posted this in another section here but I forgot where LOL. I have a serious problem. I jumped into the tutorial without having used the wordpress website before. SO I’m clueless as to how to upload our new themes onto the website and/or integrating them onto our own websites. I’m guessing it has to do with SMART FTP but I’m not entirely sure how to go about it. Can anyone help me out or at least guide me in the right direction. THANKS
Just wanted to say thanks for the tutorial, just saved me a load of work trying to do a mini CMS for a project I’m working on. WordPress covers everything I need now that I’ve got the template structure sorted.
thanks…hahahaha,,,,finally…my back aches..
A big warm hello! I am now on lesson 7. Had to go through the first 6 lessons over again so that my grasp of the terminologies and logic of it all was solid before I go forward with the rest of the lessons. So far everything on the screen is coming out as it should and I am amazed. That is sheer testament on how good a teacher you are. You have done a lot of hard work creating this tutorial. Please allow those of us who want to give back to do just that…give back to you as a sign of our appreciation. How about a paypal donate button? For now, a big THANK YOU!!!
Nice tutorial, i just started wordpress integration. And been away from web design for ages so mutch new stuff to take in.
Question about controlling images:
I whant to have the images from the post to be showed at a spesific size, say 150x150px. And the text should start from top right corner on image, alonge the side and a few lines under image.
Question about controlling the post to show:
Can you make only post from one spesific category show up?
Lets say from a “main page news” category that only admin/mod can access?
All changes is for the index page
Thx again for nice work on tutorial!
I forget 1 question:
How to make all post on index page the same lenght? Cause now the 1 post is longe (text wise) and the rest are verry short. Whit a picture in post 2 it doesn’t show text at all.
Thx again
[...] ????WP Theme Lesson #16: Comments Template [...]
Thank you sooo much for taking the time to put out these tutorials! I learned a lot
Just spent two days going through this tutorial, after almost being driven NUTS by the WordPress beginner-UNFRIENDLY guides.
Small Potato…don’t train to be a teacher, it’ll ruin you as an educator… Sincerely, “top class” tutorial, mate.
heeeey:
This is pretty much exactly what I was looking for!!! Very well put together by the way, very easy to follow and so on.
So I have all the files created uploaded to a test blog at adrianhampshire.com/wordpress
ok, notice that my entry “yo yo” has bold in the entry, it says “awsome!” and the line-height is correct and so on. if you view that entry on the single page everything is good as well…but if you view it in the category “Uncategorized”
the bold is gone, and the line-height is no longer there. Will I need to create a separate file, something like category.php? …or what would be the correct name for that file. Or do you think something else is up with that.
Thanks again for these lessons, I look forward to checking in on new lessons to come.
Thanks so much for this tutorial. After making several themes and really pulling my hair out not knowing what all the code is for, I now have a much better grasp of everything. Even though I’m not a wordpress beginner, the tutorial really helped me understand why I was doing what I was doing and what I was doing wrong.
Thank you very much
Finally i found what i was looking for
Cheers
Hi
Thanks for the great tutorial.
In a day i am confident with the basics of creating wp template.
when i validate my index.php code, i got 103 errors.
i did check the code and nothing seemed odd.
any idea why so many errors..
regards
mohan
Oh, man, this was totally awesome! I have tried to learn how to make WP-themes for some time, but with the lack of the basic knowledge, it’s been hard, to do it. Thanks, to this tutorial , I now have the basic knowledge and you have made me understand it, too!
Once again, a big thanks!
Hey, i liked so much the tutorial, we have completed all the steps. You will learn more about the design? Designing the layout? Thanks
p.s: I look forward to the next steps
hey Small Potato! you still there?
I was wondering if you knew a way to customize the page that shows up when a user does not completely fill out a comment form. i think it says “error:please fill in comments’ or something to that effect. the page looks nothing like the rest of my site. if you do, i would love to hear the fix for it
!
Thank you very very much!!!
Thanks SP
It’s been like over a year, are you’re newer, advanced ones ready?
Hands down the best tutorial I’ve read on the internet in regards to creating a Custom WordPress Template. Period. I’ll definitely be giving the deserved trackback love.
Thanks for this, It’s been a long time coming for me, and I’m excited to begin converting my sites over to wordpress.
Thanks again,
Tison
Hi Small Potato,
I’ve just completed this tutorial series, and tried adding a second sidebar, with both located on the right of the template.
It looks great, but when I tried adding widgets, wp only showed “Sidebar 1″ and altered both sidebars.
The files are named differently (sidebar1.php and sidebar2.php) and both show up in “Edit Template”, so I’m not sure what I’m missing.
Couldn’t find a how-to on your site, so I thought I’d ask you.
Thanks for such an easy-to-follow tutorial. It was a blast!
Cheers,
Jane
Great tutorial. Helped me a lot in my understanding of CSS, XHTML, PHP and WordPress. Many thanks.
I did it! I’m stoked. Thanks so much for this lesson, breaking it down into so many parts helped me to understand it. I’m really excited.
Do you have advice on how to add a third column for ad space??
I just wanted to thank you.
Although I kind of got exasperated of your “call x; stop calling it…; draw an invisible box” etcetera explanations, your 16 lessons actually did help.
Now that i mentioned it: do you actually believe that someone not even familiar with HTML, CSS and PHP programming would try to make a WordPress them on his own?…
I really don’t think so.
Anyway, thanks again for your patience and good will.
I’ve read all of your lessons and i have to say: wonderful! It will help everyone who just started with wordepress. A lot of questions are now erased ;D! Thank You for all the nice Tuts here!
Say, could I get a ZIP or RAR file with all the files and things you’ve made in all the lessons? Just to compare.
hi
good information
can any body help me
about the integration of joomla
really good tutorial! thanks.
Hi SP,
Someone mentioned you’re a genius and this tutorial proves you are.
Although you’re not teaching Einstein’s stuff here, detecting gray areas
and explaining them in pure white words is what not so many people
on this planet are able to do.
Thank you for such a wonderful tutorial, and your ability to explain what
needs to be explained.
A WordPress Addict (and a silent fan of yours)
Stefan
Thank you small potato,
i feel like I have graduated but I know its only the very beginning.
Finished it all in two days and it gave me a decent insight into recognizing some of the code.
I am indebted to you -
I hope your next tutorials will explain how to import graphics and such.
(i would pay for that)
Thanks, Ed.
Followed all the 16 steps.. Man this tutorial was great to me !! Thanx mate !!
I’ll just add into the rest of the comments; outstanding tutorial.
Thanks alot for putting this together!
/p
I did step of this tutorial and i can say it works like a charm. I have only one problem, tought…. At the end of this tutorial, i’ve tested my template and the only “bad thing” i’ve noticed is that when i make a search, i get nothing in return…:( Just a blannk page. Why can this be? Should i send you my files, so you can take a look et what’s there?
P.S. I’ve validated everything i could, so it’s ok, except this little problem with the search form. Please e-mail me or just answer here. I will check from time to time.
Thx.
Man, what a ballin tutorial. Thanks a lot.
Super helpful, thank you very much!
Thanks. Gods bless you.
Fantastic 16 steps tutorial.
This series is ABSOLUTELY fantastic!
Really usefull tutorial
Thanx a bunch!
I just finished your tutorial and loved it. Even though I’ve been building sites for a while, I learned a couple of things I didn’t know. I had no idea creating a custom WordPress template was this easy, and I probably never would without your very easy to follow directions! Thanks a lot!
Thank You very much for these tutorials. They’ve helped me tremendously.
Small Potato,
Thank you so much for this tutorial. I have now made my own WordPress Theme from scratch and your tutorial made it all so easy. I am eternally grateful to you. It is great when someone is as generous with their knowledge as you have been with yours.
Sincerely
Frenchtowner
[...] Görünüm Ayarlar? #14 Footer ve Index Bölme #15 Alt ?ablon Dosyalar? #16 Yorumlar ?ablonu » Benzer YazilarWordpress CSS Dosyas?n? Nas?l Düzenlerim ?Wordpress Facebook [...]
Thanks for your tutorial. Now it is very easy to convert my css designs for wordpress. Your droping from wordpress world is big loss for wordpress community.
I wish you all best in your life!
Dam man, great writing skill, thanks for posting!
Thanks so much. This tutorial made it soooo much easier to create a layout for wordpress.
wow, i just finished. I loved it! thanks soo much for your hard work and dedication!
THanks a lot!
your tutorial was extremely helpful to me…i thank you sincerely…your my guru
Hello
Thanks for your tutorials! I’ve learned a lot
But in 2.7 is it possible to make comment sides, but I don’t know how to do it.
It only work in the default theme, do you know how?
/Jay
* how to make it work in my them
Hi there – your tutorial was extremely helpful, I appreciate you putting it out there.
I have a site to which I am in the process of adding a WordPress blog. I have the layout done and am trying to add some jQuery to it. but can’t seem to get it or even find out exactly how to do it.
I am using WP 2.7. I put the specific script I want to use in the wp-includes/js/ file within its own folder, in this case wp-includes/js/curvycorners/curvycorners.js then added the following code right above the </head? tag:
jQuery(document).ready(function() {
jQuery(‘.5radius’).corner({
tl: { radius: 5 },
tr: { radius: 5 },
bl: { radius: 5 },
br: { radius: 5 },
antiAlias: true,
autoPad: true,
validTags: ["div"] });
});
jQuery(document).ready(function() {
jQuery(‘.sidebarbox’).corner({
tl: { radius: 5 },
tr: { radius: 5 },
bl: { radius: 5 },
br: { radius: 5 },
antiAlias: true,
autoPad: true,
validTags: ["div"] });
});
But it doesn’t work. It was the only info I could find on how to do it. Any help would be greatly appreciated!
Thanks!
I loved this tutorial!!! I finally learned to design WordPress templates!!!!! Nice!!! Thank you very much!!!
I cant tell you how much this rocked! Thanks soooo much for this amazing series.
D
Excellent tutorial series, going to look for you advanced one now
very well written and explained, i bought a book and yours ar exceeds that!
Nice one
Hi,
Your tutorials were absolutely brilliant =]
Completed them thoroughly and made an awesome (yet simple) theme.
Been looking for a good tutorial for a long while.
Thanks millions!!!
Hi!
I don’t even know where to begin to thank you for this wonderful tutorial! I have never ever in my life used php-coding before, though I’m quite familiar with CSS, and got an assignment to try to learn WordPress-installing and styling from my boss at work (a commercial agency in Sweden), because one of their clients wants a designed blog from scratch, and so I googled on this, and found you’re guide right away. I went from step 1 to the last, step 16 in like 2 hours, and the only thing that remains is to see how it all looks like. I am really really glad that you wrote this guide, so THANK YOU SO MUCH! If I manage to style a real blog for this customer, everyone will be quite impressed, because that agency only does print-commericals on a daily basis, and not really web-design, so nobody over there knows php. Anyways, thanks a lot!
Take care!
/ Elin, Gothenburg, Sweden
Hey, thanks a ton for the tutorial, excellent job, extremely thorough!
I’ve gone through a lot of web tutorials, but this one has been the best by far!
-Philip
Thanks, this is great. I have no php experience, and now my first wordpress page is about to go live. Thanks a million Mr. WordPress Guru.
I have hit a little problem, and I am not sure how to fix it. On my comments pages, the header image has this strange border around the bottom of it. I think that it might be the background image form the kubrick default banner. Do you know how I can get rid of it? I have danced around with the style.css, and that seems to be ignored whenever I make changes. If I understand firebug correctly, I think that image is being generated in the php somewhere. It is not on my main page, just the comments pages. Any thoughts?
I would offer a link, but I haven’t migrated it from being a local host site yet.
jerod, missouri.
This is the most understanding and broken down tutorials I have ever seen and read. Keep up the good work my man .
Cheers to WordPress Designers.
Joe, Ghana
Thanks so much for the tutorials. I understand every thing. I will go on and modify the css.
Stuff of genius //
// Very clear, small digestible steps and bloody enjoyable // Thank you for your great educational work //
// You are my hero
Hey thanx like everyone else, but you should write a book about this. You will sell. Everything is free but this is gold so make some money for your hard labor. take care
Creativity from the left side of the brain….
Thanks for the great tutorial! It’s hands-down the most comprehensive guide out there
I am sorry but I had to read all of the tutorial in 2 days
It helped me a lot.
When is gonna come the more advanced techniques?
Maybe using wordpress as a CMS..
hey there! I was trying to understand your code so I could use Tweetbacks on my blog, separating tweetbacks from normal comments… Tweetbacks tutorial is here: http://migre.me/2vg
he says about changing
into
and then
into
besides some other changes. the ifs and have_comments() I understand… I just can’t seem to understand where and how I could modify your comments.php, which uses $comments instead of have_comments()
care to gimme a hand here? thanks for the attention!
ah, I found out something that maybe could help: http://migre.me/2zO
this site says that wp 2.7 uses now wp_list_comments function instead of the loop with the foreach, maybe you should update your comments.php template =)
for anyone out there with this same problem, to update WPDesigner’s comments.php to use the wp_list_comments() function, remove lines 22-58 and insert the code below:
to “”
comment_status) : ?>
Comments are closed.
oh well, that didn’t work. the code is here, anyway:
http://sivel.net/2008/10/wp-27-comment-separation/
Thanks a lot Small Potatoe, you’re helpping to get the internet a better place, where everybody can express theirselves.
Thank you very much for all this lessons!!!!!!Really helped me!!!
I know this has been said 1000 times already, but thank you so much for your tutorial. I learned easily from it.
[...] #1 Intro #2 Template Files and Templates #3 Starting Index.php #4 Header Template #4b Header Template Continues #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 Widgetizing Sidebar #7 Footer #8 How to Validate #9 Style.css and CSS Intro #10 hex Codes and Styling Links #11 Widths and Floats #12 Post Formatting and Miscellaneous #13 Styling Sidebar #14 Footer and Dividing Index #15 Sub-template Files #16 Comments Template [...]
Thank you very much for such a wonderful very easy to understand tutorial. you proved “it’s not hard”
more power small potato!!
God Bless you!
^_^