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,,,,