How to Create a WordPress Child Theme
Presented by:
Michelle Phillips
Codefetti, LLC
December 18, 2014
Decoding Digital Ma...
How to Create a WordPress Child Theme
About this Presentation
 Assumes basic WordPress knowledge
 If you are a novice, n...
How to Create a WordPress Child Theme
What is a WordPress Theme Anyway?
A WordPress theme contains the basic layout inform...
How to Create a WordPress Child Theme
What is a WordPress Theme Anyway?
Note the different layouts and styles in the below...
How to Create a WordPress Child Theme
What is a Child Theme?
A child theme is based on the functionality of the parent the...
How to Create a WordPress Child Theme
What is a Child Theme?
These customizations include:
 Color
 Menu Styles
 Headers...
How to Create a WordPress Child Theme
WordPress Directory Structure
 For this demo, we will work with a default WordPress...
How to Create a WordPress Child Theme
WordPress Directory Structure
To Create a Child Theme:
1. Log into your website root...
How to Create a WordPress Child Theme
WordPress Directory Structure
Up on your server before: Up on your server after:
© C...
How to Create a WordPress Child Theme
Required Files for Your Child Theme
Now we will need to create 2 required files in t...
How to Create a WordPress Child Theme
What is the style.css file?
It provides necessary information so that
WordPress rec...
How to Create a WordPress Child Theme
What is the functions.php file?
It provides necessary information so that
WordPress...
How to Create a WordPress Child Theme
WordPress Directory Structure
We will use Notepad or Notepad ++ to create and edit t...
How to Create a WordPress Child Theme
Add style.css to Child Theme Directory
1. Open up a text editor such as Notepad or N...
How to Create a WordPress Child Theme
Add style.css to Child Theme Directory
3. Add following code to style.css – replace ...
How to Create a WordPress Child Theme
Add functions.php to Child Theme Directory
1. Open up a text editor such as Notepad ...
How to Create a WordPress Child Theme
Add functions.php to Child Theme Directory
Enqueue the parent and child theme styles...
How to Create a WordPress Child Theme
Add functions.php to Child Theme Directory
For our twentyfourteen example, we would ...
How to Create a WordPress Child Theme
Activate the Child Theme
1.Appearance>Themes
2.Click Activate
© Copyright 2014. Code...
How to Create a WordPress Child Theme
4 Steps to Create a Child Theme
Step 1: Create a folder for your child theme up on ...
References
wordpress.org
http://codex.wordpress.org/Child_Themes
How to Create a WordPress Child Theme
© Copyright 2014. C...
Upcoming SlideShare
Loading in...5
×

How to Create a WordPress Child Theme

613

Published on

Tired of losing your WordPress theme customizations every time you update the theme? Then learn how to create a WordPress child theme which will save all your changes!

