Prequisites

You will need knowledge of the following: HTML, CSS, Bootstrap (or responsive web design), basic PHP knowledge, and of course WordPress. A programmable text editor is highly advised, I will be using Sublime Text 3 but there are plenty of good alternatives out there. Finally you will need a server ti develop on. Luckily if you don’t have server space to test your code on there are easy ways to setup your personal computer to act like one. Since this isn’t a tutorial on how to setup a local server environment I’ll point you to an all in one application that can do the heavy lifting for you. For Mac users I recommend MAMP (Mac, Apache, MySQL, PHP/Perl) for Linux and Windows users you can use XAMPP which is basically a cross platform version of MAMP. For the purposes of this tutorial I will be using XAMPP.

I’m going to start off with an HTML template I whipped together in 10 minutes so that we can break them into theme files in order to help you understand how WordPress theme files come together to form a page. This is the basic Layout:

wordpress theme html templete
HTML Template

You can download the zipped folder containing the HTML, CSS, and image uploads folder here. Unzip the folder right into your XAMPP/htdocs directory where your WordPress install will also be going.

Building Your Custom Theme

First thing is first, download WordPress and place it in your XAMPP/htdocs folder. Use your XAMPP app to open phpmyadmin by clicking on the config button on the same line as apache. Then click Database -> create database, and create your database. I called it themes101.

Linux apache mysql php

Next your going to want to unzip your WordPress folder in htdocs and navigate to wp-config.php. Open it up in your text editor and find these lines of code:

/** The name of the database for WordPress */
define('DB_NAME', 'database_name_here');
/** MySQL database username */
define('DB_USER', 'username_here');
/** MySQL database password */
define('DB_PASSWORD', 'password_here');

Your going to want to edit it to this:

/** The name of the database for WordPress */
define('DB_NAME', 'themes101');
/** MySQL database username */
define('DB_USER', 'root');
/** MySQL database password */
define('DB_PASSWORD', '');

Sometimes your going to need to change the DB_PASSWORD to ‘root’ as well, but try it blank first.

Now there are a bunch of other things to do to improve WordPress security like adding salts and changing prefixes for your tables but this isn’t an installation tutorial, its a themes tutorial. So open up a browser, Type in localhost and your WordPress install should pop up. Once it’s properly installed and matched to your database navigate to your htdocs > wp-content > themes directory. You should see other WordPress themes there, ignore those and create a new directory for your theme and call it whatever you Like. I called mine mainfram3.

Let’s go back to that custom HTML file I whipped up and you downloaded. We’re going to want to break it into pieces that we can re-use over and over in our theme. But first we need WordPress to recognize our theme, so open up the directory you created and create a style.css file. Inside that file write this commented out code at the top:


/*
Theme Name: Mainfram3
Author: AJ
Description: My first theme
Version: 1.0
*/

And that’s it! If you go into your admin panel you will see your theme there. It doesn’t have a picture because you need to add one in the directory and name it screenshot.png for it to appear, otherwise it will remain blank.

DRY – Don’t Repeat Yourself

One of the common principles of WordPress theme code and PHP in general is preparing code in separate documents that can be called over and over again to form a full page instead of re-writing it every time. So lets do that with the HTML code for earlier. Move it into your new theme directory and change its name to index.php . Now get your steak knives ready because we’re going to chop it up!

First take everything from the top of the file down to the opening <body> tag and put it into a file named header.php

theme header
header.php

Notice the <?php wp_head(); ?> tag i tucked in before the closing </head> tag that loads WordPress hooks and presets. Next comes the footer:

wordpress footer
footer.php

Again notice the <?php wp_footer(); ?> I hooked in before the closing </body> tag.

We might as well take out the extremely oversimplified sidebar out of the way next . Again we’re not trying to win design awards here, we want you to understand the concept of DRY in WordPress theme creation and PHP.

wordpress theme sidebar
Sidebar.php

Lets delete that <h1> HTML Template </h1> as we can dynamically generate that later, then pull out the content section and put it into content.php where our content we enter will go.

CMS template
content.php

This should leave your index.php file pretty bare…….

index.php

That is until we start adding out PHP in. This is the beginning of the WordPress Loop in your Wordress theme.

So let’s Jazz it up

wordpress theme index
index.php

get_template_part() is built in WordPress code telling WordPress to something from your templates, in this case it’s telling us to grab content.php for a post. If it had said

get_template_part( 'template-parts/content', 'page-products' ); 

The function would be telling us to navigate to the template-parts directory and grab the content file labeled content-page-products.php

That’s it for Part 1/3. Make sure to check out next week’s post when we start replacing HTML with PHP to make our pages more dynamic, we introduce you to the full WordPress loop, and show you how the template hierarchy works in Wordress.