For many of us, our first experience of coding for WordPress is when we write our first theme.
After all, every WordPress site needs a theme, and if you want something bespoke then it makes sense to code it yourself.
When I started out with WordPress in 2010, I’d never worked with a content management system (CMS) before. But I’d coded plenty of HTML and CSS, either within large sites that used HTML for content as part of a CMS, or for small client sites I built from scratch.
I spent weeks weighing up the pros and cons of different CMSes I could use for client sites (remember, this was before WordPress became the dominant force it is today) and decided on WordPress for two reasons. The first was the awesome community of users and developers that we’re all a part of. And the second was the fact that with some HTML experience, it’s not that hard to create a WordPress theme.
Continue reading, or jump ahead using these links:
- What You’ll Need
- The Starting Code
- Setting Up Your Theme
- Adding Template Tags
- Adding a Loop
- Adding Hooks
In this series of three posts, I’m going to walk you through the process of creating your own WordPress theme from static HTML. We’ll start with a single HTML file and a CSS stylesheet, and convert those into a WordPress theme with all the bells and whistles that entails.
The posts will work through the process in order:
- Creating your index.php file, adding in template tags and a loop.
- Creating additional template files and template parts such as the header, sidebar and footer files.
- Adding functionality, including widgets and a navigation menu, and getting your functions file set up.
In this post I’ll create a single file – index.php. That will be based on the index.html file from my static site, but I’ll remove the content and replace it with template tags and a loop.
So let’s get started!
What You’ll Need
To follow along with this series, you’ll need a few tools:
- A development installation of WordPress, preferably on your local machine.
- A code editor.
- A static site – if you don’t have one you’re working from, you can download the files I’m using.
Make sure you do this work on a development site, not a live site – you don’t want the world to see your theme until it’s ready.
The Starting Code
The starting site has just two files – our index.html and style.css. I’ve deliberately kept things simple, and used a pared down version of my site. Here’s how it looks:
You can find the contents of the index.html and style.css files on Github – I’m not going to show the code here as there’s a lot!
Note: This is a basic set of code designed to help you create your own theme. If you want to use it for live sites, you’ll probably have to add extra styling etc. to it. It wouldn’t pass the theme directory requirements. Please just use it for learning, not to power a live site.
Setting Up Your Theme
To create your theme, you’ll need a folder for it in your WordPress installation. Using your code editor or file manager, go to wp-content/themes and create a new folder. Give it whatever name you want. I’m going to call mine wpmudev-theme-part1.
Copy your index.html and style.css files to that folder. They won’t do anything yet, but they will soon.
Now you have a folder with two files in it. You’re getting started!
Right now, WordPress doesn’t know that you have a theme. Any theme needs just two files: index.php and style.css. As you’ll see while following along with this series, you normally need more than that, but the theme will function with just two.
Let’s start by adding commented out text to your stylesheet. Open your style.css file and add the following:
This gives WordPress the information it needs to recognise that this is the theme stylesheet. Feel free to edit the details, adding your own name and URL and changing the name of the theme if you like.
The next thing to do is change the filename of your index.html file to index.php. You now have the two files that will get your theme working.
However you haven’t added any PHP yet. To do that we’ll need to add some template tags and a loop. Let’s do that.
Adding Template Tags
A template tag is a special WordPress function that you use in a theme template file. It can do any one of a wide variety of things – to see the range of template tags on offer, check out the codex.
Here we’re going to add template tags for two things:
- Calling the stylesheet
- Automatically generated classes and IDs for CSS
Calling the Stylesheet
Right now if you open up your site with your new theme activated, you’ll notice that none of your styling is loading. Here’s how mine looks:
Don’t panic! You just need to add a stylesheet call to the head section of your index file.
Note: In part three of this series, I’ll show you how to move this to the theme functions file, which is best practice. For now we’re just working with two files: the stylesheet and index.php files, so we’ll stick with those.)
Open up your index.php file. Find this line:
Edit it so instead of calling a static file, it uses PHP to load the theme stylesheet:
This uses the bloginfo() template tag, a useful tag that fetches all kinds of information about your website from the database. In this case it’s fetching the url of the theme and then accessing the file in that folder called style.css.
Now refresh your home page. You’ll find that the styles load. Here’s my page now:
You’ll notice that it looks exactly like your old static site. That doesn’t mean we’re done though – nowhere near! The content is pulling through from static content in that index.php file, which we’ll correct by adding a loop. But first let’s add some more template tags.
Creating Automatically Generated Classes and IDs
It’s really useful to be able to get WordPress to automatically generate CSS classes and IDs for your posts and your element. This means you can later use those classes for styling, targeting specific post types, categories and more.
Open your index.php file. Find the opening tag. It’ll be sitting on its own line, after the closing tag.
Edit it so it reads like this:
This uses the body_class() template tag, which will detect what kind of page your website visitors are on at any given time and generate CSS classes based on that.
If you refresh your page and inspect the code you’ll find that WordPress automatically adds some CSS classes for you:
These will vary according to the page you’re on in your site and which type of content it’s displaying. You can use this to target your CSS at certain content types such as single posts, certain categories or anything you want.
Edit that line so it reads like this:
This uses two template tags:
- The
the_ID()tag fetches the post ID and uses that to give the post a unique ID. - The
post_class()tag works in a similar way to thebody_class()tag, adding a list of classes to the article element that correspond to the type of post this is. Note that right now this won’t work properly as you’re not fetching a post from the database – but when we add the loop next, it will.
Adding a Loop
Now for the fun bit. Right now, the content of your page is hard-coded in. You want it to be populated from a call to the database, so that the correct content will be displayed whatever page you’re on.
In your index.php file, find the code inside the
Edit that code so it reads like this:
There’s a lot of code there – if you want to understand what’s going on, check out our post explaining the loop.
Now if you refresh your home page you’ll see some very different content – your posts. If this is a brand new WordPress install you’ll see the default post that’s added when you install WordPress:
Adding Hooks
The final step in this first part of our series is to add a couple of important hooks to our code. These are placed in the head section and the footer, and they’re essential for many plugins to work.
In your head section, add this before the closing tag:
Now move down to the end of your index.php file. Before the closing
