WordPress Child Themes: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 1: | Line 1: | ||
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. | |||
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 | ==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. | 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. | ||
| Line 15: | 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 | Theme Name: Any Name You Want (This is the name displayed in the WordPress GUI. Spaces can be used) | ||
Template: WhatEverNameOfParentThemeDirectory (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: | Text Domain: WhatEverNameOfChildTheme (Example: twentyfourteen) (NOTE: WordPress recommends keeping this the same as the Parent Theme) | ||
*/ | */ | ||
</syntaxhighlight> | </syntaxhighlight> | ||
** | **Information about how WordPress Child Themes Function; | ||
***A Child Theme is "connected" to a Parent Theme | ***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 | ****"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? | ***Why not just modify or add functionality to the Parent Theme? | ||
***The style.css file | ****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) | ||
*There are two different ways to do the next step; | *There are two different ways to do the next step; | ||
**If there's a | **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 | ||
| Line 38: | Line 39: | ||
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles'); | add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles'); | ||
</syntaxhighlight>...and if there is a version number associated with the Parent Theme, then version information can be included in the script;<syntaxhighlight lang="text"> | </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 | <?php | ||
| Line 48: | Line 49: | ||
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles'); | add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles'); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
**If there's a | **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' ); | add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); | ||
function my_theme_enqueue_styles() { | function my_theme_enqueue_styles() { | ||
| Line 64: | Line 65: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
* Within the WordPress GUI, Themes, select / activate the new Child Theme | *Within the WordPress GUI, Themes, select / activate the new Child Theme | ||
...done | ...done (except if you want to add a picture for the WordPress Appearance, Themes page, then include a file titled ''screenshot.jpg'') | ||
==Example== | ==Example== | ||