SlideShare a Scribd company logo
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

More Related Content

What's hot

What are child themes, and why use them
What are child themes, and why use themWhat are child themes, and why use them
What are child themes, and why use them
Utsav Singh Rathour
 
What is WordPress and Why Is Everyone Talking About it
What is WordPress and Why Is Everyone Talking About itWhat is WordPress and Why Is Everyone Talking About it
What is WordPress and Why Is Everyone Talking About it
BobWP.com
 
What Is WordPress and Why Is Everyone Talking About It?
What Is WordPress and Why Is Everyone Talking About It?What Is WordPress and Why Is Everyone Talking About It?
What Is WordPress and Why Is Everyone Talking About It?
BobWP.com
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
Domestic Equity Studio
 
WordPress Themes - Finding and Choosing what is Best for you.
WordPress Themes - Finding and Choosing what is Best for you.WordPress Themes - Finding and Choosing what is Best for you.
WordPress Themes - Finding and Choosing what is Best for you.
AndyStaple
 
How WordPress Themes Changed the World - 2011
How WordPress Themes Changed the World - 2011How WordPress Themes Changed the World - 2011
How WordPress Themes Changed the World - 2011
Michael Kimb Jones
 
Converting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeConverting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 Theme
Adolfo Nasol
 
Web1
Web1Web1
GoDaddy Guide to cPanel and WordPress
GoDaddy Guide to cPanel and WordPressGoDaddy Guide to cPanel and WordPress
GoDaddy Guide to cPanel and WordPress
GoDaddy
 
How To Find the Right Design Theme For Your Website
 How To Find the Right Design Theme For Your Website How To Find the Right Design Theme For Your Website
How To Find the Right Design Theme For Your Website
Chelsea O'Brien
 
Drupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-ThemeDrupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-Theme
Mediacurrent
 
7 Theming in Drupal
7 Theming in Drupal7 Theming in Drupal
7 Theming in Drupal
Wingston
 
PSD to a Drupal Theme (using a base theme)
PSD to a Drupal Theme (using a base theme)PSD to a Drupal Theme (using a base theme)
PSD to a Drupal Theme (using a base theme)
kuydigital
 
Alternative discovery and_seo_fee-stephan_spencer
Alternative discovery and_seo_fee-stephan_spencerAlternative discovery and_seo_fee-stephan_spencer
Alternative discovery and_seo_fee-stephan_spencer
zachbrowne
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
Mediacurrent
 
SEO Mistakes
SEO MistakesSEO Mistakes
SEO Mistakes
guest388802
 
Design to Theme @ CMSExpo
Design to Theme @ CMSExpoDesign to Theme @ CMSExpo
Design to Theme @ CMSExpo
Emma Jane Hogbin Westby
 
Theming Drupal 6 - An Introduction to the Basics
Theming Drupal 6 - An Introduction to the BasicsTheming Drupal 6 - An Introduction to the Basics
Theming Drupal 6 - An Introduction to the Basics
Erik Baldwin
 
How to Choose a WordPress Theme
How to Choose a WordPress ThemeHow to Choose a WordPress Theme
How to Choose a WordPress Theme
New Tricks
 
MCC Web Design Workshop
MCC Web Design WorkshopMCC Web Design Workshop
MCC Web Design Workshop
Faye Tandog
 

What's hot (20)

What are child themes, and why use them
What are child themes, and why use themWhat are child themes, and why use them
What are child themes, and why use them
 
What is WordPress and Why Is Everyone Talking About it
What is WordPress and Why Is Everyone Talking About itWhat is WordPress and Why Is Everyone Talking About it
What is WordPress and Why Is Everyone Talking About it
 
What Is WordPress and Why Is Everyone Talking About It?
What Is WordPress and Why Is Everyone Talking About It?What Is WordPress and Why Is Everyone Talking About It?
What Is WordPress and Why Is Everyone Talking About It?
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
 
WordPress Themes - Finding and Choosing what is Best for you.
WordPress Themes - Finding and Choosing what is Best for you.WordPress Themes - Finding and Choosing what is Best for you.
WordPress Themes - Finding and Choosing what is Best for you.
 
How WordPress Themes Changed the World - 2011
How WordPress Themes Changed the World - 2011How WordPress Themes Changed the World - 2011
How WordPress Themes Changed the World - 2011
 
Converting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeConverting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 Theme
 
Web1
Web1Web1
Web1
 
GoDaddy Guide to cPanel and WordPress
GoDaddy Guide to cPanel and WordPressGoDaddy Guide to cPanel and WordPress
GoDaddy Guide to cPanel and WordPress
 
How To Find the Right Design Theme For Your Website
 How To Find the Right Design Theme For Your Website How To Find the Right Design Theme For Your Website
How To Find the Right Design Theme For Your Website
 
Drupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-ThemeDrupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-Theme
 
7 Theming in Drupal
7 Theming in Drupal7 Theming in Drupal
7 Theming in Drupal
 
PSD to a Drupal Theme (using a base theme)
PSD to a Drupal Theme (using a base theme)PSD to a Drupal Theme (using a base theme)
PSD to a Drupal Theme (using a base theme)
 
Alternative discovery and_seo_fee-stephan_spencer
Alternative discovery and_seo_fee-stephan_spencerAlternative discovery and_seo_fee-stephan_spencer
Alternative discovery and_seo_fee-stephan_spencer
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
 
SEO Mistakes
SEO MistakesSEO Mistakes
SEO Mistakes
 
Design to Theme @ CMSExpo
Design to Theme @ CMSExpoDesign to Theme @ CMSExpo
Design to Theme @ CMSExpo
 
Theming Drupal 6 - An Introduction to the Basics
Theming Drupal 6 - An Introduction to the BasicsTheming Drupal 6 - An Introduction to the Basics
Theming Drupal 6 - An Introduction to the Basics
 
How to Choose a WordPress Theme
How to Choose a WordPress ThemeHow to Choose a WordPress Theme
How to Choose a WordPress Theme
 
MCC Web Design Workshop
MCC Web Design WorkshopMCC Web Design Workshop
MCC Web Design Workshop
 

Viewers also liked

WordPress Security from WordCamp NYC 2012
WordPress Security from WordCamp NYC 2012WordPress Security from WordCamp NYC 2012
WordPress Security from WordCamp NYC 2012
Brad Williams
 
WordPress for Nonprofits Using CiviCRM
WordPress for Nonprofits Using CiviCRMWordPress for Nonprofits Using CiviCRM
WordPress for Nonprofits Using CiviCRM
Tadpole Collective
 
Supporting Wordpress
Supporting WordpressSupporting Wordpress
Supporting Wordpress
masonjames
 
Customizing the custom loop wordcamp 2012-jeff
Customizing the custom loop   wordcamp 2012-jeffCustomizing the custom loop   wordcamp 2012-jeff
Customizing the custom loop wordcamp 2012-jeff
Alexander Sapountzis
 
Developing digital marketing into your WordPress
Developing digital marketing into your WordPressDeveloping digital marketing into your WordPress
Developing digital marketing into your WordPress
Austin Gunter
 
Killer Docs for Killer Devs
Killer Docs for Killer DevsKiller Docs for Killer Devs
Killer Docs for Killer Devs
spmckeown
 
Google loves WordPress - Blogging For SEO WordCamp NYC 2012
Google loves WordPress - Blogging For SEO WordCamp NYC 2012Google loves WordPress - Blogging For SEO WordCamp NYC 2012
Google loves WordPress - Blogging For SEO WordCamp NYC 2012
Organical - The SEO Experts
 

Viewers also liked (7)

WordPress Security from WordCamp NYC 2012
WordPress Security from WordCamp NYC 2012WordPress Security from WordCamp NYC 2012
WordPress Security from WordCamp NYC 2012
 
WordPress for Nonprofits Using CiviCRM
WordPress for Nonprofits Using CiviCRMWordPress for Nonprofits Using CiviCRM
WordPress for Nonprofits Using CiviCRM
 
Supporting Wordpress
Supporting WordpressSupporting Wordpress
Supporting Wordpress
 
Customizing the custom loop wordcamp 2012-jeff
Customizing the custom loop   wordcamp 2012-jeffCustomizing the custom loop   wordcamp 2012-jeff
Customizing the custom loop wordcamp 2012-jeff
 
Developing digital marketing into your WordPress
Developing digital marketing into your WordPressDeveloping digital marketing into your WordPress
Developing digital marketing into your WordPress
 
Killer Docs for Killer Devs
Killer Docs for Killer DevsKiller Docs for Killer Devs
Killer Docs for Killer Devs
 
Google loves WordPress - Blogging For SEO WordCamp NYC 2012
Google loves WordPress - Blogging For SEO WordCamp NYC 2012Google loves WordPress - Blogging For SEO WordCamp NYC 2012
Google loves WordPress - Blogging For SEO WordCamp NYC 2012
 

Similar to Firstborn child theme word camp presentation - atlanta 2013

Rockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child ThemesRockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child Themes
Andrew Wikel
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
rfair404
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themes
Chris Olbekson
 
Child themes
Child themesChild themes
Child themes
bobwlsn
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
DaisyOlsen
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
DaisyOlsen
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
DaisyOlsen
 
The Why, When, How of WordPress Child Themes
The Why, When, How of WordPress Child ThemesThe Why, When, How of WordPress Child Themes
The Why, When, How of WordPress Child Themes
Anthony Hortin
 
