CA274 -  Web Content Management Systems and Strategy* [email_address]
<ul><li>Class website ca274.beekeeperdev.com </li></ul><ul><li>Google Group – Use to ask questions and share findings </li...
Week 8 Recap Mid-term
Intro to  WordPress  Child Themes Week 9
Week 9 – Introduction to Child Themes HMTL CSS JavaScript PHP For every site, a theme. My-WP-Theme 1 HMTL CSS JavaScript P...
Week 9 – Introduction to Child Themes HMTL CSS JavaScript PHP This is the  OLD  way My-WP-Theme 1 HMTL CSS JavaScript PHP ...
Week 9 – Introduction to Child Themes HMTL CSS JavaScript PHP Theme options Introducing child themes… My-WP-Theme (parent-...
<ul><li>What is a WordPress Parent theme? </li></ul><ul><ul><li>Any theme created by anyone </li></ul></ul><ul><ul><li>No ...
<ul><li>What is a WordPress Child theme? </li></ul><ul><ul><li>“ A WordPress child theme is a theme that inherits the func...
<ul><li>Why use Child themes? </li></ul><ul><ul><li>You don’t have reinvent the wheel </li></ul></ul><ul><ul><li>Change on...
<ul><li>How do child them work?  </li></ul><ul><ul><li>Follow the same hierarchy as any WordPress theme </li></ul></ul><ul...
<ul><li>How do child them work? (Cont) </li></ul><ul><ul><li>Only requirement is a style.css </li></ul></ul><ul><ul><li>fu...
Directory Structure Week 9  - Introduction to Child Themes
Directory Structure Week 9  - Introduction to Child Themes Parent Theme Child Theme
Examples Week 9  - Introduction to Child Themes
Examples Week 9  - Introduction to Child Themes
Examples Week 9  - Introduction to Child Themes
<ul><li>How to get started?...It’s easy. </li></ul><ul><ul><li>Choose in a parent theme </li></ul></ul><ul><ul><li>Create ...
<ul><li>When Choosing a parent theme… </li></ul><ul><ul><li>Don’t just look at the design.  Flexibility? Extra functionali...
<ul><li>Frameworks </li></ul><ul><ul><li>Supercharged parent theme </li></ul></ul><ul><ul><li>For developers </li></ul></u...
<ul><li>Some good parent themes / Frameworks </li></ul><ul><li>Listed on WP Codex  http://codex.wordpress.org/Theme_Framew...
<ul><li>PRACTICE </li></ul>Week 9  - Introduction to Child Themes
Install WordPress (10 Minutes) Week 6
<ul><li>CSS File </li></ul>Week 9  - Introduction to Child Themes * Template = folder name of the parent theme
<ul><li>Dashboard </li></ul>Week 9  - Introduction to Child Themes For bonus points, add a screenshot.png file to your chi...
<ul><li>Overriding style elements </li></ul>Week 9  - Introduction to Child Themes Parent Theme Child Theme
<ul><li>Overriding style elements </li></ul>Week 9  - Introduction to Child Themes
<ul><li>Overriding functions </li></ul>Week 9  - Introduction to Child Themes Parent Theme Child Theme
<ul><li>Resources </li></ul><ul><ul><li>Codex: Child Themes </li></ul></ul><ul><ul><li>http://codex.wordpress.org/Child_Th...
<ul><li>Resources </li></ul><ul><ul><li>Codex: Child Themes </li></ul></ul><ul><ul><li>http://codex.wordpress.org/Child_Th...
<ul><li>Homework  </li></ul><ul><ul><li>Create a twentyeleven child theme </li></ul></ul><ul><ul><ul><li>Add/change the ba...
<ul><li>Sources </li></ul><ul><ul><li>http://www.slideshare.net/vegasgeek/intro-to-wordpress-child-themes </li></ul></ul><...
Upcoming SlideShare
Loading in...5
×

Week 9 - Introduction to Child Themes

1,251

Published on

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,251
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Week 9 - Introduction to Child Themes

  1. 1. CA274 - Web Content Management Systems and Strategy* [email_address]
  2. 2. <ul><li>Class website ca274.beekeeperdev.com </li></ul><ul><li>Google Group – Use to ask questions and share findings </li></ul>Week 8 Recap
  3. 3. Week 8 Recap Mid-term
  4. 4. Intro to WordPress Child Themes Week 9
  5. 5. Week 9 – Introduction to Child Themes HMTL CSS JavaScript PHP For every site, a theme. My-WP-Theme 1 HMTL CSS JavaScript PHP My-WP-Theme 2 HMTL CSS JavaScript PHP My-WP-Theme 3 HMTL CSS JavaScript PHP My-WP-Theme 3
  6. 6. Week 9 – Introduction to Child Themes HMTL CSS JavaScript PHP This is the OLD way My-WP-Theme 1 HMTL CSS JavaScript PHP My-WP-Theme 2 HMTL CSS JavaScript PHP My-WP-Theme 3 HMTL CSS JavaScript PHP My-WP-Theme 3
  7. 7. Week 9 – Introduction to Child Themes HMTL CSS JavaScript PHP Theme options Introducing child themes… My-WP-Theme (parent-theme) CSS Two or three PHP files My-wp-child-Theme
  8. 8. <ul><li>What is a WordPress Parent theme? </li></ul><ul><ul><li>Any theme created by anyone </li></ul></ul><ul><ul><li>No specific coding requirements </li></ul></ul>Week 9 - Introduction to Child Themes
  9. 9. <ul><li>What is a WordPress Child theme? </li></ul><ul><ul><li>“ 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.” </li></ul></ul><ul><ul><li>The WordPress Codex </li></ul></ul>Week 9 - Introduction to Child Themes
  10. 10. <ul><li>Why use Child themes? </li></ul><ul><ul><li>You don’t have reinvent the wheel </li></ul></ul><ul><ul><li>Change only what you need </li></ul></ul><ul><ul><li>Protects your modification from updates to parent theme (in theory) </li></ul></ul><ul><ul><li>Unified architecture and development process </li></ul></ul>Week 9 - Introduction to Child Themes
  11. 11. <ul><li>How do child them work? </li></ul><ul><ul><li>Follow the same hierarchy as any WordPress theme </li></ul></ul><ul><ul><li>Child theme can contain as many or as few files as you want </li></ul></ul><ul><ul><li>If template is not available in child theme directory, WP will look for it parent theme directory </li></ul></ul><ul><ul><li>Files in your child theme folder override files in the parent theme folder </li></ul></ul>Week 9 - Introduction to Child Themes
  12. 12. <ul><li>How do child them work? (Cont) </li></ul><ul><ul><li>Only requirement is a style.css </li></ul></ul><ul><ul><li>functions.php does not get overridden. ( Adding a functions.php will add-to rather than override functions.php from your parent theme) </li></ul></ul>Week 9 - Introduction to Child Themes
  13. 13. Directory Structure Week 9 - Introduction to Child Themes
  14. 14. Directory Structure Week 9 - Introduction to Child Themes Parent Theme Child Theme
  15. 15. Examples Week 9 - Introduction to Child Themes
  16. 16. Examples Week 9 - Introduction to Child Themes
  17. 17. Examples Week 9 - Introduction to Child Themes
  18. 18. <ul><li>How to get started?...It’s easy. </li></ul><ul><ul><li>Choose in a parent theme </li></ul></ul><ul><ul><li>Create a new folder in /wp-content/themes/ </li></ul></ul><ul><ul><li>Create CSS file in newly created folder. </li></ul></ul><ul><ul><li>Add @import call to parent CSS file </li></ul></ul>Week 9 - Introduction to Child Themes There must be no other CSS rules above the @import rule. If you put other rules above it, it will be invalidated and the stylesheet of the parent will not be imported.
  19. 19. <ul><li>When Choosing a parent theme… </li></ul><ul><ul><li>Don’t just look at the design. Flexibility? Extra functionality? </li></ul></ul><ul><ul><li>Premium vs. Framework vs. Codex </li></ul></ul><ul><ul><li>Is there a forum or structured system for support or bug reporting? </li></ul></ul><ul><ul><li>Well-written & commented code. Check to see if the X-HTML & CSS mark-up validates according to W3C standards. </li></ul></ul><ul><ul><li>Make sure that you fully understand how a Parent theme works </li></ul></ul>Week 9 - Introduction to Child Themes
  20. 20. <ul><li>Frameworks </li></ul><ul><ul><li>Supercharged parent theme </li></ul></ul><ul><ul><li>For developers </li></ul></ul><ul><ul><li>Usually highly widgetized </li></ul></ul><ul><ul><li>Uses action to allow child themes to execute code </li></ul></ul><ul><ul><li>User filters to allow child themes to modify output </li></ul></ul>Week 9 - Introduction to Child Themes
  21. 21. <ul><li>Some good parent themes / Frameworks </li></ul><ul><li>Listed on WP Codex http://codex.wordpress.org/Theme_Frameworks </li></ul><ul><li>T hematic Theme (free, developer friendly) http://themeshaper.com/thematic-for-wordpress/ </li></ul><ul><li>H ybrid Theme (free, paid support) http://themehybrid.com/ </li></ul><ul><li>G enesis Theme (premium, regular updates, developer friendly) http://www.studiopress.com/themes </li></ul><ul><li>T hesis Theme (premium, regular updates, highly customizable </li></ul>Week 9 - Introduction to Child Themes
  22. 22. <ul><li>PRACTICE </li></ul>Week 9 - Introduction to Child Themes
  23. 23. Install WordPress (10 Minutes) Week 6
  24. 24. <ul><li>CSS File </li></ul>Week 9 - Introduction to Child Themes * Template = folder name of the parent theme
  25. 25. <ul><li>Dashboard </li></ul>Week 9 - Introduction to Child Themes For bonus points, add a screenshot.png file to your child theme folder. 300 x 225 pixels
  26. 26. <ul><li>Overriding style elements </li></ul>Week 9 - Introduction to Child Themes Parent Theme Child Theme
  27. 27. <ul><li>Overriding style elements </li></ul>Week 9 - Introduction to Child Themes
  28. 28. <ul><li>Overriding functions </li></ul>Week 9 - Introduction to Child Themes Parent Theme Child Theme
  29. 29. <ul><li>Resources </li></ul><ul><ul><li>Codex: Child Themes </li></ul></ul><ul><ul><li>http://codex.wordpress.org/Child_Themes </li></ul></ul><ul><ul><li>How To Modify WordPress Themes The Smart Way </li></ul></ul><ul><ul><li>http://themeshaper.com/modify-wordpress-themes/ </li></ul></ul><ul><ul><li>How to make a child theme for WordPress: A pictorial introduction for beginners </li></ul></ul><ul><ul><li>http://op111.net/53/ </li></ul></ul>Week 9 - Introduction to Child Themes
  30. 30. <ul><li>Resources </li></ul><ul><ul><li>Codex: Child Themes </li></ul></ul><ul><ul><li>http://codex.wordpress.org/Child_Themes </li></ul></ul><ul><ul><li>How To Modify WordPress Themes The Smart Way </li></ul></ul><ul><ul><li>http://themeshaper.com/modify-wordpress-themes/ </li></ul></ul><ul><ul><li>How to make a child theme for WordPress: A pictorial introduction for beginners </li></ul></ul><ul><ul><li>http://op111.net/53/ </li></ul></ul>Week 9 - Introduction to Child Themes
  31. 31. <ul><li>Homework </li></ul><ul><ul><li>Create a twentyeleven child theme </li></ul></ul><ul><ul><ul><li>Add/change the background image of the body </li></ul></ul></ul><ul><ul><ul><li>Change the background color of the sidebar </li></ul></ul></ul><ul><ul><ul><li>Change the font weight, color </li></ul></ul></ul><ul><ul><ul><li>Make post titles in all CAPS </li></ul></ul></ul><ul><ul><ul><li>Hide category meta using CSS </li></ul></ul></ul><ul><ul><ul><li>Anything else you want (optional) </li></ul></ul></ul><ul><ul><li>Name of you child theme should be “firstname lastname child theme” </li></ul></ul><ul><ul><li>Email me the file(s) of child theme only. Make sure you receive confirmation from me. </li></ul></ul>Week 9 - Introduction to Child Themes
  32. 32. <ul><li>Sources </li></ul><ul><ul><li>http://www.slideshare.net/vegasgeek/intro-to-wordpress-child-themes </li></ul></ul><ul><ul><li>http://www.slideshare.net/abanesta/child-theming-an-introduction-to-wordpress-theme-development-with-wordpress-child-themes </li></ul></ul><ul><ul><li>http://www.slideshare.net/saracannon/customizing-themeschildthemes </li></ul></ul><ul><ul><li>http://www.slideshare.net/brandondove/parentchild-themes-vs-theme-frameworks </li></ul></ul><ul><ul><li>http://www.slideshare.net/rfair404/wordpress-child-themes/ </li></ul></ul>Week 9 - Introduction to Child Themes
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×