Your firstborn child themeChild themes 101+2

WordCamp Atlanta 15 March 2013Evan 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?

2006 started in Web Design2007 started using WordPress for blogging2008 started theming

currently:Interactive Director at Brand Fever, a Creative Marketing Agency down the street. http://brandfeverinc.com

Evan Mullinscirclecube.com

Firstborn Child theme

101ThemesChild themesWhyHow

102Deeper into WPHelpersBest Practices

101

What is a WordPress theme?

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

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?

What is a WordPress theme?

All the files that determine the visual or front-end of the site. A theme is what the site looks like and potentially some features of the site by incorporating things like custom post types, custom fields, etc.

What's the point?

Themes separate a site's presentation from the system files.

Like a CMS separates the actual content.

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 themesCustomFreePremiumCustomizedStarterFrameworkParentChild

Free

Premium

Starter

FrameworkA "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?Cleverly named because, like real life parent - child relationships, they inherit characteristics of the parent ...

The analogy stops there. In WordPress child themes inherit from the parent, but they don't drive the parent theme crazy.

In fact the parent theme is not affected in the least by the child theme. (and that's kinda the point)

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

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.

when the parent theme is updated, your modifications are preserved.

Same Concept with WP CoreIt'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 themeWordPress 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 ThemeThe 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.cssIn 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 theme1. Make a new folder in your themes directory.

Name it whatever, (probably reflecting the name of the theme).

Create a child theme2. Add a stylessheet file, style.css

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

Create a child theme4. Add styles and customize.

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

Override your ParentA 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-themeAdd widget areas

Custom post types

Custom taxonomies

Responsive

Rebrand

Child Theme SupportAll 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 Themestwenty somethingsthematicgenesishybrid_s...

Theme Template HierarchyWhich 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.

http://codex.wordpress.org/Template_Hierarchy

pop quiz!

pop quiz!

http://example.com/category/uncategorized/

pop quiz!

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

HooksHooks 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

actionsActions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. Your plugin can specify that one or more of its PHP functions are executed at these points, using the Action API.

filtersFilters are the hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen. Your plugin can specify that one or more of its PHP functions is executed to modify specific types of text at these times, using the Filter API.

HooksYou 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 LoopLoops 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 BasicIn English:

1. Define what content to display2. Begin loop3. Do stuff (print content found in the loop)4. End loop

In Code:

$the_query = new WP_Query( $args );if (have_posts()) : while (have_posts()) : the_post(); the_content(); endwhile;endif;

Loop Example MoreIn english

1. Define what content to display2. Begin loop3. Do stuff (print content found in the loop)4. End loop

Loop - The QueryBefore 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

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

Generators1. 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 Mullinscirclecube.com