Published in: Self Improvement
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
613
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How to Create a WordPress Child Theme

  1. 1. How to Create a WordPress Child Theme Presented by: Michelle Phillips Codefetti, LLC December 18, 2014 Decoding Digital Marketing © Copyright 2014. Codefetti, LLC
  2. 2. How to Create a WordPress Child Theme About this Presentation  Assumes basic WordPress knowledge  If you are a novice, not to worry!   You don’t have to be a programmer or techie  Learn in 4 steps how to create a child theme © Copyright 2014 Codefetti, LLC
  3. 3. How to Create a WordPress Child Theme What is a WordPress Theme Anyway? A WordPress theme contains the basic layout information for a WordPress site. The theme contains the following information:  Style: how it looks (i.e.: color, fonts, spacing)  Function: how it works  Structure: how it is put together © Copyright 2014. Codefetti, LLC
  4. 4. How to Create a WordPress Child Theme What is a WordPress Theme Anyway? Note the different layouts and styles in the below sample themes: © Copyright 2014. Codefetti, LLC
  5. 5. How to Create a WordPress Child Theme What is a Child Theme? A child theme is based on the functionality of the parent theme. In other words, it inherits all of the features of the parent. When you create a child theme, any customizations that you make to the parent theme are stored in a separate folder. This is important because:  Your customizations are preserved  You can easily upgrade a theme without losing changes © Copyright 2014. Codefetti, LLC
  6. 6. How to Create a WordPress Child Theme What is a Child Theme? These customizations include:  Color  Menu Styles  Headers  Navigation  Links  Other Formatting  Functions © Copyright 2014. Codefetti, LLC
  7. 7. How to Create a WordPress Child Theme WordPress Directory Structure  For this demo, we will work with a default WordPress theme, TwentyFourteen.  Here is a sample of the template: © Copyright 2014. Codefetti, LLC
  8. 8. How to Create a WordPress Child Theme WordPress Directory Structure To Create a Child Theme: 1. Log into your website root. Typically that is public_html on your web server 2. Navigate to wp-content folder and expand it 3. Create a new folder where you will store the child theme. 4. For our example, the folder will be named twentyfourteen-child © Copyright 2014. Codefetti, LLC
  9. 9. How to Create a WordPress Child Theme WordPress Directory Structure Up on your server before: Up on your server after: © Copyright 2014. Codefetti, LLC
  10. 10. How to Create a WordPress Child Theme Required Files for Your Child Theme Now we will need to create 2 required files in the child theme folder: 1. style.css 2. functions.php © Copyright 2014. Codefetti, LLC
  11. 11. How to Create a WordPress Child Theme What is the style.css file? It provides necessary information so that WordPress recognizes the child theme The child style.css replaces or augments the parent’s style.css It defines theme name and other info about the theme © Copyright 2014. Codefetti, LLC
  12. 12. How to Create a WordPress Child Theme What is the functions.php file? It provides necessary information so that WordPress loads The child functions.php file replaces or augments the parent’s functions.php It contains all of the features and functionality for the active theme © Copyright 2014. Codefetti, LLC
  13. 13. How to Create a WordPress Child Theme WordPress Directory Structure We will use Notepad or Notepad ++ to create and edit these files in wp-content/themes/twentyfourteen-child: © Copyright 2014. Codefetti, LLC
  14. 14. How to Create a WordPress Child Theme Add style.css to Child Theme Directory 1. Open up a text editor such as Notepad or Notepad++ (Do NOT use Word as it will mess up your files) 2. In child theme directory, create a file called style.css © Copyright 2014. Codefetti, LLC
  15. 15. How to Create a WordPress Child Theme Add style.css to Child Theme Directory 3. Add following code to style.css – replace with your theme info (Only Theme Name & Template are required) /* Theme Name: Twenty Fourteen Child Theme URI: http://example.com/twenty-fourteen-child/ Description: Twenty Fourteen Child Theme Author: Your Name Author URI: http://example.com Template: twentyfourteen Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar, responsive-layout Text Domain: twenty-fourteen-child */ /* =Theme customization starts here ---------------------------------- */ © Copyright 2014. Codefetti, LLC
  16. 16. How to Create a WordPress Child Theme Add functions.php to Child Theme Directory 1. Open up a text editor such as Notepad or Notepad++ (Note: Do NOT use Word; it will mess up your files) 2. In child theme directory, create a file called functions.php (Note: We no longer use @import to import the parent stylesheet ) © Copyright 2014. Codefetti, LLC
  17. 17. How to Create a WordPress Child Theme Add functions.php to Child Theme Directory Enqueue the parent and child theme stylesheets by adding the following code into functions.php: <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) ); } Note: Child loads after parent and its styles replace parent styles *Replace parent-style and child-style with your file names © Copyright 2014. Codefetti, LLC
  18. 18. How to Create a WordPress Child Theme Add functions.php to Child Theme Directory For our twentyfourteen example, we would use this code: <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( ‘twentyfourteen’, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( ‘twentyfourteen-child', get_stylesheet_uri(), array( twentyfourteen-style’ )); } Note: Child loads after parent and its styles replace parent styles © Copyright 2014. Codefetti, LLC
  19. 19. How to Create a WordPress Child Theme Activate the Child Theme 1.Appearance>Themes 2.Click Activate © Copyright 2014. Codefetti, LLC
  20. 20. How to Create a WordPress Child Theme 4 Steps to Create a Child Theme Step 1: Create a folder for your child theme up on your server in the wp-content/themes directory Step 2: Add a style.css file to the new folder with the theme information Step 3: Add a functions.php file to the new folder with the enqueue action Step 4: Activate your Child Theme! style.css Twentyfourteen-child © Copyright 2014. Codefetti, LLC Twentyfourteen-child functions.php
  21. 21. References wordpress.org http://codex.wordpress.org/Child_Themes How to Create a WordPress Child Theme © Copyright 2014. Codefetti, LLC Print out the blog post instructions at: http://www.codefetti.com/how-to-create-a-wordpress-child-theme/

×