What is a child theme? Why do I need one and how do I create one? We will also cover the bits knowledge you need to get started customizing your theme

1. Child Themes
AND WHAT ELSE YOU NEED TO KNOW TO START
EDITING YOUR THEME

2. @meSenior Full Stack WordPress Developer
Plugin author of Author Avatars List http://wordpress.org/plugins/author-avatars/,
Site Verification tool http://wordpress.org/plugins/wp-site-verification-tool/ and
Matador Jobs https://matadorjobs.com
Slides @ http://www.slideshare.net/pbearne

3. Why do you need this?

4. No
theme
will fit all
sites

5. You can’t apply an update to a theme
without losing your changes

6. Creating whole
themes is hard

7. Child themes
are easy

8. You can use framework themes
to save effort!

9. You can brand a theme for your client

10. How do you do this?

11. The code you need
/*
Theme Name: You Company Theme.
Theme URI: http://bearne.ca
Author: Paul Bearne
Template: twentyeleven
Author URI: http://bearne.ca/
Description: This is the special theme I created just for your company’s website.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-
width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-
header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post,
theme-options, translation-ready
*/
@import url('../twentyeleven/style.css');

12. How to install it
Save as style.css
In a new folder called "theme-name" ... for example: "
YourCompanyTheme"
Create a zip of the folder - newTheme.zip (this zip needs a subfolder with
the style.css in it )
Upload it.

13. Or FTP it
Upload it to the Themes folder in a new folder which follows to show the theme folder as:
YourCompanyTheme

15. Add a
thumbnail
Upload an image screenshot.png

17. Replacing
template files
Copy just the files from the parent
theme that you need to change to
your child folder and edit them.
WordPress looks in the child folder
first and loads the file if found.

18. functions.php
WordPress will load BOTH function.php files - child function.php then the parent function.php.
So you only need to add the extra/replacement functions.
Example: <?php
add_action( 'after_setup_theme', 'CompanyNameTheme_setup' );
if ( ! function_exists( 'CompanyNameTheme_setup' ) ):
/**
* Sets up theme defaults and registers support for various WordPress features.
*/
function CompanyNameTheme_setup() {
// The default header text color
define( 'HEADER_TEXTCOLOR', 'fff' );
// By leaving empty, we allow for random image rotation.
define( 'HEADER_IMAGE', '' );
}
endif; // CompanyNameTheme setup

19. Page Templates
Custom layout for pages
Good for Coming soon
Landing pages
Galleries etc.
<?php
/*
Template Name: Homepage
*/
?>

20. Getting the
code URL and
File locations
Parent theme :
get_template_directory()
get_template_directory_uri()
Child theme :
get_stylesheet_directory()
get_stylesheet_directory_uri()
<img src="<?php echo get_stylesheet_directory_uri()
?>/images/at.png" alt="" width="" height="" />
Plugin : plugins_url( '/js/my_query.js', __FILE__ )

21. Some more
advanced
concepts
Actions
and filters
Template
hierarchy
Custom
post
types
Escaping
and
validation

22. Template
Hierarchy
If your blog is at http://example.com/blog/ and a visitor clicks on a link
to a category page like http://example.com/blog/category/your-cat/
then WordPress looks for a template file in the current Theme's
directory that matches the category's ID.
If the category's ID is 4, WordPress looks for a template file
named category-4.php.
If it is missing, WordPress next looks for a generic category template
file, category.php.
If this file does not exist either, WordPress looks for a generic archive
template, archive.php.
If it is missing as well, WordPress falls back on the main Theme
template file, index.php.
http://codex.wordpress.org/Template_Hierarchy

23. Template Hierarchy
The order Wordpress load its template files
http://codex.wordpress.org/Template_Hierarchy

24. Filter : add
add_filter(‘fliter_name’, ‘function_to_run’);
Function function_to_run( $var ){
$var .= ‘hello Toronto’;
return $var;
}
http://codex.wordpress.org/Plugin_API#Filters

25. Action : add
add_action( ‘action_name’, ‘function_to_run’ );
Function function_to_run( $var = null ){
if( null === $var ){
echo ‘hello world’;
}else{
echo esc_html( $var );
}
}
http://codex.wordpress.org/Plugin_API#Actions

26. Filter : use
$text = apply_filters (‘fliter_name’, ‘hello world’);
http://codex.wordpress.org/Function_Reference/apply_filters

27. Action : use
do_action( ‘action_name’ );
http://codex.wordpress.org/Function_Reference/do_action

28. Escaping and validation
absint( $int )
wp_kses($string, $allowedhtml, $protocols);
esc_html( $text )
esc_attr( $text )
esc_js( $text )
esc_url( $url, (array) $protocols = null )
sanitize_email()
sanitize_file_name()
sanitize_html_class()
sanitize_key()
sanitize_mime_type()
sanitize_option()
sanitize_sql_orderby()
sanitize_text_field()
sanitize_title_for_query()
sanitize_title_with_dashes()
sanitize_user()
sanitize_meta()
sanitize_term()
sanitize_term_field()
http://codex.wordpress.org/Data_Validation
The golden rule: The last thing you do is escape, the first thing you do is validate!

29. Custom post types
The main logical data object in
WordPress
The standard types are : post, page,
media
http://codex.wordpress.org/Post_Types
add_action( 'init', 'create_post_type' );
function create_post_type() {
register_post_type(
'acme_product',
array( 'labels' => array(
'name' => __( 'Products' ),
'singular_name' => __( 'Product' )
),
'public' => true,
'has_archive' => true, )
);
}

30. Custom metadata
The data linked to a post object
Hide the metadata from admin by
starting the id with an “_”
Get the data for you theme with
get_post_meta( $id, $key, true )
https://developer.wordpress.org/reference/functions/get_post_meta/

31. wp_query
http://codex.wordpress.org/Class_Reference/WP_Query
// The Query
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
echo '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '<li>' . get_the_title() . '</li>';
}
echo '</ul>';
} else {
// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();

32. wp_query : args
$query = new WP_Query( 'post_type=page' );
$args = array(
'post_type' => array( 'post', 'page',
'movie', 'book' )
);
$query = new WP_Query( $args );
http://codex.wordpress.org/Class_Reference/WP_Query
$args = array(
'post_type' => 'post',
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'movie_genre',
'field' => 'slug',
'terms' => array( 'action', 'comedy' ),
),
array(
'taxonomy' => 'actor',
'field' => 'id',
'terms' => array( 103, 115, 206 ),
'operator' => 'NOT IN',
),
),
);
$query = new WP_Query( $args );

33. Questions?
@pbearne
Paul@Bearne.ca
https://Bearne.ca