Dress Your WordPress with Child Themes

(IT’S NOT A REALLY SMALL THEME…)

WHYCREATE A CHILD THEME?

A CHILDTHEME CANTAKE YOUFROM THIS…

http://diythemes.com/thesis/

http://www.shatterboxx.com

http://demo.graphpaperpress.com/modularity

http://www.heidibaker.co.uk

http://www.jumpingsunshinestudio.com

http://www.principlepictures.com (coming soon)

http://www.niophoto.com

CHOOSING YOUR PARENT THEME

 Well-written, semantic code Lots of widget areas Tons of ﬂexibility Extra functionality

PREMIUM vsFRAMEWORK vs CODEX

THEESSENTIALSOF A CHILD THEME

  Parent theme  style.css  screenshot.png  Template tag  @import call

/* Theme Name: Babymatic Theme URI: http://www.babymatic.com Description: A child theme for my new site. Version: 1.0 Author: Laurie M. Rauch Author URI: http://www.wpdivas.com Template: thematic */ @import url(../thematic/style.css); body{background-color:#b0b;}

THEOPTIONALSOF A CHILD THEME

 Functions.php Additional CSS files Javascript files New template files http://lauri.es/wphierarchy

FIREBUG… THE CHILDTHEME’S BEST FRIEND

http://lauri.es/damasking

http://lauri.es/babymask

Download the theme ﬁles here:http://wpdivas.com/themes

3/* Theme Name: Babymask Theme URI: http://playground.wpdivas.com/babymask/ Description: An awesome child theme for my newsite. Version: 1.0 Author: Laurie M. Rauch Author URI: http://www.wpdivas.com Template: damasking */ @import url(../damasking/style.css); 

4To make yourAppearance > Themespage pretty.

5Add this code to your ﬁle:<?php// your code goes here?>

6//register a second menu add_action(init’,register_sub_menu’); function register_sub_menu() { register_nav_menus( array( secondary => __( SecondaryNavigation ), ) );}

7//register a new sidebar area register_sidebars( 1, array( name => Footer, id’ => footer1, description => Footer widget area’, before_widget => <div id="%1$s"class="widget %2$s">, after_widget => </div>, before_title => <h2class="widgettitle">, after_title => </h2> ));

8 FOOTER.PHP

9<div id="footerwidget"> <?php if (function_exists (dynamic_sidebar) &&dynamic_sidebar(Footer’))?> </div>

10<div id="submenu"> <?php wp_nav_menu(array(menu => SecondaryNavigation’,theme_location’=> secondary )); ?> </div>

11 SIDEBAR.PHP

12body{ background-image: url(images/giza.gif); } CHANGE YOUR BACKGROUND IMAGE

13#content{ float:right; } #sidebar{ float:left; padding-left:10px; } REVERSE YOUR COLUMNS

14a{ color:#781C50; } a:hover{ color:#89862E; } CHANGE YOUR LINK COLOURS

function childtheme_postheader() {  echo bacon;  } add_filter(thematic_postheader, childtheme_postheader); THEMATIC

function widgetize_footer({ echo <div class="footerwidget">; dynamic_sidebar(Footer); echo </div>; } add_action(thesis_hook_footer, widgetize_footer);  THESIS

1.  WordPress Codex: http://codex.wordpress.org/Child_Themes2.  WordPress Template Hierarchy: http://codex.wordpress.org/ Template_Hierarchy3.  GraphPaperPress: http://graphpaperpress.com/2010/02/10/how- to-create-child-themes-for-our-modularity-theme-for-wordpress/4.  Thematic: http://themeshaper.com/modify-wordpress-themes/5.  Thesis: http://diythemes.com/thesis/rtfm/customizing-with-hooks/6.  Firebug: https://addons.mozilla.org/en-US/ﬁrefox/addon/ﬁrebug/7.  Added Bytes (Dave Child) CSS CheatSheet http:// www.addedbytes.com/cheat-sheets/css-cheat-sheet/8.  W3Schools: http://w3schools.com/css/9.  Html dog: http://www.htmldog.com/10. Din Pattern: http://www.dinpattern.com

1.  Thesis/DIY Themes {diythemes.com/thesis}2.  Shatterboxx Media {shatterboxx.com}3.  Graph Paper Press {graphpaperpress.com}4.  Heidi Baker {heidibaker.co.uk}5.  Jumping Sunshine Studio {jumpingsunshinestudio.com}6.  Principle Pictures {principlepictures.com}7.  Nio Photography {niophoto.com}8.  Thematic {themeshaper.com}9.  WP Divas {wpdivas.com}

Dress Your WordPress with Child Themes

by Laurie M. Rauch on Jul 11, 2011

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

Dress Your WordPress with Child Themes Presentation Transcript