WP Theme Lesson #5b: The Content
- Filed under: Tutorials
In this lesson, we’ll tackle what really matters. How do you get the content of your blog to show? Then, you’ll add some more invisible boxes or DIVs to separate the content from the post titles that we called for, yesterday.
(Note: Yesterday’s lesson is very, very important. If you didn’t fully understand what I showed yesterday, you need to re-read and ask me questions until it’s clear to you.)
On with today’s lesson, start Xampp Control, open the “tutorial” theme folder, open a new browser, point the browser to http://localhost/wordpress, and open the index.php file with Notepad.
Step 1:
Type <?php the_content(); ?> under the post title codes.
Save the notepad and refresh your browser, you should see some texts under your post titles.
What just happened and why does it look like that?
You used the PHP function the_content() to call for post entries (content). Right now, your content is just one long line of text, all the way to the window’s right side, because you haven’t styled it yet. Remember the style.css file? Later on, we’ll use that file to control how everything looks.
Yesterday, I asked you to make dummy posts so you’d get to see how multiple posts listing looks like. If you haven’t already done that, do it now, then get back to the front page. Multiple posts should like this:
Moving on…
Go back to your browser, click on View and select Page Source or Source. A window of codes will pop up. If you’re using Internet Explorer then a notepad will pop up.
I’m using the FireFox browser, here’s how it looks in FireFox:
Notice the difference between your index.php file and the source codes? All your texts, images, and etcetera, everything in that window or notepad is called for by the_content(). How useful huh? Without blogging softwares, and specifically the WordPress template system in this lesson, you would have to code all those texts and images on your own.
Also, notice the xhtml opening and closing P tags that I circled. They’re not present in your index.php file, but they are present in the source codes window or notepad that you just opened.
P tags, Why and How?
Why - While typing your entries, each time you skip a line is a paragraph. You need a way to show that right? Each paragraph sits inside a set of P (paragraph) tags. That’s how you’re getting the spacing in between paragraphs. How - Easy, the WordPress template system generate the P tags for you.
Step 2:
Wrap an invisible box (DIV) around the_content() and give it class=”entry” like this:
<div class=”entry”>
</div>
You should have:
Save and refresh your browser, if you go to Viev > Page Source again, you’ll see the class=”entry” DIV tags wrapped around each of your post entries.
Why?
First reason, now you can tell where the post titles end and where the post entries begin. Second reason, it’s for styling with the style.css file. If you want to, you’ll be able style your post entries without affecting everything else.
What is the difference between id and class?
So far, for every invisible box or DIV, you’ve used id to name it. Remember id=”header”? So what’s the difference? id is unique and class isn’t. If you look through your source codes, there’s only one id=”header” and there’s only one id=”container”, but there are multiple class=”entry”.
Can header and container be classes instead of ids? Sure.
Keep this in mind; you cannot repeat any id. For example, you can’t have two id=”header” on the same page. When you want to reuse something over and over again like the post entries, use class.
Step 3:
Wrap a DIV around your post titles and post entries. Name it class=”post”
<div class=”post”>
</div>
(The names for classes and IDs can be anything you want them to be. You can name them after… your favorite foods, but post and entry are short, simple, and easier to remember right?)
So now you have:
Here’s the organized version:
I used tabs instead of spacebars to create those indents in the index.php notepad file. Why organize? Unlike my screen-shots, your codes don’t have green and red highlights. You need a way to keep track of your codes. With the indents (tab spacing), now, it’s easier for you to tell which </div> closes which invisible box.
Save your file and refresh your browser to see the changes in the source codes.
Why add another DIV to wrap the post title and post entry?
You added the div class=”entry” to separate the post title from the post entry. The div class=”post” is for separating one post from another.
That’s it for today’s lesson; it might be a bit much to digest so make sure you ask questions if you don’t get it. Tomorrow, we’ll tackle post: date, categories, and comments.
If you spot errors or inconsistency in my lessons, please tell me as soon as possible so I can fix them right away. Also, how are my lessons so far? Do I need to be more specific? Are they too lengthy?
Follow this WordPress Theme Tutorial Series from the beginning.
[…] 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 […]
Excellent stuff here!
wow nice tutorials here, helping me a lot now, only lesson 5 but i keep on reading
thanks!
Tutorials are really great and should help anyone to get started. One thing that would make things a bit easer (tiny bit) is to provide links to the next and previous tutorial at the end. Because once you start, it’s hard to stop!
Thank you so much for these awesome tutorials, make it so much easier to understand all the coding. I can’t wait to get my new theme up and running hehe
ditto marksson!
This really is a great tutorial. Soooo much better than reading through the template & theme info at Wordpress.org. You’re tutorial is not too wordy and not too short.
As mentioned by Marksson, it would be great if there was a link to the “next” lesson from each lesson, so it doesn’t require a roundtrip back to the main tutorial index page after we complete each lesson.
Hi,
I have been successfully following this tutorial until today.
When I add in the php function the_content(), the entries that I made shows up as links similar to the title, pointing to the same page.
I have double checked and am very sure I have done as instructed. Any Clues?
sorry i am really new to all this. Trying to learn from scratch
Thanks.
It sounds like your title links haven’t been closed properly.
Great stuff so far.
Hi Small Potato.
Thanks.
Indeed I missed the closing tag.
Promise I will check more carefully before I ask next time.
great tutorial.
Thanks.
Man awesome!!! I am doing my first theme by this and you rock!
I am really digging this article. I am looking forward to each one and thoroughness is appreciated.
For those who want a next previous, you can just open the table of contents page for the tutorial - the one you use to see all the chapters, and then right click on the lesson you need to do, and open it in another tab.
nada
Fantastic! Better than any book I’ve found on the subject. Thank you so much for the obvious hard work you’ve put into these lessons.
hey, thanks Randy
You’re welcome Small Potato! Please keep up the GREAT work!
Hey Small Potato! This is an awesome tutorial and I’ve been following it for the last few days and it’s been awesome.
This is the only REAL good tutorial that I’ve found on how to make a wordpress theme from scratch.
Good work man and thanks for the tutorial! I owe you one.
Your tutorial is easy to follow! Thanks so much for your good effort
No problem, glad you liked it.
Just found this great tutorial. Thank you very much. I have a doubt. I wrote a lengthy post, but in the home page the more link is not showing, the post is going all the way down. Did I made any mistakes?
I can’t tell until you show me that. If you need help, post your question at the forums. Thanks Akhil.
I think I figured it out, I added in the post.
Sorry I didn’t know the codes will not show up, I commented out more in the post and it seems to be working
Hi Small Potato,
Just want to say thanks for a brilliant well written tutorial. I have to admit that although I have been designing and programing websites for years, I have always steered clear of Wordpress; but not anymore your tutorial has certainly turned on the light.
Chris
Small Potato-
Thanks for these great tutorials! You really cut them down into bite-sized chunks. I have known HTML for years and delved into PHP every now and then, but the WP codex had me tearing my hair out. Too bad I didn’t find your site sooner - I had almost given up the thought of even customizing the Kubrick header image… let alone making my own theme!
You really should publish an ebook - I would definitely pay 5 bucks to have a copy that’s easy to print without all the comments and colors. Heck, I’d probably donate a couple bucks to you just for sticking a Paypal donate button on one of these pages.
Great tutorial.
However, for some reason The article I write and publish from the admin panel repeats itself over and over again!
You can view it here:
http://beboville.com/wordpress
Can you tell me what I’m doing wrong?
Small Potato,
You rock - I had searched and searched for a template to fumble through and tweak, but couldn’t find anything that did what I wanted. Your tutorials are GREAT, easy to follow and interesting. I’m learning alot! Please do post a paypal button - i would love to make a donation to your cause - you deserve it!!!!
Thanks for the compliment Island Girl
you make it look so easy!! i love your tutorial! so good. so far you clarify all my questions with you notes… very very useful, you are a great teacher!
Thanks Leo
I am enjoying your great tutorial I am going to make myself stop and come back. So far so good though. I look forward to creating my first theme from scratch, until now I have been finding a theme I kind of like and trying to change it piece by piece until it was good enough.
[…] 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 […]
Is really..good..and simple. So far so good….
Small Potato, I have to say that so far your WP tutorial is by far the BEST and EASIEST to follow for me since I’ve been trudging the internet looking for an easy way in. Bravo by all means!
Great Post! I benefit a lot from here! Reading from the official site is really making me headache but yours make me addict
yeah.. it is addicted. im still continuing the tutorial even it is already 3am in the morning.
Great stuff Small Poteto:) as every one will agree its very very addictive:)
Now I have a small issue here at this stage. I have placed a big image in the post which is bigger in height than the height of the text in the content. I have aligned the picture to left. Now on the preview, the other posts are getting wrapped around the picture’s extra height (bottom). I would expect the other posts to start after the picture. Now, where did I go wrong? or will you cover this issue at a later stage…
Thanks a ton for making this tutorial.
I echo everyone else who has said this: this tutorial is the best I’ve found online after months of looking. Thanks for all your hard work on this.
I would definitely pay to have this as an ebook or even from one of the POD publishers just for my own reference. I’d also love to support your good efforts in some way. Viva the PayPal button!
Thanks for offering Woodstock
Really good! Excellent material. Well done and thorough. Please keep these pages up. Exactly what I was looking for.
Following along with your wordpress theme create lessons is great. Thanks.
Thanks so much for the amazing tutorial!
Really brilliant stuff and i can follow every method without a single error.Nice tutorial,keep it up.Gotta read part 5c right now..i’m totally addict to this tutorial..LOL.
Is there anyway possible to control the look of images in the content? I have images in my posts and they completely over take my content area (i chose not to make an expanding content area because of the design).
I was thinking of using js. lightbox to work with the images is this possible at all?
Yes, lightbox is possible.
This tutorial is excellent. Very descriptive yet easy to understand.
Just want to say that this tutorial is really helping me a lot. I really appreciate the time you took to write this and to share it with the rest of the community. It’s easy to understand and you haven’t lost me yet. I would definitely recommend this to a lot of my friends. Thank you so much for your help!
Good so far. Really learning a lot.
Tutorials are of perfect length and description!!
I am really flying through this - and feel like I have gotten a days worth of learning and development done in an hour. You have really set up some wonderful tutorials, that I am getting a lot out of. I have ‘hacked’ some previously created WP themes (like Kubrick), but always found it frustrating. This is exactly the information I have needed - but never thought I would be able to find. Thank you so much for setting up this tutorial / series!
Thanks David
In the default wordpress theme “kubrickbg-ltr.jpg” where
this image is coming from ?
vinit - what are you talking about ?
I am talking about the default theme of wordpress with blue header. In that theme there is a image for background ( kubrickbg-ltr.jpg ) is used . I checked all php files and style.css but i could not find where the image is linked. Will you solve my problem please ? this image can be found in
\wordpress\wp-content\themes\default\images folder.
Vinit
as far as i can tell, your problem is not related to this tutorial. please don’t post off topic comments and questions.
i have no idea where the image is coming from.
your tutorial is the best.. its so precise and easy to understand.
[…] WP Theme Lesson #5b: Content oleh Small Potato diterjemahkan ke Bahasa Indonesia oleh Mochammad […]
Absolutely excellent, these are the best laid out tutorials I have ever read in my entire life. Thank you.
- Peter
Buddy, your tutorial is damn good and you do not need to be more specific!! honestly !
Hey! I’m a graphic designer with a strong background in print design, but I know next to nothing about web design. I decided to create a website for myself so I can promote my work AND learn web design. Thanks for putting this tutorial together… you’re a great teacher! Your step-by-step instructions are very helpful to someone who wants to learn and understand everything from the beginning.
Small Potato,
Hello…. you’re truly amazing.. Thank you for this magnificent tutorial….
jeffrox
Wow. That has to be said first and foremost. I have been a designer for 10 years and in the last 2 have just started getting interested in blogs and dynamic coding for pages. I have been through countless pages on “Wordpress Tutorials” and have even bought 4 or 5 books on the subject. I can tell you that none even come close to the content that you have provided here on your site. I actually have to be careful because once I start a tutorial I can’t stop continuing onto the next session. I am very grateful to you and your site and I will make absolutely sure to link to your site from mine once I have it up as the best place to get a real education on Wordpress. Thanks again!
Thomas J
the only problem I’ve had so far is with *my* typos. Your lessons are extremely helpful and I’m having a blast!
thank you!
Connie
I think the lessons are just the perfect length. Thank you so much for sharing. I’m having a blast.
You are the best teacher!! I have a book on how to build a theme from scratch and this is by far way easier to understand. You don’t over explain things yet you seem to say just enough to make things very clear…you really should get paid for this!
Great tutorial so far in follow and memorising
ive tried before but i get stuck on jargon, trying to create my own theme for a new blog in setting up. http://www.thinklaw.co.uk its going to be a law blog ofc 
but on got it on the 4th (same day as this post) so will be months till im ready lol
This tutorial is awesome! Easy to follow steps and examples!
I can’t say it enough….Great tutorial
just wanted to know how you truncated your posts. at the moment my index is shwoing the full posts and i want em condensed doewn and a more link adding so that they can click and see the full post.
I just began the lessons an hour ago, now I’m at the 5th, I think its thanks to your methode…
Hi?thanks for your lessons!
How do you know these code just like
and so on?
Thanks again!
Hi?thanks for your lessons!
How do you know these code just like
and so on?
Thanks again!
Hi?thanks for your lessons!
How do you know these code just like
php the_permalink();
php the_title();
php bloginfo(’name’);
and so on?
Thanks again!
sorry…..
@o@ me again,,,,,this is the best tutorial ever,,,,GOD BLESS and MORE POWER….how old are you by the way coz you look like 16 years old yet you present your ideas better than my 40-year old teacher…You inspire me man,,,,
This is a great tutorial. Easy to follow. Thanks
this is wonderful, I cant tell you how grateful I am to have found you lessons, its easy to follow and very descriptive, and love , how you explain what each code means relating to the lesson, thank you.
[…] #2 of 77 […]
It’d be really useful to have ‘next lesson’ links at the end of each post :s Otherwise, great work - everything’s really clear so far
Hey–I just started working my way through your lessons, and I just wanted to say thanks! They’re very clear and helpful, and you really do a great job of explaining everything you should do (and more importantly, WHY). You’re a very good teacher!
I have been following your lessons for a little over a week now. You are a great teacher and explain things in a very simple, step-by-step process, which makes it easy for beginners to learn. It’s so excing to see that some piece of cryptic code I write can result in a post on a page! I get so proud of every little milestone I pass, that I Twitter the links to your lessons every time I learn something new!
Thanks for the tutorial… I’m looking forward to continue the learning process with the rest of your lessons.
=)
I really cannot thank you enough for your easy wordpress tutorials! I have wanted to learn to create my own templates for at least 3 years now. I am having so much fun learning from you. thank you! thank you! thank you!!!
Hugs & Blessings, Jewelie
Man, i LOVE your blog.
Its clear, simple and understandable for everyone!
Tnx alot!!
I am loving your tutorials! Really great job. Thank you.
That’s amazing ! You definitively should write a book… like WR themes for dummys
Think about that ! Maybe with three sections: easy, intermediate and advanced users.
I’m following the classes and at the end I’ll leave a link with the results ! You got a new student.
Cheers and Thanks a lot !
Lys
Awesome tutorials, I am so thankful that you wrote these!
Thes are good article.. can you write a article for Wordpress plugin
I was lost in WP themes until found you man!!! Your explanations are very very clear, thanks. How can i paid you for this tutorial?
Thanks so much for taking the time to write this down. It has been so helpful.
I got stuck on this lesson. I’m not sure how to show more than one post. I added 3 “dummy” posts with different titles and I added this line three times:
<a href=”">
But it picks up the same post three times. What do I need to change to make it pick up all 3 posts? I think I missed what we need to do to pick up different.
I figured it out. I forgot to publish the posts. After publishing the posts (and deleting two code lines above), it works. Thanks!
Small Potato: For someone with pretty much no coding experience at all (aside from basic bull crap stuff used on myspace bulletins), I’ve found your tutorial to be very clearly explained. The concepts do need digesting in my brain, but I grasp the basic idea of everything you’re explaining after just a couple read throughs of each lesson. Thank you so much! You’re the f’ing man!
Dude you are the man I am trying to learn all these things illustrator photoshop flash and php all at once to start my business and you have just explained so much in 30 mins of reading and doing I am so amazed god bless you man!!!
This is brilliant! What an awesome way you have of breaking things down for the novice. A natural teacher you are!
thanks a million!
Absolutely THE best tutorial around!
this is really WOW……
Love this tutorials
Everything is so easily written - and well explained….
Big compliments
Is it possible to allow for blogging on different pages? Looking at wordpress settings it seems like you can only one one page that displays your posts (unless they overflow into multiple pages)… but what do I do if I want to have separate blogs for “Portfolio” and “Services”… ? Do I need to create a completely separate blog to do that? My apologies if this is a stupid question, but I’m not sure how to word it to seek an answer from the search engines.
Thanks for the Tutorials!!!
By far on of the best wp tutorials out there.
Thank you so much for the time you put into this.
Thanks!!
Awesome tutorial.
My first reply! Excellent tutorial, I’m really enjoying everything!
Thank you very much for your awsome job!
So I’ll be number 100.
Thx for this tutorial, very clear and fun to read, for so far
Excellent tutorial. So far so good. It has a great step to step instruction guide. Thx for the tutorial.
These TUTs are great, but I find explaining XHTML to be a little too much of a break down. Users who don’t know what CLASS and ID is should probably learn that in a separate tutorial before they try to learn WP.
I find your tutorial really clear and well explained! ^^
Hi, I’m a bit confused, on my blog the_content(); does not show the “more…” link. Am I missing something?
I really appreciate it. Thanks a lot!
zyxufqhwcbjdztgwwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch
thanks for this tutorial!!!! I know wordpress is a powerful engine, now I can harness it’s power!
Thank you so much for this excellent tutorial!! I’m really enjoying it!
Thank you so much for making these tutorials!!! This is helping me so much in my limited knowledge of html and learning and understanding Wordpress.
really a very helpful lessons I make my own themes now thank you very much and wish to work with you in future
hey small potato…
just wanted to say thanks for this tutorial…it is very helpful…
I have some basic knowledge of html and some css (learned thru messing with my myspace profile)…but I am new to php and wordpress…
your tutorial makes it cut and dry…
thanks again…
Fuck! This is the it! I wasted 3 Years designing static stuff, now I can blog and blub! Thanks Bitch! I love you!
I made 10 Posts and Only one Is Showing…..Why
……Thanks For The Tutorial You Rock!!!!
Thank you. Thank you. Thank you!
Your lessons are not too long I can do up to 5 on a good day.
They are very thorough and easy to understand.
I have learned a lot in the first 5 lessons that I just could not get from any other tutorials I have read.
Very Simple and Concise.
Thank you so much for all the work you have done
You will make an excellent teacher
Dolph Cooke Australia
Very awesome tutorial, this is so exactly what I was looking for so thank you so much for it, myself and many others very much appreciate it.
One question I did have was about the_permalink line, you have what appears to be ” : ” after the_permalink and the_title, and at first when I typed it I got an error so I tried changing those to ” ; ” and the worked just fine after that. I’m not sure if I just misunderstood the picture but from what I can tell it was a colon that you have in your screenshot. Thanks again bro, really appreciate it.
Nick
Wow you have something really great here.
I love how you expect the user to know nothing about html and css and I think it has been key to show a visual example of where the code should sit in the editor. That makes for the perfect presentation