Your firstborn child theme
Child themes 101+2
WordCamp Atlanta 15 March 2013
Evan Mullins @circlecube
Learn how to mod themes the right way. Using child themes
you won't lose your edits when there's a theme update.
(101) We'll go over the advantages and how to set up a child theme.
(102) Plus we'll cover some tricks to make the process a bit easier.

Who am I?
Evan Mullins
circlecube.com
currently:
2006 started in Web Design Interactive Director at Brand Fever, a Creative Marketing
2007 started using WordPress for blogging Agency down the street. http://brandfeverinc.com
2008 started theming

Firstborn Child theme
101 102
Themes Deeper into WP
Child themes Helpers
Why Best Practices
How

101
What is a WordPress theme?

Your Theme is your Brand
Your theme is your design, identity & brand.

What is a WordPress theme?
The WordPress theme
system is a way to skin
your site.
It's a collection of files that work
together to produce a graphical
interface with an underlying
unifying design for a weblog. These
files are called template files. A
Theme modifies the way the site is
displayed, without modifying the
underlying software.
http://codex.wordpress.org/Themes

What is a WordPress theme?
A theme, template, skin, etc… is a
ready to use design and layout that
you can pop right onto your existing
WordPress site. WordPress handles
all of the content for you (posts,
pages, comments), while the theme
transforms that content into a
beautiful and clean layout for your
visitors to see.
http://www.woothemes.
com/frequently-asked-
questions/#whatisatheme

What is a WordPress theme?
Think of it like a house. WordPress
provides the foundation and framing,
while your theme adds in the paint,
flooring, curtains, etc. – everything
you need to construct the “look” of
your site.
http://ithemes.com/start-here/

What is a WordPress theme?
The key takeaway about WordPress themes any
beginner must know is that at any moment a
WordPress website’s theme may be changed
without adversely affecting the actual content of
the website.
Graph Paper Press beginner’s guide: http:
//downloads.graphpaperpress.com.s3.
amazonaws.com/beginners-guide-to-wordpress.
pdf

What is a WordPress theme?
All the files that What's the point?
determine the visual
or front-end of the Themes separate a site's
site. A theme is what presentation from the
the site looks like and system files.
potentially some
features of the site by Like a CMS separates the
actual content.
incorporating things
like custom post types,
custom fields, etc.

Good theme != Success
Although helpful, a
good theme does not
automatically make
a site good or
successful.
(Although a bad theme could
hinder success or even render your
site useless)

Friendly
reminder:
As always,
CONTENT
is King.

Types of themes
Custom
Free
Premium
Customized
Starter
Framework
Parent
Child

Free

Premium

Starter

Framework
A "drop-in" code library framework is not a stand-alone Theme. Such
frameworks cannot be installed nor used as a stand-alone Theme.
Rather, these libraries are included with the Theme, and
"bootstrapped" to the Theme by being included in the Theme's
functions.php file.
A "base/starter" Theme framework is stand-alone Theme designed
to be a flexible foundation for quicker WordPress development,
usually serving as a robust Parent Theme for Child Themes. Some
Theme frameworks can also make theme development more
accessible, removing the need for programming or design
knowledge with options pages.

Framework

Parent
Any theme can be a parent.
There are no sterile themes.
(but some do make better parents
& are built with child themes in mind)

