Understanding basic WordPress theme structure is our first step in learning how to build a custom WordPress theme.
WordPress keeps all of the content files organized and separated from all the code that drives the content management side of things. This is nice because once you learn how this works, its makes it easy to make themes.
WordPress Theme Structure: The Bones
In your WordPress site folder you should find a folder called “wp-content”. This is where WordPress keeps themes, plugins, files and anything that is unique to your specific website. Inside the “wp-content” folder you’ll see a folder called “themes”. As you are probably guessing by now, this is where we will put our new theme that we are creating. You will see folders for all of the installed themes currently on the site. We can now begin by creating a folder for all of our theme files. If you would like – go ahead and create a folder called “custom-theme”. Notice that I used a dash instead of a space. This is actually a big deal when you’re working on any web server. Use letters and numbers only. Don’t use spaces. If you’re theme is two or more words like we just created, use a dash instead of a space. Spaces create problems for URLs.
Before we continue, lets look at a theme already in this folder so we can see how WordPress theme structure works.
If you open up the “twentytwelve” folder, we can look at what the various files do in a WordPress theme. Twentytwelve comes with WordPress. Its fairly advanced, well written and well organized. Lets learn a few things from this.
If we look in this folder, there are a few key files that stand out that we need to know about.
What we see here are some folders and a ton of PHP files, JS files and CSS files. These files are mostly templates and extras that tell WordPress how to render the look and behavior of your website.
There are a few key files in the WordPress theme structure that are important for us to look at first.
style.css
The first one we need to look at is the style.css file. This file is required of all WordPress themes. You can use other stylesheets, but WordPress looks at this one to determine the name of your theme and other information. If we open this file, at the top you will see:
/*
Theme Name: Twenty Twelve
Theme URI: http://wordpress.org/extend/themes/twentytwelve
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, gray, white, one-column, two-columns, right-sidebar, flexible-width, 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
Text Domain: twentytwelve
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.
*/
This is the info that WordPress will use to display your theme in the theme selection page. If you don’t have this information in the style.css file – WordPress won’t see your theme.
screenshot.png
Also, on the theme selection page, WordPress displays a theme preview thumbnail. This is the screenshot.png file. Its optional, but when you’re done designing your theme, you can take a screenshot, save it as a png file called screenshot.png and WordPress will display this on the theme selection page.
functions.php
Another important file is the functions.php file. This file is used to write PHP code that can customize aspects of your site. This can get a bit advanced and you’ll need to understand some PHP to work with this, but its very powerful and important to highly customized themes.
Other Essential Files
Most of the other files here are page template files. If you open one of them (index.php for example), you’ll see a line of PHP code near the top that says get_header() and a line at the bottom that says get_footer(). Note that there is also a header.php file and a footer.php file. WordPress knows to combine these files inside a template.
This is done for consistency. Generally on a website, the header stays the same and so does the footer. This keeps the code from repeating itself in every file you create. If you want to change something, you only have to do it in one place. This is clean coding practice.
So that is the basic WordPress theme structure. This is what we need to understand to build a basic theme. In the next post, we’ll start our first theme. And, you probably have guessed, we’ll start by building these elements.
 I've been working with WordPress since it came out back in 2003 on various design and photography sites that I've had over the years. Check out my Google+ Profile
|