How to Choose the Right Theme & Customize It the Right Way (By Using a Child Theme)

HOW TO CHOOSE THE RIGHT THEME 
& CUSTOMIZE IT THE RIGHT WAY 
(BY USING A CHILD THEME)
GEOFF MYERS PRESENTS

BEFORE WE BEGIN…
ABOUT GEOFF MYERS
▸ Founded SimDex LLC in 2004 in Saint Paul, MN
▸ Web Solutions for Small + Medium Sized Businesses
▸ Consulting, Design, Development, Marketing, Maintenance, Hosting
▸ Specialty is Custom Web Applications and Integrations (WordPress,
PHP, JavaScript, 3rd Party APIs, etc.)
▸ 10+ Years WordPress Experience
▸ 75+ WordPress Sites Designed, Developed, Marketed, Maintained
▸ Bachelor's in Computer Science
▸ Get In Touch: geoff@simdex.org | simdex.org | 414.455.6675

HOW TO CHOOSE 
THE RIGHT THEME
PART 1 OF 2:
Experience Level: Beginner–Intermediate

HOW TO CHOOSE THE RIGHT THEME
WHAT SHOULD I CONSIDER WHEN RESEARCHING A THEME?
1. Features + Functionality
2. User Interface + Experience (UI/UX)
3. Customization + Flexibility
4. Responsive Design + Mobile Friendliness
5. Search Engine Optimization (SEO)
6. Performance + Speed
7. Security + Stability
8. Developer + Community Support

1. FEATURES + FUNCTIONALITY
▸ Included Page Templates + Post Formats
▸ Custom Post Types + Taxonomies (portfolio, listings, testimonials…)
▸ Industry Speciﬁc Features (real estate, education…)
▸ Included Widgets + Shortcodes
▸ Advanced Search + Navigation
▸ Social Media Integration 
(Facebook, Twitter, etc.)
▸ Other 3rd Party Integrations 
(MailChimp, Google Analytics, etc.)

2. USER INTERFACE + EXPERIENCE (UI/UX)
▸ Familiar Design Conventions
▸ Simplicity + Ease of Use
▸ Logical User Flows
▸ Content Focused
▸ Clear Calls to Action (CTAs)
▸ Design Consistency
▸ Responsive Design (more later…)

3. CUSTOMIZATION + FLEXIBILITY
▸ Theme Design Options (universal parameters)
▸ Page Design Options (individual post parameters)
▸ Header + Footer + Sidebars
▸ Widget + Menu Areas (top, left, etc.)
▸ Custom CSS + JavaScript Code
▸ Visual Page Builder (more later…)
▸ Child Themes (more later…)

4. RESPONSIVE DESIGN + MOBILE FRIENDLINESS
▸ User Experience Optimized for All Screens + Networks
▸ Separate Layouts (desktop, notebook, tablet, smartphone)
▸ Fluid Grid System
▸ Flexible + Scalable Images
▸ Mobile Navigation Menus
▸ Touch Friendly UI Elements 
(buttons, tabs, forms, etc.)

5. SEARCH ENGINE OPTIMIZATION (SEO)
▸ High Quality Code (follows best practices)
▸ Clear Separation of Content + Design
▸ Custom Meta Titles + Descriptions
▸ Site Map
▸ SEO Plugins (Yoast SEO, 
All in One SEO Pack, 
Google XML Sitemaps)
▸ Performance + Speed (next slide…)

6. PERFORMANCE + SPEED
▸ Unnecessary Features + Functionality
▸ Code Optimization + Miniﬁcation
▸ Image Optimization
▸ Testing Tools (Google PageSpeed, 
GTmetrix, Pingdom)
▸ Caching Plugins (WP Rocket, 
W3 Total Cache, WP Super Cache)

7. SECURITY + STABILITY
▸ Updated Often (active development)
▸ Modern Technologies
▸ Large User Base (popular)
▸ Simpler is Usually More Secure
▸ Security Plugins (Sucuri, 
iThemes Security, Wordfence)
▸ Developer + Community Support 
(next slide…)

8. DEVELOPER + COMMUNITY SUPPORT
▸ Active Development
▸ Developer Support (usually paid annually)
▸ Frequent Updates
▸ Healthy + Growing Community
▸ High Quality Documentation
▸ Popularity Helps
▸ I Can Help You Too (simdex.org)

ADDITIONAL TIPS + RECOMMENDATIONS
▸ Look at User Ratings + Reviews
▸ Beware of Bloatware 
(themes trying to be everything to everyone)
▸ Don't Be Afraid to Experiment 
(you can always switch themes later)
▸ Remember Content is #1

WHERE SHOULD I GO TO FIND A WORDPRESS THEME? (PART 1)
▸ WordPress Theme Directory (wordpress.org/themes) ★
▸ WooCommerce / WooThemes (woocommerce.com) ★
▸ Elegant Themes (elegantthemes.com)
▸ StudioPress (studiopress.com) ★
▸ Envato Market / ThemeForest 
(themeforest.net)

