• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Week 9  - Introduction to Child Themes
 

Week 9 - Introduction to Child Themes

on

  • 1,239 views

 

Statistics

Views

Total Views
1,239
Views on SlideShare
978
Embed Views
261

Actions

Likes
0
Downloads
15
Comments
1

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

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • These are interesting themes for kids they will like it
    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