In this post we’re going to cover the basic process of creating a custom theme in WordPress, from scratch! No plugins or dependencies required. This tutorial is designed for the absolute WordPress beginner, so let’s get started!
Step 1: Download WordPress
First we need to download WordPress from wordpress.org, which can be found here:
http://wordpress.org/download/
At the time of this writing you should see version 3.8, but that’s not super important. Any version will do.
Step 2: Create a New Theme Folder
The easiest way to create a new theme folder is to simply copy the default WP theme and rename it. Why? Because this will ensure that we get all the WP essentials (core files) such as header.php, footer.php, page.php, etc.
At the time of this post TwentyFourteen is the latest default WP theme, which you’ll see in the themes folder of the wordpress copy you downloaded:
So, we’ll make a copy of that folder inside /wp-content/themes/ and rename it to whatever you want.
Note: do not start your theme with any numbers or special characters. Doing so will break WordPress later down the road. Also, best practices suggest using all lowercase letters and hyphens (ex: my-theme).
For this tutorial, we’ll be using “custom-theme” as our theme name. Now your /wp-content/themes/ directory should look like this:
Step 3: Modify core WordPress files
Now that we have our new theme folder, we’ll need to make some simple modifications to the core files so that WordPress recognizes our theme. We’ll start with the first file “404.php” (which is the error page). Open this file and look for any references to “twentyfourteen.” This is an example of where WordPress looks for the theme name. We’re going to replace these references with our new theme name – “custom-theme.”
The fastest way to do this is by using a Find/Replace in your text editor. If you don’t have that feature, it’s time you’ve found a new text editor! Otherwise, this could take you a while… seriously. For this tutorial I’ll be using Coda, with a screenshot below:
You’ll notice that some files will have no reference to “twentyfourteen” which is fine. And one special file, style.css, requires some extra modification. This is the theme’s main CSS stylesheet, and it has some additional info at the top of the file.
/* Theme Name: Twenty Fourteen Theme URI: http://wordpress.org/themes/twentyfourteen Author: the WordPress team Author URI: http://wordpress.org/ Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready Text Domain: twentyfourteen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
We’re going to change this info to reflect our new theme. Most of the stuff isn’t important and can be removed, but you MUST change the “Theme Name” value. I changed this theme’s name to “Custom Theme” as you can see:
/* Theme Name: Custom Theme Author: Ali Jafarian Author URI: http://alijafarian.com/ Description: Custom theme based off WordPress TwentyFourteen. Version: 1.0 This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
Now you should have new references to your “custom-theme” name throughout your theme folder, so WordPress will recognize this as an available theme option. The last step is to upload this to your server or hosting area where you have WordPress installed (I won’t walk through this since everyone’s setup is different). Once it’s uploaded, you can verify the new theme by logging into WordPress and going to:
Conclusion:
And that’s all there is to it! You’ve just created a custom theme in WordPress. That wasn’t so hard, huh! 🙂 Now we just need to add some styling and images to our theme to make it unique. Check out our next tutorial on Styling a WordPress Theme (coming soon…).
Discussion