How to Choose the Right Theme & Customize It the Right Way (By Using a Child 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 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.)

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 + Miniﬁcation ▸ 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 ﬁles*  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

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

You are reading a preview.

Check these out next

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

More Related Content

Slideshows for you (20)

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

Recently uploaded (20)