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

  • Published on
    19-Jan-2017

  • View
    183

  • Download
    2

Transcript

  • 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 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

  • HOW TO CHOOSETHE RIGHT THEME

    PART 1 OF 2:

    Experience Level: BeginnerIntermediate

  • 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

  • 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)

  • 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)

  • 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)

  • 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)

  • 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)

  • 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)

  • 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)

  • 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)

  • 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)

  • 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 onGenesis Framework

    Themes Built onBootstrap Framework

  • 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

  • THAT CONCLUDES PART 1.

    BEFORE PART 2

    Questions?

    Get In Touch:geoff@simdex.org

    simdex.org414.455.6675

  • HOW TO CUSTOMIZE THEMES THE RIGHT WAY (BY USING CHILD THEMES)

    PART 2 OF 2:

    Experience Level: IntermediateAdvanced

  • 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 DontOverride Customizations

    Easy to Update + Maintain

  • 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 calledstyles.css and functions.php

    *UTF-8 character encoding recommended

  • 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 */

  • 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:

  • 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 themes templates will be used

    Refer to WordPress theme template hierarchy for development reference (next slide)

    *preserve directory hierarchy (relative file paths)

  • HOW TO CUSTOMIZE THEMES THE RIGHT WAY (BY USING CHILD THEMES)

    THE I HATE CODE APPROACH: CHILD THEME CONFIGURATOR1. 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)

    https://wordpress.org/plugins/child-theme-configurator/http://www.childthemeconfigurator.com/how-to-use/

  • HOW TO CUSTOMIZE THEMES THE RIGHT WAY (BY USING CHILD THEMES)

    THE I HATE CODE APPROACH: CHILD THEME CONFIGURATOR

    Demo

  • THATS IT FOR NOW

    THANK YOU!

    Questions?

    Get In Touch:geoff@simdex.org

    simdex.org414.455.6675

Recommended

View more >