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

From http://www.meetup.com/Milwaukee-WordPress-MeetUp/events/227272150/

This is a daytime meetup with a topic. Geoff Myers, Digital Marketing Consultant & CEO of SimDex LLC, will be presenting. This week's topic is "How to Choose the Right Theme & Customize It the Right Way (Using a Child Theme)".

Who should attend this event?

This short 20-minute 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"). Following the talk, there will be a general Q&A session and group discussion, after which we will break up into smaller groups as usual for individual conversations.

What will I learn from this talk?

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)

What is the format of this event?

• Geoff's presentation/talk (~20 minutes)
• Subsequent Q&A and group discussion (~15 minutes)
• Group collaboration/help session (the usual, ~70 minutes)

If we receive positive feedback about this type of event, we will plan future events in a similar format.

Transcript

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 in 2004 ▸ Web Solutions for Small + Medium Sized Businesses ▸ Digital Marketing Consultant + Strategist ▸ 10+ Years as Full Stack Web Designer + Developer ▸ 5+ Years of WordPress Experience ▸ 50+ WordPress Sites Built ▸ Computer Science Background ▸ 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…) ▸ Other 3rd Party Integrations
 (MailChimp, Google Analytics…)
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 (later slide…)
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, right…) ▸ Custom CSS + JavaScript Code ▸ Visual Page Builder (later slide…) ▸ Child Themes (later slide…)
8. HOW TO CHOOSE THE RIGHT THEME 4. RESPONSIVE DESIGN + MOBILE FRIENDLINESS ▸ Ideal User Experience 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…)
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 (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 Community ▸ High Quality Documentation ▸ Popularity Helps ▸ I Can Help You Too (simdex.org)
13. HOW TO CHOOSE THE RIGHT THEME WHERE SHOULD I GO TO FIND A THEME? ▸ WordPress Theme Directory (wordpress.org) ▸ WooThemes (woothemes.com) ▸ Elegant Themes (elegantthemes.com) ▸ StudioPress (studiopress.com) ▸ Themeco (theme.co) ▸ Themify (themify.me) ▸ ThemeForest (themeforest.net)
14. HOW TO CHOOSE THE RIGHT THEME WHAT ARE YOUR FAVORITE WORDPRESS THEMES? ▸ X by Themeco (theme.co) ▸ Divi by Elegant Themes (elegantthemes.com) ▸ Themes Built on
 Genesis Framework ▸ Themes Built on
 Bootstrap Framework
15. HOW TO CHOOSE THE RIGHT THEME WHAT IS A VISUAL LAYOUT BUILDER? WHAT ARE EXAMPLES? ▸ Visual GUI with drag + drop interface ▸ Quickly + easily build multicolumn layouts ▸ Little to no HTML or CSS coding required ▸ Examples ▸ Cornerstone by Theme.co ▸ Divi Builder by Elegant Themes ▸ Visual Composer by WPBakery ▸ Themify Builder by Themify.me ▸ Page Builder by Site Origin
16. THAT CONCLUDES PART 1. BEFORE PART 2… Questions? Get In Touch:
 geoff@simdex.org
 simdex.org
 414.455.6675
17. HOW TO CUSTOMIZE THEMES THE RIGHT WAY
 (BY USING CHILD THEMES) PART 2 OF 2: Experience Level: Intermediate–Advanced
18. 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
 Override Customizations ▸ Easy to Update + Maintain
19. 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 2. Create two new plain text files*
 in {parent-theme}-child called
 styles.css and functions.php *UTF-8 character encoding recommended
20. HOW TO CUSTOMIZE THEMES THE RIGHT WAY (BY USING CHILD THEMES) THE “I LOVE CODE” APPROACH 3. Add the following header to styles.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 */
21. HOW TO CUSTOMIZE THEMES THE RIGHT WAY (BY USING CHILD THEMES) THE “I LOVE CODE” APPROACH 4. Add the following header to 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
22. 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)
24. 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/styles.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)
25. HOW TO CUSTOMIZE THEMES THE RIGHT WAY (BY USING CHILD THEMES) THE “I HATE CODE” APPROACH: CHILD THEME CONFIGURATOR Demo
26. THAT’S IT FOR NOW… THANK YOU! Questions? Get In Touch:
 geoff@simdex.org
 simdex.org
 414.455.6675