WordPress Child Themes

SPONSORS, HOUSEKEEPING, NEWS!
 Envato
 http://envato.com/
 http://themeforest.net/category/wordpress
 http://wp.tutsplus.com/
 WordPress 3.5!
 Toilets, water, packing up

Props to Envato!

sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza

WORDPRESS
CHILD THEMES
Bronson Quick

sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza

OVERVIEW
 What is a child theme?
 Choosing a parent theme
 Using Firebug
 Your first child theme
 Let’s override some styles!
 Let’s override some templates
 Google Fonts API
 Pluggable functions (why they are great)
 Add your own screenshot

By the end of this talk you should be confident with child themes!

2 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza

WHAT IS A CHILD THEME?
 Who has hacked a theme (be honest)?
 Who has updated a theme and lost their changes?
 Who hasn’t updated a theme on a site because you
know you’ll lose your changes?
 Enter the child theme!
 Parent (base) theme; child (modified) theme

The terminology is a little confusing but you’ll love child themes!

http://codex.wordpress.org/Child_Themes

CHOOSING A PARENT THEME
 Find a theme you “kind of” like
 Colours
 Responsive
 Functionality
 Reputable author

Or if you have a “hacked” theme then it’s time to make a child theme!


USING FIREBUG
 http://getfirebug.com/
 F12
 Right-click Inspect Element
 Chrome Developer Tools

I love Firebug!


YOUR FIRST CHILD THEME
 Add a background pattern
 Add some margin and a box shadow
 Add some media query
 Add Google Fonts
 Add the CSS for Google Fonts
 Fix the paragraphs and line height
 Fix the “broken” galleries
 Fix the “Info” tab
 Alter footer.php to remove a pipe
 Alter the date in post-footer.php
 Alter a pluggable function


YOUR FIRST CHILD THEME
/*
Theme Name: Anthem Child Theme
Theme URI: http://www.sennza.com.au/
Description: Child theme for the Anthem theme
Author: Bronson Quick
Author URI: http://www.sennza.com.au
Template: anthem
Version: 1.0
*/
@import url("../anthem/style.css");
That’s it!

ADD A BACKGROUND PATTERN
 http://subtlepatterns.com/

Because texture is good mmmkay!

LET’S OVERRIDE SOME STYLES!
#container {
-webkit-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
-moz-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
margin: 3% auto;
}

Adding a box shadow and margin to the container


LET’S OVERRIDE SOME STYLES!
@media screen and (max-width: 1400px) {
#container {
margin: 35px;
}
}

I like a fixed margin below 1399px


CREATE FUNCTIONS.PHP
 “Unlike style.css, the functions.php of a child theme does not override its counterpart
from the parent. Instead, it is loaded in addition to the parent’s functions.php”
 You can add extra functionality to your theme in this file

Think twice when you add functions in here…sometimes you should be making a plugin!


GOOGLE FONTS API
function sennza_custom_scripts_styles(){
$subsets = "latin,latin-ext";
$protocol = is_ssl() ? 'https' : 'http';
$query_args = array(
'family' => 'Bree+Serif|Sanchez:400italic,400',
'subset' => $subsets,
);
wp_enqueue_style( 'custom-fonts', add_query_arg( $query_args,
"$protocol://fonts.googleapis.com/css" ), array(), null );
}

add_action( 'wp_enqueue_scripts', 'sennza_custom_scripts_styles' );

http://www.google.com/webfonts

GOOGLE FONTS CSS
body {
font-family: 'Sanchez', serif;
color: #364449;
}


GOOGLE FONTS CSS
#container h1 a,
#container h2 a,
#container h3 a,
#container h4 a,
#container h5 a,
#container h6 a {
font-family: 'Bree Serif', serif;
font-weight: normal;
color: #297ed8;
}


FIX PARAGRAPH
article p {
font-size: 1em;
line-height: 1.4em;
}

Slight alterations for typography

FIX “BROKEN” GALLERIES
article .gallery br {
display: inline;
}

This goes funky in some “in-between” sizes

FIX “INFO” TAB
@media only screen and (max-width: 767px) {
body.logged-in header a#toggle {
top: 63px;
right: 56px;
}
}

This goes also goes funky in some “in-between” sizes

LET’S OVERRIDE SOME TEMPLATES!
 Copy footer.php into your child theme
 Change:
<?php if ( $copy_text = anthem_option( 'copyright_text' ) ) { echo '' . $copy_text . ' | '; }
?>
to
<?php if ( $copy_text = anthem_option( 'copyright_text' ) ) { echo '' . $copy_text; } ?>

You’ve now “hacked” your footer

LET’S OVERRIDE SOME TEMPLATES!
 Copy post-footer.php into your child theme
 Change
<a href="<?php the_permalink(); ?>" class="permalink"><?php the_time( 'F jS' ); ?></a>
to
<a href="<?php the_permalink(); ?>" class="permalink"><?php the_time( 'F j, Y' ); ?></a>

You’ve now “hacked” your post footer

PLUGGABLE FUNCTIONS
 “Unlike style.css, the functions.php of a child theme does not override its counterpart
from the parent. Instead, it is loaded in addition to the parent’s functions.php”

if ( ! function_exists( 'theme_special_nav' ) ) {
function theme_special_nav() {
// Do something.
}
}

I love theme developers who write pluggable functions!


PLUGGABLE FUNCTIONS
 Copy the entire anthem_setup() function into functions.php

Change
add_theme_support( 'post-formats', array( 'video', 'quote', 'link', 'image', 'audio', 'gallery', 'chat' ) );
to
add_theme_support( 'post-formats', array( 'video', 'quote', 'link', 'image', 'audio', 'gallery‘, ) );

You’ve overridden a pluggable function!


ADD YOUR OWN SCREENSHOT
 Make a 300x225 screenshot of your site and save it as screenshot.png

You’ve got a screenshot of your child theme 


DOWNLOAD THE CHILD THEME
 https://github.com/BronsonQuick/bq2012
 Optional: SASS

My code is your code!


THANKS ALOT

http://core.trac.wordpress.org/ticket/13237

WordPress Child Themes

More Related Content

Similar to WordPress Child Themes (20)

More from Sennza Design (9)

WordPress Child Themes