Users
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.
- Read more about Theme Development from the WordPress Codex
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.
- Read more about Child Theme Development from Smashing Magazine
- Read more about Child Theme Development from the WPMUDEV
- Read more about Child Theme Development from the WordPress Codex
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
andfunctions.php
. There are no limits to what additional files and directories can be placed in a theme directory.
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' );
}
}