Week 9  - Introduction to Child Themes
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
1,418
On Slideshare
1,157
From Embeds
261
Number of Embeds
1

Actions

Shares
Downloads
15
Comments
0
Likes
0

Embeds 261

http://ca274.beekeeperdev.com 261

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