WordPress Child Themes: Difference between revisions

Line 2:

So here it is a very quick answer to the question of "How to" create a Child Theme (with some notes)...

== Special Note to Begin with ==

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==

Line 13:

Line 16:

/*

Theme Name: Any Name You Want, including spaces, and will be displayed in Word Press Themes,

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 WordPress, 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: x.twentyfourteen.child) (NOTE: WordPress recommends keeping this the same as the Parent Theme)

*/

</syntaxhighlight>

Line 25:

Line 28:

****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 ''define'' directive in the Parent Theme's ''functions.php'' file that begins with ''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

function childtheme_parent_styles()

{

wp_enqueue_style( 'WhatEverNameYouWant', get_template_directory_uri().'/style.css' );

}

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">

<?php

function childtheme_parent_styles()

{

wp_enqueue_style( '~~parent~~', get_template_directory_uri().'/style.css' );

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>

Within the WordPress GUI, Themes, select / activate the new Child Theme

**If there's a ''define'' directive in the Parent Theme's ''functions.php'' file that begins with ''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

==Example==

Line 60:

Line 91:

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/

@@ Line 2: / Line 2: @@
 So here it is a very quick answer to the question of "How to" create a Child Theme (with some notes)...
+== Special Note to Begin with ==
+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==
@@ Line 13: / Line 16: @@
 /*
 Theme Name: Any Name You Want, including spaces, and will be displayed in Word Press Themes,
-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 WordPress, 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: x.twentyfourteen.child) (NOTE: WordPress recommends keeping this the same as the Parent Theme)
 */
 </syntaxhighlight>
@@ Line 25: / Line 28: @@
 ****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 ''define'' directive in the Parent Theme's ''functions.php'' file that begins with ''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
+function childtheme_parent_styles()
+     {
+     wp_enqueue_style( 'WhatEverNameYouWant', get_template_directory_uri().'/style.css' );
+     }
+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">
 <?php
 function childtheme_parent_styles()
       {
-      wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );
+      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>
-Within the WordPress GUI, Themes, select / activate the new Child Theme
+**If there's a ''define'' directive in the Parent Theme's ''functions.php'' file that begins with ''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
 ==Example==
@@ Line 60: / Line 91: @@
 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/