You are on page 1of 70

Intro is the first lesson of my tutorial series about creating WordPress themes.

I will not teach you


everything all at once. That will only confuse you. What I’ll show you is not a reference. It’s meant to teach
you step-by-step, level-by-level. If you want a reference to everything WordPress themes, then read
WordPress.org’s documentations, Design and Layout. Otherwise, learn from my lessons.
This lesson covers:
• Basic Rules
• Lingo / Terminology
• Hierarchy
Basic rules:
• Rule #1: Close everything in the order that you open them.

In The Wrong Way to Close, the closing ul tag is out of order.


Every tag is wrapped by the < and > characters, the presence of the forward slash, /, indicates
whether each tag is an opening or closing tag. <> is open. </> is close. In the example, I used the ul
(unordered list) and li (list item) tags. Notice how the opening and closing li tags sit inside the
opening and closing ul tags. That’s called nesting.
• Rule #2: Every theme has at least two files - style.css and index.php. You tell your theme where
everything goes within index.php and how everything should look like within style.css.
Here is the complete list of files (don’t worry about this list yet):
○ style.css
○ index.php
○ home.php
○ single.php
○ page.php
○ archive.php
○ category.php
○ search.php
○ 404.php
○ comments.php
○ comments-popup.php
○ author.php
○ date.php
Lingo:
• Template - A set of codes that you can use in multiple places without having to write the same codes
again and again.
• Template file - A file that contain one or multiple sets of codes (templates). Every page is made up
of multiple template files. For example: index.php file, style.css file, sidebar.php, etc.
• Theme or WordPress theme - All the files you’re using: texts, images, codes, etc. Note: WordPress
theme and WordPress template(s) are two different things, despite some people consider them the
same.
• Post - Currently, you are reading a post. Furthermore, it’s simply an entry of your blog. In example,
one page of a diary.
• Page - A special type of post that is not orangized by categories. It is separate from the rest of your
posts. Note: In WordPress, page and Page are two different things. Whether you capitalize the “P”
makes a huge difference.
Hierarchy:
The diagram below simply shows you what the WordPress system will look for, in case one of your theme
file is missing. I listed only six files, instead of thirteen in the diagram because those are the main ones that
you should focus on. Further down this tutorial series, you will learn about the rest of the files.

I’ve indicated the level of importance of each file by its position. Top, left is most important. Bottom, right
is least important.
Hierarchy or levels of importance exists for template files because if the archive.php file, which handles the
look for archive pages, is missing, then WordPress will point to the index.php to control how the archive
page will look like.
If the single.php template file is missing, which template file does it look for to display a single post view? It
looks for index.php.
If you have any question, feel free to ask. Please do it through the comment form below, instead of emailing
me. That way, others looking for the same answers don’t have to repeat their questions.
Template files and Templates is the second lesson of my WordPress theme tutorial series. If you haven’t
read Lesson #1, stop right now and go read lesson one. Otherwise, you will not understand the terms used in
lesson two.
Now that we’ve gotten passed the rules and terminology, this lesson will get you familiar with template
files, templates, and the structure of each page.
The one thing to remember is that each page of your blog is made up of multiple template files. Here’s an
example of the front page.

In the example above, your front page is made up of four template files: header, index, sidebar, and footer.
Header Template File:

Your blog’s title and description sit in this file. They usually remain the same through out the whole blog.
Index Template File:
This one contains your post title, content (text and images of each entry), and post meta data (information
about each post like: who’s the author, when you published it, under which categories, and how many
comments).
Sidebar Template File:
This controls your Page links listing, category links listing, archive links listing, blogroll listing, and
etcetera. (The Sidebar doesn’t need to be on the right side of the layout. The example I’m using is a typical
two column blog layout.)
Footer Template File:

Like the header.php template file, the footer usually doesn’t change from page to page. You can put
anything in this file, but usually your copyright information.
Now let me explain why index.php is red, in the example above. Index.php is red to indicate that, that area
will change, depending on which page of the blog you’re on.
If you were on a single post page, your page would consist of these four template files: header, single,
sidebar, and footer.
Starting Index.php is the third lesson of my WordPress theme tutorial series. If you haven’t read lesson one
and two, I’d suggest you read them. Otherwise, you will not have a clue of what I’ll show you in this lesson.
It’s time to stop reading and start creating your WordPress Theme. In this lesson, you’ll get your hands dirty
with some WordPress codes. This is the part where you really need a WordPress blog installed on your
computer, not an online blog because offline is more convenient.
Step 1: Open Xampp Control.
Navigate to your xampp folder. Usually My Computer > xampp or C:\xampp.
Double click on xampp-control.exe. A window will pop up. Click on start for Apache and MySQL. Your
pop up window should mirror the image below:

Now that it’s turned on, you can minimize that window.
Step 2: Create your theme folder.
Go to your wordpress themes folder. It should be at xampp/htdocs/wordpress/wp-content/themes. Create
a new folder. Name it tutorial.
Step 3: Create index.php and style.css files.
Open up Notepad or the text editor of your choice. Notepad is at Start > Programs > Accessories >
Notepad.
Copy and paste everything from this file: index.txt to your Notepad window.
Save your notepad in the tutorial folder as index.php

Open another notepad. Leave it empty. Save the empty notepad as style.css, in the same folder. Close the
style.css notepad.
So now you have two files: index.php and style.css.

