This is a presentation for the WP Melbourne WordPress Meetup. Learn all about WordPress Child Themes. Why you should use them, the benefits of using them and how you go about creating them. If you've ever wanted to tweak your theme and add a few css styles, you should definitely learn how to create and use a Child Theme.

1. Anthony Hortin
@maddisondesigns
The
Why, When, How
of WordPress
Child Themes
#WPMELBUser Meetup

2. #wpmelb @maddisondesigns
What is a Child Theme?

3. #wpmelb @maddisondesigns
A child theme is a theme that
inherits the functionality and
styling of another theme (called
the parent theme). Child themes
are the recommended way of
modifying an existing theme.
“
*https://codex.wordpress.org/Child_Themes

4. #wpmelb @maddisondesigns
Why use a Child theme?

5. #wpmelb @maddisondesigns
It’s Safer
If you modify a theme’s CSS or HTML directly and it gets updated,
you’ll lose all your modifications.

6. #wpmelb @maddisondesigns
It’s Quicker
Using a Child Theme can speed up your development time.

7. #wpmelb @maddisondesigns
It’s Easier
If the Parent Theme is developed properly, using a Child Theme
can make it easier to override functionality.

8. #wpmelb @maddisondesigns
When should you use a
Child Theme?

9. #wpmelb @maddisondesigns
Almost Always
If you buy a theme from a Theme Shop or even
download a free one from WordPress.org,
you should consider setting up a Child Theme.

10. #wpmelb @maddisondesigns
How do you create a
Child Theme?

11. #wpmelb @maddisondesigns
Creating a Child Theme
A Child Theme consists of the Child Theme directory,
and two files (style.css and functions.php)

12. #wpmelb @maddisondesigns
Create a Child Theme Folder
Step 1: Create your Child Theme directory in wp-content/themes

13. #wpmelb @maddisondesigns
Creating a Child Theme Stylesheet
Step 2: Create your Child Theme's stylesheet (style.css)

14. #wpmelb @maddisondesigns
Creating a Child Theme Stylesheet
Your Child Theme's style.css file should include:
/*
Theme Name: Your Child Theme Name
Theme URI: http://example.com/my-awesome-child-theme
Description: A description for your Child Theme
Author: Your name
Author URI: http://example.com
Template: parent-theme-folder-name
Version: 1.0.0
*/
* The Template line corresponds to the directory name of the Parent Theme.
e.g. If you were using Twenty Sixteen as the Parent Theme, you would
enter ‘twentysixteen' here (without the quotes)

15. #wpmelb @maddisondesigns
Creating a Child Theme’s Functions
Step 3: Create your Child Theme's functions file (functions.php)

16. #wpmelb @maddisondesigns
Creating a Child Theme’s Functions
Your Child Theme's functions.php file should include:
<?php
function mytheme_scripts_styles() {
// Enqueue the parent theme stylesheet
wp_enqueue_style( 'parent-style', trailingslashit( get_template_directory_uri() ) . 'style.css' );
// Ensure the default WordPress stylesheet is enqueued after the parent stylesheet
wp_enqueue_style( 'style', get_stylesheet_uri(), array( 'parent-style' ) );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts_styles' );

17. #wpmelb @maddisondesigns
Activating your Child Theme
Step 4: Login to your Dashboard, go to Appearance > Themes
and activate your Child Theme

18. #wpmelb @maddisondesigns
High Five!
Step 5: Pat yourself on the back & have
a cuppa because you’ve just created
your first Child Theme!

19. #wpmelb @maddisondesigns
Creating a Child Theme’s Screenshot
Optional Step: Create a .png image (screenshot.png) to display a
screenshot on the Themes page in the Dashboard.
The image should be 1200 x 900px.

20. #wpmelb @maddisondesigns
WordPress Codex
https://codex.wordpress.org
Child Themes on the WordPress Codex
https://codex.wordpress.org/Child_Themes
Official WordPress Theme Directory
https://wordpress.org/themes
Example Child Theme Code
http://maddisondesigns.com/child-theme-example
Links to Remember

21. I’m Anthony Hortin
You can find me here
@maddisondesigns
maddisondesigns.com
@easywpguide
easywpguide.com
Thanks!
Questions?