There are 20 important parts one needs to take into account when designing a custom WordPress theme. This guide will introduce you to different areas of theme development. Let’s get started.

You can find your current WordPress Themes in wp-content/themes/. This directory hosts all files associated with themes: style sheets, templates, functions, JavaScript and image files. If you have a theme named Dog, you could find it in wp-content/themes/dog/.

1. Structure of a WordPress Theme

It is always a good idea to examine files in the default theme to understand how a theme is built. The simplest theme is child theme which has only a style.css file and images. The reason why child themes are so simple is because it is a part, a child of a more complex theme which is known as parent theme.Usually a theme is made of three file types plus images and/or JavaScript files. First is the style.css file which is responsible for the visual design and layout of a web page. Then there are WordPress template files that are responsible for the way pages of a website get the information from your WordPress database and display it on the website. 99% of all WordPress themes also have an optional function file as a part of the theme. It is usually called functions.php.

2. Child Theme

A child theme has the functionality of its parent theme and allows you to modify it without changing the parent theme. The heart of the child theme, the style.css file, is similar to the style.css file in parent folder. In order to make a child theme, create a directory at wp-content/themes/ and save a formatted style.css file in there. A parent theme can be updated which in turn will update the child theme as well, whereas any changes to the child theme will not affect that of the parent. This is the reason why child themes are so important when making any modifications to an existing theme.

3. Theme Style Sheets

The file style.css we have been talking about is called the theme style sheet. Let’s talk about the contents of this file. This file must contain details about the theme in the form of comments. If you make a theme by creating a copy from another theme, make sure you change the details in the header otherwise there maybe problems with theme selection in the dashboard. It is very useful to follow CSS coding standards when creating a CSS file to make sure all information is valid. Here is an example of how a theme style sheet can begin:

/*
Theme Name: Dogs Are Cute
Theme URI: http://dogsarecute.com/
Description: Theme for Dog Lovers
Author: Dog Trainer
Author URI: http://dogsarecute.com/
Version: 1.0
*/

4. Functions File

Although a functions file is optional, it is very important in almost all WordPress custom theme designs. It is usually called functions.php. In a way this file can serve as a plugin by adding extra functions to your website. There are several important uses for this file that you can benefit from if you choose to add it to your theme. You can define functions of some templates in your theme or set up an options menu allowing visitors to change colors, styles and other features of your theme. You can also add features such as menus, thumbnails, custom backgrounds and many, many more. To see how the functions.php file is made you can check the WordPress default theme. In a way the functions.php file acts like a plugin but there are some differences. The functions file is stored with each theme separately and it performs multiple functions unique to themes where as plugins usually serve single purpose and can be applied to multiple themes.

5.Template Files

The main function of template files is to create pages that the visitors of your website might request. Some examples might be index, home, comment, and 404 (page not found) pages but the options are limitless. Templates are PHP source files that are essential for navigation. You can choose the amount of customization you want to add by using templates and creating template hierarchies which determine which templates are chosen when displaying a particular theme.

6. Basic Templates

Every WordPress theme consists at least of two files: style.css (style sheet) and index.php (minimum template requirement). The index.php file can have a lot of information in it. Not only can it hold information about basic page design such as header, footer, content and so on; it also can have extra information about the search, archive and other parts of the theme. Most of the time additional files for headers, footers, sidebars and so on are added. They are named according to their function. For instance, the header file is called header.php. To add a template file to the index.php, use ‘get’ command. To include a header use get_header(). Here is an example of what a line that includes a header in the index.php file should look like:

<?php get_header(); ?>

7. Custom Page Templates

To create a completely new custom page template, first you will need to create a file. Let’s call it dog.php. The first lines of the dog.php file should look like this:

<?php
/*
Template Name: Dog
*/
?>

You can name the file anything you want as long as it is a PHP file. Just make sure there are no other templates with the same name. If you would like,you can copy some other template code such as index.php or page.php and add it to your template file. Put this file in your theme directory.

8. Header

Most themes have header and navigation menu files. Let’s take a look at the header of the WordPress Classic Theme. You can find this theme at wp-content/themes/classic/header.php.

<h1 id="header">
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1>

This code shows that the header is set in a h1 HTML tag and has one template tag that has two different parameters. The first parameter is a link to the website and the second one shows the name of the website. This makes the header title clickable. You can also add images with <div id="headerimg"> and close with </div>. You can style the header with the #header. Here is an example:

#header {
background: #000000;
border-bottom: double 2px #aba;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
border-top: solid 1px #9a9;
font: italic normal 230% 'Times New Roman', Times, serif;
letter-spacing: 0.1em;
margin: 0;
padding: 15px 10px 15px 60px; }

You can customize the color, the style and the border of the header by using this code. If you want to change the background image of the header, first add the image to your WordPress Theme style sheet directory. Call this image wc_header.jpg and use a code similar to this one:

#header {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/wc_header.jpg") 
no-repeat bottom center; }
#headerimg  {
margin: 6px 8px 0; 
height: 200px; 
width: 620px; }

You can specify the height, width and margin of the image.

9. Navigation Menu

You can also use the header.php file to add navigation menus right below the header. You have to register your navigation menu in the functions.php file. This is how it is done:

function register_my_menus() {
register_nav_menus(
array( 'header-menu' => __( 'Header Menu' ) )
);
}
add_action( 'init', 'register_my_menus' );

Menus have at least two options. This is how you make two options appear:

