How To Build A WordPress CMS Theme – Part 1: Theme Basics
I’ve had several requests lately for books, blogs and how-tos on how to build a WordPress theme, specifically one that has no blog or is mainly needed for a large multi-sectioned website.
I love WordPress, and although I hate writing tutorials, especially really really long ones, I thought this would be a great opportunity to not only help WordPress beginners out, but to also show everyone else why I think WordPress really is the best platform out there – for everything but eCommerce.
This tutorial is going to be split over several weeks, in several parts, and several chapters. At the end of the entire series, I’m going to offer the whole thing for download as a PDF book. So let’s get started!
Chapter 1: What is a WordPress Theme?
The great thing about WordPress, is that everything you need to edit is really included in one folder – your theme folder. Your theme folder in included in the only folder you should ever touch in the WordPress installation – otherwise you risk overwriting your work when you do an update.
You can name your theme folder anything you’d like, as long as it’s placed in the correct directory:
Top Directory > wp-content > themes > theme_folder
I prefer to give the theme the name of the site. So, if you’re client’s business is called Joe’s Tires, I would probably name the theme folder joes_tire, just so we don’t confuse ourselves and to make it easier to remember when needing to type out URL paths.
The cool thing about a WordPress theme, is it technically only needs three files to make it work – header.php, footer.php, index.php and most importantly, style.css.
While you wouldn’t want to do this, you could run the whole theme off those files. All of your template pages, including blog posts and pages, will default to index.php if their are no other template files in the theme folder. Even though I’ve actually seen this done, you should NEVER do this as it makes your code convoluted and a pain in the ass to update.
Chapter 2: Basic Files Inside of the Theme Folder
Files inside a theme vary from site to site, and you may have more or less files depending on what features the site has. However, I like to start every WordPress site with my basic Hijinks theme, which includes all of the basic starter files most sites will use. Here’s the break down of what each are and do.
- 404.php – This of course, controls what your 404 page looks like. I will admit I’m guilty of removing this as I like to think my sites will never have 404 errors 😉 If you do remove this and a user goes to a wrong link, the site will just redirect them to the homepage.
- archive.php – This normally houses the blogroll pages, specifically the lists of blog posts. If there are no category.php or date.php template files, it will also control category and date archives pages.
- comments.php – This template controls how the comments area displays, there’s not much editing you can do on how the comments display themselves, without a custom function), but you are welcome to edit the HTML for the comment form and such here. Removing this file will just display a basic comment template.
- footer.php – If you’re a developer, you should already know what this does. The only really important piece of code in here is the
hook which is where plugins will insert some of the code necessary for them to work.
- functions.php – The best file in the template folder. This is where you can write custom functions that change the way the WordPress core works, instead of downloading someone else’s plugins. You can also enable more sidebars, the menu system, multi-sites and custom post types from here.
- header.php – Another simple template, the header file contains much more important code than the footer.
- images folder – Where you put the template images of course!
- index.php – The homepage of the site. You can either put a WordPress loop here to display your latest blog posts, or do what I do and make it a custom homepage. More on that in the next section.
- page.php – This is the basic page template for the “static” WordPress pages. You can either have multiple page templates in multiple files by adding a special code to the top of the file (more on than later), or use if/else statements to show certain content on each page.
- screenshot.png – The 300×225 thumbnail image you see when selecting a theme under Appearances > Themes in the admin menu bar.
- search.php – The template that controls the search page template.
- searchform.php – The search form will work without this template, but I like to use it to customize the way the form appears. Whatever you put in here will be automatically grabbed by WordPress.
- sidebar.php – This includes your sidebar calls.
- single.php – This template displays the blog post page and normally includes the call to the comment template.
- style.css – Whether or not you want to put your CSS here, this file is required to make the theme work, specifically because it includes important information at the top of the file that displays the theme name, author and author URL that shows up in the Appearance > Themes section next to its screenshot.
You are welcome to remove any of the files you won’t be using, except those mentioned in Chapter 1. For example, if Joe’s Tires doesn’t have a blog (or any custom post types), you could remove archive.php, comments.php, and single.php.
After looking at these core files, you should be able to tell why I love WordPress so much. Depending on what you name your files, WordPress will automatically grab and use those without having to tell it to. The file structure is clean and easy to recognize!
Chapter 3: Declaring Custom Templates
In addition to the basic page.php and archives.php templates, there are so many more you can create:
If you want a different layout just for the category page, create a file called category.php
If you want a custom layout for just one category, create a file called category-shoes.php, where ‘shoes’ is the name of the category.
Same goes for tags.php and tags-shoes.php!
For custom page templates, you can name the file whatever you want, you just have to add this at the top of the file:
<?php /* Template Name: Two Column No Sidebar */ ?>
Then, the template will show up in the right hand bar when you’re editing a page, and will allow you to select the various templates.
WordPress will automatically use this for you!
A Different Way
I no longer use templates for anything but custom post types, unless the layouts are radically different from each other. Instead, I prefer to use if/else statements to show or hide custom areas in the layouts. This way, all of my page code is included in page.php, instead of having to manage multiple page template files. The same goes for archives and other templates.
Custom Post Type Templates
If you do not declare custom templates for your custom post types, they’ll just use the regular single.php template to display the content. Otherwise, you can have a single-gallery.php file, where ‘gallery’ is the name of the custom post type.
Stay Tuned Till Next Week!
Next week I’ll have the next section up, it’s already becoming much longer than I though possible! If you have any questions about today’s lesson, don’t be afraid to ask in the comments section 🙂