WordPress

Published 3 years ago.
Last updated

Theme Development

Themes are a set of files containing PHP and HTML which sit on-top of the core WordPress application and convert it’s raw response data in to usable web pages. Themes determine the look and functionality of your WordPress website.

Child Themes

A child theme allows you to change or add things to an existing theme, without having to create the theme and all it’s functionality from scratch.

A child theme defines only the differences between it and it’s parent theme. WordPress first looks at the child for files but falls-back to the parent if nothing is found.

File Structure

  • Every WordPress theme (child or parent) needs a directory in the /wp-content/themes directory.
  • Although not required, a child theme directory should be named after the parent theme’s directory by adding -child. For example, if you are creating a child theme for the twentyseventeen theme, the child directory would be named twentyseventeen-child.
  • Each theme directory requires at least the two files style.css and functions.php. There are no limits to what additional files and directories can be placed in a theme directory.
  • If you want to use object-oriented coding methods in your theme you can create an optional directory to hold your class files.
/wp-content
   /themes
     /{themename}
       /functions.php  // Required file.
       /style.css      // Required file.
       /Libs           // Optional directory for OOP class files.

styles.css

The style.css file for a theme starts with a comment doc-block which defines information about the theme.

Only the Theme Name and Template are required for WP to detect and use a theme, however a standard theme usually comes with a Description, Author, and Version as well. If you plan to publish your theme you will need to add more info.

/**
 * Theme Name:   My Theme
 * Description:  A child theme of the Twenty Seventeen default WordPress theme
 * Author:       Daniel Watts
 * Template:     twentyseventeen
 * Version:      1.0.0
 */

functions.php

The functions.php file allows you to add and change functionality and features to your website.

<?php

// When WP calls the `wp_enqueue_scripts` action hook, the `enqueue_styles` function is called.
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );

// This function injects the `style.css` file from the parent theme into the doc head.
function enqueue_styles() {
   wp_enqueue_style( 'parent-theme-styles', get_template_directory_uri() . '/style.css' );
}

Object Oriented functions.php

<?php

include('Libs/Theme_Functions.php');
$dw_theme = new Theme_Functions();

Theme_Functions.php

<?php

class Theme_Functions
{
    public function __construct()
    {
        add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_styles' ) );
    }

    public function enqueue_styles()
    {
        wp_enqueue_style( 'parent-theme-styles', get_template_directory_uri() . '/style.css' );
    }
}

More Resources