WHERE SHOULD I GO TO FIND A WORDPRESS THEME? (PART 2)
▸ AppThemes (appthemes.com)
▸ CSSIgniter (cssigniter.com)
▸ Dessign (dessign.net)
▸ Elmastudio (elmastudio.de)
▸ Graph Paper Press (graphpaperpress.com)
▸ Obox Themes (oboxthemes.com)
▸ Themezilla (themezilla.com)
▸ Themify (themify.me)

WHAT ARE YOUR FAVORITE WORDPRESS THEMES?
▸ Genesis Framework by StudioPress (studiopress.com)
▸ Storefront Framework by WooCommerce (woocommerce.com)
▸ X by Themeco (theme.co)
▸ GeneratePress (generatepress.com)
▸ OceanWP (oceanwp.org)
▸ Divi by Elegant Themes 
(elegantthemes.com)

WHAT IS A VISUAL PAGE BUILDER? WHAT ARE EXAMPLES?
▸ Visual GUI with drag + drop interface
▸ Quickly + easily build multicolumn layouts
▸ Little to no HTML or CSS coding required
▸ Examples
▸ Beaver Builder (Pro)
▸ Cornerstone by Themeco ★
▸ Divi Builder by Elegant Themes
▸ Elementor (Pro) ★
▸ Visual Composer by WPBakery

THAT CONCLUDES PART 1.
BEFORE PART 2…
Questions?
Get In Touch: 
geoff@simdex.org 
simdex.org 
414.455.6675

HOW TO CUSTOMIZE THEMES THE RIGHT WAY 
(BY USING CHILD THEMES)
PART 2 OF 2:
Experience Level: Intermediate–Advanced

HOW TO CUSTOMIZE THEMES THE RIGHT WAY (BY USING CHILD THEMES)
WHAT IS A CHILD THEME? WHY SHOULD I USE ONE?
▸ Inherits Attributes from Parent Theme by Default
▸ Overrides Styles + Functions of Parent Theme
▸ Relies on Parent Theme to Function
▸ Does Not Modify Parent Theme
▸ Updates to Parent Theme Don’t 
Overwrite Customizations
▸ Easy to Update + Maintain

THE “I LOVE CODE” APPROACH
1. Create new folder in …/wp-content/themes/ called
{parent-theme}-child (or whatever you want)
2. Create two new plain text ﬁles* 
in {parent-theme}-child called 
style.css and functions.php
*UTF-8 character encoding recommended

3. Add the following header to style.css, then edit:
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-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
Text Domain: twenty-fifteen-child
*/
/* your custom CSS begins here */

4. Add the following to the top of functions.php, then edit:
<?php 
 
add_action( 'wp_enqueue_scripts', 'my_parent_theme_css' );
function my_parent_theme_css() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
// copy and edit the line above for each stylesheet included in your parent theme
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}
// your custom PHP begins here

5. Activate child theme in WordPress admin
6. Copy desired template file(s) from parent theme folder to child
theme folder*
7. Modify copied template file(s) within child theme folder
‣ WordPress will first look in child theme folder for template files
and use them if they exist, otherwise parent theme’s templates
will be used
‣ Refer to WordPress theme template hierarchy for development
reference (next slide…)
*preserve directory hierarchy (relative file paths)

wphierarchy.com
WordPress Theme Template Hierarchy

THE “I HATE CODE” APPROACH: CHILD THEME CONFIGURATOR
1. Download and install Child Theme Configurator: 
https://wordpress.org/plugins/child-theme-configurator/
2. Follow these step-by-step instructions: 
http://www.childthemeconfigurator.com/how-to-use/
3. Add all custom CSS to styles.css within your child theme: 
…/wp-content/themes/your-child-theme/style.css
4. Add all custom PHP to functions.php within your child theme: 
…/wp-content/themes/your-child-theme/functions.php
5. Activate child theme in WordPress admin
6. Advanced: Copy desired template file(s) from parent theme folder to
child theme folder then modify copied template file(s)

THE “I HATE CODE” APPROACH: CHILD THEME CONFIGURATOR
Demo

THAT’S IT FOR NOW…
THANK YOU!
Questions?
Get In Touch: 
geoff@simdex.org 
simdex.org 
414.455.6675

THAT’S IT FOR NOW…
THIS PRESENTATION IS AVAILABLE ONLINE:
simdex.org/themes
Get In Touch: 
geoff@simdex.org 
simdex.org 
414.455.6675

How to Choose the Right Theme & Customize It the Right Way (By Using a Child Theme)

Related slideshows

More Related Content

How to Choose the Right Theme & Customize It the Right Way (By Using a Child Theme)