wiki.TerraBase.info

WordPress Child Themes: Difference between revisions

← Older edit
VisualWikitext
mNo edit summary
mNo edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
It has proven very difficult to find simple (IE, non-"long winded") information about creating a Child Theme for WordPress website.  This article is oriented towards people that are familiar and comfortable with WordPress (themes, etc.), programming, etc.  It is not intended to be a granular, detailed step by step tutorial.   
This article is about creating a WordPress Child Theme.  All of the steps to achieve this are in '''bold''' type. Everything else is just for information, examples, etc.   


So here it is a very quick answer to the question of "How to" create a Child Theme (with some notes)...
The reason this article was created was because it seemed very difficult to find simple (IE, non-"long winded") information about creating a Child Theme for WordPress website.  This article is oriented towards people that are familiar and comfortable with WordPress (themes, etc.), programming, etc. It is not intended to be a granular, detailed step by step tutorial.
 
==Special FYI==
Depending on the Parent Theme, if you've already made custom changes to the theme, they may have to be re-done when creating the child theme.


==Creating & Enabling a Child Theme==
==Creating & Enabling a Child Theme==
Line 12: Line 15:
*'''Create a file in the Child Theme Directory named ''style.css'' and add the minimum code shown below''' (an expanded version is in the Example Section);<syntaxhighlight lang="text">
*'''Create a file in the Child Theme Directory named ''style.css'' and add the minimum code shown below''' (an expanded version is in the Example Section);<syntaxhighlight lang="text">
/*
/*
Theme Name: Any Name You Want, including spaces, and will be displayed in Word Press Themes,
Theme Name: Any Name You Want (This is the name displayed in the WordPress GUI.  Spaces can be used)
Template: WhatEverNameOfParentTheme (Example: twentyfourteen) (NOTE: The name of the Template is not how it appears in WordPress, but rather the actual directory name)
Template: WhatEverNameOfParentThemeDirectory (Example: twentyfourteen) (NOTE: The name of the Template is not how it appears in the WordPress GUI, but rather the actual directory name)
Text Domain: WhatEverNameOfChildTheme (Example: x.twentyfourteen.child) (NOTE: Used for "internal WordPress stuff that isn't clear in documentation, so the recommendation is to name it the same as the Child Theme, but with no spaces or underscores)
Text Domain: WhatEverNameOfChildTheme (Example: twentyfourteen) (NOTE: WordPress recommends keeping this the same as the Parent Theme)
*/
*/
</syntaxhighlight>
</syntaxhighlight>
**Important Information about how WordPress Child Themes Function;
**Information about how WordPress Child Themes Function;
***A Child Theme is "connected" to a Parent Theme via the default Cascading Style Sheet (CSS) in the Child Theme's directory and is named style.css
***A Child Theme is "connected" to a Parent Theme by the ''Template:'' directive in the ''style.css'' file of the Child Theme.  It has already been stated, but it is worth stating again, the name of the ''Template:'' in the ''style.css'' file should be the ''DIRECTORY'' name of the Parent Theme.
****"connected"?: By "connecting" a Child Theme to a Parent Theme, all of the Parent Theme's style sheets, functions, capabilities, etc. are available to the Child Theme and can are utilized transparently as if all of the Parent Theme's files were copied into the Child Theme's directory.
****"connected"?: By "connecting" a Child Theme to a Parent Theme, all of the Parent Theme's style sheets, functions, capabilities, etc. are available to the Child Theme and are utilized transparently as if all of the Parent Theme's files were copied into the Child Theme's directory.
***Why not just modify or add functionality to the Parent Theme?: If a theme is updated it will most likely eradicate any changes that have been made.  Whereas if modifications and additional functionality are added in the form of a Child Theme, all changes are preserved, even if the Parent Theme is updated.
***Why not just modify or add functionality to the Parent Theme?
***The style.css file and two very important directives (an example is given later);
****If a theme is updated it will most likely eradicate any changes that have been made.  Whereas if modifications and additional functionality are added in the form of a Child Theme, all changes are preserved, even if the Parent Theme is updated.
****Theme Name: twentyfourteen.child (This is name of the Child Theme.  It is suggested that it be the same as the directory name of the Child Theme, but it doesn't have to be)
***The style.css file has two very important directives (this is redundant information, but important);
****Theme Name Example: x.twentyfourteen.child (This is name of the Child Theme.  It is suggested that it be the same as the directory name of the Child Theme, but it doesn't have to be)
****Template: twentyfourteen (This is the actual name of the directory (not just the name of the theme) in ./wp-content/themes that contains the Parent Theme)
****Template: twentyfourteen (This is the actual name of the directory (not just the name of the theme) in ./wp-content/themes that contains the Parent Theme)


*Create a file in the Child Theme Directory and add the below code to the functions.php file (In the below example, the function "child_theme_parent_styles" is arbitrary and could be named anything (as long as it matches in the add_action directive))<syntaxhighlight lang="php">
*There are two different ways to do the next step;
**If there's a directive in the Parent Theme's ''functions.php'' file that includes ''get_template_directory'' or  ''get_template_directory_uri'', then '''Create a file in the Child Theme Directory and add the below code to the functions.php file''' (In the below example, the function "child_theme_parent_styles" is arbitrary and could be named anything (as long as it matches in the add_action directive));<syntaxhighlight lang="php">
<?php
<?php


function childtheme_parent_styles()
function childtheme_parent_styles()
     {
     {
     wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );                       
     wp_enqueue_style( 'WhatEverNameYouWant', get_template_directory_uri().'/style.css' );                       
     }
     }


add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');
</syntaxhighlight> Within the WordPress GUI, Themes, select / activate the new Child Theme
</syntaxhighlight>...and if there is a version number associated with the Parent Theme, then version information can be included in the script (this wasn't tested to see the nuances of how it worked, but included for additional information);<syntaxhighlight lang="text">
<?php
 
function childtheme_parent_styles()
    {
    wp_enqueue_style( 'WhatEverNameYouWant', get_template_directory_uri().'/style.css' ), array ( 'parenthandle' ), wp_get_theme()->get('Version');                     
    }
 
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');
</syntaxhighlight>
**If there's a directive in the Parent Theme's ''functions.php'' file that includes ''get_stylesheets_directory'' or  ''get_stylesheets_directory_uri'', then '''Create a file in the Child Theme Directory and add the below code to the functions.php file''' (Again, names are arbitrary as long as the function name matches the add_action directive));<syntaxhighlight lang="text">
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}
</syntaxhighlight>
 
