(theme)
It's tempting to directly edit a theme's code...
If both you and the author are making changes to a theme, whose code gets to stay?
...but, as Admiral Ackbar said:
Themes are fundamental to a WordPress site.
But they usually require some customization.
v1.0
v1.1
AUTHOR
First
release
Update
YOU
v1.1a
Change
v1.1b
Change
v1.2
Update
You install the theme on your server
#1 - Update the theme
#2 - Manually merge
#3 - Do nothing
"A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme."
- WP Codex http://codex.wordpress.org/Child_Themes
Modify style of a theme
Modify functions of a theme
New things the parent theme never did
A WordPress host that allows you to install custom themes
(WordPress.com accounts don't let you build custom themes)
SSH or FTP access to your server (SSH preferred)
The ability to create folders and set permissions
/wordpress
/wp-content
/themes
/twentytwelve
/twentytwelve-child
# Navigate to your site's THEMES folder
cd /var/www/wptest/wp-content/themes/
# Create the child theme folder
# Be sure to name it the same as the parent theme and add "-child"
sudo mkdir twentytwelve-child
# Set the permissions on the folder so that the web service can access it
sudo chown -R www-data:www-data twentytwelve-child/
/*
Theme Name: Twenty Twelve Child
Description: Twenty Twelve Child Theme
Author: Gaelan Lloyd
Author URI: http://www.gaelanlloyd.com
Template: twentytwelve
Version: 1.0.0
*/
Contents of the style.css file
The template name must exactly match the parent theme's folder name.
<?php
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>
Contents of the functions.php file
TWENTY TWELVE
TWENTY TWELVE CHILD
"A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme."
- WP Codex http://codex.wordpress.org/Child_Themes
/*
Theme Name: Twenty Twelve Child
Description: Twenty Twelve Child Theme
Author: Gaelan Lloyd
Author URI: http://www.gaelanlloyd.com
Template: twentytwelve
Version: 1.0.0
*/
# Center the page banner text
h1.site-title,
h2.site-description { text-align: center; }
# Make the article links red and bold
h1.entry-title a { font-weight: bold; color: #FF3030; }
Contents of the style.css file
TWENTY TWELVE CHILD (with changes now!)
If you want to make a change to one of the page templates from the parent theme:
Say we want to remove the comment area on all pages...
# Copy the parent theme's PAGE.PHP to the child theme folder
# Assumes that you're still in the child theme folder
sudo cp ../twentytwelve/page.php .
# Remember to set permissions!
sudo chown www-data:www-data page.php
# Edit the page template and make your changes
sudo vi page.php
/wp-content
/themes
/twentytwelve
404.php
archive.php
author.php
category.php
page.php
/wp-content
/themes
/twentytwelve-child
functions.php
style.css
page.php
shown on next slide...
We will change the code into a comment, which keeps it there for us to see but tells WordPress to ignore it.
<?php
/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php
/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php /* comments_template( '', true ); */ ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
And now the comment section is gone!
If a developer updates the parent theme, you'll be able to get their updates and keep your customizations.
STORY TIME
Once upon a time, we updated a parent theme. The developer changed the naming convention of some DIVs, and so our child theme modifications broke.
But since we used a child theme and had our changes isolated from the developer's code, it was relatively easy to track down the problem, find the developer's change, and make a fix.
Customizations in your child theme may break after a parent theme update.
Use a DEV environment to test the theme update.
Framework themes provide a great foundation for custom website designs.
../wp-content/themes/bootstrap/
images/
languages/
library/
404.php page-full-width.php
archive.php page-homepage.php
attachment.php page-left-sidebar.php
author.php page.php
comments.php README.md
editor-style.css screenshot.png
favicon.ico searchform.php
footer.php search.php
functions.php sidebar.php
header.php sidebar-sidebar2.php
image.php single.php
index.php style.css
Folder contents of the Bootstrap theme
../wp-content/themes/bootstrap-child/
functions/
functions-priority/
shortcodes/
404.php page-full-width.php
style.css page-hero.php
custom-login-logo.png page-homepage.php
footer.php page-no-sidebar.php
functions-javascript.js page.php
functions.php
header-full-width.php sidebar-blog.php
header.php sidebar-newsletter.php
sidebar.php
archive-newsletter.php
archive-people.php single-asset.php
archive.php single-career.php
archive-press-releases.php single-event.php
single-newsletter.php
category-blog.php single-people.php
single.php
menu-footer-en.php single-post.php
menu-main-en.php single-press-releases.php
menu-top-en.php single-webinars.php
../wp-content/themes/bootstrap-child/
functions/
functions-priority/
shortcodes/
404.php page-full-width.php
style.css page-hero.php
custom-login-logo.png page-homepage.php
footer.php page-no-sidebar.php
functions-javascript.js page.php
functions.php
header-full-width.php sidebar-blog.php
header.php sidebar-newsletter.php
sidebar.php
archive-newsletter.php
archive-people.php single-asset.php
archive.php single-career.php
archive-press-releases.php single-event.php
single-newsletter.php
category-blog.php single-people.php
single.php
menu-footer-en.php single-post.php
menu-main-en.php single-press-releases.php
menu-top-en.php single-webinars.php
../wp-content/themes/bootstrap-child/
functions/
functions-priority/
shortcodes/
404.php page-full-width.php
style.css page-hero.php
custom-login-logo.png page-homepage.php
footer.php page-no-sidebar.php
functions-javascript.js page.php
functions.php
header-full-width.php sidebar-blog.php
header.php sidebar-newsletter.php
sidebar.php
archive-newsletter.php
archive-people.php single-asset.php
archive.php single-career.php
archive-press-releases.php single-event.php
single-newsletter.php
category-blog.php single-people.php
single.php
menu-footer-en.php single-post.php
menu-main-en.php single-press-releases.php
menu-top-en.php single-webinars.php
../wp-content/themes/bootstrap-child/
functions/
functions-priority/
shortcodes/
404.php page-full-width.php
style.css page-hero.php
custom-login-logo.png page-homepage.php
footer.php page-no-sidebar.php
functions-javascript.js page.php
functions.php
header-full-width.php sidebar-blog.php
header.php sidebar-newsletter.php
sidebar.php
archive-newsletter.php
archive-people.php single-asset.php
archive.php single-career.php
archive-press-releases.php single-event.php
single-newsletter.php
category-blog.php single-people.php
single.php
menu-footer-en.php single-post.php
menu-main-en.php single-press-releases.php
menu-top-en.php single-webinars.php
../wp-content/themes/bootstrap-child/
functions/
functions-priority/
shortcodes/
404.php page-full-width.php
style.css page-hero.php
custom-login-logo.png page-homepage.php
footer.php page-no-sidebar.php
functions-javascript.js page.php
functions.php
header-full-width.php sidebar-blog.php
header.php sidebar-newsletter.php
sidebar.php
archive-newsletter.php
archive-people.php single-asset.php
archive.php single-career.php
archive-press-releases.php single-event.php
single-newsletter.php
category-blog.php single-people.php
single.php
menu-footer-en.php single-post.php
menu-main-en.php single-press-releases.php
menu-top-en.php single-webinars.php
Even more complex customizations, like:
Tailor-made to your specific site's need: