Event: How to Create a Child Theme, and Why You Shouldn't Fear Gutenberg (https://www.meetup.com/WordPress-Orlando/events/254464142) Organizer: WordPress Orlando Meetup (https://www.meetup.com/WordPress-Orlando) Date & Time: Tuesday, September 25, 2018, 6:30 PM to 8:30 PM Location: BIGEYE, 3203 Lawton Road, 2nd Floor, Orlando, FL 32803 (https://goo.gl/maps/mQkGUf4adLJ2) "How to Choose the Right Theme & Customize It the Right Way (By Using a Child Theme)" Presented by Geoff Myers, Digital Marketing Consultant & CEO of SimDex LLC This presentation and subsequent group discussion is meant for both beginners of WordPress (“choosing the right theme”) and intermediate users of WordPress (“creating a child theme”). Geoff will be covering the following subtopics: • Where do I start when searching for a WordPress theme for my site? What are the best places to look for high-quality themes? • What do I look for in a WordPress theme to determine whether it meets the highest technical quality standards? (hint: use Theme Check) • Effective strategies and best practices for choosing a WordPress theme that will work for you in the short term and long run (i.e. how to save yourself frustration later on) • Free themes versus paid themes: What’s the difference? Is it worth paying? Where should I go? • How to create a Child Theme and add customizations without overwriting the original theme’s code (e.g. copying and editing CSS stylesheets and PHP templates from the original theme)

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

2. 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

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

4. 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

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

6. HOW TO CHOOSE THE RIGHT THEME
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…)

7. HOW TO CHOOSE THE RIGHT THEME
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…)

8. HOW TO CHOOSE THE RIGHT THEME
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.)

9. HOW TO CHOOSE THE RIGHT THEME
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…)

10. HOW TO CHOOSE THE RIGHT THEME
6. PERFORMANCE + SPEED
▸ Unnecessary Features + Functionality
▸ Code Optimization + Minification
▸ Image Optimization
▸ Testing Tools (Google PageSpeed,
GTmetrix, Pingdom)
▸ Caching Plugins (WP Rocket,
W3 Total Cache, WP Super Cache)

11. HOW TO CHOOSE THE RIGHT THEME
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…)

12. HOW TO CHOOSE THE RIGHT THEME
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)

13. HOW TO CHOOSE THE RIGHT THEME
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

14. HOW TO CHOOSE THE RIGHT THEME
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)

15. HOW TO CHOOSE THE RIGHT THEME
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)

16. HOW TO CHOOSE THE RIGHT THEME
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)

17. HOW TO CHOOSE THE RIGHT THEME
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

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

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

20. 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

21. HOW TO CUSTOMIZE THEMES THE RIGHT WAY (BY USING CHILD THEMES)
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 files*
in {parent-theme}-child called
style.css and functions.php
*UTF-8 character encoding recommended

22. HOW TO CUSTOMIZE THEMES THE RIGHT WAY (BY USING CHILD THEMES)
THE “I LOVE CODE” APPROACH
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 */

23. HOW TO CUSTOMIZE THEMES THE RIGHT WAY (BY USING CHILD THEMES)
THE “I LOVE CODE” APPROACH
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

24. HOW TO CUSTOMIZE THEMES THE RIGHT WAY (BY USING CHILD THEMES)
THE “I LOVE CODE” APPROACH
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)

25. wphierarchy.com
WordPress Theme Template Hierarchy

26. HOW TO CUSTOMIZE THEMES THE RIGHT WAY (BY USING CHILD THEMES)
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)

27. HOW TO CUSTOMIZE THEMES THE RIGHT WAY (BY USING CHILD THEMES)
THE “I HATE CODE” APPROACH: CHILD THEME CONFIGURATOR
Demo

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

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