index.php Explanations:
Click on the image above for the full view. I will explain to you what each circled area does.
Doctype - Indicates what kind of codes you’re using to code your theme. Doctype is not important at this
point. I’m pointing out Doctype so you don’t have think about it.
<html> is where my web page starts.
<head> is where the head of my web page starts. Every web page has a head and a body. </head> is where
the head ends.
<?php bloginfo(’stylesheet_url’); ?> is a PHP function that calls for the location of the style.css file so my
theme can link to it and style everything on my pages. Anytime codes are wrapped in <?php and ?>, it’s
PHP and it’s different from the rest of my codes. In PHP, <?php is start and ?> is end.
So:
• <?php - start PHP
• bloginfo(’stylesheet_url’) - call for the location of style.css
• ; - stop calling for style.css. The semicolon is one way of closing a set of codes within PHP.
• ?> - end PHP
Moving on…
<body> - This is where the body starts. The body is everything that I see and read on a web page. Reading
this tutorial means I’m looking at the body of the web page. </body> is where the body ends.
</html> is where my web page ends. Nothing else after that.
Step 4: Copy and paste everything in style.txt to your style.css file. Save and close it.
Step 5: Setting up your theme.
Open up a browser.
Type: http://localhost/wordpress/wp-login.php. Go to it and login into your WordPress administration
area. (You’re able to see the login page because you opened the Xampp Control in the first step. Otherwise,
your browser will give you a Not Found error.
Looking at the administration area. Click on Presentation and click on the theme named Tutorial to
activate it.
Notice, your theme does not have a thumbnail screeshot yet. The box is empty. Once activated, WordPress
will tell you.

Now open up a new browser or tab (if your browser has tab browsing) and go to
http://localhost/wordpress. You should then get a blank page. I mean completely blank. If it isn’t blank,
you’re at the wrong page.
Your theme has been set up. That’s it for this lesson. Next up, we start working on the header template.
Don’t forget to close your Xampp Control. Double click on its tray icon in your toolbar, click Stop for
Apache and MySQL. Then click exit.
Have a question? Use the comment form below to ask me.
If you haven’t already, follow my WordPress theme tutorial series from the beginning. If you don’t, good
luck. Yesterday, I showed you how to turn on Xampp Control, install your theme, and introduced you to
PHP. Today, we’ll continue with PHP and learn how to call for your site’s or blog’s title.
Remember, type every code. DO NOT copy and paste the codes that I give you. The whole point is to get
you to remember what you learn.
Step 1:
Turn on Xampp Control. Next, open your theme’s folder at xampp/htdocs/wordpress/wp-
content/themes/tutorial. You should see the two files you created yesterday: index.php and style.css.

Your index.php and style.css files should match: index.txt and style.txt.
Step 2
- Open a new browser window. Go to http://localhost/wordpress. You should see a blank page because you
installed your empty theme yesterday.
- Go back to your theme’s folder and open the index.php file in notepad. To do that, right click on
index.php, select Properties, click Change, find Notepad or the text editor you’re using, select Notepad
and press OK. After the change, double click on the index.php file.

So far, you opened your themes folder, browser, and index.php file (using notepad).

Step 3:
You should be looking at your index.php file in Notepad. Type:
<?php bloginfo(’name’); ?> in between the <body> and </body> tags. Now save it.

Go back to your browser, refresh it. You should see your blog’s title. My blog’s title is Demo Theme
Development.
What just happened?
You added one line of PHP codes to your index.php within the body area of your web page. That one line
called for your blog’s information, hence, bloginfo(). Specifically, it called for the name of your blog. The
name that you have as Weblog Title on your Options page.
<?php - start PHP
bloginfo(’name’) - call for blog’s information, specifically blog’s title.
; - stop calling for blog’s information
?> - end PHP
Each time you add or change anything in your index.php file, save, then refresh your page to see the change.
Step 4:
To turn your blog’s title into a text link. It requires an XHTML tag. Go back to your index.php file.
Add <a href=”#”> and </a> to the same line. Your new line of codes should be:
<a href=”#”><?php bloginfo(’name’); ?></a>
Go back to the browser, refresh and you should see your title turned into a link.

Now, it’s a link, but it’s a link that points to nowhere. Since it is your weblog’s title, you want to make it
link to your front page. To do that, type:
<?php bloginfo(’url’); ?> in between the quotes of href=
Save it, now you have:
<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>
Go back to the browser and refresh. When you hover on the link now, the status bar should display
http://localhost/wordpress

When you click on it that link now, it sends you to your front page. You’ll be looking at the same page, but
whether you have # or http://localhost/wordpress as your link’s address is a huge difference. You will see
the point to this in the coming lessons.
What just happened?
You turned your website’s title into a link and pointed the link to your front page or blog’s home page.
bloginfo(’url’) - calls for the your blog’s information, speficially the address or URL of the front page
<a> - is an XHTML tag for opening a link
</a> - is the closing tag for a link. Otherwise, your web page will not know where to end the link and the
rest of your page will be one big link. Remember part of rule #1? Close everything you open.
href=”" - is short for hypertext value. Whatever’s in between the quotation marks of href=”" is the value
In words, the codes:
<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>
means: I’m starting a link. The value of my link is my blog’s URL; I’m using the PHP function
bloginfo(’url’) to call for the address/URL. The name of the link is my blog’s title; I’m using the PHP
function bloginfo(’name’) to call for my blog’s title. Close my link.
I introduced XHTML to you today so I’ll end this lesson here. Don’t burn yourself out.
Alright, this the fourth lesson of the WordPress tutorial series. I shouldn’t have to say it, but I’ll say it one
last time; make sure you read the previous lessons. Otherwise, you will not understand one thing in this
lesson. We have a quick lesson today to wrap up the header template and introduce the box model.
Step 1:
- Start Xampp control
- Open the theme’s folder, named Tutorial
- Open a browser, point it to http://localhost/wordpress
- Go back to the theme folder, open index.php in Notepad
Step 2:
Currently, you have:
<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>
Add <h1> and </h1> around it. The H1 tag means heading 1. There are six headings all together: H1, H2,
H3, H4, H5, H6. By default, H1 is the biggest one in size and H6 is smallest.
So now you have:
<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
Save it, go back to the browser and refresh.
Step 3:
Call for your blog’s description, type <?php bloginfo(’description’); ?> right under the codes for the title
link. Now you have:
<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>
Save it, refresh your browser to see your blog’s description appear under the title link. You can change your
blog’s description in the administration area later.
<?php - start PHP
bloginfo(’description’) - call for my blog’s information, specifically description
; - stop calling for the description
?> end PHP
Step 4: This step introduces you to a new tag, the DIV tag.
Type <div> and </div> around everything:
<div>
<h1><a href=”?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>
</div>
Save it, refresh your browser. You should see no changes.
Think of DIV as an invisible box. It’s there to separate your blog’s title link and blog’s description from
everything else. If you don’t style it, it does nothing other than separate content. Later on, you’ll use the
style.css file to style your invisible box. You can give DIV borders, paddings, margins, background
color, background images, etcetera.
Step 5:
Add id=”header” to the DIV tag, like this:
<div id=”header”>
Save your notepad, refresh your browser.
This change also does nothing, for now. We assign an ID to the DIV tag because there will be more DIVs or
invisible boxes. You need a way to separate one invisible box from another right?
The Loop calls for your blog’s entries. It’s the most important set of PHP codes. By now, you should
already know what to do before this lesson, of my tutorial series, begin. Go ahead and do that first, then let’s
review what we’ve learned so far.
So far, you’ve learned:
• the rules, structure, and hierarchy of a WordPress theme
• what each of your page is made up of
• how to install your theme
• how to call for your blog’s title and make it a link
• how to call for the description and separate the header from everything else
Let’s start with lesson #5:
By now, you should have opened Xampp Control, the “tutorial” theme’s folder, browser at
http://localhost/wordpress, and the index.php file in notepad.
This is what you should have in the index.php file:

Remember, to learn these codes or mumbo jumpo, type everything, DO NOT copy and paste.
Step 1:
Add a DIV (invisible box) under the header area. Give it “container” for ID, like this:
<div id=”container”>
</div>
What is this DIV for? It’s for separating your content from everything else that comes after it, stuff like the
sidebar and footer.
Step 2: Add the following codes between the Container DIV tags. Try to type this out exactly like you see it.
If you get any errors, retype it.
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
From this point on, it’ll be easier for you to recognize what each set of codes does instead of what they are
and how they work. What you just typed is The Loop in WordPress. Before I explain what those codes are
in words. You should have this:

Notice that I indented every line within the content box and I tend to skip a line a lot. That is for
organization. It’s not enough to type the codes. You need to organize them so, later on, you know where
everything is and which set of codes are related. For the indents, use tabs instead of spacebars.
What just happened?
• if(have_posts()) - checks to see if you have any post.
• while(have_posts()) - if you do have it, while you have any post, execute the_post().
• the_post() - call for the posts to be displayed.
• endwhile; - sticking to rule #1, this is to close while()
• endif; - close if()
• Note: not every set of codes need two parts in order to open and close itself. Some can self close,
which explains have_posts() and the_post();. Because the_post(); sits outside of if() and while(), it
needs its own semicolon to end/close itself.
Step 3: In previous lessons, you learned how to call for your blog’s title by using bloginfo(’name’). Now,
you learn how to call for the post titles in between The Loop.
Type <?php the_title(); ?> after the_post(); ?> and before <?php endwhile; ?>
Save the index.php file, refresh your browser. You should see Hello World beneath your blog’s description.
By default, your blog has only one post. For me, my test blog has multiple posts so I have multiple post
titles. And because the post titles I used are the same and aren’t organized at this part of the tutorial, it looks
like one long line of Hello World.

Step 4: Turning your post titles into post title links. Remember how you turned the blog title into a link?
Same thing here, add <a href=”#”> and </a> around <?php the_title(); ?>
Save index.php and refresh browser. Now your titles are title links, but they point to nowhere. To make each
title point to the right post. You need to replace the pound sign # with the_permalink().
<a href=”<?php the_permalink(); ?>“><?php the_title(); ?></a>
the_permalink() is the PHP function that calls for the address or location of each post. Save and refresh the
browser. If you have only one Hello World title, hover over that link, look at the status bar, at the bottom of
your browser; it’s no longer http://localhost/wordpress/#.
If you have more than one title link, you’ll see that each title links to a different post or web page. But, our
post title links are still on the same line. To separate them, add the <h2> and </h2> tags around your link
codes.
<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
Remember H1 that we used for the blog title? That’s your web page’s heading. H2 is used for sub-headings.
Now that your title links are sub-headings, each gets its own line. Save index.php and refresh the browser to
see the change.

This is the end of this lesson. You should now have:

Note: If you haven’t already, make several dummy posts to test your theme. Go to
http://localhost/wordpress/wp-login.php. Login, click on the Write tab, make sure you’re looking at
Write Post, make a post, then do it several more times. You can title them all Hello World like I did or give
them unique titles.
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?
Today, we tackle the postmetadata: date, categories, author, number of comments, and any miscellaneous
information attached to each post.
We’re at lesson 5C now so I assume you’re getting a grip of this. You’ll notice that my instructions will be
grouped in bigger chunks (less steps). Before we begin, open the Xampp Control, theme folder, browser,
and index.php file.
Let’s review first, you should have the following codes in your index.php file:

Step 1:
Copy and paste the codes in postmetadata.txt under <?php the_content(); ?>. (Note: For this part, you can
copy and paste. When I put WordPress themes together, I also copy and paste this part. Again, you don’t
need to fully understand it; knowing what each set of codes does is good enough.)
This screen-shot has been cut off to fit in this space. Pay attention to the organization and placement of the
postmetadata codes. Don’t cut off your codes at 1 Comment &# like the screen-shot.

Save it and refresh your browser, you should see:

You can also look at the source codes of your browser to see how the postmetadata looks like. Remember I
showed you how to view source codes? Go to View > Page Source or Source.
Explanations:
<p class=”postmetadata”> and </p> - All the postmetadata information sit in between a set of paragraph
tags named class=”postmetadata” because I wanted to separate postmetadata from the content or post
entry. Without the paragraph tags, your postmetadata information will continue where your content left off,
without any spacing to differentiate content and postmetadta.
<?php _e(’Filed under&#58;’); ?> - &amp#58; is the code to call for a colon “:”
Wrapping <?php _e(’ ‘); ?> around Filed under&#58; is not necessary. You can simply type out Filed
under:
<?php the_category(’, ‘); ?> - the_category() is the PHP function that calls for all the categories that you
tagged your post with. If you put Filed under: and the_category() together. You’d get Filed under: Name
of category 1, Name of category 2. The comma within the_category() is a way of separating the category
names. Back to the postmetadata screen-shot, notice the comma in between the category links.
<?php _e(’by’); ?> - same as Filed under:. If you’re creating the theme for personal use, wrapping _e()
around the word by isn’t necessary. I believe _e() has to do with creating translatable theme, which is
important when you’re theme gets used by hundreds of people from various countries. If you’re planning on
creating themes for public use, then it’s best to use _e() just in case you do look into translatable themes
later on.
<?php the_author(); ?> - self explanatory. It simply prints your name or whoever published the post.
<br /> - If you want a line break, but don’t want the spacing that comes with paragraph tags, use BR. Notice
the forward slash /. This is another tag that can self-close.
<?php comments_popup_link(’No Comments &#187;’, ‘1 Comment &#187;’, ‘% Comments
&#187;’); ?> - comments_popup_link() calls for a pop up window of your comments, when popup
comment is activated. If popup comment isn’t activated, comments_popup_link() simply send you to the list
of comments. No Comments &#187; is what will be displayed when you have no comments. 1 Comment
&#187; is when you have exactly one comment. % Comments &187; is for when you have more than one
comment. For example: 8 Comments ». The percent sign % means number. &#187; is a code to display a
double arrow.
<?php edit_post_link(’Edit’, ‘ | ‘, ”); ?> - This is only visible when you are logged in as an administrator.
edit_post_link() simply displays an edit link for you to select which post to edit, instead of having to
browse through all the posts from the administration panel to search for the one you want to edit.
edit_post_link() has three sets of single quotes. The first set is for what word you will use for the link title
of the edit link. If you use Edit post, then it’ll say Edit post instead of Edit. The second set of single quotes
is for whatever that comes before the link. In this case, a vertical line |; that’s what the &124; code is for.
The third set of single quotes is for whatever that you want to come after the edit link. In this case, nothing
comes after it.
Log into the admin panel, then come back to the front page to see the edit link. You’ll see a vertical line
followed by a link titled, “Edit.”
This lesson covers three extra options that you can add to each post. Else, post ID, and link title value.
Although they’re optional, you can find all three of them within every one of my free themes because you
never know what people will use your themes for.
First, don’t forget to start Xampp Control.
Step 1:
Type the following codes under <?php endwhile; ?>.
<?php else : ?>
<div class=”post”>
<h2><?php _e(’Not Found’); ?></h2>
</div>
Like this: (Notice the indents or tabs for organization.)

Save it, but you won’t notice any difference. We have to go back to lesson #5, The Loop, to explain what
you just typed above.
Here is The Loop:
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
First, if(have_posts()) checks to see if you have any post on your blog. Second, while(have_posts())
executes the_post() to call for your posts. The Else is what to do when you don’t have any post at all.
Imagine while() and endwhile; nesting between if() and else :. That’s why <?php else : ?> has to come
after <?php endwhile; ?>.
Now that you know what else is, what did you tell WordPress to do when you don’t have any post or when it
can’t find any post? You told WordPress to display the error message Not Found. That message can be
anything you want. You can download one of my themes. Take a look at its index.php file for an example.
In the example above, the Not Found message sits inside <?php _e(’ ‘); ?>. Like I told you yesterday,
that’s not necessary.
The whole message and code of Not Found is surrounded by the <h2> and </h2> tags. That’s also not
necessary. You can simply use:
<div class=”post”>
Not Found
</div>
But, using the <h2> (sub-heading) tag for the error message makes it more obvious to your visitor that
there’s nothing on that page.
What are the <div class=”post”> and </div> for? Well, you don’t want your error message to get stranded
in the middle of nowhere right? You wrapped each entry within the <div class=”post”> and </div> tags. So
same thing, although the error message isn’t actual content, it is text just like the entries.
Step 2:
Add id=”post-<?php the_ID(); ?>” to <div class=”post”>
Save your notepad and refresh your browser. Now go to View > Page Source or Source. You’ll see that
each post, now, has a number or post ID attached to it. the_ID() simply calls for the id of each post; that’s it.
Why use it? It’s for customizing the look of posts, individually. Later on, when you use the style.css file to
tell your theme how the posts will look like, every post will look the same. With a unique ID attached to
each post, you can target a single post and make it look different from the rest of the posts. Without the IDs,
you have no way of differentiating the posts within the style.css file.
How can you assign both class and id to the same DIV or invisible box? DIV is a tag, class is an attribute.
id is an attribute. Each tag can have multiple attributes just like each DIV can have both class and id. (Note:
id is an xhtml attribute. the_ID() is a PHP function. They’re different.)
Step 3:
Add title=”<?php the_title(); ?>” to the post title link.

The screen-shot above is a partial screen-shot to point out where you should place the code. Save it and
refresh your browser. Go to view source again. While viewing its source, look for any post title link. If the
post title link is Hello World, then to the left of it should be title=”Hello World”.
title=”" is another xhtml attribute for the <a> (link) tag. Whatever’s within the quotes is the description of
your link. In this case, the title of each post is also the link description. That’s why you used the PHP
function the_title() again.
If you don’t use the_title() as a value for title=”", then every post title link will have the same description.
For example, instead of the_title(), you use title=”Click me”, every post title link will have Click me as its
description.
Now, go back to your web page. Place the cursor over a post title link, a description will pop up. That’s what
you just added. Adding descriptions to your links is also useful when other sites have to scan your blog.
Technorati.com for example, each time you publish, WordPress notify Technorati and other sites that your
blog has been updated. Technorati then comes to your blog, scans it, and indexes a summary of your post,
which includes the link title description.
Tomorrow’s lesson will cover the Next and Previous page links.
At the bottom of most WordPress blogs, there’s a Next Page or Previous Page link. You call for those links
by using the posts_nav_link() function of the WordPress template system. In this lesson, there’s only one
step!
Do I really have to tell you to open Xampp Control again, theme folder, browser, and index.php file again?
Step 1: (and only step)
Add the following codes between <?php endwhile; ?> and <?php else : ?>
<div class=”navigation”>
<?php posts_nav_link(); ?>
</div>

Notice the spacing in the screen-shot. I always use tab spacing for organization.
<div class=”navigation”> - start an invisible box named navigation to wrap around your Next and Previous
links area.
<?php - start PHP
posts_nav_link() - call for the Next and Previous links.
; - stop calling for them.
?> - end PHP
</div> - close the invisible box named navigation.
Here’s what it looks like:

Save index.php, then refresh your browser to see your own Next or Previous link. By default, if you don’t
have more than ten posts, nothing will appear. If you don’t have more than ten posts, but still would like to
see it, login into the administration panel, select Options > Reading, then set it to one less than the amount
of posts that you have. For example, if you have six posts, set it to five.
How to customize posts_nav_link():
Just like some of the functions in the postmetadata lesson, you can give this function three sets of…
anything that you want to be displayed in between, before, and after the Next and Previous links. It looks
like this:
<?php posts_nav_link(’in between’,'before’,'after’); ?>
The first set of single quotes is for holding anything that you want to appear between the Next and Previous
links. The second set of single quotes is for holding anything you want to come before it. The third set is for
holding anything that comes after it.
Here’s an example of a customized posts_nav_link():
Have you been looking forward to the Sidebar? At first glance, the Sidebar looks difficult, but it isn’t tricky
at all. Once you get used to its structure, you’ll be able to code and style it very quickly.
Before jumping on the Sidebar, here’s what your index.php file should look like.
Don’t forget to open Xampp Control…
Step 1: Let’s wrap a box with a class named, sidebar around everything in the Sidebar. Type this code
under the container box and above the </body> tag:
<div class=”sidebar”>
</div>

Step 2: Start an unordered list within your new sidebar box.


<ul> - open unordered list
</ul> - close unordered list

Step 3: Add a list item (LI) inside the unordered list (UL) and put a sub-heading inside the list item (LI).
<li><h2><?php _e(’Categories’); ?></h2>
</li>

Notice the tab spacing added before the <li> and </li> tags for organization.
<li> - open list item
<h2> - open sub-heading
<?php _e(’Categories’); ?> - print the word Categories
</h2> - close sub-heading
</li> - close list item
Again, you don’t need to wrap <?php e(’ ‘); ?> around the word Categories. If you’re building this theme
for yourself, it’s okay if your sub-heading is <h2>Categories</h2>
Save the index.php file and refresh your browser. You should see the Categories sub-heading structured like
this:
The little bullet or dot before your sub-heading indicates that the sub-heading is sitting in a list item (LI). If
you have two list items within your unordered list (UL), there should be two bullets. It’s like taking bulleted
notes. Dot each item right?
Step 4:
Add the following codes within the list item:
<ul>
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′); ?>
</ul>

Here’s what that means:


<ul> - open another unordered list
<?php wp_list_cats(); ?> - call for the list of category links
</ul> - close unordered list
Save it and refresh the browser. Here’s what my category links look like:

Your default category is Uncategorized. If you did not publish under multiple categories, then your list of
category links should have only one link, the Uncategorized.
Further explanations:
• sort_column=name - list category links alphabetically
• optioncount=1 - display the number of posts made under each category
• hierarchial=0 - don’t turn sub-categories into sub-list-items, which explains why my Sub Category
link is listed in the first level of the list.
• & - each time you add on another attribute, you have to type & before it to separate it from the
existing attributes. For example & sits in between sort_column and optioncount.
Why you didn’t wrap the <li> and </li> tags around <?php wp_list_cats(); ?>:
When you call for the category links list using wp_list_cats(), it automatically attaches a set of <li> and
</li> (list item) tags around each link. Look at your browser, go to View > Page Source or Source; after the
window pops up, scroll to the bottom to see the codes for the category links list; notice that each link has a
set of list item tags around it.
When dealing with the sidebar, unordered list, and list items, it’s very important to remember:
Rule #1: Close everything in the order that you open them.
Now that you’re familiar with the structure of the Sidebar, we’ll continue working on the Sidebar with Page-
link listing. After the regular Sidebar is complete. I’ll show you how to widgetize your Sidebar.
Add the following codes on top of the Categories block:
<?php wp_list_pages(); ?>

Save your file and refresh the browser. Here’s what it looks like:

By default, you have only one Page link, the About link. I added more pages and child-pages to my offline
blog. That’s why I have four levels of Page links.
Go to View > Page Source to see that wp_list_pages() generated the whole structure and all codes for you.
Here’s an example:
First, it wraps everything within a list item (LI). Second, it gives your listing a name, Pages. Third, it adds
another unordered list (UL), under the Pages title, within the list item. Fourth, it nests each link within a set
of <li> and </li> tags.
In the screen-shot above, notice that the “Pages” title for the listing doesn’t match the size of the
“Categories” title for the Category-link listing.
How do you get it to match? Add ‘title_li=<h2>Pages</h2>’ to wp_list_pages().

Save file and refresh browser to see the change.

title_li is an attribute used to customize the look of the Page-link listing’s title. <h2>Pages</h2> is the
value of the title_li attribute.
Further customization:
In my example, I have four levels of Page links. Some layouts/designs cannot handle that many levels of
links within the Sidebar. To limit the amount of link levels to list, add the depth attribute to wp_list_pages()
and set it to 3.

Notice, I added depth=3& instead of depth=3 only. The & sign is there to separate the depth and title_li
attributes. (If you have only the About link, you will not notice any difference.)
Here’s the difference on for my listing: (Compare this screen-shot to the screen-shots above.)
Today’s lesson is fairly easy. You’ll learn how to call for an archive link listing and the blogroll links.
Tomorrow’s lesson is the calendar and search form.
Before we start, I want to explain why I’ve been breaking down my lessons into smaller lessons. Everything
that you’re learning took self-taught people MONTHS to digest! It’s important that you understand
everything I’m showing you the first time around so you won’t have to go back and re-check.
Step 1 - Add archive links.
Type the following codes in the Sidebar area, under the Categories listing:
<li><h2><?php _e(’Archives’); ?></h2>
<ul>
<?php wp_get_archives(’type=monthly’); ?>
</ul>
</li>
Give it some tab spacings for organization. Let’s see if your codes match mine:

Save your file, refresh the browser, here’s the result:

What happened?
You used the wp_get_arhives() PHP function with the type attribute and monthly value to call for the
archive links by month.
• <li> - open list item
• <h2> - open sub-heading
• <?php _e(’Archives’); ?> - text of the sub-heading
• </h2> - close sub-heading
• <ul> - open unordered list under the sub-heading, within the list item
• <?php wp_get_archives(’type=monthly’); ?> - call for archive links by month, nest each link
within <li> and </li> tags. If you check your source codes (View > Page Source). You’ll see that
wp_get_archives() generated list item (LI) tags for each link, just like the wp_list_cats() function.
• </ul> - close the unordered list sitting under the sub-heading
• </li> - close list item
Step 2: Add blogroll links
Type the following codes under the Archives link listing:
<?php get_links_list(); ?>

Save, refresh, and here’s the result:

By default, my blogroll is no different from yours. Here’s how it looks in the source codes:

The organization is not all there because the get_links_list() function generates the codes for you, just like
the wp_list_pages() function you learned about, from yesterday’s lesson. However, it stuck with rule
number one, which is close everything in the order that you open them. I circled the list item and unordered
list tags for you to see.
That’s the end of today’s lesson. Come back tomorrow for the calendar and search form.
Although the title is Search Form and Calendar, I’ll throw in the Meta block for today too. Let’s wrap up
the regular Sidebar today and figure out how to widgetize your Sidebar by tomorrow okay? All right, let’s
start…
Step 1 : Add search form
Before I give you the codes to type, open a new notepad, leave it blank, save it as searchform.php (in the
same folder containing index.php, of course). Copy the codes in my searchform.txt file to your
searchform.php file. That’s it; from this point on, leave the searchform.php file alone.
In the index.php file, type the following codes on top of every listing within the Sidebar:
<li id=”search”>
<?php include(TEMPLATEPATH . ‘/searchform.php’); ?>
</li>

Save notepad and refresh the browser. Here’s the result:


So what happened?
• <li id=”search”> - start a list item with an ID named, search. You’re giving it an ID so you can
style it later.
• include() - include whatever file you want to include. This is different from using a WordPress
template function to call for something because include() is simply including what’s already there.
In this case, it’s the codes within the searhform.php file. The information to be included does not
change on a per blog basis. In other words, my search form looks exactly like yours.
• TEMPLATEPATH - the location of your theme’s folder, wp-content/themes/tutorial
• ‘/searchform.php’ - location and name of the file, /searchform.php
• The period between TEMPLATEPATH and ‘/searchform.php’ connects them so you end up with:
wp-content/themes/tutorial/searchform.php
• </li> - close the list item
Notice, the search form block doesn’t have a sub-heading like Categories, Archives, Pages, or Blogroll. You
can give it a sub-heading if you like, but for the sake of keeping your regular Sidebar as close to the
widgetized version (which we’ll work on tomorrow) as possible, don’t give it a sub-heading.
Step 2: Add calendar
Type the following codes under the Search-Form or Page-listing block:
<li id=”calendar”><h2><?php _e(’Calendar’); ?></h2>
<?php get_calendar(); ?>
</li>

Save notepad and refresh browser. Here’s the result:


What happened?
• <li id=”calendar”> - open a list item with an ID named, “calendar”
• <h2> - start a sub-heading
• <?php _e(’Calendar’); ?> - print the word Calendar
• </h2> - close sub-heading
• get_calendar() - call for the calendar using get_calendar() function
• </li> - close list item
You’re done with the calendar.
Step 3: Add meta
Type the following codes under the get_links_list():
<li><h2><?php _e(’Meta’); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>

Save notepad and refresh browser. Here are the results:


(If you’re not logged into WordPress administration)

(If you’re logged in)

So what happened?
You started a list item (LI) with a sub-heading (H2) Meta. Under the sub-heading, you nested an unordered
list (UL). And for each link, you wrapped list item (LI) tags around it.
The wp_register() generates its own set of <li> and </li> tags; when you’re not logged in, it displays the
Register link; when you are logged in, it gives you the Site Admin link. wp_loginout() doesn’t generate its
own list item tags so you wrapped list item tags around it; when not logged in, you get the Login link; when
logged in, you get the Logout link. For now, wp_meta() does nothing; it’s invisible on the web page and
invisible in the source codes. Don’t think about wp_meta() for now; you’ll rarely use it.
That’s it. You’re done with the Meta and finally finished the regular Sidebar.
A widget-ready sidebar or widgetized sidebar is almost a standard for themes catering the WordPress 2.0
and 2.1 series. But first, what is widgetizing? Widgetizing simply means getting the Sidebar ready for the
Widget plugin; this plugin allows you to easily re-arrange features within the Sidebar.
For example, instead of having to modify the Sidebar codes to switch the positions of Categories and
Archives, you simply drag the Archives and Catgories listings to their positions.
Step 1: Create functions.php file
Start a new Notepad, leave it blank, save it as functions.php. Copy everything in functions.txt to your
functions.php file. Save and close the functions.php Notepad.
Just for review, you should now have four files in the theme folder named, “tutorial.”

Step 2: Widgetize the Sidebar


Type the following codes directly after the sidebar’s first <ul> tag.
<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>

Type this one directly before the </ul> tag:


<?php endif; ?>

Save the index.php file. You will not see any changes on the web page until you’ve installed the Widget
plugin. We’ll do that later.
This lesson on the footer is simple. You’re going to add a DIV or invisible box under the Sidebar DIV and
fill in some copyright text for the footer. Think you can do that without my instructions? Go ahead a try it.
Come back to this lesson to double check.
Step 1: Add the DIV
Type the following codes under the Sidebar DIV:
<div id=”footer”>
</div>

Step 2: Add footer text within paragraph tags. For this, say anything you want. Here’s my message:
<p>
Copyright &#169; 2007 <?php bloginfo(’name’); ?>
</p>

Save notepad and refresh browser. Here’s the result:

If you didn’t use the footer text above, &#169; is the code for displaying the copyright sign. Also, remember
the bloginfo() function that you used when putting the header together? I used it again for the footer. ‘name‘
calls for the blog’s title and ‘url‘ calls for the blog’s address.
If you want the blog’s title to be a link, check the header to remember how you did it.
You need to learn how to validate your codes, before stepping into CSS and working with the style.css file.
Validate/Validating/Validation simply means making sure there’s no error. At beginning of this series, I
gave you two links to bookmark, XHTML Validator and CSS Validator. For this lesson, you’ll use the
XHTML validator.
I’ll keep this lesson very short and simple because you need to more time to sink in everything you’ve
learned about XHTML and PHP. Don’t keep moving forward with my lessons. Take the time to reflect and
picture the codes in your head. How do you start an invisible box? What’s the different between an ID and a
Class? What PHP function would you use to call for the blog’s title? Blog’s description? The more you
picture the more you remember.
After today, you better be ready. When we take on CSS, I’ll dive deep into it because the style.css file is
what you’ll work with eighty percent of the time.
For today’s lesson, you need to open only the Xampp Control and browser (pointing to
http://localhost/wordpress).
Looking at the browser, go to View > Page Source or Source.
Select all. You can do this by clicking and dragging to highlight all the source codes or simply press Ctrl +
a.
Copy all the source codes. That’s right click and copy or Ctrl + c.
Open a tab or another browser pointing to the XHTML Validator.
Go to the bottom of the page, paste the source codes in the Validate by Direct Input box. Paste by right
click and paste or Ctrl + v.
After clicking Check, the validator will check your codes, then send you to the results page. If the message
is green, then you have no errors.
The best way to learn CSS is to dive right in. Unlike XHTML and PHP, you don’t need to touch the core
files of your template. You also don’t need to understand any basic concept. Just dive in. Trial and error is
the way to go.
Before we start, you should already have some information in the style.css file. Let’s find out what that
block of information means right now.

• First line is the theme’s name, which is self-explanatory.


• Second is the location of where your theme is available. If you’re creating a theme for yourself, not
for public use, don’t worry about it.
• Third line is theme’s description.
• Fourth is version number, which is important, especially when you release updated versions of your
theme for public use.
• Fifth and sixth is your name and home page.
The /* and */ signs wrapping around your theme’s information is for preventing the theme’s information
from affecting the rest of the page. It’s CSS commenting. While typing CSS codes to style your web page,
you might want to add comments here and there to keep track of things. But, you don’t want your comments
to affect the codes so you use the /* and */ signs to make your comments invisible.
Here’s the processed theme information:

Step 1:
• Open Xampp Control, theme folder, a Firefox browser, an Internet Explorer browser, and the
style.css.
• Point both browsers to http://localhost/wordpress
Here’s where you really need both Firefox and Internet Explorer to test your theme. Different systems
interpret CSS codes differently. It’s best to test your theme in as many browsers and in as many operating
systems as possible (Safari, Opera, Linux, Netscape, etc). If you’re lazy like me, test your themes in only
Firefox and Internet Explorer.
(Notice: You don’t need to open index.php in Notepad, in this lesson. If you can’t already open the style.css
with Notepad, right click on your file, select Properties, click Change, and select Notepad.)
Step 2:
Type the follow codes in the style.css file:
body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000000;
}
Just like working with XHTML or PHP, add tab spacing for organization:

Save your style.css file, refresh both Firefox and Internet Explorer browsers to see the change. (You’ll be
working with two browsers from now on.)
Treat body{ } as a tag and everything in between as attributes and values, just like you did with XHTML.
{ is open. } is close. Within the { and }, the colon means start and semicolon means stop. (I use the terms
tags, attributes, and values when referring to XHTML, PHP, and CSS to keep it simple. In reality, PHP and
CSS have different terms for their codes. For example: parameters, selector, and property.)
Before we move on, there’s a reason why you used the body{ } (CSS selector) and that’s because you’re
working on styling the most basic (or overall) part of the web page, the <body> tag. You don’t style the
<header> tag because there’s nothing to style. Everything that shows up on your web page sits in within the
<body> and </body> tags.
However, later on, you will style the DIV box with the ID named header.
Further explanations:
margin: 0; gets rid of the default margin spacing of the body tag. If you wanted a margin or bigger margin,
change the 0 to 10px, 20px, or etcetera. PX means pixels. Each pixel is a dot on your computer screen.
When your margin is a 0, there’s no need to follow it with px.
In the image below, the red highlighted space is the default margin spacing applied to the body tag.

After styling it margin: 0;, here’s the same page without the margins:

font-family: Arial, Helvetica, Georgia, Sans-serif; selects which font to use for your web page or website.
The fonts following the first one, which is Arial in this case, are alternates. If your users don’t have the
Arial font installed on their computers, the style.css file looks for Helvetica, then Georgia, and then Sans-
serif. You can find your list of fonts in the Fonts folder under My Computer > Hard Disk > Windows
font-size: 12px; is self-explanatory. Change it to a smaller or bigger number to see the change.
text-align: left; aligns your text to the left. Change it to text-align: right; to see the difference.
vertical-align: top; makes sure everything starts from the top. If you middle or bottom align the body tag,
everything will be pushed down.
background: #ffffff; means white background. #ffffff is the hex code for white. #000000 is the hex codes
for black.
color: #000000; means your text color will be black.
If you want to move ahead or learn CSS on your own, the best place to start at is w3schools.com
Continuing from yesterday’s introduction to CSS, we’ll do more coloring and learn more about hex codes.
The color property, followed by a hexadecimal (hex) code, is for coloring texts (words). For example body {
color: #000000;} means all texts (words) in the body of your page will be black.
The background property, followed by a hex code, is for coloring anything that’s not text. For example,
body{ background: #ffffff; } means white background for the body.
Hexadecimal Codes
• Preceded by a pound sign (#) each hex code has six digits. Those numbers range from #ffffff (white)
to #000000 (black).
• #ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888, #777777, #666666,
#555555, #444444, #333333. #222222, #111111
• The first two digits represent red, third and fourth represent green, and last two represent blue.
#ff0000 is red. #550000 is dark red. #220000 is darker red. #00ff00 is green. #0000ff is blue. Wait,
isn’t yellow a primary color? Which hex code is yellow? #ffff00 is yellow. #ff00ff is violet.
Step 1
Type the following codes under the the body{ } selector:
a:link, a:visited{
text-decoration: underline;
color: #336699;
}

• What was that for? You made sure all your links are underlined (text-decoration: underline;) and
blue (color: #336699;). It’s a different shade of blue and it’s blue because the last two digits
(represent blue) are the highest numbers.
• a:link is for styling links. When you want to turn a word into a link, what do you use? The <a> and
</a> tags, hence, the A in a:link.
• a:visited is for styling links that have been clicked on (visited pages), hence, Visited in a:visited.
• Instead of typing:
a:link{
text-decoration: underline;
color: #336699;
}
AND
a:visited{
text-decoration: underline;
color: #336699;
}
• You used the comma to separate a:link and a:visited while applying text-decoration: underline;
and color: #336699; to both selectors.
Step 2
Type the following codes under a:link, a:visited{ }
a:hover{
text-decoration: none;
}
What was that for? You made sure that the link underline disappears when you hover the cursor over a
link, hence, Hover in a:hover.
If you don’t want to underline by default and underline when you hover over then switch the text-
decoration: value for a:link and a:hover.
If you want change the color of your link on hover then add color: and whichever hex code you want. For
example:
a:hover{
text-decoration: none;
color: #ff0000;
}
This lesson will cover how to set the width for each DIV (or invisible box) and how to arrange them. It’ll
also show you some work-arounds to get your theme to display right or look the same in both Firefox and
Internet Exlporer.
Before we start, open the following items: Xampp Control, theme folder, Firefox browser, Internet
Explorer browser, index.php, and style.css.
Step 1
The first thing you want to do is decide what’s going to be the overall width of your theme. We’ll use 750px
(750 pixels); each 100-pixel is one inch. Your theme depends on the view specs of the majority of your
blog’s visitors. What you want to avoid is using a 900px theme for an audience that uses mostly 800px by
600px resolutions, which means your 900px theme would expand 100 pixels beyond their screens. That’s a
no-no.
How do you limit the overall width to 750px anyway?
You need everything to sit within a 750px box or DIV. Everything includes: header, container, sidebar, and
footer.
Add: <div id=”wrapper”> after <body>
Add: </div> before </body>
Type the following in style.css:
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}
In CSS, speficially in style.css, the pound sign (#) is how you address a DIV with an id. The period is how
you address a DIV with a class. For a class example, if your codes were <div class=”wrapper”> then use
.wrapper instead of #wrapper to address the wrapper DIV.
Save both the index.php and style.css files. Refresh the Firefox and Internet Explorer browsers (press F5) to
see the change.
Further explanations
• margin: 0 auto 0 auto; means (in exact order) 0 top margin, auto right margin, 0
bottom margin, and left auto margin. For now, just remember that setting right and
left margins to auto is centerting.
• width: 750px; is self-explanatory.
• text-align: left; is aligning the text to the left within the wrapper DIV because you
will be changing body{ text-align: left;} to text-align: center;
Step 2
Go ahead and change text-align: left; within body{} to text-align: center;
Why? (I’m assuming you’re using Firefox and Internet Explorer 6). Your layout might look right to you, but
not to people using earlier versions of Internet Explorer. Remember setting right and left margins to auto is
centering? Well, that doesn’t work for all Internet Explorers so body{ text-align: center; } is a fix for older
IEs to center the wrapper DIV or box.
(By the way, the text sizes in Firefox and Internet Explorer are different right now. We’ll fix that later.)
Step 3
Make the Header float left with a 750px width:
#header{
float: left;
width: 750px;
}
Step 4
Make the Container float left with a 500px width:
#container{
float: left;
width: 500px;
}
Step 5
Make the Sidebar float left with a 240px width and a gray background: (10px is missing; I know.)
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}
Notice, you did not use a pound sign to address the Sidebar DIV; you used a period. Also, remember #ffffff
is white? background: #eeeeee; is very light gray. You added a background color to the Sidebar just to see
the difference when you’ll add the remaining 10 pixels later.
Step 6
Make the Footer float left and clear both with a 750px width:
#footer{
clear: both;
float: left;
width: 750px;
}
What’s the difference between the Header and Footer stylings? The answer is the presense of clear: both;
in footer{}. It’s there to make sure the Footer doesn’t attach itself to anything above it, like the Sidebar or
Container.
Save the style.css file. Refresh the browsers.
Step 7
Add the remaining 10 pixels to the Sidebar by using a margin. Now your sidebar style codes look like this:
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}
Save file and refresh the browsers to see a 10-pixel space added to the left of the Sidebar.
margin: 0 0 0 10px; specifically means 0 top, 0 right, 0 bottom, 10px left. When size is 0, the px suffix isn’t
necessary.
Step 8 (Extra step)
This is just in case you’re getting a 20px margin instead of a 10px margin. 20px margin would break your
layout and push the sidebar to the bottom of the page because a 20px margin makes the sum of the Container
and Sidebar widths equal 760px instead of 750px. This extra step is Internet Explorer’s fault because the
bug of doubling the set margin doesn’t exist in Firefox.
To fix this bug, add display: inline; to the Sidebar. Now your Sidebar should be:
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}
That’s the end of today’s lesson. If you have any question, feel free to ask me. I’m here to help, not just to
show you the ropes.
And here’s what I have in the index and style files.
If you’ve read the first version of this lesson, forget the screenshot that I showed you. When taking the
screenshot, I forgot to turn off the widget plugin for the sidebar, which made the sidebar looked a
little different than what you should have.
You don’t need index.php today. Open Xampp Control, theme folder, Firefox, Internet Explorer, and
style.css.
Before we start, forget yesterday’s screenshot that I showed you. I had the widget plugin turned on while
taking the screenshot, which explains why my sidebar looked different from yours. Also, in the style.css file,
change all Sans-seriff to Sans-serif. My mistake again, I tend to add an extra ‘F’ to Sans-serif.
Step 1
Get rid of most margins and paddings by typing the following codes above the body{} in style.css:
body, h1, h2, h3, h4, h5, h6, blockquote, p{
margin: 0;
padding: 0;
}
• Notice that it’s margin: 0; instead of margin: 0 0 0 0;. When all your values are the same, use one
number. Same goes for padding.
• Save your file. Refresh Firefox and Internet Explorer. Don’t worry, now you’ll add in the margins
and paddings where you actually want them to appear, and not where the browsers want them by
default.
By the way, I’m telling you to put this and that under or above this or that, but know that it’s optional. You
can type/place your codes anywhere. The way I’m doing it is how I organize.
Step 2
Style H1 title, type this under the body{}:
h1{
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}
• font-family: Georgia, Sans-seriff; changes the H1 title front from Arial to Georgia. Without
Georgia, the web page looks for Sans-serif;
• font-size: 24px; is self-explanatory. However, notice that when you set the font size to 12px within
body{}, the H1 and H2 tags didn’t follow that rule. That’s because heading tags follow their own
rules. To control them, you need to style specifically for them.
• padding: 0 0 10px 0; means 10-pixel bottom padding. It’s for adding space between your blog’s title
and description.
Save, refresh, and here’s the result:

