Download - 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


Hello! I’m Rhys


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

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

http://codex.wordpress.org/Child_Themes


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.


“Child Themes look the same as the parent!”


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.


How?


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.


Add style.css

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


Style.css Contents

http://bit.ly/wcmcr1



On wp-admin….


But…nothing’s changed!


Make Changes to style.css




Red Text!


Changing template files

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


On page.php

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




Going to a page….


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()




Actions/Filters

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




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/

http://underscores.me/

http://themeshaper.com/thematic/

http://www.studiopress.com/

http://peadig.com/


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?

http://winwar.co.uk/

http://twitter.com/rhyswynne

http://twitter.com/winwaruk

http://facebook.com/winwaruk

http://bit.ly/wcmcrtalk1

http://bit.ly/wcmcrtalk1