Important Checks Before Releasing A WordPress Theme

As I was finishing up my premium theme to submit for review over at ThemeForest I was doing my final testing and figured I might as well write up a post on some of the most important and general checks one should make before releasing one’s theme. Sure there are many things to check but below are 20 of what I consider to be some of the most important checks before releasing your theme.

Include wp_footer & wp_head

This is pretty basic stuff but very important. Make sure you’ve included the wp_head hook in the header.php file and your wp_footer hook in the footer.php file. These hook are very important in order for plugins to work with your theme. Also, if you are including any functions that append to these hooks you will obviously need them.

Take Your Screenshot.png

Oftentimes I get to eager to release my theme that I forgot to include the basic screenshot.png file with the theme. This is the image that will show up in your WP admin under your Appearance tag.

Basically take a screenshot of your theme, cut it to about 300px by 225px, save it as a png and name it “screenshot”. Then drop that baby right into the root of your theme’s folder.

Enable Core WordPress Theme Support

There are many awesome features in WordPress that aren’t enabled by default and must be enabled using the add_theme_support function in your theme. Some of these features include post thumbnails, meta title tag, html5 support, custom header, custom logo…etc. Below is an example of how to enable these features (note that you need to hook into the after_setup_theme action hook).

// Add theme support
function themename_add_theme_support() {
	add_theme_support( 'post-formats', array( 'aside', 'video', 'image', 'gallery', 'quote' ) );
	add_theme_support( 'post-thumbnails' );
	add_theme_support( 'automatic-feed-links' );
	add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
	add_theme_support( 'title-tag' );
	add_theme_support( 'custom-header' );
	add_theme_support( 'custom-logo' );
	add_theme_support( 'customize-selective-refresh-widgets' );
}
add_action( 'after_setup_theme', 'themename_add_theme_support' );

Note: In the example snippet we are just adding basic theme support but for most features you can also pass on a list of arguments. For example for the custom-logo you can pass an array with the width, height, header-text, etc. So be sure to look up each feature and see if you want to pass on custom arguments.

Make Sure Pagination Works

Especially if you are using custom post types its important to make sure that pagination works not only on your blog page, categories and tags but also on your custom post type archives and any custom taxonomies. Have a look at our guide for Adding Pagination in WordPress if you don’t know how.

Set WordPress Menu Fallback

One of the most common questions I get from people, besides how to set their images, is how to set up their menu. When you are using the WP drag-and-drop menu system its always ideal to set a fallback for your menu with a link to the admin panel so users can see how to set up their menu. Don’t keep your users guessing!

Have a look at our guide on Adding a Menu Fallback in WordPress if you don’t know how.

Enqueue Script For Threaded Comments

When users activate threaded comments in their WordPress admin it allows people to reply to their comments on their blog. You’ve probably noticed how some themes re-load the page when a user clicks on the “reply” button, which isn’t very user-friendly or professional. Luckily WordPress comes with a script built-in so threaded comments can work without re-loading the page. In order to activate it, simply add the following code to your functions.php file:

<?php
function themename_comment_reply_js() {
	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'themename_comment_reply_js' );

Make Sure Javascript Has Been Added Correctly

It’s important to include Javascript correctly to your themes so it doesn’t conflict with any plugins. I wrote a post a while back showing how to add Javascript via your functions.php file. If you are still adding your JS in the header.php file make sure to read our post on Adding Javascript To WordPress The Right Way.

Test Your Theme Across All “Major” Browsers

Unfortunately people still use older browsers like Internet Explorer 10. If you developing WordPress themes its very important to test it across all the major browsers and make sure it looks good. If your site looks bad on Firefox, Safari or IE (don’t just check in Chrome) people may not download or buy it and if they do, you might get a lot of support tickets asking you to fix the theme and make it work. Check out some great browser testing sites below:

• Browser Shots
• Browsers on Turbo
• CrossBrowserTesting

Include a 404.php File

This is very easy to do and also very important. If you don’t include a 404.php file in your theme when a user browses the site and ends up at a 404 error page it may show the contents of your index.php file or display a server generated 404 page that doesn’t match your site design or provide any useful links to the visitor. This can be bad for SEO but it’s also very user-unfriendly. Personally I like to include a title, a list of pages and maybe even my search form. It’s really up to you what you include, but make sure you have the file.

Create Single Pages For Your Post Types

If you have any post types being used in your theme you need to create single pages for each one otherwise the default single.php file will be used. and all your post types will look just like a blog. Example, if you have a portfolio custom post type you should have a single-portfolio.php file to show the single portfolio posts.

If you have custom post types that you don’t necessarily want single posts for (such as a slider or homepage-specific post type) you should have these post types defined with the public parameter set to false and the show_ui parameter set to true ( see the register_post_type function for more info),

Include Theme Details In Stylesheet