Step 3
Type the following codes under #container{}: (Save and refresh after each block of codes to see what the
changes are.)
.post{
padding: 10px 0 10px 0;
}
(You added 10-pixel top and bottom paddings to each DIV with a class named, post.)
.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}
(.post h2 is not a general rule. It specifically targets the H2 sub-headings within the post DIV. The H2 sub-
headings in the Sidebar aren’t affected.)
.entry{
line-height: 18px;
}
(Increased the size of the space between each line within the entry DIV.)
Step 4
Type the following codes under a:hover{}:
p{
padding: 10px 0 0 0;
}
(10-pixel top padding to each paragraph tag.)
Step 5
Type under .entry{}:
p.postmetadata{
border-top: 1px solid #ccc;
margin: 10px 0 0 0;
}
Remember the pargraph tag that you gave a class named, postmetadata, to? Styling a specific paragraph tag
and styling DIV are very much the same. You can apply border, margin, padding, and background to both.
For the postmetadata paragraph tag, you added a gray border and a 10-pixel top margin to it.
border-top means top border only. border-left means left border only. Etc. border, alone, without -top,
-right, -bottom, or -left means all borders. For example, border: 1px solid #ccc; means all four sides have
a gray 1px border.
Step 6
Type under p.postmetadata{}:
.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}
For the navigation DIV wrapping the Next page and Previous page links, you just:
• added a 10-pixel top padding
• change its font size to 14px
• change its font-weight to bold.
• increased its line-height to 18px.
That’s the end of today’s lesson.
After styling the Sidebar, this tutorial series will be almost over. Already? Yes, but don’t worry. I’ll follow
up with case studies (break down of how I created my themes).
Again, you don’t need the index.php file today. Open Xampp, theme’s folder, Firefox, IE, and style.css in
Notepad.
Step 1
Type this under .sidebar{}:
.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
}
Now that you’ve styled the parent unordered list (UL) tag for the Sidebar, all child ULs or nested ULs will
inherit the same style. In this case, it’s none, zero margin, and 10-pixel side paddings.
For example:

