WordPress Child Themes: Difference between revisions

wiki.TerraBase.info
Jump to navigation Jump to search
Created page with "It has proven very difficult to find simple information about creating a Child Theme for WordPress website. This article is oriented towards people that are familiar and comf..."
 
Line 3: Line 3:
So here it is a very quick answer to create a Child Theme...
So here it is a very quick answer to create a Child Theme...


== Creating & Enabling a Child Theme ==
==Creating & Enabling a Child Theme==


* Create a directory in the website's ./wp-content/themes directory.  It can be any name.
*Create a directory in the website's ./wp-content/themes directory.  It can be any name.
** Suggestion (not a requirement): Name the Child Theme directory in such a manner that it is obviously connected to a Parent Theme directory.
**Suggestion (not a requirement): Name the Child Theme directory in such a manner that it is obviously connected to a Parent Theme directory.
*** Example: Parent Theme is "twentyfourteen", Child Theme: twentyfourteen.child
***Example: Parent Theme is "twentyfourteen", Child Theme: twentyfourteen.child
*** Note: Remember Linux is case sensitive, so a directory named "twentyfourteen" is not the same as "TwentyFourteen".  Also keep in mind that may not apply for a WAMP stack (look it up) on Windows as that wasn't tested.
***Note: Remember Linux is case sensitive, so a directory named "twentyfourteen" is not the same as "TwentyFourteen".  Also keep in mind that may not apply for a WAMP stack (look it up) on Windows as that wasn't tested.
* Key Point: A Child Theme is connected to a Parent Theme via the default Cascading Style Sheet (CSS) in the above created directory, named: style.css
*Important Fact 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
** The style.css file contains two key lines:
**"connected"?: By "connecting" a Child Theme to a Parent Theme, all of the Parent Theme's style sheets, functions, capabilities, etc. are utilized.
*** 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)
**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.
*** 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)
*The style.css file and two very important directives (an example is given later);
**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)
**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)
*Add the below code to the functions.php file in the Child Theme's directory.  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


https://kinsta.com/blog/wordpress-child-theme/
function childtheme_parent_styles()
    {
    wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );                     
    }
 
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');
</syntaxhighlight>
*Within the WordPress GUI, Themes, select / activate the new Child Theme
 
== Example ==
Below is an example of the beginning a Child Theme's style.css file.  Notice the /* and */, which are comment delimiters for CSS files.  And remember, the Template: twentyfourteen directive must match the name of the Parent Theme's directory name (not the "Theme Name", although they could be the same);<syntaxhighlight lang="text">
/*
Theme Name: Twenty Fourteen CHILD
Theme URI: https://wordpress.org/themes/twentyfourteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentyfourteen
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.  But it didn't suit my needs, so I changed it.
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, news, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen.child
 
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others
*/
</syntaxhighlight>
 
== Additional Information ==
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/

Revision as of 21:56, 6 January 2021

It has proven very difficult to find simple 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.

So here it is a very quick answer to create a Child Theme...

Creating & Enabling a Child Theme

  • Create a directory in the website's ./wp-content/themes directory. It can be any name.
    • Suggestion (not a requirement): Name the Child Theme directory in such a manner that it is obviously connected to a Parent Theme directory.
      • Example: Parent Theme is "twentyfourteen", Child Theme: twentyfourteen.child
      • Note: Remember Linux is case sensitive, so a directory named "twentyfourteen" is not the same as "TwentyFourteen". Also keep in mind that may not apply for a WAMP stack (look it up) on Windows as that wasn't tested.
  • Important Fact 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
    • "connected"?: By "connecting" a Child Theme to a Parent Theme, all of the Parent Theme's style sheets, functions, capabilities, etc. are utilized.
    • 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.
  • The style.css file and two very important directives (an example is given later);
    • 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)
    • 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)
  • Add the below code to the functions.php file in the Child Theme's directory. 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)
    <?php
    
    function childtheme_parent_styles()
         {
         wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );                       
         }
    
    add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');
  • Within the WordPress GUI, Themes, select / activate the new Child Theme

Example

Below is an example of the beginning a Child Theme's style.css file. Notice the /* and */, which are comment delimiters for CSS files. And remember, the Template: twentyfourteen directive must match the name of the Parent Theme's directory name (not the "Theme Name", although they could be the same);

/*
Theme Name: Twenty Fourteen CHILD
Theme URI: https://wordpress.org/themes/twentyfourteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentyfourteen
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.   But it didn't suit my needs, so I changed it.
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, news, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen.child

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others
*/

Additional Information

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/