WordPress Theme Development Basics

Introduction

WordPress Themes reside in the subdirectories of WordPress Theme Folder. i.e. wp-content/themes/. The directory has all the necessary files like style sheet(CSS), template files, functions file and JS files along with the images.

For WordPress Theme Development, three types of files are very important along with images and javascripts; which are mentioned below:

1. style.css – This is a style sheet of the theme and it has all the aesthetic controls on the theme. How the layout will look, design elements, placements and presentation, are completely taken care of by style sheet.
   WordPress Themes typically consist of three main types of files, in addition to images and JavaScript files.
2. Template Files: These files are very important as they control the how pages generate the information from the DB and display of the same.
3. Functions File: This is an optional file which is part of the theme to work on something theme specific.

The the least the WordPress theme should at least have two files mentioned as follows:

1. style.css
2. index.php

Both the files mentioned above go into the Theme directory. The index.php template file can be used to include plenty of references to the header, sidebar, footer, content, categories, archives, search, error, and any other page created in WordPress, to make it easier and better for anyone to understand how to use the same.

WordPress has articulated the complete guide to use WordPress as part of the documentation which is very useful for developers and designers. You can find the documentation at WordPress Codex and for dynamic content and functions one should take reference from Functions Reference. WordPress is one of the most easy to install, implement and user friendly content management system, initially developed for blogging and now a mature and highly scalable CMS making it a first choice for the users and WordPress Developers. Moreover WordPress has a large developers community, which adds and contributes to tons of features and plugins every day.

Step: 1

You can see basic WordPress theme structure calling files in the image given below:

To create a theme and get it recognized as theme in WordPress installation, you must create a subdirectory in ‘themes’ directory with a unique name without spaces, however hyphens are allowed. It should be in lowercase letters. For example: techticfive

Step: 2

In step 2 create a style.css file which is must to define a theme in WordPress, code should be as below:

/*
Theme Name: Techtic Five
Theme URI: http://wordpress.org/themes/techticfive
Author: Techtic Team
Author URI: https://www.techtic.com/wp
Description: Basic theme with all required functions for starters
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: basic, starter, techticfive
Text Domain: techticfive

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.
*/

In addition to CSS style information for your theme, style.css provides details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers. The comment header lines in style.css are required for WordPress to be able to identify the Theme and display it in the Administration under Design > Themes as an available Theme option along with any other installed Themes.

In the image above review the default templates used to convert a simple html file to WordPress page. WordPress has very good concept of fallback support, which is shown below. It shows how the templates hierarchy is formed to avoid site crash or looking ugly and how you can run site easily with minimal files / templates.

You can see the ‘fallback’ system for templates above. All the template types and files fall back to index.php, which is the default for WordPress if that template is not present.

Step: 3

“The Loop” is the main process of WordPress. The Loop is used in template files to show the posts to the visitors of the website. Question is: Can we create a theme without The Loop? Yes but you can not display data from one post.

The Loop goes into action only when the default settings are collected from the database, which includes, number of posts, commenting is enabled and more. Once the verification is done then The Loop will start its action.

The following is a functional index file (index.php), which displays the contents (and only the contents) of each post, according to the conditions used to prepare The Loop. This example demonstrates how little is actually necessary for the functioning of The Loop. See loop in action in below:

<?php 
get_header();
    if (have_posts()) :    
        while (have_posts()) :       
            the_post();
            the_content();
        endwhile;
    endif;
get_sidebar();
get_footer();  
?>

Step: 4

1. Functions File

A theme can optionally use a functions file, which resides in the theme subdirectory and suggested uses for this file are:

1. To enable Theme Features such as Sidebars, Navigation Menus, Post Thumbnails, Post Formats, Custom Headers, Custom Backgrounds and others.
2. To define functions used in several template files of your theme.
3. To set up an options menu, giving site owners options for colors, styles, and other aspects of your theme.

2. Template Files

Templates are PHP source files used to generate the pages requested by visitors, and are output as HTML. Template files are made up of HTML, PHP, and WordPress Template Tags.

Here is the list of the Theme files recognized by WordPress. Of course, your Theme can contain any other style sheet, images, or files. It is inevitable to that the following have special meaning to WordPress:

1. style.css: The main stylesheet. This must be included with your Theme, and it must contain the information header for your Theme.
2. rtl.css: The rtl stylesheet. This will be included automatically if the website’s text direction is right-to-left. This can be generated using the RTLer plugin.
3. index.php: The main template. If your Theme provides its own templates, index.php must be present.
4. comments.php: The comments template.
5. front-page.php: The front page template.
6. home.php: The home page template, which is the front page by default. If you use a static front page this is the template for the page with the latest posts.
7. single.php: The single post template. Used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.
8. single-{post-type}.php: The single post template used when a single post from a custom post type is queried. For example, single-book.php would be used for displaying single posts from the custom post type named “book”. index.php is used if the query template for the custom post type is not present.
9. page.php: The page template. Used when an individual Page is queried.
10. category.php: The category template. Used when a category is queried.
11. tag.php: The tag template. Used when a tag is queried.
12. taxonomy.php: The term template. Used when a term in a custom taxonomy is queried.
13. author.php: The author template. Used when an author is queried.
14. date.php: The date/time template. Used when a date or time is queried. Year, month, day, hour, minute, second.
15. archive.php: The archive template. Used when a category, author, or date is queried. Note that this template will be overridden by category.php, author.php, and date.php for their respective query types.
16. search.php: The search results template. Used when a search is performed.
17. attachment.php: Attachment template. Used when viewing a single attachment.
18. image.php: Image attachment template. Used when viewing a single image attachment. If not present, attachment.php will be used.
19. 404.php: The 404 Not Found template. Used when WordPress cannot find a post or page that matches the query.

Techtic Solutions specializes in WordPress Theme Development, Plugin Development and has been the leading WordPress Development Company.