WordPress recommends using Child Themes to start off when developing themes. This is essentially taking an existing theme and simply overriding files from the “parent” or original theme, usually in a style.css file, to the look you want. I’m going to skip this step and go straight to modifying a parent theme, Starkers in my case, but WordPress offers a detailed overview and relevant links if you wish to pursue this path.
There are 3 important parts to the structure of a theme:
- style.css – control the look of your website
- WordPress template files – how to manage your content from the WordPress database
- functions.php (optional) – enable special features, such as sidebars, navigation menus, or custom headers
STYLE.CSS – THEME HEADER
To document and display your theme in the WordPress menu properly, the header of your CSS file, in comments, must outline the information for your theme. This is an example from the default “Twenty Thirteen” theme provided by the WordPress team:
/* Theme Name: Twenty Thirteen Theme URI: http://wordpress.org/themes/twentythirteen Author: the WordPress team Author URI: http://wordpress.org/ Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready Text Domain: twentythirteen 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 what I have, based on the Starkers theme (a bare-bones theme meant to be a starting point for theme designers):
/* Theme Name: TBA Theme URI: Description: Started off with Starkers and now a custom theme for Vincent Tse's website. Version: 1.0 Author: Vincent Tse Author URI: http://vtse.ca Tags: */
It’s short and incomplete, but as I continue, I’ll come back to update the information. I’ve skipped the use of tags for now, they’re meant to be used when users search for new themes on WordPress to be listed in the results – not something I’m too worried about right now. There is a specific list of tags you are allowed to use.
You can also add your own custom PHP functions to the file. It’s not something I see myself doing at this time, but for further details on the matter, check out Function File Explained or the Function Reference for a list of predefined PHP functions.
Basically the main set of files that any theme developer needs to know about. Using HTML, PHP, and WordPress Template Tags to define how your posts and pages will display for the user. This is probably where I’ll have to do a lot more reading. Template tags are used to reference parts of posts or sections of a page, like a title of a post or the post content itself in PHP syntax, so when a user requests a page, WordPress can dynamically fill in those template tags from the database with the correct information.
Specific files I’ll be starting off to work with are:
- style.css – main CSS file that must be included with the included “theme header,” as discussed above
- index.php – as described here, this is a universal template used if not other template is available for a specific page
- front-page.php – used if I decide to go with a static front-page instead of recent blog posts
- home.php – the default page that consists of recent posts, but will be considered the “blog” page if a static front page is implemented (file above)
- single.php/single-(post-type).php – the page that returns when you click into a specific post
- page.php – template for pages, like the About or Contact page
- header.php/footer.php/sidebar.php – the look of your header, footer, or sidebar which will probably be consistent throughout every page for now (things may change when you start getting responsive or want to be fancy with specific page posts, but none of that for now)
- 404.php – the error page that returns when a post or page can’t be found, I may throw in some photography work here and some lmaoroflcopter text
There are several other files that you can play around with (you can read in detail about the Template Hierarchy), starting off though, these files seem like the ones I’ll be working closely with.
HOW TEMPLATE TAGS WORK
Because the best coding practice is to build in a modular fashion, instead of sticking your whole theme into a index.php file, you break it down into a header, footer, sidebar, and an index. Inside the index.php file, you use WordPress defined PHP functions to connect these files together:
<?php get_header(); ?> /* index.php code, probably looping functions to display recent posts */ <?php get_footer(); ?>
It looks like in the Starkers theme though (as it hasn’t been updated since last year), it uses customer php functions to connect these pieces in index.php (other files also use the same line of code to call the header and footer such as 404.php, archive.php, author.php, category.php, page.php, search.php, single.php, and tag.php) :
<?php Starkers_Utilities::get_template_parts( array( 'parts/shared/html-header', 'parts/shared/header' ) ); ?> /* … */ <?php Starkers_Utilities::get_template_parts( array( 'parts/shared/footer','parts/shared/html-footer') ); ?>
There are also two other files, html-header.php and html-footer.php, which is the code stored in thetags and anything below the footer section. I decided to simply copy that code into the header.php and footer.php files to eliminate another file. So updating this to the newly included functions allows me to remove the “parts” folder. My new file structure is now (looks like I may be able to remove the “starkers-utilities.php” soon after I do a little more updating):
AND SO IT CONTINUES…
This is just the beginning and my journey into learning WordPress themes. It’s a little wordy but I hope it’s a good starting point for anyone who may be going down the same path. I’m going to continue working on the theme and will update when major breakthroughs are made.
For the current state of the theme, you can download it here.