Introduction to Child Themes

MEL CHOYCE & KELLY DWAN @MELCHOYCE • @RYELLE NERDSUMMIT • SEPT 2014

Kelly DwanWORDPRESS DEVELOPER

Mel ChoyceDESIGN ENGINEER AT AUTOMATTIC

setup

what’s a child theme?

What is a child theme?

A Child Theme is a theme that overrides and adds elements to another theme (the “Parent” theme) without touching any of the Parent theme’s code. When the parent theme is updated, your changes will be preserved.

why?

1. If you update your theme, you won’t lose your changes

2. You have greater control over your theme, without having to create one from scratch

3. It’s a great way to learn the basics of WordPress theming

an example

WordPress themes

[finder]

Creating a child theme

create a new folder in wp-content/themes/

create style.css

[editor]

add a screenshot

In the WordPress admin, go to Appearance > Themes activate your child theme

Adding CSS

[editor]

Templates

Basic Theme

• style.css

• index.php

• (screenshot.png)

Templates

header.php

content

footer.php

index.php

Overriding a file

• Copy header.php from twentythirteen

• Paste into our child theme

• Open file in text editor

• Copy lines from <div id="navbar" class=“navbar"> to </div><!-- #navbar —>

• Move to above <a class="home-link" …

• Save & view your site

Goal: Move Main Navigation to above the page title a file

Page Templates

• You can set pages to use different templates if your theme or child theme has other page templates available

no templates available

Page with no sidebar• Copy page.php from twentythirteen

• Paste into our child theme *

• Rename to template-no-sidebar.php

• Add Template Name: No Sidebar to the header comment *

• Open in text editor, remove <?php get_sidebar(); ?>

• View a page- if there’s no visible sidebar, add widgets to Secondary Widget Area.

• Edit the page, choose template from the dropdown.

• Update page & view new template.

Template Hierarchy

http://codex.wordpress.org/images/1/18/Template_Hierarchy.png

Functionality

Themes are…

• style.css for appearance

• templates (php files) for layout/HTML/displaying your content

• functions.php for any functionality in your theme

functions.php• Theme setup function

• Define any navigation menus

• add_theme_support

• post formats, featured images, custom header, custom background, and more

• Set up widget areas

• $content_width

Featured Imagesadd_theme_support( 'post-thumbnails' );

// width, height, crop mode set_post_thumbnail_size( 604, 270, true );

Regenerate Thumbnails

More resources

Next Steps

• http://make.wordpress.org/docs/theme-developer-handbook/Currently in progress, but pretty far along.

• Watch other people!

• Use your browser’s dev tools to see how something’s done

• Check out themes you like, try to read the code

• http://make.wordpress.org/themes/

NewsTheme Specific

http://themeshaper.com/

General WP News

http://wptavern.com/ http://wordpress.org/news/ http://www.smashingmagazine.com/category/wordpress/ http://www.poststat.us/

Child ThemeableWP Default themes (also Twenty Eleven, Twenty Twelve)

http://themehybrid.com/themes

http://wordpress.org/themes/responsive

http://wordpress.org/themes/oxygen

http://wordpress.org/themes/vantage

Good Theme developers (to see themes, click Themes):

http://profiles.wordpress.org/automattichttp://profiles.wordpress.org/anlino

Theme FrameworksThematic

Genesis by StudioPress (paid)

Starter Themes_s

Roots

Bones

Child Theme Generators

• Plugin: One-Click Child Theme

• WP CLI: wp scaffold child-theme