*Within the WordPress GUI, Themes, select / activate the new Child Theme
 
...done (except if you want to add a picture for the WordPress Appearance, Themes page, then include a file titled ''screenshot.jpg'')


==Example==
==Example==
Line 59: Line 92:
It certainly isn't a very elegant or intuitive method that WordPress uses to enable this feature.  But that's because it wasn't part of the original WordPress (Hint: WordPress started out as a different project and the modern WordPress is actually a branch of the original project) code and they shoehorned it in.  Oh well, that's how so many things are that humans create.
It certainly isn't a very elegant or intuitive method that WordPress uses to enable this feature.  But that's because it wasn't part of the original WordPress (Hint: WordPress started out as a different project and the modern WordPress is actually a branch of the original project) code and they shoehorned it in.  Oh well, that's how so many things are that humans create.


For a much longer explanation with more details and additional stuff that can be done, see this site: https://kinsta.com/blog/wordpress-child-theme/
For a much longer explanation with more details and additional stuff that can be done, see this site: https://kinsta.com/blog/wordpress-child-theme/  There are about ten thousand more like this one.
 
Here's the official WordPress information on Child Themes: https://developer.wordpress.org/themes/advanced-topics/child-themes/
Retrieved from "https://wiki.terrabase.info/wiki/WordPress_Child_Themes"