wordpress child themes
DESCRIPTION
Bronson Quick from Sennza explains what WordPress child themes are without too much lingo and does a demonstration to show how child themes work!TRANSCRIPT
SPONSORS, HOUSEKEEPING, NEWS! Envato
http://envato.com/
http://themeforest.net/category/wordpress
http://wp.tutsplus.com/
WordPress 3.5!
Toilets, water, packing up
sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
Props to Envato!
sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
WORDPRESS
CHILD THEMES Bronson Quick
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
2 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
By the end of this talk you should be confident with child themes!
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
3 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
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
4 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
Or if you have a “hacked” theme then it’s time to make a child theme!
USING FIREBUG
5 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
I love Firebug!
http://getfirebug.com/
F12
Right-click Inspect Element
Chrome Developer Tools
YOUR FIRST CHILD THEME
6 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
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");
7 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
That’s it!
ADD A BACKGROUND PATTERN http://subtlepatterns.com/
8 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
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;
}
9 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
Adding a box shadow and margin to the container
LET’S OVERRIDE SOME STYLES! @media screen and (max-width: 1400px) {
#container {
margin: 35px;
}
}
10 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
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
11 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
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' );
12 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
http://www.google.com/webfonts
GOOGLE FONTS CSS body {
font-family: 'Sanchez', serif;
color: #364449;
}
13 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
http://www.google.com/webfonts
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;
}
14 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
http://www.google.com/webfonts
FIX PARAGRAPH article p {
font-size: 1em;
line-height: 1.4em;
}
15 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
Slight alterations for typography
FIX “BROKEN” GALLERIES article .gallery br {
display: inline;
}
16 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
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;
}
}
17 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
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 '<span
class="copy-text">' . $copy_text . '</span><span class="separator"> | </span>'; }
?>
to
<?php if ( $copy_text = anthem_option( 'copyright_text' ) ) { echo '<span
class="copy-text">' . $copy_text; } ?>
18 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
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>
19 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
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.
}
}
20 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
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‘, ) );
21 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
You’ve overridden a pluggable function!
ADD YOUR OWN SCREENSHOT Make a 300x225 screenshot of your site and save it as screenshot.png
22 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
You’ve got a screenshot of your child theme
DOWNLOAD THE CHILD THEME https://github.com/BronsonQuick/bq2012
Optional: SASS
23 of 24 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
My code is your code!
sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
THANKS ALOT
23 of 24
http://core.trac.wordpress.org/ticket/13237