The second-level (or nesting) UL inherits the styles from the first UL. If you apply a border to the first UL,
the second UL will also get a border.
Save and refresh to see that your list items (LI) are no longer bulleted.
Notice how you add padding to the top and bottom.

Step 2
Type this under .sidebar ul{}:
.sidebar ul li{
padding: 10px 0 10px 0;
}
Here’s the padding now:
Why not add the 10-pixel padding to the UL tag in the first place? You need a way to separate one LI
from another. Before the added padding to .sidebar ul li{}, there was no space in between the search form
and calendar and no space in between Calendar and Pages. The spacing in between each block is what 10-
pixel top and bottom paddings for .sidebar ul li{} are for. If the UL tag had padding for all four sides instead
of just left and right (0 10px 0 10px), you would end up with a 20px top padding or 20px bottom padding in
trying to separate the LIs after padding the UL. Get what I’m saying?
If you don’t, go ahead and add top and bottom padding for .sidebar ul{}.
Step 3
Type this under .sidebar ul li{}:
.sidebar ul li h2{
font-family: Georgia, Sans-serif;
font-size: 14px;
}
Remember that styling the sub-heading under .post{} didn’t matter because you were targetting sub-
headings only under .post{}? Now, you’re styling the unaffected sub-headings in the Sidebar. Here’s the
result:

