In this post, I’m going to talk about setting up a WordPress theme. I’ll go over where exactly to put your theme files, what order to put them in, what to name them and how to turn your theme on. This isn’t a difficult process, but there are some rules to follow. Let’s get going.
Where Are My WordPress Themes?
I guess we should start with where WordPress themes can be found. There are two perspectives here. The first perspective is from a WordPress user’s point of view. If you have a WordPress install and simply want to know where to upload a theme folder and where you can browse through existing themes on your site, you can do this:
– Log into your WordPress install admin.
– Roll over the “Appearance” link in the left navigation.
– Click the “Themes” link in the next menu.
From there, you’ll notice a few things. First, you’ll most likely see some big squares with thumbnail images inside them. Those are your themes. If you roll over a particular square, you’ll see an option to view a live preview of the theme you’re rolling over and an option to activate the same theme. You also have the choice to view the theme details.
At the top of the page, you’ll see a button that says “Add New” that can be pressed. The following page can be used to search through themes that are located inside the WordPress Theme Repository. If you find something you like, you can install it directly from the repository. Also, on that same page, you’ll see a button that says “Upload Theme” that you can use to upload and install your own theme.
Which brings us to our second perspective. This one is from a WordPress developer’s point of view. Let’s say that you want to get into developing WordPress themes and you would like to know where to store the theme files in you WordPress site’s directory structure. Well, to answer this question is very simple. WordPress theme files are kept in the following directory:
/wp-content/themes/
Inside this directory, you can create a folder with a unique name, such as /my-theme/. You’d store all the files I’ll talk about in later sections of this post as well as in later posts.
Our Theme Template Hierarchy
Since I’ve already covered the WordPress template hierarchy on this site quite a bit, I’m going to keep this section as more of a resource, rather than descriptive or informative. I’ll link to what I think will help in the way of understanding the hierarchy and where you can find information on it. After browsing through the landing pages from the links I’ll give below, you should have an understanding of what the WordPress template hierarchy is and how to go about developing with it in mind.
Template Hierarchy in the WordPress Codex
WordPress Template Hierarchy – A Mini Resource
Working With WordPress Templates
The Anatomy of Your WordPress Theme
WordPress Page & Post Templates
WordPress Custom Post Type Templates
WordPress Templates – Media, Search & 404 Pages
Putting Together Your WordPress Theme Folder
In order to begin constructing a theme for our WordPress website, we need to create a directory where all our theme files will reside. We’ll call this the theme folder.
When naming the theme folder (that lives where I described in the first section of this post), we need to be cognizant of similarly named directories in the same directory as our theme. Here’s a hint: don’t name your theme folder with one word. Always prepend something unique before a generic name. So if you would like to create a theme for a cat site, you wouldn’t simply name it /theme/. You would name your theme directory something like, /cat-theme/ or /orange-cat-theme/. By prepending a generically named theme with something more unique, you lessen the risk of conflict with another theme.
In order to get our theme initially off the ground, we’re going to have to create three files inside our folder. These three files are:
style.css
index.php
functions.php
The first two files are necessary for viewing our theme inside the WordPress admin area I spoke of earlier. There is specific text that’s held inside these files that tell WordPress exactly what they are. They give the instructions that tell WordPress what to do with them.
Do you remember when I talked about rolling over the thumbnail box that you’ll most likely find on the themes page inside the WordPress admin? When you roll over that box, a link appears that says, “Theme Details.” If you click that link, you’ll travel to a page that offers all the details for that particular theme. Well, those detail are stored someplace and the top of the “style.css” is that place. Folks in the WordPress community call this area the theme meta information. I’ll give an example of it here:
/* Theme Name: IndustryDev Theme Author: Jay Gaulard Author URI: https://industrydev.com/ Description: Very basic theme that showcases the simplicity of what life on the internet can be. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: responsive-layout, light, silver, two-columns, right-sidebar */
To take a closer look at the top of the stylesheet, check out this page in the WordPress Codex.
Just by filling in the meta information for our theme in the style.css file, we’re now able to see our theme available in the themes area of our WordPress admin. All the information we placed in that area is nicely formatted.
What’s missing is the screenshot of what the theme is going to look like. In order to add that to view inside the admin, we’ll need to create a .png file with the dimensions of 880×660. Also, it needs to be named “screenshot.png” and stored inside the theme folder. To learn more about the WordPress theme screenshot requirements, follow this link.
Turning It On – Let’s Activate Our Theme
In order to activate our theme, all we need to do is to head back into the theme page in the WordPress admin, roll over our theme thumbnail and click the “Activate” button. From there, the active theme will move into the first position and be live on the site. If you visit the theme area and don’t see the theme you’re interested in, but see something down below under the heading, “Broken Themes,” it most likely means that a file is mis-named. Check the files over again to be sure they are named precisely as I named them above.
I’m going to be writing posts on how to continue setting up a WordPress theme, so if you’re interested, stay tuned to my WordPress category. Also, if you have any comments or questions, please leave them in the comment area below. Thanks!
Leave a Reply