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


Top Related