That’s how my Pages links listing looks. You probably have only one link, About. I added multiple links or
page levels to my offline WordPress install to test and see how lower level links would look. Notice the
unnecessary extra padding at the bottom that I circled. That’s a perfect example of style inheritance. Instead
of 10 pixels, it’s 20 pixels.
Because you added padding to .sidebar ul li{}, the lower level LIs inherited that padding. To fix it, do Step
4.
Step 4
Type this under .sidebar ul li h2{}:
.sidebar ul ul li{
padding: 0;
}
The consecutive ULs in .sidebar ul ul li{} indicates that you’re targeting the lower level LIs. Again, when
all values are 0, you don’t need the px suffix.
Here’s the result:

The line spacing is too close so lets make the line height equal 24px.
Add line-height: 24px; to .sidebar ul ul li{}.

By the way, if you’re getting extra spacing under the search form in Internet Explorer. Add form to:
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p{
margin: 0;
padding: 0;
}
like this:
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0;
}
Step 5 (Optional)
Do this step if you want the calendar dates to stretch and cover the full sidebar width. Your calendar
currently looks like this:
To style the calendar, find out tag it’s sitting in and what the name or id of that tag. To do that, go to View >
Page Source or Source. Your sidebar is at the bottom so go to the bottom of the source codes and look for
the Calendar.

