Restyle with WordPress child themes

Find out more about...Home Page

Why child themes?

Do you try to make changes to the look of a site by editing the active theme's style sheet? Any changes made in this way will be lost when you do an update.

So to avoid this you can use WordPress child themes. Some themes lend themselves to using child themes better than others. However most can be changed in some way .A child theme does not work on it's own it needs a parent theme. A child theme is basically a list of changes that are made to the parent theme.

You can do many things with  WordPress child themes. A few tweaks can change the look of a page. You can build entire new layouts and make page specific headers. The site you are reading uses a theme called Precious lite and this will be used as a case study. So lets get started with a few basics!

Where does a WordPress child theme go?

Child themes locationA child theme is added to the themes folder, which is in the wp-content folder, it has the same name as the active theme with the name "child" appended to it. The child theme is then activated instead of the main theme, in the appearance section of the WordPress admin section.  go to :Appearance>themes

The style sheet in the child theme has a special header section that tells WordPress that it is a child theme and indicates what template or main theme the child belongs to.

theme setup

How do I make a child theme?

1/ First create a new folder in the themes folder and name it with the name of the parent theme followed by -child.

2/ In this folder create a new file named style.css. At the top of the file add the information shown below. Replace the Theme name and template names with your theme names. In this example we are changing the colour of the header bar with a new style declaration. Any styles in the child theme will override the main stylesheet for the parent theme.

  1. /*
  2. Theme Name: Precious lite Child
  3. Theme URI: http://example.com/Precious lite Child
  4. Description: Precious lite Child Theme
  5. Author: Geoff Whittaker
  6. Template: precious-lite
  7. Version: 1.0.0
  8. */
  9.  
  10. background-color: #7A2121;
  11. }

3/ Create a new file named functions.php and add the following code.

  1. <?php function my_theme_enqueue_styles() {
  2.  
  3. $parent_style = 'parent-style';
  4.  
  5. wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
  6. wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css',
  7. array( $parent_style )
  8. );
  9. }
  10. add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
  11. ?>

This uses the WordPress function-

  1. wp_enqueue_style()

This function will insert style sheet links into the header of the sites main page.An add action hook is then used to run the specified function when the scripts are loaded into the page.More about hooks in a later part of this article.

  1. add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

That is all you need to create a child theme. You can use tools such as the "inspect" tool that is built in to the Chrome browser to find what CSS class has been used for a particular element and use that in the new style sheet to change the style.As you can see below the element used for the header has a class of "header".
inspect tool

Conclusion

Creating a child theme is not difficult and is part of the tool set for any budding WordPress developer. WordPress child themes build on the parent theme without changing it. You can revert back to the main theme just by re-activating it.

Next we look at using custom templates in your child theme to change the layout and even which header file is used.Any file with the same name in the child theme will over-ride the same file in the parent theme. see you next time!

Resources

https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/

https://www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial

 

Today's fruits are: