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

Follow this WordPress Theme Tutorial Series from the beginning.

WP Theme Lesson #2: Template Files and Templates

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.

Follow this WordPress Theme Tutorial Series from the beginning.

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

Follow this WordPress Theme Tutorial Series from the beginning.

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 and style.css.

Your index.php and style.css files should match: index and style.

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

Follow this WordPress Theme Tutorial Series from the beginning.