Now that you know the calendar sits in a TABLE tag with wp-calendar as id. How do you target the wp-
calendar table in in the style.css file?
table#wp-calendar{} is the answer. Why? Earlier, you learned to use the pound sign when styling DIV
named with an id instead of a class. In this case, it’s a table instead of a DIV, with an id value, wp-
calendar.
#wp-calendar{} would work because it’s unique and WordPress doesn’t use #wp-calendar for any other tag.
But, you should try to be specific when you can. If you want to be more specific, use .sidebar ul li
table#wp-calendar{}. Even more specific? Fine, use .sidebar ul li#calendar table#wp-calendar{}. That’s
because the list item (LI) containing the Calendar sub-heading and Calendar TABLE has an id named
calendar.
Now that you know what to use, how do you make the table stretch? Use width: 100%; for the table.
Type this under .sidebar ul ul li{}:
table#wp-calendar{
width: 100%;
}
Save and refresh. Here’s the result:

width: 100%; because you want the Calendar table to adjust to the width of the Sidebar, no matter how
many pixels you want to change the Sidebar to.
It doesn’t look good, but you’re learning how to do it, in case you want to. This calendar needs more styling
to look right. Hint: Look in source codes again, find out what tags under the TABLE that you can style.
That’s the end of today’s lesson.
Today, we wrap up styling and start dividing the index.php file into multiple small files. You’ll need the
style.css early in today’s lesson. Later, you’ll work with index.php along with creating some new files.
Finally huh? Yes, you’re almost done.
Open Xampp, theme’s folder, Firefox, IE, index.php, and style.css.
Step 1
Add a 10px top padding to the footer DIV. You remember how to add padding right? I’m not giving you the
codes this time.
Step 2
Give all P tags under within the footer an 18px line-height. That’s #footer p{}. (You’re done with style.css
for today.)
Step 3
• Create a new file, name it header.php. Make sure the result is a PHP file, not a text document.
• In the index.php file, start coping from the end of the header DIV to everything above it. Paste it in
the header.php file.

