How to Choose a WordPress Theme

Finding Your Way Through the Labyrinth

At April’s MeetUp, I shared some of my insights and experiences with themes. Below are the slides and key topics from my presentation. We had a great Q&A afterwards about theme selection and creation, business practices, client relations, and more!

 

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 (on Anne’s blog)

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

Your Thoughts? Please Share!

If you would like to share some thoughts and/or resources regarding themes, please use the comments sections below.

Anne Katzeff

Designer | Artist | Teacher - Specializing in custom website design for artists, small businesses, and nonprofits. WordPress Meetup SWFL organizer. Principal of ASK Design. Anne also writes about WordPress, design, art, and teaching in her blog.

Leave a Reply

%d bloggers like this: