ASK Design Blog

Designer | Artist | Teacher

    • How to Choose a WordPress Theme

    by Leave a Comment

    Finding Your Way Through the Labyrinth

    In April, I shared some of my insights and experiences with themes at the WordPress Southwest Florida MeetUp. Below are the slides and key topics from my presentation.

     

    There has been an explosion in the number of WordPress themes being developed in the past few years. The sheer volume of offerings can make theme selection an overwhelming challenge. Making an informed choice is the first step towards a wise choice.

    The Early Days

    How It All Began

    What Did I Know?
    • Not much!
    • Tried other CMS: Joomla, Drupal, Blogspot
    • Wanted free themes
    • Searched in WordPress repository
    • Could preview themes
    What Did I Learn?
    • Could try out different themes
    • Features and styles varied
    • Some themes had multiple widget and layout options
    • Relied on reviews and number of downloads
    • First used themes with lots of built-in options
    • Learned about child themes and frameworks

    Early Theme Faves

    Free Themes with Lots of Options (but not too many options)
    • Atahualpa
    • Responsive
    • Suffusion
    atahualpa wp theme
    responsive wp theme

    My Next Approach

    Leaning Toward Premium Themes
    • Premium Themes
    • Thematic – framework
    thematic wp theme

    Current Choice

    Genesis StudioPress
    • Framework
    • Solid Code
    • Great Community
    • Pro Plus Package
    studiopress themes page

    Site Needs

    First Steps

    Answer key questions
    • What’s the main purpose for the website?
    • What will be my primary type of content — text, images, video or audio?
    • What will be my secondary type of content?
    • Will I be selling anything directly from the website?
    • Will most of my readers/customers/clients come from my local area?
    • Will I have a members-only section of the site?
    Client Approval
    • Create design mockups and get client approval before coding anything
    • If using theme out of box without custom design, show client and get approval

    Narrow the Field

    Search Criteria

    Filter out non-contenders
    • Theme should meet the needs of the website
    • Theme must be mobile-responsive!
    • Theme should have GPL license (open-source)
    • https://wordpress.org/themes/commercial/
    • Theme should be Gutenberg-compatible
    • Is it well-maintained?
    thematic update warning

    GPL

    GPL is the most popular open source license around.

    GPL is a copyleft license. This means that any software that is written based on any GPL component must be released as open source. The result is that any software that uses any GPL open source component (regardless of its percentage in the entire code) is required to release its full source code and all of the rights to modify and distribute the entire code.

    – Whitesourcesoftware.com
    https://resources.whitesourcesoftware.com/blog-whitesource/open-source-licenses-explained

    The GPL doesn’t say that everything must be zero-cost, just that when you receive the software it must not restrict your freedoms in how you use it.

    With that in mind, here are a collection of folks who provide GPL themes with extra paid services available around them. Some of them you may pay to access, some of them are membership sites, some may give you the theme for zero-cost and just charge for support. What they all have in common is people behind them who support open source, WordPress, and its GPL license.

    – WordPress.org website

    Additional Criteria

    Search Criteria

    Search by Category
    • Nonprofit
    • Business or Individual
    • Small Business, Corporate or Enterprise
    • News or Magazine
    • Portfolio
    • E-Commerce
    • Traditional Blog
    • Women, Specialty or App — specific themes for real estate agents, schools, restaurants, or events, for example
    Layout Options
    Features – things the theme can do
    • How robust is the Theme Options area?
      • Is there a section for custom CSS?
      • Can you change colors and fonts?
      • Can you access Google fonts and/or Typekit fonts?
    • What is included in the Customizer?
      • Can you change the header image, logo, background image/colors, etc.?
      • What areas can you access from the Customizer?
    • Can you position things in widgets?
    • Is there a hamburger menu?
    • Is there a secondary nav menu?
    • Is it optimized for e-commerce?
    • Are plugins integrated (page-builders, sliders, Woo Commerce)?
    • Has it been updated recently?
    astra info ratings
    Reputation – All Themes
    • Ratings/Reviews
    • Active installations
    • Number of downloads
    • Recommended by reliable people
    • Performance on Pingdom, Google Dev, Gtmetrix, Yslow
    • Accessibility Ready
    • Translation & RTL Ready
    • SEO Friendly code
    • ”Clean” code
    • Support Forum and Documentation
    Reputation – Free Themes
    theme directory search filter
    Reputation – Premium Themes
    • If commercial, premium theme, is the developer/company reputable?
    • Multipurpose: bundled with a lot of templates, features, options, and plugins
      • Note: multipurpose themes are often bloated with plugins and features that you may not need/want.
      • Your site may load more slowly with multipurpose themes
    • Is it a page-builder theme with proprietary code (non-Gutenberg-compatible)?

    WordPress Themes

    Theme Options
    • Theme > Theme Options
    • General
    • Navigation
    • Layout
    • Colors
    • Typography
    • Footer
    • Custom CSS
    • And more!
    zamir customize area
    Theme Customizer
    • Appearance > Customize
    • Site ID
    • Menus
    • Widgets
    • Homepage Settings
    • Theme Settings
    • SEO
    • And more!
    Appearance > Customize > Additional CSS
    additional css area
    • Will be intact if you change theme.
      Support forums recommend using “Additional CSS” vs. Theme Options > Custom CSS
      Maybe it’s because the Additional CSS will be carried over to any theme, whereas the Custom CSS is theme-related.

    WordPress Themes – Theme Selection

    Choose a Theme – Must be Responsive!

    Free Themes
    Free > Premium Themes
    Genesis StudioPress Framework
    • Digital Pro * Optimal * News Pro * Lifestyle Pro * 16 Nine * Outreach Pro
    • AyoShop (by Designmodo; WooCommerce-ready)
    • Envy Pro (WooCommerce-ready)
    • Patron (by Themedy; WooCommerce-ready)
    • Fun (by PrettyDarnCute; WooCommerce-ready)
    Other Premium ($) Themes

    WordPress Themes – Customization

    Child Themes

    The subject of child themes warrants its own presentation, so I’m providing only the essentials here. The key benefit of a child theme is that you retain all of your customizations when the parent theme is updated. I usually create the child theme myself, but there are plugins that will do it for you. Furthermore, if you’re using a framework like Genesis, you use child themes in addition to the “parent” Genesis theme.

    General

    STEP 1: Create a child theme directory (folder) inside wp-content/themes.

    • Append directory name with “-child”. For example:
      • Parent theme directory = “TwentyNineteen”
      • Child theme directory = “TwentyNineteen-child”

    OR

    • Append directory name with “-clientname”. This is a good strategy if you create multiple child-themes for the same parent theme. For example:
      • “TwentyNineteen-clientname”

    STEP 2: Create a copy of the parent theme style.css file;
    change name of copy to: “style-TwentyNineteen-original.css”

    STEP 3: Edit child theme’s stylesheet file (style.css).
    It must begin with the following header:

    /* 
 Theme Name: Twenty Nineteen Child 
 Theme URI: https://example.com/twenty-nineteen-child/ 
 Description: Twenty Nineteen Child Theme 
 Author: Anne Katzeff 
 Author URI: https://www.askdesign.biz 
 Template: twentynineteen 
 Version: 1.3
 License: GNU General Public License v2 or later 
 License URI: http://www.gnu.org/licenses/gpl-2.0.html 
 Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain: twentynineteen-child 
 */
    Required Information
    • Theme Name – must be unique and different from the parent theme.
    • Template – must be the name of the parent theme directory
    The following information should be based on the child theme:
    • Theme URI
    • Description
    • Author
    • Author URI
    • Text Domain
    Keep the following information the same as the parent theme:
    • Version
    • License
    • License URI
    • Tags

    STEP 4: Continue editing child theme’s stylesheet file (style.css).

    • Delete everything underneath the header
    • Your child theme stylesheet will only contain your modifications.

    STEP 5: Depending on the theme, import parent style sheet into style.css or add enqueue to functions.php

    • Import parent style sheet into child theme style.css:
    @import url("../suffusion/style.css");