Here’s my header.php file. Don’t copy and paste from my file. Copy and paste from your index.php file.
Step 4
For everything that you’ve copied and pasted in the index.php. Still in the index.php file, replace it with:
<?php get_header(); ?>
is a function within the WordPress theme system to speficially include the header.php file, instead using <?
php include (TEMPLATEPATH . ‘/header.php’); ?>.
Save and refresh the browsers. You should see no changes. If your theme look broken after you made the
change then there’s a mistake.
Step 4
• Step 4 is more of the same thing. This time, create the sidebar.php file.
• From the beginning of the Sidebar DIV to the end of it, copy and paste into the sidebar.php file.
• Then, in the index.php file, replace it with <?php get_sidebar(); ?>.
• Save and refresh the browsers. Again, you should see no changes.
• Here’s my sidebar.php file.

Step 5
• Repeat the steps above for the footer.php file.
• Here’s my footer.php file.

Lesson review
• You created three new files: header.php, sidebar.php, and footer.php.
• You learned three new functions: get_header(), get_sidebar(), and get_footer().
• The following are my files by the end of this lesson: index, style, header, sidebar, footer. Don’t just
copy and paste or use them to replace your own files. If you’re getting errors or your theme isn’t
displaying correctly, check your codes against mine.
To continue with where we left off, you’re going to create more sub-template files like yesterday’s
header.php, sidebar.php, and footer.php files.
Now that the index.php file’s divided, it gets even easier.
Step 1
Before you do this step, look at the Sidebar, click on an Archives link. The resulting page doesn’t look
different from your front page right?
• Create a new file: archive.php
• Copy and paste everything from index.php to archive.php
• Save archive.php
• In the archive.php file, change the_content to the_excerpt.
• Save the archive.php file again.
By creating an archive.php file and changing it to make it different from index.php, you are customizing
the appearance of archive pages.
Now, if you refresh your archive page, it will give you only excerpts, not the full posts.
Why would you want to do this? - to prevent Google from penalizing your blog for having duplicate
content. If one of the archive pages and the front page display the same content, that’s duplicate content.
What if you have a private blog? Then, it’s not necessary to distinguish the archive pages from the front
page. That’s not to say excerpts aren’t useful for private blogs.
Also - By default, your category pages will look for instructions on how to display content from the
archive.php file. If you don’t have an archive.php file, category pages will look for index.php.
If you want the category pages to look different the front page and archive pages, create a category.php
file and customize it.
Step 2
• Create a new file: search.php
• Copy and paste everything from archive.php to search.php
• Save and you’re done.
Now, all search results will be returned as excerpts. Without the search.php template file, the search option
looks to index.php on how to display search results.
(Optional) You can go back to lesson one to review the hierarchy.
Step 3
• Create two new files: page.php and single.php
• Copy and paste everything from index.php to page.php and single.php. (For now, page and single
should be the same.)
• Save page and single. Close index. Close single.
Step 4
There’s a difference between a Page and a page remember? The page.php template customizes the look of
those special Pages.
First, in page.php, type the following codes under <?php the_content(); ?>:
<?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
and
<?php edit_post_link(’Edit’, ‘<p>’, ‘</p>’); ?>
Second, remove the postmetadata codes from page.php. Here’s what you should have without
postmetadata.

