wp theme lesson

61
WP Theme Lesson #1: Intro 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):

Upload: davidsonjasmin

Post on 26-Mar-2015

283 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: WP Theme Lesson

WP Theme Lesson #1: Intro

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):

Page 2: WP Theme Lesson

o style.css

o index.php

o home.php

o single.php

o page.php

o archive.php

o category.php

o search.php

o 404.php

o comments.php

o comments-popup.php

o author.php

o 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.

Page 3: WP Theme Lesson

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.

WP Theme Lesson #2: Template Files and Templates

Template files and Templates is the second lesson of myWordPress theme tutorial series. If you haven‟t readLesson

#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.

Page 4: WP Theme Lesson

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.)

Page 5: WP Theme Lesson

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.

Page 6: WP Theme Lesson

WP Theme Lesson #3: Starting Index.php

Starting Index.php is the third lesson of my WordPress theme tutorial series. If you haven‟t read lesson one andtwo,

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:

Page 7: WP Theme Lesson

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

Page 8: WP Theme Lesson

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.cssfile 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.

Page 9: WP Theme Lesson

?> – 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 namedTutorial to activate it.

Notice, your theme does not have a thumbnail screeshot yet. The box is empty. Once activated, WordPress will tell

you.

Page 10: WP Theme Lesson

Now open up a new browser or tab (if your browser has tab browsing) and go tohttp://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.

WP Theme Lesson #4: Header Template

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

Page 11: WP Theme Lesson

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.

Page 12: WP Theme Lesson

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 functionbloginfo(„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.

Page 13: WP Theme Lesson

WP Theme Lesson #5: The Loop

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>

Page 14: WP Theme Lesson

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 fororganization. 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 usingbloginfo(„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; ?>

Page 15: WP Theme Lesson

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 # withthe_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/#.

Page 16: WP Theme Lesson

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 tohttp://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.

Page 17: WP Theme Lesson

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 contentfrom 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 newbrowser, 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.

Page 18: WP Theme Lesson

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:

Page 19: WP Theme Lesson

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:

Page 20: WP Theme Lesson

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 multipleclass=”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:

Page 21: WP Theme Lesson

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.

Page 22: WP Theme Lesson

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?

WP Theme Lesson #5c: Postmetadata

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.

Page 23: WP Theme Lesson

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:

Page 24: WP Theme Lesson

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 outFiled 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 getFiled 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 postinstead 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.”

Page 25: WP Theme Lesson

WP Theme Lesson #5d: Else, Post ID, Link Title

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.

Page 26: WP Theme Lesson

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 thestyle.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 thestyle.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 anypost 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.

WP Theme Lesson #5e: Posts Nav Link t 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>

Page 27: WP Theme Lesson

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():

Page 28: WP Theme Lesson

WP Theme Lesson #6: Sidebar

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.phpfile 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:

Page 29: WP Theme Lesson

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

Page 30: WP Theme Lesson

hierarchial=0 – don‟t turn sub-categories into sub-list-items, which explains why mySub 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 andoptioncount.

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 Sourceor 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.

WP Theme Lesson #6b: Page-Link Listing

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:

Page 31: WP Theme Lesson

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.

Page 32: WP Theme Lesson

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 depthand 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.)

WP Theme Lesson #6c: Get Archives and Links

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.

Page 33: WP Theme Lesson

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 thewp_list_cats() function.

</ul> – close the unordered list sitting under the sub-heading

</li> – close list item

Page 34: WP Theme Lesson

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.

Page 35: WP Theme Lesson

WP Theme Lesson #6d: Search Form and Calendar

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 assearchform.php (in the same

folder containing index.php, of course). Copy the codes in mysearchform.txt file to your searchform.php file. That‟s

it; from this point on, leave thesearchform.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:

Page 36: WP Theme Lesson

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:

Page 37: WP Theme Lesson

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.

Page 38: WP Theme Lesson

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.

WP Theme Lesson #6e: Widgetizing 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:

Page 39: WP Theme Lesson

<?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.

WP Theme Lesson #7: Footer

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:

Page 40: WP Theme Lesson

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.

WP Theme Lesson #8: How to Validate

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 tohttp://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.

Page 41: WP Theme Lesson

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.

WP Theme Lesson #9: Style.css and CSS Intro

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:

Page 42: WP Theme Lesson

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:

Page 43: WP Theme Lesson

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, thenGeorgia, 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 isw3schools.com

Page 44: WP Theme Lesson

WP Theme Lesson #10: Hex Codes and Styling Links Follow this WordPress Theme Tutorial Series from the beginning.

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 ina:visited.

Instead of typing:

a:link{

text-decoration: underline;

color: #336699;

}

AND

a:visited{

text-decoration: underline;

Page 45: WP Theme Lesson

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;

}

WP Theme Lesson #11: Widths and Floats

Follow this WordPress Theme Tutorial Series from the beginning.

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;

}

Page 46: WP Theme Lesson

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:

Page 47: WP Theme Lesson

#footer{

clear: both;

float: left;

width: 750px;

}

What‟s the difference between the Header and Footer stylings? The answer is the presense ofclear:

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 pxsuffix 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.

Page 48: WP Theme Lesson

WP Theme Lesson #12: Post Formatting and Miscellaneous

Follow this WordPress Theme Tutorial Series from the beginning.

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{} instyle.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 to12px 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:

Page 49: WP Theme Lesson

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:

Page 50: WP Theme Lesson

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.

WP Theme Lesson #13: Styling Sidebar

Follow this WordPress Theme Tutorial Series from the beginning.

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.

Page 51: WP Theme Lesson

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:

Page 52: WP Theme Lesson

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:

Page 53: WP Theme Lesson

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 TABLEthat you can style.

That‟s the end of today‟s lesson.

Page 54: WP Theme Lesson

WP Theme Lesson #14: Footer and Dividing Index

Follow this WordPress Theme Tutorial Series from the beginning.

Today, we wrap up styling and start dividing the index.phpfile 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 yourindex.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(); ?>

Page 55: WP Theme Lesson

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 thesidebar.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.

Page 56: WP Theme Lesson

WP Theme Lesson #15: Sub-Template Files

Follow this WordPress Theme Tutorial Series from the beginning.

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 arecustomizing 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 acategory.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.

Page 57: WP Theme Lesson

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.

Page 58: WP Theme Lesson

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 theposts_nav_link() codes because

the Page pages don‟t display Next page and Previous pagelinks.

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.phptemplate 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 forNext

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, andsingle.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 thecomments_popup_link() function)

and it doesn‟t use posts_nav_link() to call for navigation links.

WP Theme Lesson #16: Comments Template

Follow this WordPress Theme Tutorial Series from the beginning.

You‟re almost done. Hang on for just one more lesson. Today, you take on the life of all blogs; the comments

template. In my opinion, a blog is not a blog if it doesn‟t allow readers to comment. To some, comments are not

important, but it‟s strange for me to imagine blogs without them.

You should know:

There‟s no right way to set up the comments template in comments.php.

Page 59: WP Theme Lesson

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 thecomments.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.

Page 60: WP Theme Lesson

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 aroundcomments_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 saysPassword Protected.

The default comments template doesn‟t have that.

Here‟s what makes up the comments listing:

And here‟s what that actually means:

Page 61: WP Theme Lesson

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.