Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

181 views

Published on

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)

Published in: Internet
  • Be the first to comment

  • Be the first to like this

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

  1. 1. HOW TO CHOOSE THE RIGHT THEME
 & CUSTOMIZE IT THE RIGHT WAY
 (BY USING A CHILD THEME) GEOFF MYERS PRESENTS
  2. 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. 3. HOW TO CHOOSE
 THE RIGHT THEME PART 1 OF 2: Experience Level: Beginner–Intermediate
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18. THAT CONCLUDES PART 1. BEFORE PART 2… Questions? Get In Touch:
 geoff@simdex.org
 simdex.org
 414.455.6675
  19. 19. HOW TO CUSTOMIZE THEMES THE RIGHT WAY
 (BY USING CHILD THEMES) PART 2 OF 2: Experience Level: Intermediate–Advanced
  20. 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. 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. 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. 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. 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. 25. wphierarchy.com WordPress Theme Template Hierarchy
  26. 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. 27. HOW TO CUSTOMIZE THEMES THE RIGHT WAY (BY USING CHILD THEMES) THE “I HATE CODE” APPROACH: CHILD THEME CONFIGURATOR Demo
  28. 28. THAT’S IT FOR NOW… THANK YOU! Questions? Get In Touch:
 geoff@simdex.org
 simdex.org
 414.455.6675
  29. 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

×