@import url("../suffusion/skins/light-theme-royal-blue/skin.css");
 /*--- add overrides below ---*/

    OR

    • The recommended method: Add enqueue to child theme functions.php file:
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

$parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style ),
    wp_get_theme()->get('Version')
);
}

    STEP 6: Upload BOTH parent and child themes to your WordPress site.

    STEP 7: Activate the child theme
    You may need to resave your menus and theme options.

    Genesis (StudioPress)

    Steps are a little different since Genesis is a framework that uses child themes.

    STEP 1: The same as for General child themes. Create a child theme directory (folder) inside wp-content/themes.

    • Append directory name with “-child” OR with “-clientname”

    STEP 2: The same as for General child themes. Create a copy of the parent theme style.css file; change name of copy to: “style-TwentyNineteen-original.css”

    STEP 3: Edit child theme’s stylesheet file header area (style.css) to have your info.

    STEP 4: Add your customizations in one of the following ways:

    • Use Additional CSS area of the theme’s customizer
      (Appearance > Customize > Additional CSS).
    • Add to the bottom of the stylesheet, before the media queries.
    • Edit the stylesheet directly.

    STEP 5: Upload BOTH Genesis Framework and the child theme to your WordPress site.

    STEP 6: Activate the child theme
    You may need to resave your menus and theme options.

    Sources

    Related Posts

    Home Page Widgets in WordPress
    My Core Set of WordPress Plugins
    Image Captions in WordPress
    WordPress Pages vs. Posts

    Reader Interactions

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Footer

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Subscribe to RSS Feed

  •  ASK Design Blog

    • Contact

    Website
    Email

    Connect and Share