As we have our HTML and CSS in place, the next step is to turn it into a working WordPress theme. This involves copying our code into WordPress template files and adding some special code, which WordPress uses to display content. This is what we'll do in this chapter.
In this chapter, you'll learn how to:
- Turn your HTML files into PHP files for WordPress
- Split your PHP into a number of template files, which split the code up into manageable chunks WordPress can work with
- Use the correct template files to display different kinds of content
- Incorporate WordPress-specific PHP code, such as template tags and API hooks, into the theme's template pages to create our functional theme
When we're done with this chapter, we'll be ready to move on to adding more advanced features to our theme in the next chapter!
To get started, you should already have an installation of WordPress to work with. If you don't, please return to Chapter 1, Getting Started as a WordPress Theme Designer, to read up on the best solution for setting up a sandbox installation of WordPress that you can build your themes in.
By now you've gotten the point that a WordPress theme essentially contains the HTML and CSS that hold and style your WordPress content. WordPress themes are put together by leveraging the WordPress Template hierarchy and the theme API (Application, Programming Interface). The theme API is basically just WordPress-specific PHP code, which enables us to create and customize the loop as well as leverage various template tags and hooks in our theme.
We've discussed the fact that a WordPress theme is comprised of many file types including template pages. Template pages have a structure or hierarchy to them. That means if one template page type is not present, then the WordPress system will call up the next available template page type.
This allows developers to create themes that are fantastically detailed and take full advantage of all of the WordPress hierarchy's available template page types. It is also possible to have a fully functioning WordPress theme that consists of nothing more than a single index.php file, but it's not necessarily good practice!
In addition to these template files, themes of course also include image files, CSS stylesheets, custom template pages, and PHP code files. Essentially, you can have many different default page templates in your WordPress theme, not including your style.css sheet or include template files. You can have way more template pages than that, if you take advantage of WordPress' capability for individual custom post, page, category, and tag templates.
Your theme does need to have the appropriate WordPress PHP code placed into it in order for the content that is entered into the Administration panel to materialize on your site. To help you organize and maintain that special WordPress PHP code, it helps if your theme is broken down into some of these various template files, which make your theme easier to maintain with less confusion.
The following screenshot illustrates how a theme's template files contribute to the final rendered page that a user sees in the browser:
The next list contains the general template hierarchy rules. As we've mentioned, the absolute simplest theme you can have must contain an index.php page. If no other specific template pages exist, then index.php is the default.
You can then begin expanding your theme by adding the following files:
For static pages:
page.phptrumpsindex.phpwhen looking at a static pagehome.phptrumpsindex.phpandpage.phpwhen the main blog post listing is viewedfront-page.phptrumpsindex.phpandhome.phpwhen the front page is being viewed, whether that's a static page or the blog post listing- A custom template page-slug or page-ID page, such as
page-about.php, when selected through the page's Administration panel, trumpsindex.phpandpage.php
For individual posts and attachments:
single.phptrumpsindex.phpwhen an individual post or attachment is viewed.single-post_type.phptrumpssingle.phpwhen used with a custom post type. For example, if you were using a post type of product, you would set up a template file calledsingle-product.phpfor viewing individual product details. This can be useful if you want to display different metadata or have a different layout for custom post types.single-attachment.phptrumpssingle.phpwhen an attachment is viewed. In turn,attachment.phptrumpssingle-attachment.php- A custom
MIME_typepage trumpsattachment.phpwhen attachments of a givenMIME_typeare viewed. For example you could useimage.phporvideo.phpfor displaying each of these types of attachment.
For archives which list posts or search results:
archive.phptrumpsindex.phpwhen a category, tag, date, or author listing is viewed.search.phptrumpsindex.phpwhen the results from a search are viewed.category.phptrumpsarchive.phpwhen a category listing is viewed.taxonomy.phptrumpsarchive.phpwhen a taxonomy listing is viewed.- A custom category-ID page trumps
category.php. To set up a category listing page you can either use the category ID (which would give you acategory-12.phpfilename, for example), or you can use the category's slug (which would give you an example filename ofcategory-featured.php). tag.phptrumpsarchive.phpwhen a tag listing is viewed.- A custom
tag-tagnamepage, such astag-reviews.php,trumpstag.php. author.phptrumpsarchive.phpwhen a list of posts by an author is viewed.date.phptrumpsarchive.phpwhen a list of posts for a given date is viewed.
And finally, when the server can't find the page or post:
404.phptrumps everything else when the URL address finds no existing content. You can use this to display some custom content for 404 pages, such as an error message and search box.
Note
Pages, posts, attachments, and custom post types are the different kinds of content that you create in WordPress:
A page is a static page which isn't included in listings. For example, you might have a static About page, or if your site isn't a blog, a static Home page. You can tell WordPress whether to display a static Home page or a list of posts—we'll come to that later in this chapter.
A post is a blog post or news article. Depending on the kind of site you're developing, you might use these for most of your content or you might not use them at all.
An attachment is a file you upload via the WordPress Media admin screen. WordPress uses attachment pages to display media such as images, pdf files, and videos.
A custom post type is a different kind of post from your blog or news posts. For example, if you're developing a site for a business wanting to showcase its products, you might create a products custom post type. These wouldn't show up in the blog, but would have their own listings pages. We'll look at how to set these up in Chapter 4, Advanced Theme Features.
In a nutshell, WordPress does this for powerful flexibility. If your theme design is simple and straightforward enough (that is, you're sure you want all your loops, posts, and pages to look and work exactly the same), as mentioned, you can technically just dump everything into a single index.php file that contains all the code for the header, footer, sidebar, and plugin elements!
However, as your own theme developing skills progress (and as you'll see with the theme we build in this book), you'll find that breaking the theme apart into individual template files helps you take advantage of the features that WordPress has to offer, which lets you design more robust sites that can easily accommodate many different types of content, layouts, widgets, and plugins.
If all this talk of template files and hierarchies is making your head swim, don't worry! We'll start by creating a simple theme using index.php, and then move on to creating more template files as needed.
A WordPress site uses PHP code and a MySQL database to keep content, design, and functionality completely separate from each other, enabling us to easily upgrade and enhance them.
To refresh ourselves, the WordPress system works as pictured in the following diagram, which we first saw in Chapter 1, Getting Started as a WordPress Theme Designer:
Each file in a WordPress theme contains template tags, which allow us to call in different aspects of our content, such as the title, the post, the author, and so on. On a traditional blog page, we will probably place template tags inside what's called the loop—this code will retrieve all the posts associated with the page's call (say, the ten most recent posts if the user is on the blog listing page, or all the posts in a specific category if a category listing is being displayed).
Below is a graphic, which demonstrates how the WordPress Loop works with template tags.
Your workflow will pretty much look like the following:
You'll be editing CSS and HTML in your HTML editor. After each edit, you'll hit Save, then use Alt + Tab , or the dock, or taskbar to switch over to your browser window. You'll then hit Refresh and check the results. Depending on where you are in this process, you might also have two or more browser windows or tabs open with your WordPress theme view and others, with the key WordPress Administration screens that you'll be using.
Whether you're using Dreamweaver or a robust text editor, such as Coda, TextWrangler, or HTML-Kit, all of these let you use FTP to access and update files from within the program if they're stored on a remote server. Be sure to use this built-in FTP feature. It will let you edit and save to the actual theme's template files and stylesheet, without having to stop and copy to your working directory or upload your file with a standalone FTP client.
Tip
Be sure to save regularly and make backups!
Backups are sometimes more important than just saving. They enable you to roll back to a previously stable version of your theme design, should you find yourself in a position where your HTML and CSS has stopped playing nice. Rather than continuing to mess with your code wondering where you broke it, it's sometimes much more cost effective to roll back to your last good stopping point and try again. You can set your preferences in some editors, such as HTML-Kit, to autosave backups for you in a directory of your choice. However, you know best when you're at a good "Hey, this is great!" spot. When you get to these points, get in the habit of using the Save a Copy feature to make backups. Your future-messing-self will love you for it.