Wordpress Theme Development Overview


Wordpress themes are those files that work together to create a beautiful design supported by the functionality of a WordPress Content Management System. Each of these themes offer many options for website owners to change their website's outlook with ease.

Custom wordpress theme provides a unique look to the wordpress site while taking full advantage of the templates and hooks provided by wordpress. It also allows the developer to create multiple alternative templates for specific features within the a single website.

Anatomy of a Wordpress Theme

WordPress theme files are located inside wp-content/themes/ that comes with wordpress installation where a particular theme directory holds all of the theme's associated files like stylesheets, templates, functions, JavaScript and images. Other wordpress features independent of the theme like files related to the admin dashboard or the comment templates or the search functionality are located in other subdirectories.

WordPress also comes with a few default themes on installation which will be helpful to get a better idea of how to build a custom theme. The style.css file controls the visual design and layout of the website pages. Template files control the information from the database to be displayed on the site. The functions file adds additional functionality to the theme.

Theme Stylesheet

In addition to style information for the theme, style.css provides details about the theme to wordpress in the form of comments. Multiple themes should not have the same details in their comment headers as that will lead to conflicts in theme selection. These information should be updated everytime a new theme is developed as it's required for wordpress to identify it and display it in wordpress dashboard under Appearances » Themes.

Here' an example of the comment header from the stylesheet file.

/*
theme Name: webtrickshome
theme URI: http://www.webtrickshome.com/
Author: webtrickshome team
Author URI: http://wordpress.org/
Description: Add short description about the theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/		

Functions File

A theme can optionally use a functions file named as functions.php. This file is automatically loaded during WordPress initialization and works like a plugin which can be used for multiple purposes such as:

  • Enqueue stylesheets and scripts for themes.
  • Enable features like post thumbnails, post formats, custom headers and custom backgrounds.
  • Add custom functions.
  • Add additional menu items in dashboard.

Template Files

Template files are used to display content in the frontend. Wordpress allows you to create multiple layouts to display contents. They are chosen by wordpress depending upon their availability in a particular theme while being based upon the template hierarchy. More number of templates in a theme allows maximum customization while displaying contents.

List of Required Theme Files

Here is the list of theme files recognized by WordPress that have special meaning.

style.css

It's the main stylesheet of the theme which must be located in the root of the theme directory and must contain the comment header. It must not necessarily hold the style properties of frontend templates though.

index.php

It's the main template for any theme which must be located in the root of the theme directory. It acts as the default template in wordpress where specific templates are not available.

comments.php

It's the template that holds the elements we need to display comment fields and posted comments.

front-page.php

It's the front page layout template that defines the outlook of the main page which is generally static.

home.php

It's the front page of a theme by default which displays the latest posts.

single.php

It's the template used to display each single post. If this template or any other template below this template in the list isn't available, index.php will be used as the default template to display contents.

page.php

It's the template used to display single page contents.

category.php

This template is used to display category page which holds all the post contents of a specific category.

search.php

This template is used to display the search results.

A basic wordpress theme can be developed with just one index.php and a style.css file. The index.php file can be used to include all references to the header, sidebar, footer, content, categories, archives, search, error and any other page created in WordPress.

Here's a list of template files that you can find in each wordpress theme directory.

  • header.php
  • sidebar.php
  • footer.php

You can include these template files within other template files to render the final contents to display using template tags as shown below.

  • get_header() to include the header template.
  • get_sidebar() to include the sidebar.
  • get_footer() to include the footer.
  • get_search_form() to include the search form.
  • get_template_part() to include other template files.
  • bloginfo() to define URIs or file paths.

Plugin API Hooks

Wordpress themes should be developed in such a way that it can work well with any external wordpress plugins. Plugins add functionality to wordpress via action hooks. These action hooks should be present in a theme for Plugins to function properly. Here is a list of the special action hooks that are required.

wp_enqueue_script()

This hook is used in the theme's functions file to load external scripts.

wp_enqueue_style()

This hook is used in the theme's functions file to load external stylesheets.

wp_head()

This hook must be present in the <head> element of a theme in header.php. This hook is essential to insert meta tags as well as stylesheets and scripts in the theme template.

wp_footer()

This hook must be present in the footer.php file right above the closing </body> tag. It is essential to insert scripts at the bottom of the footer.

Screenshot

The screenshot is required to display the theme thumbnail in wordpress dashboard under Appearances » Themes. It should be named screenshot.png and should be placed in the root of the theme directory. It should show the theme design. The recommended image size is 1200px × 900px.

That's the basics before the development of a custom wordpress theme. Let's get it going from here onwards.