While the most minimal of WordPress Themes really only need an index.php template and a style.css file (or just the style file if it’s a Child Theme) most need something a little more solid.Let’s create the directories and files that will make up our _s-based theme, Shape.
Make a folder in wp-content/themes/ for your theme—for this tutorial I’ll be using “shape”, but it can be whatever you want—and create the following blank files and folders in that new folder (don’t worry, we’ll fill them up as we work through the lessons).
- inc (folder)
- js (folder)
- languages (folder)
- layouts (folder)
- 404.php
- archive.php
- comments.php
- content.php
- content-aside.php
- content-page.php
- content-single.php
- footer.php
- functions.php
- header.php
- index.php
- no-results.php
- page.php
- search.php
- searchform.php
- sidebar.php
- single.php
- license.txt
- rtl.css
- style.css
I’m using “Shape” as the theme name here, but feel free to name your theme what you want. And of course, fill in the author name, URLs, and description with your own information.
/* Theme Name: Your ThemeTheme URI: http://example.com/example/Description: A search engine optimized website framework for WordPress.Author: YouAuthor URI: http://example.com/Version: 1.0Tags: Comma-separated tags that describe your theme.Your theme can be your copyrighted work.Like WordPress, this work is released under GNU General Public License, version 2 (GPL)..*/
Let’s walk through each of these elements so you understand what they’re all about.
Once you’ve got that done you can activate your theme and navigate to your test site. We’ve made the ultimate blank theme! Things should start to get interesting right about now.
WordPress really only needs 1 template file, index.php. We can, and will be using a series of template files that can be used instead of index.php for certain situations (single posts, archive pages, etc.), but at the very beginning, index.php is all we’ll need.
Now, index.php and all its related brothers and sisters (which we’ll get to) make the web pages we see in our browser. They’re files with some HTML and HTML-outputting-PHP but in the end they make web pages.
Let’s think of web pages like stories, something with a beginning, a middle, and an end. Well, when we write out our index.php file (and later our single.php, category.php, etc.) we’re going to concentrate only on the middle bit. But! We’re going to call in the beginning bit and the end bit. We may have to always be redoing our middles but we’re only going to do the beginning and end of each web page once.
- Theme Name – The name of your theme, obviously!
- Theme URL – The URL of your theme’s home on the web. It can be a section of your website. For example, many theme authors will use something like: “http://yourgroovydomain.com/your-theme/”
- Author – Self-explanatory. Your name, of course!
- Author URI – Link to your website
- Description – Provide a brief and clear description of your theme, summarizing its purpose and features in a few sentences. This description will appear in users’ Dashboards when they search for themes, as well as next to the theme’s listing on the WordPress.org Free Themes Directory.
- Version – The version number of your theme. It’s up to you to decide how to number your versions, but you can start at 1.0 if it’s brand new. If you ever release updates update, you can change the number accordingly.
- License – Your theme’s license. If you’re distributing your theme, it’s required to use the GPL license, the license that WordPress uses.
- License URI – Provide a link to where users can find the text of the license. We’re including a “license.txt” file with the theme that we’ll fill in in our lesson on Distributing Your WordPress Theme.
- Tags – These words describe your theme’s features, colors, and subjects. They are required if you plan to distribute your theme. These tags allow people to filter their searches by color, subject, etc., when searching for themes in the WordPress Free Themes Directory or in their Dashboards. Here’s a list of approved tags.
Once you’ve got that done you can activate your theme and navigate to your test site. We’ve made the ultimate blank theme! Things should start to get interesting right about now.
Building In Your HTML Structure
Now we get to use our HTML structure from the previous lesson. But first, a mini-lesson about WordPress and Templates.WordPress really only needs 1 template file, index.php. We can, and will be using a series of template files that can be used instead of index.php for certain situations (single posts, archive pages, etc.), but at the very beginning, index.php is all we’ll need.
Now, index.php and all its related brothers and sisters (which we’ll get to) make the web pages we see in our browser. They’re files with some HTML and HTML-outputting-PHP but in the end they make web pages.
Let’s think of web pages like stories, something with a beginning, a middle, and an end. Well, when we write out our index.php file (and later our single.php, category.php, etc.) we’re going to concentrate only on the middle bit. But! We’re going to call in the beginning bit and the end bit. We may have to always be redoing our middles but we’re only going to do the beginning and end of each web page once.
Header.php and Footer.php
Get the HTML structure we worked on in the previous lesson and copy everything up to and including <div id=”main”> into header.php and save it. It should look like this:<div id="page" class="hfeed site"> <header id="masthead" class="site-header" role="banner"> <hgroup></hgroup> <nav role="navigation" class="site-navigation main-navigation"></nav><!-- .site-navigation .main-navigation --> </header><!-- #masthead .site-header --><div id="main" class="site-main">Now, copy everything after, and including, </div><!– #main –> into footer.php. It should look like this: </div><!-- #main .site-main --> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-info"></div><!-- .site-info --> </footer><!-- #colophon .site-footer --></div><!-- #page .hfeed .site -->Sidebar.php
Copy the following from our HTML structure into sidebar.php. It should look like this:<div id="secondary" class="widget-area"></div><!-- #secondary .widget-area --><div id="tertiary" class="widget-area"></div><!-- #tertiary .widget-area -->Index.php
I bet you can guess what we have to do now. Copy everything from our HTML structure inside the #main div up until the #primary closing div into index.php. It should look like this:<div id="primary" class="content-area"> <div id="content" class="site-content"> </div><!-- #content .site-content --></div><!-- #primary .content-area -->With only two small additions we’ll have a perfectly invalid WordPress Theme but we’ll be on the right track. We need to call in the header, sidebars, and footer to your theme.
At the top of index.php, before anything else, add the following template tag.
<?php get_header(); ?>All right! Can you guess which function calls we’re going to put at the bottom of index.php? <?php get_sidebar(); ?><?php get_footer(); ?>
Yep. Now we’ve got our main file that WordPress looks for, index.php.
It has all the middle bits of our web page, but the top calls in the
beginning bits, and the bottom calls in the ending bits.
Reload your page in the browser and check out the source code (View > Page Source, in Firefox). Look! It’s your code!
You’re on your way to making your first WordPress Theme.
Reload your page in the browser and check out the source code (View > Page Source, in Firefox). Look! It’s your code!
You’re on your way to making your first WordPress Theme.
WordPress Theme Tutorial Introduction
Theme Development Tools
Creating a Theme HTML Structure
Template and Directory Structure
The Header Template
The Index Template
The Single Post, Post Attachment, & 404 Templates
The Comments Template
The Search Template & The Page Template
The Archive, Author, Category & Tags Template
The Sidebar Template
Reset-Rebuild Theme CSS & Define Your Layouts
