Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Anthony Hortin
@maddisondesigns
The

Why, When, How

of WordPress

Child Themes
#WPMELBUser Meetup
#wpmelb @maddisondesigns
What is a Child Theme?
#wpmelb @maddisondesigns
A child theme is a theme that
inherits the functionality and
styling of another theme (called
the...
#wpmelb @maddisondesigns
Why use a Child theme?
#wpmelb @maddisondesigns
It’s Safer
If you modify a theme’s CSS or HTML directly and it gets updated,
you’ll lose all your...
#wpmelb @maddisondesigns
It’s Quicker
Using a Child Theme can speed up your development time.
#wpmelb @maddisondesigns
It’s Easier
If the Parent Theme is developed properly, using a Child Theme
can make it easier to ...
#wpmelb @maddisondesigns
When should you use a

Child Theme?
#wpmelb @maddisondesigns
Almost Always
If you buy a theme from a Theme Shop or even
download a free one from WordPress.org...
#wpmelb @maddisondesigns
How do you create a

Child Theme?
#wpmelb @maddisondesigns
Creating a Child Theme
A Child Theme consists of the Child Theme directory,
and two files (style....
#wpmelb @maddisondesigns
Create a Child Theme Folder
Step 1: Create your Child Theme directory in wp-content/themes
#wpmelb @maddisondesigns
Creating a Child Theme Stylesheet
Step 2: Create your Child Theme's stylesheet (style.css)
#wpmelb @maddisondesigns
Creating a Child Theme Stylesheet
Your Child Theme's style.css file should include:
/*
Theme Name...
#wpmelb @maddisondesigns
Creating a Child Theme’s Functions
Step 3: Create your Child Theme's functions file (functions.ph...
#wpmelb @maddisondesigns
Creating a Child Theme’s Functions
Your Child Theme's functions.php file should include:
<?php
fu...
#wpmelb @maddisondesigns
Activating your Child Theme
Step 4: Login to your Dashboard, go to Appearance > Themes
and activa...
#wpmelb @maddisondesigns
High Five!
Step 5: Pat yourself on the back & have
a cuppa because you’ve just created
your first...
#wpmelb @maddisondesigns
Creating a Child Theme’s Screenshot
Optional Step: Create a .png image (screenshot.png) to displa...
#wpmelb @maddisondesigns
WordPress Codex

https://codex.wordpress.org
Child Themes on the WordPress Codex

https://codex.w...
I’m Anthony Hortin
You can find me here
@maddisondesigns
maddisondesigns.com
@easywpguide
easywpguide.com
Thanks!
Question...
Upcoming SlideShare
Loading in …5
×

The Why, When, How of WordPress Child Themes

341 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

The Why, When, How of WordPress Child Themes

  1. 1. Anthony Hortin @maddisondesigns The
 Why, When, How
 of WordPress
 Child Themes #WPMELBUser Meetup
  2. 2. #wpmelb @maddisondesigns What is a Child Theme?
  3. 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. 4. #wpmelb @maddisondesigns Why use a Child theme?
  5. 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. 6. #wpmelb @maddisondesigns It’s Quicker Using a Child Theme can speed up your development time.
  7. 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. 8. #wpmelb @maddisondesigns When should you use a
 Child Theme?
  9. 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. 10. #wpmelb @maddisondesigns How do you create a
 Child Theme?
  11. 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. 12. #wpmelb @maddisondesigns Create a Child Theme Folder Step 1: Create your Child Theme directory in wp-content/themes
  13. 13. #wpmelb @maddisondesigns Creating a Child Theme Stylesheet Step 2: Create your Child Theme's stylesheet (style.css)
  14. 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. 15. #wpmelb @maddisondesigns Creating a Child Theme’s Functions Step 3: Create your Child Theme's functions file (functions.php)
  16. 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. 17. #wpmelb @maddisondesigns Activating your Child Theme Step 4: Login to your Dashboard, go to Appearance > Themes and activate your Child Theme
  18. 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. 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. 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. 21. I’m Anthony Hortin You can find me here @maddisondesigns maddisondesigns.com @easywpguide easywpguide.com Thanks! Questions?

×