How to Create a WordPress Child Theme

  • 384 views
Uploaded 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!

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!

More in: Self Improvement
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
384
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. How to Create a WordPress Child Theme Activate the Child Theme 1.Appearance>Themes 2.Click Activate © Copyright 2014. Codefetti, LLC
  • 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. 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/