WordPress child themes vs. custom themes | Melissa Jean Clark

Workshop Outline:

What is a child theme?
Custom WordPress Themes vs. Child Themes
Decisions: Custom vs. Child
Differences between custom themes and child themes
Set up a fresh installation of WordPress
Setting up a child theme
Reviewing Parent Themes
WordPress Best Practices: Code Tips
Resources (links & further reading)

What is a child theme?

A child theme is a theme that inherits functionality from another theme. The original theme is called the “parent theme”.
The child theme inherits all functionality and styling from the parent theme.
Any changes you make in the child theme are loaded first.
Whenever you work with an existing theme (ie. not a custom one built by you), you should set up a child theme.
Why set up a child theme anyway?
- If you do not use a child theme, and your client updates the parent theme, all of your customizations will be lost.
- Using a child theme means your client can safely update their parent theme and keep your customizations.
Examples of websites I created using a child theme:
1. Vesna Asanovic Illustration – uses the Ubud theme
2. Golf Performance Coaches – uses the OriginMag theme

Custom WordPress Themes vs. Child Themes

There are use cases for both custom themes, and child themes.
If you ever want to customize an existing WordPress theme, you should use a child theme.
Let’s talk about when it makes sense to use a child theme, and when it makes sense to use a custom theme.

Decisions: Custom vs. Child

Questions to ask yourself and your team when deciding between developing a custom or child theme. Most important: determine what is the best fit for the client / project you’re evaluating.

What is the budget for the project?
What is the timeline for the project?
What are the client / project’s goals?
What features does the client / project need?

What’s different between Child & Custom Themes

Bridge WordPress theme – it has so many files, I couldn’t fit them in one screenshot.

Commercial WordPress themes are built to be used by thousands of people
- They’re packed with features, and the code can be confusing
- They may include WordPress frameworks like Redux
If your client is using a commercial WordPress theme, consider their long-term goals.
- Will they want to switch themes in the near future?
  - If so, be wary of using Advanced Custom Fields.
  - Advanced Custom Fields is a great plugin. When you use it, your client’s content becomes tied to those fields and the code you wrote. They cannot easily change themes.
  - This is fine for custom projects. But if your client doesn’t have the budget for a custom theme, be very careful with Advanced Custom Fields.
- Overall, it’s best to use plugins for functionality in these situations. You are building a website for a client and it’s important to build them something that makes sense for them.

Set up a local installation of WordPress

If you’re at this workshop, you’re already comfortable setting up WordPress in your local development environment.
Let’s set up a new installation of WordPress to work with today.
Grab the most recent copy of WordPress from wordpress.org
Resources if you need help with this step:

How to create a child theme (using twentyfifteen)

Review the WordPress codex article on Child Themes
Create a new folder in wp-content/themes
Name the folder “twentyfifteen-child”
- This new folder is where all customizations will live
- Where it says “theme”, you always put the name of the parent theme’s folder

Create a CSS file in the child theme’s folder (99% of the time this will be called style.css)

Structure the style.css opening comment like this:
Note line 7 and 12: all references to the parent theme must be written as it is in the parent theme

For example, if you spelled “twentyfifteen” as “twenty-fifteen”, it will not work.

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twentyfifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteen-child
*/

Create your functions.php file in the child theme’s folder
- All functions from the parent theme’s functions.php file will be loaded automatically
- In the child theme’s functions.php file you need to enqueue the parent theme’s style.css file like this:
```
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>
```
- Copy the “screenshot.png” file over to your child theme.
- This displays an image in the Appearances > Themes panel of WordPress
- Activate the child theme in the WordPress admin!
- Now you have a child theme up and running.
- For further customizations, make sure to use the same file structure as the parent theme.
  - To make changes to “page.php”, create a file called “page.php” in the child theme.
  - This file will now be loaded instead of the parent theme’s “page.php” file.

Reviewing Parent Themes

Before you select a theme it’s important to review it. Not all themes are built the same!
Recently, clients have come to me interested in using the Flip theme and the Oleander theme. Let’s look at that those themes and evaluate them.
Check out the theme provider’s website, and inspect the theme using developer tools.
If a client asks you to quote on a child theme project – ask them to purchase the theme.
It’s important to review the code and see how it is built.
The code quality will affect how easy it is to customize – which ultimately affects budget.

How to evaluate a commercial theme

Browser compatibility
External plugin compatibility such as:
- WPML – popular multilingual plugin
- WooCommerce
- Contact Form 7
When it was last updated
What version of WordPress is it compatible with?
What are the comments like?
What does the author provide for support?
Is it responsive?
Does it come with documentation?
Does it seem user-friendly for the client?
How is it built?
- Does it use shortcodes for layout?
- Are any plugins required for it to work?

WordPress Best Practices: Code Tips

Build themes that are translatable and escape all strings and/or output into the database:

<a href="<?php echo esc_url('https://melissajclark.ca'); ?>"><?php esc_html_e("Melissa's website", "melissajclark"); ?></a>

Resources

Recommended Theme Companies

Testing Your Theme

Use WordPress Theme Check – tests for code issues against the Codex
Try the Child Theme Check plugin
Use WP Test – giant import of various content – ensure your theme will work even with odd content (like super long titles)
Use Wave – accessibility testing

Melissa Jean Clark

Best practices for WordPress child themes