Your SlideShare is downloading. ×
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How to Create a WordPress Child Theme

550

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!

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
550
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
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/

×