So you've been playing around with WordPress. You feel like you've really gotten the hang it. However, you're starting to run into limitations with how much you can customize your site. The next step toward creating an entirely custom WordPress site is to create a child theme. A child theme is a theme which is based on another theme (the "parent theme"), and can override and/or add to the look and functionality of the parent theme. This session is for: people who have made an HTML/CSS website, used WordPress, and run into customization limitations

1. Introduction to
Child Themes
MEL CHOYCE & KELLY DWAN
@MELCHOYCE • @RYELLE
NERDSUMMIT • SEPT 2014

2. Kelly Dwan
WORDPRESS DEVELOPER

3. Mel Choyce
DESIGN ENGINEER AT AUTOMATTIC

6. setup

7. what’s a
child theme?

8. 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.

9. 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

10. an example

19. WordPress themes

20. [finder]

21. Creating a
child theme

22. create a new folder in
wp-content/themes/

23. create style.css

24. [editor]

25. add a screenshot

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

27. Adding CSS

28. [editor]

29. Templates

30. Basic Theme
• style.css
• index.php
• (screenshot.png)

31. Templates
header.php
content
footer.php
index.php

35. 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

36. Page Templates
• You can set pages to use different templates if your theme or
child theme has other page templates available
no templates available

38. 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.

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

40. Functionality

41. Themes are…
• style.css for appearance
• templates (php files) for layout/HTML/displaying your content
• functions.php for any functionality in your theme

42. 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

43. Featured Images
add_theme_support( 'post-thumbnails' );
// width, height, crop mode
set_post_thumbnail_size( 604, 270, true );
Regenerate Thumbnails

44. More resources

45. 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/

46. News
Theme Specific
http://themeshaper.com/
General WP News
http://wptavern.com/
http://wordpress.org/news/
http://www.smashingmagazine.com/category/wordpress/
http://www.poststat.us/

47. Child Themeable
WP 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/automattic
http://profiles.wordpress.org/anlino

48. Theme Frameworks
Thematic
Genesis by StudioPress (paid)
Starter Themes
_s
Roots
Bones

49. Child Theme Generators
• Plugin: One-Click Child Theme
• WP CLI: wp scaffold child-theme