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:
- Vesna Asanovic Illustration – uses the Ubud theme
- 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
- 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.
- Will they want to switch themes in the near future?
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
- https://thethemefoundry.com/wordpress-themes/
- http://www.elmastudio.de/
- http://www.woothemes.com/product-category/themes/
- http://www.cssigniter.com/ignite/themes/
- https://graphpaperpress.com/themes/
- http://www.wpzoom.com/themes/
- http://bizzthemes.com/themes/
- http://designorbital.com/wordpress-themes/
- https://fimply.de/themes/
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
Further Reading
- Child Themes – WordPress Codex
- Escaping Output – WordPress Codex
- Writing Secure Code – WordPress Codex
- Child Themes Basics and Creating Child Themes in WordPress – Tuts+
- How to Modify the Parent Theme Behavior Within the Child Theme – Tuts+
- Functionality: Plugins vs. Themes – Tuts+
- WordPress Functionality Plugins – CSS Tricks
- If you use the Divi theme with WordPress, it better be forever – Chris Lema
- My WordPress Starter Package (how I develop projects)
- Five things we learned from getting our theme reviewed – Make Theme by Theme Foundry