WordPress Themes — the files that work together to create the design and functionality of a WordPress site — are the popular content management system’s absolute powerhouse feature. Combined with WordPress’s powerful platform architecture, its robust themes allow for limitless customization.
WordPress lists four key benefits of WordPress Themes:
- Themes separate the presentation and display from the system files or the actual content so that you can change the visual presentation with minimal issues.
- Themes often have robust settings to enable or disable additional functionality built into the themes. Theme designers will often include the means to include galleries or sliders.
- Themes often have settings to modify the design and layout of the site easily.
- Well-developed themes remove the need for WordPress administrators to learn CSS, HMTL or PHP to make site modifications.
Understanding WordPress Themes
The default installation of WordPress consists of core files that we describe in this article about migrating WordPress from one host to another. Themes, plugins and all uploaded assets are nicely stored within the wp-content folder, with themes in the appropriately named themes directory.
If you decide to install a theme using WordPress's theme browsing or upload mechanism, the theme is transferred using a zip file, then uncompressed into the themes folder. Each theme has a unique folder name, but you'll find a consistent naming convention applied to the files within.
All documentation on WordPress Themes can be found on WordPress's Theme Development micro-site. If you're familiar with PHP and expecting to customize and develop themes or child themes, I'd also recommend reviewing WordPress's PHP Coding Standards. PHP often allows for some sloppy programming that can wreak havoc when trying to troubleshoot errors with your WordPress Theme.
WordPress Theme files
Believe it or not, WordPress only requires two files for a theme. The first file is a style.css file that describes the WordPress theme. WordPress reads the theme description using a series of comments that start the stylesheet:
/*
Theme Name: My Theme Name
Theme URI: http://www.dknewmedia.com/
Description: This is the custom theme I'm developing
Author: DK New Media
Author URI: http://www.dknewmedia.com/
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: godaddy, theme
Text Domain: mytheme
*/
The additional file needed is the index.php file that contains your Loop to display the content published in WordPress.
WordPress Template parts
Not all WordPress Template files contain every element of your design. As you look at a common site, you'll notice that there are four basic sections of a common page:
- Content — the content that you're producing specific to that page, post or archive.
- header.php — the common design at the top of each of your pages, posts or archives.
- footer.php — the common design at the base of each of your pages, posts or archives.
- sidebar.php — the common design on the side of each of your pages, posts or archives.
- searchform.php — the search form used within your template.
- .php — this can be any custom part used throughout your template, perhaps a call-to-action or a secondary sidebar.
WordPress Site Template Pages
While WordPress started as a blogging platform, writing posts isn't necessary to publish a WordPress site. If you're not planning on using WordPress for blogging, the following template files can be customized for specific designs:
- 404.php — a design for when your content is not found, known as a 404 status error.
- front-page.php — used if you're designating a static page in your WordPress > Settings > Reading settings.
- home.php — the default design for your home page.
- page.php — the default page design.
- page-.php — will apply this template design to the page with the matching URL slug.
- search.php — the default search results page design.
WordPress Blog Template Pages
If you're going to blog as well, you have many more theme template options that you can develop:
- archive.php — the default design to display posts by category, by author, or by date if no other templates are designed.
- archive-.php — if you're implementing Custom Post Types, this is how you can customize the design for the archive listing.
- attachment.php — the default design to display an attachment that's been uploaded to the media library (other than an image).
- author.php — the default design for a single author.
- category.php — the default design to display posts for a category.
- comments.php — the default commenting template used throughout the blog.
- date.php — the default design to display posts by date, if used in the permalink structure.
- image.php — the default design to display an image that's been uploaded to the media library.
- single.php — the default design for a single post.
- single-.php — if you're implementing Custom Post Types, this is how you can customize the design for the single version.
- tag.php — the default design to display an archive of posts by tag.
- taxonomy.php — the default design to display an archive of posts by a custom taxonomy.
Pro tip: Don't forget to add a screenshot to view your theme within the theme browser in WordPress > Appearance > Themes. The image is a png format and is 880 pixels tall by 660 pixels wide.
WordPress Child Themes
Perhaps one of the lesser-known features of WordPress is the ability to build child themes that adopt another theme in its entirety. We've assisted many clients who hired an agency to develop a theme for the client by starting out with a licensed, purchased theme. However, the agency jumps right in and begins editing the purchased theme to customize it for their client. Editing a licensed theme is a terrible practice!
You can create a child theme easily by adding another theme directory, index.php file, and style.css with a reference to the parent theme:
/*
Theme Name: My Child Theme Name
Theme URI: http://www.dknewmedia.com/
Description: This is the custom child theme I'm developing
Author: DK New Media
Author URI: http://www.dknewmedia.com/
Version: 1.0.0
Template: parent-theme-directory-name
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: godaddy, childtheme
Text Domain: mychildtheme
*/
By building a child theme, you only have to include the parent theme files that you wish to customize within your child theme directory. And by never editing the parent theme, you're able to update that theme if or when its author releases a new version. This often happens as a response to WordPress changes, security issues or bug fixes.
Additional files and folders
As long as you don't create files that do not conflict with the reserved filenames above, you can add as many subdirectories and files as you'd like. A common example is adding alternative page templates. A page template is simple to create — just add a uniquely named PHP file with the following comments in the header:
Now you can apply that page template using the editing options on the page you create.
Theme developers also add additional subdirectories within their theme, including js (for scripts) and images for images specific to your theme. More robust theme developers often have directories for additional CSS, theme design frameworks, and even language subdirectories if they are looking to translate the theme. WordPress also supports right-to-left languages using an rtl.css file in your theme's root directory.
There are thousands of themes available for WordPress. You can of course see many of them in the WordPress.org theme directory. And, using the files and tips noted here, you can tailor them to meet your exact needs.
