WP Theme Lesson #1: Intro

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