Why you should be using WordPress child themes
Why you should be using WordPress child themesWhy you should be using WordPress child themes
Why you should be using WordPress child themes
Anthony Hortin
 
Intro to WordPress Child Themes
Intro to WordPress Child ThemesIntro to WordPress Child Themes
Intro to WordPress Child Themes
vegasgeek
 
Child Themes in WordPress
Child Themes in WordPressChild Themes in WordPress
Child Themes in WordPress
Jeff Cohan
 
advance theme development
advance theme developmentadvance theme development
advance theme development
1amitgupta
 
Child Theming: An Introduction to Wordpress Theme Development with Wordpres...
Child Theming: An Introduction to  Wordpress Theme Development  with Wordpres...Child Theming: An Introduction to  Wordpress Theme Development  with Wordpres...
Child Theming: An Introduction to Wordpress Theme Development with Wordpres...
Aban Nesta
 
Child Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notesChild Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notes
Damien Carbery
 
HTML/CSS for WordPress
HTML/CSS for WordPressHTML/CSS for WordPress
HTML/CSS for WordPress
Kanchha kaji Prajapati
 
April 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child ThemesApril 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child Themes
Eric Sembrat
 
Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012
Joe Querin
 
Intro to child themes
Intro to child themesIntro to child themes
Intro to child themes
vegasgeek
 
WordPress Theme Workshop: Part 1
WordPress Theme Workshop: Part 1WordPress Theme Workshop: Part 1
WordPress Theme Workshop: Part 1
David Bisset
 
W pthemes
W pthemesW pthemes
W pthemes
Becky Davis
 

Similar to Firstborn child theme word camp presentation - atlanta 2013 (20)

Rockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child ThemesRockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child Themes
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themes
 
Child themes
Child themesChild themes
Child themes
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
 
The Why, When, How of WordPress Child Themes
The Why, When, How of WordPress Child ThemesThe Why, When, How of WordPress Child Themes
The Why, When, How of WordPress Child Themes
 
Why you should be using WordPress child themes
Why you should be using WordPress child themesWhy you should be using WordPress child themes
Why you should be using WordPress child themes
 
Intro to WordPress Child Themes
Intro to WordPress Child ThemesIntro to WordPress Child Themes
Intro to WordPress Child Themes
 
Child Themes in WordPress
Child Themes in WordPressChild Themes in WordPress
Child Themes in WordPress
 
advance theme development
advance theme developmentadvance theme development
advance theme development
 
Child Theming: An Introduction to Wordpress Theme Development with Wordpres...
Child Theming: An Introduction to  Wordpress Theme Development  with Wordpres...Child Theming: An Introduction to  Wordpress Theme Development  with Wordpres...
Child Theming: An Introduction to Wordpress Theme Development with Wordpres...
 
Child Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notesChild Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notes
 
HTML/CSS for WordPress
HTML/CSS for WordPressHTML/CSS for WordPress
HTML/CSS for WordPress
 
April 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child ThemesApril 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child Themes
 
Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012
 
Intro to child themes
Intro to child themesIntro to child themes
Intro to child themes
 
WordPress Theme Workshop: Part 1
WordPress Theme Workshop: Part 1WordPress Theme Workshop: Part 1
WordPress Theme Workshop: Part 1
 
W pthemes
W pthemesW pthemes
W pthemes
 

More from Evan Mullins

Blockity McBlock Blocks, Oh My!
Blockity McBlock Blocks, Oh My!Blockity McBlock Blocks, Oh My!
Blockity McBlock Blocks, Oh My!
Evan Mullins
 
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
WordCamp Atlanta -  April 15 2018 - dev team workflow and processes with word...WordCamp Atlanta -  April 15 2018 - dev team workflow and processes with word...
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
Evan Mullins
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
Evan Mullins
 
Meetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergMeetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - Gutenberg
Evan Mullins
 
WordCamp Wilmington 2017 WP-API Why?
WordCamp Wilmington 2017   WP-API Why?WordCamp Wilmington 2017   WP-API Why?
WordCamp Wilmington 2017 WP-API Why?
Evan Mullins
 
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
Evan Mullins
 
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017 So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
Evan Mullins
 
WordCamp Birmingham 2016 - WP API, What is it good for? Absolutely Everything!
WordCamp Birmingham 2016 - WP API, What is it good for? Absolutely Everything!WordCamp Birmingham 2016 - WP API, What is it good for? Absolutely Everything!
WordCamp Birmingham 2016 - WP API, What is it good for? Absolutely Everything!
Evan Mullins
 
WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!
WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!
WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!
Evan Mullins
 
Modifying your themes design - Learning CSS - Atlanta WordPress users group
Modifying your themes design - Learning CSS - Atlanta WordPress users groupModifying your themes design - Learning CSS - Atlanta WordPress users group
Modifying your themes design - Learning CSS - Atlanta WordPress users group
Evan Mullins
 
