WP Theme Lesson #5b: The Content

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.