How to Get Your First Child Theme Off The Ground

@rhyswynne - @winwaruk #wcmcr

How To Get Your First Child Theme Off The Ground

WordCamp Manchester 2014 #wcmcr

@rhyswynne - @winwaruk #wcmcr

Hello! I’m Rhys

@rhyswynne - @winwaruk #wcmcr

@rhyswynne - @winwaruk #wcmcr

@rhyswynne - @winwaruk #wcmcr

@rhyswynne - @winwaruk #wcmcr

A WordPress child theme is a theme that inherits the functionality of

another (parent) theme(source: http://codex.wordpress.org/Child_Themes)

@rhyswynne - @winwaruk #wcmcr

Why Use A Child Theme?

• Safe: Make changes to themes without having changes overwritten.

• Quick: Speeds up developmental time – functionality has already been written.

• Easy: If you are new to development, this is a great way to learn.

@rhyswynne - @winwaruk #wcmcr

“Child Themes look the same as the parent!”

@rhyswynne - @winwaruk #wcmcr

@rhyswynne - @winwaruk #wcmcr

Other Minor Issues

• Because you’re loading 2 themes instead of one, you can have an impact on performance.– Very minimal in most cases, and caching can

stop these issues.

• Can increase complexity if parent theme is complex.– Good examples of good starting parent themes

are given at the end of the presentation.

@rhyswynne - @winwaruk #wcmcr

How?

@rhyswynne - @winwaruk #wcmcr

Create Folder For Your Theme

In the wp-contents/theme folder, add a new folder with name of your theme:-

Good practice states that youname the theme with the suffix“-child”, of the parent theme.

@rhyswynne - @winwaruk #wcmcr

Add style.css

• Within your new folder (in our example – twentythirteen-child – add a file entitled style.css)

@rhyswynne - @winwaruk #wcmcr

Style.css Contents

http://bit.ly/wcmcr1

@rhyswynne - @winwaruk #wcmcr

On wp-admin….

@rhyswynne - @winwaruk #wcmcr

But…nothing’s changed!

@rhyswynne - @winwaruk #wcmcr

Make Changes to style.css

http://bit.ly/wcmcr20142

@rhyswynne - @winwaruk #wcmcr

Red Text!

@rhyswynne - @winwaruk #wcmcr

Changing template files

• Copy the page.php file from twentythirteen folder to twentythirteen-child.

@rhyswynne - @winwaruk #wcmcr

On page.php

• Make changes to the file so you know it’s different….

http://bit.ly/wcmcr20143

@rhyswynne - @winwaruk #wcmcr

Going to a page….

@rhyswynne - @winwaruk #wcmcr

Functions.php

• The child theme’s functions.php is loaded as well as the parent functions.php.

http://bit.ly/wcmcrfun

• Name functions with a prefix i.e. twentythirteen_child_function()

@rhyswynne - @winwaruk #wcmcr

Actions/Filters

• Use the after_setup_theme action to remove actions/filters from the parent theme.

http://bit.ly/wcmcrfun

@rhyswynne - @winwaruk #wcmcr

Good Themes To Use as Parent Themes

Free (Good for Beginners)• Twenty Eleven, Twenty Twelve, Twenty Thirteen (included in

WordPress)• Underscores (_s) - http://underscores.me/ • Thematic - http://themeshaper.com/thematic/

Paid (Good for those familiar with HTML & CSS)• Genesis - http://www.studiopress.com/• Peadig - http://peadig.com/

@rhyswynne - @winwaruk #wcmcr

Thank You!My Sitehttp://winwar.co.uk/

Twitterhttp://twitter.com/rhyswynnehttp://twitter.com/winwaruk

Facebookhttp://facebook.com/winwaruk

These Slides & Noteshttp://bit.ly/wcmcrtalk1

Questions?