Third, remove the posts_nav_link() or navigation block from page.php.

What just happened?


The first line of codes was for displaying links to sub-pages.

For example, edit your About page. Follow my screenshot below for what to add.

This is useful for when you have to break down one REALLY long page into multiple pages.
For the second line of codes, it’s your administrator-only Edit link.
Your Pages don’t have categories attached to them and you usually don’t want to show a time stamp for
them either so that’s why you removed the postmetadata. You also removed the posts_nav_link() codes
because the Page pages don’t display Next page and Previous page links.
Save the page.php file and close it.
Step 5
Clicking on a post title to read the rest of an entry takes you to the single post view. single.php template
handles the appearance of the single post view.
In single.php, type this under <?php the_content() ?>:
<?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
Yes, that is the same line of codes for sub-page links. Did you know you can also break down posts into
multiple sub-posts?
Second, in the postmetadata area, remove the <?php comments_popup_link(); ?> function and the <br />
tag before it. Don’t remove the whole postmetadata.
You removed the comments link function because it doesn’t work on single post view so there’s no use in
having it in the single.php file. Without the number of comments link, there’s only the invisible,
administrator-only, Edit link, left after the BR tag. You don’t want to skip-a-line for an INVISIBLE link that
only you can see right? That’s why you removed the BR tag.
Third, replace <?php posts_nav_link(); ?> with:
<?php previous_post_link(’&laquo; %link’) ?> <?php next_post_link(’ %link &raquo;’) ?>
On front, archive, category, and search pages, you use the posts_nav_link() function to call for Next page
and Previous page links. For the single post view page, there’s no Next page or Previous page link. You use
the previous_post_link() and next_post_link() functions to call for the previous and next post links.
Save the single.php file. Go to a single post view page to see the difference in the navigation area.
Lesson Review
• You created four new files or sub templates: archive.php, search.php, page.php, and single.php.
• The archive.php and search.php templates are the same.
• Pages (different from posts) don’t have categories attached to them. They also don’t have Next and
Previous page links.
• Single.php can’t display the number of comments link (called for by the comments_popup_link()
function) and it doesn’t use posts_nav_link() to call for navigation links.
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.