WCLV - Introduction to child themes
-
Upload
vegasgeek -
Category
Technology
-
view
2.209 -
download
1
description
Transcript of WCLV - Introduction to child themes
![Page 1: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/1.jpg)
![Page 2: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/2.jpg)
What the heck is a child theme?
“A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.”
- The WordPress Codex
![Page 3: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/3.jpg)
What can I use a child theme for?
• Customize the parent site design
• Add in additional functionality
• Save a bunch of time
![Page 4: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/4.jpg)
Why would I use a child theme?
• Update the parent theme without losing your customizations
• Did I mention the part about saving time?
![Page 5: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/5.jpg)
What do I need to get started?
• Choose a parent theme (check out twentyten & twentyeleven)
• A new folder in /wp-content/themes/
• A CSS file in your new theme
![Page 6: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/6.jpg)
The unedited parent theme
![Page 7: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/7.jpg)
Create a new theme folder
![Page 8: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/8.jpg)
Add a ‘style.css’ file
![Page 9: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/9.jpg)
Overriding style elements
Parent Theme Child Theme
![Page 10: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/10.jpg)
Activate your child theme
*screenshot.png
![Page 11: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/11.jpg)
Customized twentyeleven theme
![Page 12: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/12.jpg)
Twentyeleven header manager
![Page 13: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/13.jpg)
Overriding existing functions
![Page 14: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/14.jpg)
Overriding existing functions
![Page 15: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/15.jpg)
Overriding existing functions
![Page 16: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/16.jpg)
Adding your own functions
![Page 17: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/17.jpg)
Adding your own functions
![Page 18: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/18.jpg)
Keep in mind…
• Your child theme can contain as many or as few files as you want
• Files in your child theme folder override files in the parent theme folder
• Adding a functions.php will add-to rather than override functions.php from your parent theme
![Page 19: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/19.jpg)
Parent Theme vs Child Theme
Parent Theme Child Theme
![Page 20: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/20.jpg)
Overriding files
![Page 21: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/21.jpg)
Overriding files
![Page 22: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/22.jpg)
Overriding files
![Page 23: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/23.jpg)
Theme Frameworks
• Genesis – studiopress.com
• Thematic – themeshaper.com
• Hybrid – themehybrid.com
“A Theme framework is a Theme designed to be a flexible foundation for quicker WordPress development, usually serving as a robust Parent Theme for Child Themes.”
- The WordPress Codex
![Page 24: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/24.jpg)
Resources
• http://codex.wordpress.org/Theme_Development
• http://codex.wordpress.org/Child_Themes
• http://codex.wordpress.org/Plugin_API
![Page 25: WCLV - Introduction to child themes](https://reader033.fdocuments.us/reader033/viewer/2022051512/540565398d7f729e768b4c2c/html5/thumbnails/25.jpg)