WordPress Child Themes

WordPress Child ThemesBeckydavisdesign.com @beckyddesign

What are Themes? Themes control the Look, Feel and Functionality of a WordPress site and are separate from the content. Ready-made themes • wordpress.org/extend/themes/ - free • Woothemes.com, themetrust.com, studiopress.com etc. all offer premium (paid for) themes – Carefully investigate the documentation and support before purchase. – Themes can be built from scratch – Child themes can be built based on a parent (Recommended!)Beckydavisdesign.com @beckyddesign

Why bother to create a child? • Don’t have to start from scratch • Get all the good stuff the parent has to offer • Keep your theme files simple and light • Change the styles, art etc. without worrying about it being overwritten during an updateBeckydavisdesign.com @beckyddesign

Theme FilesBeckydavisdesign.com @beckyddesign

Core Theme Files • *Index.php – the Blog home page. Many posts in a list, or latest post or excerpts depending on the code. • *Style.css – The heart of the theme • Single.php – Single blog post. • Page.php – Static pages – Different template page files can be made • Sidebar, Footer & Header – just what they should be • Archive, Comments, Search – don’t generally need to edit • Functions – may need to add code for specific needs Put a comment at the top of each file so you can see which one you’re dealing with, very helpful! (  )Beckydavisdesign.com @beckyddesign

Theme Structure All of these files connect to the mySQL database. That’s where the content lives. Widgets are containers that mostly live in the (Where the sidebar, but can “Loop” be in the content happens) area, footer or widget header too! New widgets can be created in the functions file. widget Style.css controls the look of everything.Beckydavisdesign.com @beckyddesign

Style.css This is the code that makes your theme readable to WP. /* Theme Name: Zhulia3 Theme URI: http://beckydavisdesign.com/ Description: Custom theme for Zhulia Jewels with HTML5 enhancements, child of TwentyEleven, 2012 re-design Author: Becky Davis Author URI: http://beckydavisdesign.com/ Version: 3.0 Template: twentyeleven */ @import url(../twentyeleven/style.css);Beckydavisdesign.com @beckyddesign

Style.css The heart of how the design works Best practice CSS applies Remember the cascade! – Child style.css will overwrite parent • Use Chrome Inspector or Firebug to see where the style is coming fromBeckydavisdesign.com @beckyddesign

Functions.php • Unlike style.css, parent and child functions work together • Functions have to be removed from parent before new child ones can replace it remove_action( widgets_init, twentyeleven_widgets_init ); //necessary to replace parent themes code function Base5child11_widgets_init() { Only edit the child functions file, not the parentBeckydavisdesign.com @beckyddesign

Functions Functions can add: – Extra widgets – Custom styles for the editor – Headers – Custom Post types etc. The more PHP you know, the more you can doBeckydavisdesign.com @beckyddesign

Any Theme can be a Parent Not all themes are good parents Does it have the right structure/div placement for what you need? Is it well documented? Add or change widgets/plug-ins for different functionality – Twentyten (fixed width) and Twentyeleven (responsive) Themes are very well documented and make excellent parentsBeckydavisdesign.com @beckyddesign

Further Resources  http://codex.wordpress.org/Main_Page - Excellent documentation  http://wordpress.org/extend/ - Plugins, themes etc.  http://www.wpdesigner.com/2007/02/19/so-you-want- to-create-wordpress-themes-huh/ - Stupidest title, best step by step tutorial. Assumes you have little html/css/php knowledge.  Smashing WordPress by Hedengren  Digging into WordPress by Coyier and StarrBeckydavisdesign.com @beckyddesign

Contact 73-809-5640 ecky@beckydavisdesign.com eckydavisdesign.com (also a WordPress site, a child of TwentyTen!)Beckydavisdesign.com @beckyddesign

WordPress Child Themes

by Becky Davis on May 30, 2012

Accessibility

Categories

Upload Details

Usage Rights

Statistics

WordPress Child Themes Presentation Transcript