about:me
WordCamp Buffalo 2012
What is a child theme?
A theme that is dependent on a parent theme for its code, but allows you to modify that theme to change its design and functionality.
With a child theme, you can change this...
To this...
And from this...
To this...
And from this...
To this...
Why use a child theme?
- Use another theme's code and functionality to create your own look and feel.
- Customize a theme without breaking anything.
- Keeps your customizations in a separate place.
- Update the parent theme without losing any of your customizations.
How do you use a child theme?
- Include only the files you want to change
- Ensure the parent theme lives in your wp-content/themes folder
- Activate the child theme
What to look for in a parent theme
- Well-written, semantic code
- Lots of widget areas
- Tons of flexibility
- Extra functionality
Where do you find a parent theme?
- Premium Theme
- Framework
- WordPress Theme Repository
How it works
Let's Get Started...
Step 1
Create a style.css file
/*
Theme Name: Buffalo Child Theme
Theme URI: http://buffalowordcamp.com
Description: Custom child theme for Twenty Twelve
Author: Code Diva
Author URI: http://www.codediva.com
*/
Step 2
Add the Template name and the Parent theme's name
/*
Theme Name: Buffalo Child Theme
Theme URI: http://buffalowordcamp.com
Description: Custom child theme for Twenty Twelve
Author: Code Diva
Author URI: http://www.codediva.com
Template: twentytwelve
*/
Step 3
Import the parent theme's style.css file
/*
Theme Name: Buffalo Child Theme
Theme URI: http://buffalowordcamp.com
Description: Custom child theme for Twenty Twelve
Author: Code Diva
Author URI: http://www.codediva.com
Template: twentytwelve
*/
@import url(../twentytwelve/style.css);
Step 4
Add a screenshot.png file
Step 5
Upload your new theme to wp-content/themes
Step 6
Activate your new theme in Appearance > Themes
Start adding your changes
How do I edit my code?
- Built-in text editor:
- Notepad (Windows)
- TextEdit (Mac)
- HTML Editor:
- Dreamweaver
- Coda
- SublimeText
- Notepad++
- TextWrangler
- ...to name a few
Create a new file: functions.php
Functions written in this file will be added to the theme
Do not duplicate the parent theme's functions.php or you could get errors. This is the only file we add to instead of duplicating.
Unless...
The parent theme set up the function with this conditional:
if ( ! function_exists( 'function_name' ) ):
This conditional allows you to create a new function with the same name that will replace the existing function.
Take a look...
Replace existing files with your revised version
- Save the parent theme file to your child theme folder.
- Do not rename the file so WordPress knows to read that file instead of the original.
- Add your changes.
Add cool stuff
- Add new features
- Add new template tags to display specific information. Read more about the possible template tags.
- Add conditional statements to restrict content to specific pages. Read more about conditional tags
Take a look...
Add a new page template
You can create as many page templates as you like. These will appear in the list on your Page edit page.
- Add the Template Name
<?php /* Template Name: Links */ ?>
- Add your header call
<?php get_header(); ?>
- Add your footer call
<?php get_footer(); ?>
- Add your new content
Take a look...
Add a little pretty...
Start adding new styles to your style.css to start changing the look of your theme.
Get help with learning CSS:
Take a look...
The Essentials
- Parent theme
- style.css
- Parent's template name
- @import parent's style.css
- screenshot.png
- New template files
Stand back and admire your awesomeness
Questions?
Resources
Thank you!
This presentation is available at: http://codediva.com/wcb12. The slides were built using HTML5/CSS3 and may not work as well in older browsers or mobile devices
Download the child theme we created here: http://codediva.com/wcb12/buffalo.zip.