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

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: [email protected] | simdex.org | 414.455.6675

HOW TO CHOOSETHE RIGHT THEME

PART 1 OF 2:

Experience Level: Beginner–Intermediate

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


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


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


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


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


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


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)


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


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)


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)


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


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:[email protected]

simdex.org414.455.6675

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

PART 2 OF 2:

Experience Level: Intermediate–Advanced


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’tOverride Customizations

▸ Easy to Update + Maintain


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



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



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



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)


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/


THE “I HATE CODE” APPROACH: CHILD THEME CONFIGURATOR

Demo

THAT’S IT FOR NOW…

THANK YOU!

Questions?

Get In Touch:[email protected]

simdex.org414.455.6675

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

Internet

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