function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'second-menu' => __( 'Second Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );

Then since we want a menu in the header.php file, open it and add the ks29so_nav_menu code like this:

<?php ks29so_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

Do the same to the second menu in the second PHP file. When all this is done, you will have a functional header with navigation menu.

10. Sidebar

The sidebar is a column usually on the right side of the website that includes extra information of the website. To register your sidebar to functions.php file, add this code:

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
}

Basic WordPress themes use nested lists to show the sidebar information. Here is an example:

<ul><!-- open whole list -->
<li>Title of Section One
<ul>
<li>Cat</li>
<li>Dog</li>
<li>Hamster</li>
</ul>
</li><!-- closing list under section one -->
</ul><!-- closing whole list -->

This code presents only section one of a list but you can also include sections two, three and more. There are other ways to create your sidebar but this is amongst the easiest.

11. Widgets

Widgets are a part of the sidebar. They liven up your website by adding custom content and features to your theme, so feel free to add as many as you find necessary. To add widgets to your theme there is no need to know any codes. You can easily play with them on the WordPress dashboard by navigating to Appearance and then to Widgets. You can customize the order and placement of widgets at any time in the functions.php file.

12. Footer

To add a footer to your theme, create a footer.php using a ks29so_footer() call. A simple footer should look like this:

<?php ks29so_footer(); ?>

You can later customize the footer by adding images, links and other features in a way similar to that ofmodifying the header.

13. Index

The index allows you to show a list of different pages or posts whether in excerpt or full-length form. Create an index.php file to produce the website output. This is the most important file of your theme. It includes the code for the main area and shows the location of other files. To support navigation links, include ks29so_link_pages() call within pages or posts in a way similar to how you dealt with the navigation menu. This may bea long file depending on how complex your theme is. The more pages you have, the more you have to include in the index. If you have the header.php file, the index file usually starts with the tag <?php get_header(); ?> which puts contents of the header in their place. The sidebars, footers and other are also tagged in this document.

14. Archive

Archives allow you to keep and arrange the past entries of your website. You can create your archive file and name it anything you like, although it is usually named archive.php, making it easier for other developers that are interested in your template to locate it. You can create archives as a part of index.php or category.php but it is much easier to manage files with a separate archive file. To list your archives use the <?php ks29so_get_archives('type=yearly'); ?> tag. To support navigation links, use ks29so_link_pages.

15. Pages

Page template page.php displays a title and the main content. This template can also show a comment form and list if they are included in your theme. A page template should not contain additional data such as author and date. To support navigation links, use ks29so_link_pages.

16. JavaScript

For JavaScript codes it is generally advised to create external files. If JavaScript is meant to be loaded into template files (or HTML documents in general), they should be CDATA encoded. To load the scripts use ks29so_enqueue_script.

17. Template Hierarchy

WordPress can choose and load different templates that match query types. You can do this either by using the template hierarchy or by using conditional tags within The Loop function in the file. In order to create a template hierarchy you have to create template files that can be automatically chosen instead of index.php. This is the reason category files are created. If your theme has a properly set category.php file, it will override index.php. You can create several categories and give them ID numbers. WordPress will choose and use the first template file it finds in the theme directory. So, let’s say you have an index.php file and home.php file which is different from your index file. The index page in the hierarchy is lower so it will always be the last one to be displayed. Instead home page theme will be shown.

18. Conditional Tags And The Loop

Although a template hierarchy is simpler, most websites need to use conditional tags within The Loop. You can create a loop by setting conditions for specific pages. Condition tags within the code check if the requirements are met and then come with a conclusion as to whether the condition is TRUE or FALSE and performs actions according to the answers. You can specify the output of different parts of your theme. Different pages can have different colors and styles of titles and custom fields. The process of query which checks if the conditions are met is The Loop. With conditional tags WordPress presents content only if a certain page is being displayed. If you want WordPress to show only the content of the home page and not that of other pages, you can use is-home() conditional tag. In short, if it is the home page, only the information attributed to it will be displayed. Here is a simple example code:

<?php
if (is home()) { 
     echo 'Welcome To My Home Page';
}
?>

19. Theme Testing

When the theme building is done, there is still some work that should be done. You should check if the theme you have created works and ensure that there are no errors when it is used. One of the easiest ways to check if your theme is working properly is by debugging it. In order to debug a theme create a ks29so_config file for debugging purposes. Here is a sample code for debugging:

// Enable ks29so_debug mode
define('ks29so_debug', true);
// Enable Debug logging to the /wp-content/debug.log file
define('ks29so_debug_log', true);
// Disable display of errors and warnings 
define('ks29so_debug_display', false);
@ini_set('display_errors',0);

This code will log all error warnings to a file that is called debug.log. The displaying of errors is hidden in order not to interrupt theme creation. It is also a good idea to test how your theme runs within different kinds of browsers and different versions such as IE8, IE9, Firefox, Chrome, Opera and Safari.

20. Plugin API Hooks

The WordPress theme that you are creating should be compatible with most WordPress plugins. Most WordPress plugins use action hooks that are in the core WordPress PHP code, meaning that most of the time your theme will not need additional tags. However, there are some plugins that might display your information in a distorted way. The default WordPress templates have these tags included. To make sure your theme is compatible with plugins:

• Add ks29so_head() to the <head> element in header.php.
• Add ks29so_footer() before the closing </body> tag in footer.php.
• Add ks29so_meta() in the <li>Meta</li> part of sidebar.php.
• Add comment form() before the </div> (the closing tag of the file) in comments.php if your website has comment section.

Now your new custom theme should be ready to use. The most important thing when creating a WordPress theme is your imagination. This guide has simply covered the basics and touched upon only a few of the countless possibilities WordPress has to offer. We sincerely hope we have helped you to create your very own, unique custom WordPress theme.