The Need for Using WordPress Child Themes and How to Use Them

Mukalele Rogers, #WordCampKampala17 December 2017

Hello!A bit about me…

@mrogers4christ

www.mukalele.net

What I Docenter4webpresence.comOffering domain name registration and Web Hosting For Less!+Free SSL

What I DoAs an ICT Teacher / Trainer, I maintain an online shop powered by + at mukalele.net

What I DoSharebility Uganda -An educational digital resource sharing system for Ugandan Schools

sharebility.mukalele.net

1.What is a child theme?

child theme/ CHīld THēme /

1. A WordPress theme that inherits its functionality and styling from an existing (parent) theme.

2.Why use a child theme?

It’s important to keep your active theme up to date at all times for security purposes.

However, when you update your active theme, any modifications made directly to your theme files

…will be completely lost!

WordPress DevelopmentRule#1 Never EVER touch WordPress corecode. EVER!This means do not edit:• WordPress core files • Plugin files •Theme files

Why?•Stuff gets broken•Other plugins and themes may not work with your hacks •Updates wipe out your changes

Using a child theme guarantees that customizations made outside of the WordPress admin will remain protected when you make theme updates.

3.How to doit

Set up a child theme at the start.

Choose your parent theme wisely.

◎Was it made by a reliable developer?

◎Is it maintained?

◎Does it have any reviews?

◎Is there theme documentation?

◎Is there support via a support forum?

Check to see if your purchased theme includes a ready-to-use child theme.

First you need to open /wp-content/themes/ in your WordPress installation folder and create a new folder for your child thme.

You can name this folder anything you want. For this demo, lets call it wpbdemo

Open a text editor like Notepad paste this code:/*Theme Name: WPB Child ThemeTheme URI: http://www.wpbeginner.com/Description: A Twenty Thirteen child theme Author: WPBeginnerAuthor URI: http://www.wpbeginner.comTemplate: twentythirteenVersion: 1.0.0*/

@import url("../twentythirteen/style.css");

NB: You can find all necessary code on wpbeginner.com :

https://goo.gl/SjSrc4

Now save the file as style.css in the child theme folder you just created.

◎ This tells WordPress that our theme is a child theme and that our parent theme directory name is twentythirteen.

◎ The parent folder name is case-sensitive. If we provide WordPress with Template: TwentyThirteen, then it will not work.

◎ The last line in this code imports our parent theme’s stylesheet to the child theme.

Activate your child theme inside the WordPress admin under Appearance > Themes.

If you’ve done everything correctly, your activated child theme should look identical to your parent theme.

Styles and template files added to your child theme’s folder will now take precedence over the parent theme’s files.

#puppy { fur: purple; }

Any template file in your child theme folder will replace the file of the same name in your parent theme folder.

Benefits of a child theme

Benefit #1.

It gives you the freedom to create new functions and template files without having to code a theme from scratch.

Benefit #2.

You can freely update your parent theme without losing any of your customizations.

Benefit #3.

It’s easy to tell which template files have been altered, because they will all be in your child theme’s folder.

Benefit #4.

Creating an “images” folder in your child theme folder will make it easier to link to custom images from your childtheme’s stylesheet.

body { background-image: url(images/file.jpg); }

body { background-image: url(http://your-domain.com/wp-content/uploads/2017/04/file.jpg); }

Benefit #5.

If something goes wrong when you duplicate and alter a template file, you always have the parent theme’s version of the file to fall back on.

Read more at

https://goo.gl/BpU8GE

Thanks!

Demo Time and questions.