Custom post types- Choose Your Own Adventure - WordCamp Atlanta 2014 - Evan M...
Custom post types- Choose Your Own Adventure - WordCamp Atlanta 2014 - Evan M...Custom post types- Choose Your Own Adventure - WordCamp Atlanta 2014 - Evan M...
Custom post types- Choose Your Own Adventure - WordCamp Atlanta 2014 - Evan M...
Evan Mullins
 
From PSD to WP Theme
From PSD to WP ThemeFrom PSD to WP Theme
From PSD to WP Theme
Evan Mullins
 

More from Evan Mullins (12)

Blockity McBlock Blocks, Oh My!
Blockity McBlock Blocks, Oh My!Blockity McBlock Blocks, Oh My!
Blockity McBlock Blocks, Oh My!
 
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
WordCamp Atlanta -  April 15 2018 - dev team workflow and processes with word...WordCamp Atlanta -  April 15 2018 - dev team workflow and processes with word...
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 
Meetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergMeetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - Gutenberg
 
WordCamp Wilmington 2017 WP-API Why?
WordCamp Wilmington 2017   WP-API Why?WordCamp Wilmington 2017   WP-API Why?
WordCamp Wilmington 2017 WP-API Why?
 
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
 
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017 So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
 
WordCamp Birmingham 2016 - WP API, What is it good for? Absolutely Everything!
WordCamp Birmingham 2016 - WP API, What is it good for? Absolutely Everything!WordCamp Birmingham 2016 - WP API, What is it good for? Absolutely Everything!
WordCamp Birmingham 2016 - WP API, What is it good for? Absolutely Everything!
 
WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!
WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!
WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!
 
Modifying your themes design - Learning CSS - Atlanta WordPress users group
Modifying your themes design - Learning CSS - Atlanta WordPress users groupModifying your themes design - Learning CSS - Atlanta WordPress users group
Modifying your themes design - Learning CSS - Atlanta WordPress users group
 
Custom post types- Choose Your Own Adventure - WordCamp Atlanta 2014 - Evan M...
Custom post types- Choose Your Own Adventure - WordCamp Atlanta 2014 - Evan M...Custom post types- Choose Your Own Adventure - WordCamp Atlanta 2014 - Evan M...
Custom post types- Choose Your Own Adventure - WordCamp Atlanta 2014 - Evan M...
 
From PSD to WP Theme
From PSD to WP ThemeFrom PSD to WP Theme
From PSD to WP Theme
 

Firstborn child theme word camp presentation - atlanta 2013

  • 1. 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.
  • 2. 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
  • 3. Firstborn Child theme 101 102 Themes Deeper into WP Child themes Helpers Why Best Practices How
  • 4. 101 What is a WordPress theme?
  • 5. Your Theme is your Brand Your theme is your design, identity & brand.
  • 6. 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
  • 7. 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
  • 8. 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/
  • 9. 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
  • 10. 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.
  • 11. 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)
  • 14. Free
  • 17. 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.
  • 19. 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)
  • 20. 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.
  • 21. If it's confusing, just think 'sub-theme'. It inherits all parts of the parent theme and lets you customize it.
  • 22. Not sold yet? I can hear it now: "I already customize theme easily, I just edit the files."
  • 23. 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.
  • 24. 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.
  • 25. "Child themes and a framework are the only way you should build your WordPress site" - Matt Mullenweg
  • 26. 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 ○ ...
  • 27. What files make a theme? Themes are a collection of files located a folder in your wordpress themes directory on your web server.
  • 28. 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.
  • 29. 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.
  • 30. 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.
  • 31. 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.
  • 32. Create a child theme 1. Make a new folder in your themes directory. Name it whatever, (probably reflecting the name of the theme).
  • 33. Create a child theme 2. Add a stylessheet file, style.css
  • 34. Create a child theme 3. Add theme details (meta data) to stylesheet in form of a comment block. Standard provided by WordPress.
  • 35. Create a child theme 4. Add styles and customize.
  • 36. Create a child theme Optional: ● functions.php ● Template files ● additional images ● scripts ● etc
  • 37. 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.
  • 39. Reasons to child-theme Add widget areas Custom post types Custom taxonomies Responsive Rebrand
  • 40. 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.
  • 41. Some Popular Parent Themes twenty somethings thematic genesis hybrid _s ...
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48. 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.
  • 49.
  • 53. 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.
  • 54. 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.
  • 55. 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/
  • 56. 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.
  • 57. 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;
  • 58. 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
  • 59. 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
  • 60. 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.
  • 61. “You cannot step twice into the same river; for other waters are ever flowing in” @Heraclitus
  • 62. Thank You! Any Questions? Slides @ http://circlecube.com/wordpress/ Evan Mullins circlecube.com