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

Week 9 - Introduction to Child Themes

on

  • 1,336 views

 

Statistics

Views

Total Views
1,336
Views on SlideShare
1,075
Embed Views
261

Actions

Likes
0
Downloads
15
Comments
0

1 Embed 261

http://ca274.beekeeperdev.com 261

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Week 9  - Introduction to Child Themes Week 9 - Introduction to Child Themes Presentation Transcript

  • CA274 - Web Content Management Systems and Strategy* [email_address]
    • Class website ca274.beekeeperdev.com
    • Google Group – Use to ask questions and share findings
    Week 8 Recap
  • 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 PHP My-WP-Theme 2 HMTL CSS JavaScript PHP My-WP-Theme 3 HMTL CSS JavaScript PHP My-WP-Theme 3
  • 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
  • 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
    • What is a WordPress Parent theme?
      • Any theme created by anyone
      • No specific coding requirements
    Week 9 - Introduction to Child Themes
    • 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
    • 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
    • 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
    • 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
  • 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
    • 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.
    • 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
    • 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
    • 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
    • PRACTICE
    Week 9 - Introduction to Child Themes
  • Install WordPress (10 Minutes) Week 6
    • CSS File
    Week 9 - Introduction to Child Themes * Template = folder name of the parent theme
    • Dashboard
    Week 9 - Introduction to Child Themes For bonus points, add a screenshot.png file to your child theme folder. 300 x 225 pixels
    • Overriding style elements
    Week 9 - Introduction to Child Themes Parent Theme Child Theme
    • Overriding style elements
    Week 9 - Introduction to Child Themes
    • Overriding functions
    Week 9 - Introduction to Child Themes Parent Theme Child Theme
    • 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
    • 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
    • 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
    • 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