Don’t forget to include the theme details in your theme! Not only do you need a name in order for the theme to show up in your Appearance tab but you’ll also want to show users what version of the theme they are using and give yourself some credit for the theme. Below is a sample of the theme details for my Total WordPress Theme.

/*
 Theme Name: Total
 Version: 4.6
 Description: Premium WordPress theme by WPExplorer
 Author: WPExplorer
 Theme URI: https://themeforest.net/item/total-responsive-multipurpose-wordpress-theme/6339019
 Author URI: https://themeforest.net/user/wpexplorer
 License: Custom license
 License URI: http://themeforest.net/licenses/terms/regular
 Text Domain: total
 Tags: custom-colors, accessibility-ready, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready

Style Default Alignments/Image Styles

Don’t forget to style the default image alignments and image styles in WordPress. As you know you can align images to the left, right or center in your post editor,  but you need to include the corresponding styles in your theme so that it actually works. Below are just the basic CSS for image, blockquote and text alignments, captions and some resetting for the smiley faces. You can copy and paste it right into your theme and edit accordingly.

/*--------------------------*
/*  WordPress Alignments
/*--------------------------*/
.aligncenter{ display:block;  margin:0 auto}
.alignright{ float:right;  margin:10px 0 10px 10px}
.alignleft{ float:left;  margin:10px 10px 10px 0}
.floatleft{ float:left}
.floatright{ float:right}
.textcenter{ text-align:center}
.textright{ text-align:right}
.textleft{ text-align:left}

Style Default Widgets

WordPress includes many built-in widgets. If you are making a theme you should style these to match your site and make them look better. Below is a list of all the different widgets you’ll want to style.

/*--------------------------*
/*  WordPress Widget Styles
/*--------------------------*/
.widget {}

/* links widget */
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

/* meta widget */
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

/* pages widget */
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

/* recent-posts widget */
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

/* archives widget */
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

/* tag-cloud widget */
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

/* calendar widget */
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

/* category widget */
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

/* recent-comments widget */
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

/* search widget */
#searchform {}
.widget_search {}
.screen-reader-text {}

/* text widget */
.textwidget {}
.widget_text {}

Check Outgoing Links

This doesn’t pertain to much to premium themes as you shouldn’t be including any links in your theme (except maybe a link to the docs or changelog) but for those creating Free themes make sure that the links you provide in the admin area and more importantly, the site footer, actually go somewhere. And please don’t link to any spammy sites or include sponsored links in your themes. If you really want to make a free theme do it to give back to the community or increase your exposure. You shouldn’t be creating themes just for the purpose of getting or selling backlinks.

Make Sure Your Searchform is Set Up

Even though your theme may not include a search bar built into the theme somewhere people may still want to add one to their sidebar or any other widgetized area via the search bar widget, so make sure you’ve included your searchform.php file in your theme. Below is an example of what the code in your searchform.php file may look like:

<?php
/**
 * The template for displaying search forms.
 *
 * @package   Total WordPress Theme
 * @author    Alexander Clarke
 * @copyright Copyright (c) 2017, WPExplorer.com
 * @link      http://www.wpexplorer.com
 * @since     1.0
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
	exit;
} ?>

<form method="get" class="myprefix-site-searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<input type="search" name="s" placeholder="<?php esc_html_e( 'Search...', 'text_domain' ); ?>" />
	<button type="submit"><?php esc_html_e( 'Search', 'text_domain' ); ?></button>
</form>

Test All Your Theme Options

If you’ve created a custom theme panel for your theme or added custom options via the WordPress Customizer, its very important to make sure that all your options work correctly. It would be very frustrating for a user who is trying to set an option and can’t get it to work. So go through each option/setting and make sure it works correctly.

Prettify Your Theme’s CSS Files

Another thing I like to do before I’m done with my theme is to run my CSS through a “CSS generator” to make sure all my indentations are perfect and that there are no errors. At times I also like to compress my CSS, depending on the focus of the theme. I personally bought an app for the mac named “Procssor” which I use but you can just Google search “pretty css” or “css beautifier” and there are many tools online for this.

Check Validation At w3.org

Obviously you want your theme to not have any code syntax errors. Not only so you can be proud of your work, but also because people may not buy your theme if they find a lot of errors. A valid theme shows professionalism and expertise, so make sure to run a few simple validations to make sure it comes out green. Head over to the W3 Online Validator and enter the URL of your theme demo to check for errors. Be sure to check all main pages (homepage, archives, search, single posts, single post types, 404, etc).

Test Using the WordPress.org “Theme Unit Test”

Although this is one of the most important steps I have added it at the end because a lot of developers use the Unit Test during the development process. Basically WordPress has a xml file you can import to your site with various “tests” to check for formatting, widgets, alignments, images, post formats, pagination, etc. It is always important to check your theme with the Theme Unit Test to ensure it’s ready to be released to the public and you don’t have any issues with core WordPress functions and styles.