Child Themes?
The analogy stops there. In
Cleverly named WordPress child themes inherit from
because, like real life the parent, but they don't drive the
parent theme crazy.
parent - child
relationships, they In fact the parent theme is not
affected in the least by the child
inherit characteristics theme. (and that's kinda the point)
of the parent ...
Plus there are no grand-parent
themes.

If it's confusing, just
think 'sub-theme'. It
inherits all parts of the
parent theme and lets
you customize it.

Not sold yet?
I can hear it now:
"I already customize theme easily,
I just edit the files."

Why Use a Child Theme?
A WordPress child theme is a theme that inherits the functionality of
another theme, called the parent theme, and allows you to modify, or
add to, the functionality of that parent theme. when the parent
Making a child theme is very simple. Create a directory by using FTP
or whatever file management application your host provides. Put a
properly formatted style.css file in it, and you have a child theme!
theme is updated, your
The child theme contains a "Template: parent-theme-dir" header to
distinguish it from standalone themes. With a little understanding of
HTML and CSS, you can make that very basic child theme modify
modifications are
the styling and layout of a parent theme to any extent without editing
the files of the parent theme itself. That way, when the parent theme
is updated, your modifications are preserved.
preserved.
You can make the child theme extend virtually every aspect of a
parent theme, and again, without actually changing the parent theme
files.
Creating a theme as a
child theme is a huge
head start.

Same Concept with WP Core
It's best practice to
avoid editing core files.
Because then you have forked core (which is
cool if that's what you meant to do. Some cool
projects are started this way.) and any future
updates to WordPress and your edits are
overwritten.

"Child themes and a
framework are the only way
you should build your
WordPress site"
- Matt Mullenweg

So, what exactly is a theme?
● Your theme is your site and brand
● There are many kinds/types of themes
● Not all equal
○ purpose
○ design
○ quality
○ documentation
○ price
○ support
○ features
○ license
○ security
○ SEO
○ ...

What files make a theme?
Themes are a
collection of files
located a folder in
your wordpress
themes directory on
your web server.

Anatomy of a theme
WordPress Themes live in subdirectories residing in wp-
content/themes/. The Theme's subdirectory holds all of the
Theme's stylesheet files, template files, and optional
functions file (functions.php), JavaScript files, and images.
For example, a Theme named "test" would reside in the
directory wp-content/themes/test/
WordPress Themes typically consist of three main types of
files, in addition to images and JavaScript files.
1. The stylesheet called style.css, which controls the
presentation (visual design and layout) of the
website pages.
2. WordPress template files which control the way the
site pages generate the information from your
WordPress database to be displayed on the site.
3. The optional functions file (functions.php) as part of
the WordPress Theme files.

Anatomy of a Child Theme
The simplest Theme possible is a child
theme which includes only a style.css file.
This is possible because it is a child of
another theme which acts as its parent.

What files make a child
theme?
A child theme automatically includes
or inherits all the parent theme
functionality. Styles are not
automatic, but can be pulled in easily.

style.css
In addition to CSS style information for your theme, style.css
provides details about the Theme in the form of comments. The
stylesheet must provide details about the Theme in the form of
comments. No two Themes are allowed to have the same
detailslisted in their comment headers, as this will lead to problems
in the Theme selection dialog. If you make your own Theme by
copying an existing one, make sure you change this information first.

Create a child theme
1. Make a new
folder in your
themes directory.
Name it whatever, (probably
reflecting the name of the
theme).

Create a child theme
2. Add a stylessheet
file, style.css

Create a child theme
3. Add theme details
(meta data) to
stylesheet in form of a
comment block.
Standard provided by
WordPress.

Create a child theme
4. Add styles and
customize.

Create a child theme
Optional:
● functions.php
● Template files
● additional images
● scripts
● etc

Override your Parent
A child theme can override parent
theme files, functionality or code
A template with the same name in a
child theme will be used rather than a
parent theme template.
A child theme functions.php file is
loaded before the parent theme.

Questions?
102

Reasons to child-theme
Add widget areas
Custom post types
Custom taxonomies
Responsive
Rebrand

Child Theme Support
All themes required
(?) to facilitate a child
theme!
This section is draft only.
● Themes are required to facilitate the use of Child Themes. A
"basic" Child Theme (i.e. a style.css with Template header tag
and @import() of the Template style.css), when activated,
should function exactly as the Theme itself functions.
● Themes are required to include functional and resource files
in a manner that facilitates the use of Child Themes:
○ Use get_template_directory_uri() to include functional
files, or resources that are not intended to be included
in/over-ridden the Child Theme.
○ Use get_stylesheet_directory_uri() to include
resources that are intended to be included in/over-
ridden by the Child Theme.

Some Popular Parent Themes
twenty somethings
thematic
genesis
hybrid
_s
...

Theme Template Hierarchy
Which template file(s) will WordPress use
when it displays a certain type of page?
The huge logic tree (diagram) that helps
WordPress decide which template to show for
every type of content. It shows the defaults
and fallbacks, notice how everything defaults
back to index as a fallback if that specific type
of content does not have a template.

pop quiz!

pop quiz!
http://example.com/category/uncategorized/

pop quiz!
http://example.com
/portfolio-post-type/my-first-photograph/

Hooks
Hooks are provided by WordPress to allow you to 'hook
into' the rest of WordPress. That is, your functions hook
into WordPress functions. Then when the WordPress
functions are called at any time, it sets your code in motion.

Hooks
actions filters
Actions are the hooks that the WordPress Filters are the hooks that WordPress
core launches at specific points during launches to modify text of various types
execution, or when specific events occur. Your before adding it to the database or sending
plugin can specify that one or more of its PHP it to the browser screen. Your plugin can
functions are executed at these points, using specify that one or more of its PHP
the Action API. functions is executed to modify specific
types of text at these times, using the Filter
API.

Hooks
You can sometimes accomplish the same goal with either an action or a
filter. For example, if you want your plugin to change the text of a post,
you might add an action function to publish_post (so the post is
modified as it is saved to the database), or a filter function to
the_content (so the post is modified as it is displayed in the browser
screen).
Confused? Check the analogy comparing hooks to the line at the DMV:
wpdaily.co/hooks-nutshell/

The Loop
Loops in programming do just that, they loop or repeat
themselves until a certain criteria is met.
The WP loop is great because it grabs all the content from
the database once and stores the results in memory, then
loops through the results and creates the page. It's much
faster than grabbing content over and over one at a time.

Loop Example Basic
In English: In Code:
1. Define what content to display
2. Begin loop $the_query = new WP_Query( $args );
3. Do stuff (print content found in the loop) if (have_posts()) :
4. End loop while (have_posts()) :
the_post();
the_content();
endwhile;
endif;

Loop Example More
In english
1. Define what content to display
2. Begin loop
3. Do stuff (print content found in the loop)
4. End loop

Loop - The Query
Before starting your loop you can set arguments in your
query to decide:
● Which items to display
● Which category/taxonomy to display
● How to sort the results
● Anything else from Template Tags

GenerateWP
GenerateWP provides user-friendly tools for developers to create advanced systems built on WordPress.
Writing your own code takes time, with plugins you never know if it stays in active development or not. GenerateWP reduce
development time and provides high quality code built using the latest WordPress standards.
Usage
● Choose your generator.
● Fill out the user-friendly form.
● Click the "Update Code" button.
● Copy the code to your theme/plugin.
Generators
1. wp-config.php Generator - Create custom code for wp-config.php file.
2. Taxonomy Generator - Create custom code for Taxonomies using register_taxonomy() function.
3. Post Type Generator - Create custom code for Post Types using register_post_type() function.
4. Post Status Generator - Create custom code for Post Status using register_post_status() function.
5. Sidebar Generator - Create custom code for Sidebars using register_sidebar() function.
6. Menu Generator - Create custom code for Navigation Menus using register_nav_menus() function.
7. Theme Support Generator - Create custom code for Theme Features using add_theme_support() function.
8. Shortcodes Generator - Create custom code for Shortcodes using add_shortcode() function.

“You cannot step twice into
the same river; for other
waters are ever flowing in”
@Heraclitus

Thank You!
Any Questions?
Slides @ http://circlecube.com/wordpress/
Evan Mullins
circlecube.com