<?php
// Use anytime HTML element encloses a section of data:
echo esc_html( $no_html );
// Use on all URLs, including those in the 'src' and 'href' attributes of an HTML element:
<img src="<?php echo esc_url( $escaped_url ); ?>" />
// Use for inline Javascript:
<a href="#" onclick="<?php echo esc_js( $escaped_js ); ?>"><?php esc_html__( 'Click Here', 'text-domain' ); ?></a>
// Use for an HTML attribute:
<div class="<?php echo esc_attr( $escaped_class ); ?>">
Ok, so your WordPress theme works, but is it safe and secure? Escaping both input and output is a critical aspect of proper development.
Nick Daugherty’s bottom-line on The Importance of Escaping All The Things summarizes escaping perfectly:
If it’s not escaped on output, it’s potentially exploitable. Never underestimate the abilities of an attacker – they’re experts at finding the way to make the ‘this should never, ever, be possible‘ things happen. For maximum security, we must escape all the things.
Double and triple check your WordPress theme to ensure that all the things are escaped as late as possible.
Theme Check is literally the easiest way to check your WordPress theme against the latest coding standards and techniques. While it does not cover everything, it’s a great tool that should be run before submitting a WordPress theme to ThemeForest. Honestly, you should perform a check every time a substantial theme update is released.
One of the easiest errors to check for is standard PHP errors. Enable wp_debug and go to town self-reviewing your theme to ensure there are no PHP errors, notices or warnings anywhere. You should also check for errors every time you submit an update. It is not uncommon to see a newly introduced PHP error in an update coming through the queue.
<?php
// Functions
function prefix_setup()
// Classes
class Prefix_Class {}
// Global Variables
global $prefix_passengers;
// Action Hooks
do_action( ‘prefix_start_engine’ );
// Filter Hooks
$register = apply_filters( prefix_register );
// Non Third-Pary Script Handles
wp_enqueue_script( 'prefix-functions', get_theme_directory_uri() . 'js/custom/functions.js' );
// Non Third-Pary Style Handles
wp_enqueue_style( 'prefix-minified-style', get_theme_directory_uri() . 'style.min.css' );
// Images
add_image_size( 'prefix-large', 800, 600 );
All PHP function names, PHP class names, globals, actions, filters, script/style handles (that are not third-party) and even image sizes, all need to prefixed with themename_ or framework_ (where framework functions are used).
There are many steps to developing WordPress themes – one of which is ensuring that every single general use case is covered from a functionality standpoint. That’s where the Theme Unit Test comes into play.
Installing the Theme Unit Test is not particularly gorgeous, but it’s imperative to creating a super-solid theme. When reviewing WordPress themes, I install the Theme Unit Test every single time. Do yourself a favor and setup a fresh local install, upload the unit tests and run through every post, page, and setting.
Common issues are table display errors, image alignments, responsive comments, pingbacks display errors, password-protected post styling issues, and search index mishaps.
Sometimes it’s inevitable that the TGM Plugin Activation library will be outdated. For new items, it entirely depends on how long your item has been in the queue, and how recently an update to TGMPA has been released.
Keep in mind that every time you release a new version of your theme, you should double check that the latest version of TGMPA is included.
Click here to check the latest release of TGMPA.
<?php
// Include a plugin from the WordPress Repository:
array(
'name' => esc_html__( 'WooCommerce', 'text-domain' ),
'slug' => 'woocommerce',
'required' => false,
),
// Include a plugin bundled within a WordPress theme:
array(
'name' => esc_html__( 'Example Plugin', 'text-domain' ),
'slug' => 'example-plugin',
'source' => get_template_directory() . '/inc/plugins/example-plugin.zip',
'required' => false,
),
When using the TGM Plugin Activation library to include pre-packaged WordPress plugins, you should be using get_template_directory()
, instead of get_stylesheet_directory()
for the plugin’s source.
Using get_template_directory()
ensures that the plugins are also installable when a child theme is activated.
Every user should have free rein to activate or deactivate any WordPress plugins installed on their website. When plugins are auto-deactivated (or auto-activated) it lead to confusion and the user is left unsure as to what elements of their website are now either disabled or entirely broken.
<?php
/**
* Third Party Styles
* More info: https://github.com/grappler/wp-standard-handles
*/
// Incorrect
wp_enqueue_style( 'prefix-font-awesome', get_template_directory_uri() . '/css/font-awesome.css', array(), '4.2.0', 'all' );
// Corrrect
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.css', array(), '4.2.0', 'all' );
/**
* Third Party Scripts
*/
// Incorrect
wp_enqueue_script( 'prefix-fitvids', get_template_directory_uri() . '/js/jquery.fitvids.js', array( 'jquery' ), '1.1.1', true );
// Corrrect
wp_enqueue_script( 'jquery-fitvids', get_template_directory_uri() . '/js/jquery.fitvids.js', array( 'jquery' ), '1.1.1', true );
First and foremost, scripts and styles should not be hard-coded anywhere in your WordPress theme. Using the wp_enqueue
* hook is the only allowed method to correctly add any scripts or styles to your theme.
For inline styling, including Customizer style options, use wp_add_inline_style
and for inline scripts, use wp_add_inline_script
.
All third-party styles and scripts used in your WordPress theme should NOT be prefixed. By not prefixing third-party assets, you are ensuring that those files do not load multiples times. Check out WP Standard Handles, by Ulrich Pogson for more standard handles of conventional assets included in WordPress themes these days.
Having offline documentation ensures that your customers are not hanging when there is not an Internet connection available or when your files are inaccessible – for any reason. Additionally, you do not have to ensure the assets will be infinitely accessible.
Just include your screenshots and other assets directly within the help guide and you’ll be in the clear. And if you are looking for a particularly beautiful documentation template, I built WPThemeDoc, a quick and easy documentation template for WordPress theme developers.
That sums it up. Generally speaking, if your theme complies with the following common mishaps, you’ll probably have a much quicker time getting your WordPress theme approved on ThemeForest.