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

Recommended

Recommended

More Related Content

Similar to WordPress Child Themes

Similar to WordPress Child Themes (19)

More from Sennza Design

More from Sennza Design (9)

WordPress Child Themes