HTML markup validation:
Please check HTML markup validation before developing a theme.
WordPress Code:
The following functions must be present:
wp_head() - just before </head>
wp_footer() - just before </body>
body_class() - inside <body> or <html> tags
post_class()
- WordPress theme files and directories must be named using lowercase letters. Words must be separated by hyphens, not camelCase or underscores.
- Themes must not add any entries to the admin bar and must not remove, hide
- The $content_width variable must be used to define the maximum allowed width for images, videos, and oEmbeds displayed within a theme
- Default WordPress CSS classes must be covered in the stylesheet.
- WP_Filesystem methods must be used where available instead of direct PHP filesystem calls. For example, mkdir, fopen, fread, fwrite, fputs, etc., must not be used.
Prefix Everything:
For my WordPress themes, I use the themename_ prefix all around, as it is simple and clean.
<?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_template_directory_uri() . 'js/custom/functions.js' );
// Non Third-Pary Style Handles
wp_enqueue_style( 'prefix-minified-style', get_template_directory_uri() . 'style.min.css' );
// Images
add_image_size( 'prefix-large', 800, 600 );
?>
Properly Include Scripts and Styles:
Do Not Prefix Third Party Scripts. Themes must use the scripts shipped with WordPress instead of including their own copy of the script or using one from a CDN. This includes jQuery, jQuery UI, Backbone, Underscore, etc. protocol-relative formats such as //example.com/file.js instead of http://example.com/file.js
<?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 );
?>
Font Loading:
The fonts must be enqueued using wp_enqueue_style().
wp_enqueue_style( 'theme-prefix-fonts', "//fonts.googleapis.com/css?family=Lora:400,700|Inconsolata:700", '', '1.0.0', 'screen' );
Escape Everything:
<?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 ); ?>">
?>
Pluggable functions use:
A function can only be reassigned this way once, so you can’t install two plugins that plug the same function for different reasons. For safety, it is best to always wrap your functions with
if( ! function_exists(‘wp_mail’) ) { } , otherwise you will produce fatal errors on plugin activation.
PHP Code:
It is recommended that development is done with errors enabled and WP_DEBUG set to true. Follow the coding standard WordPress PHP Coding Standards.
- Themes must work with the latest release of PHP. There is no required minimum supported version of PHP
- The create_function() function has been deprecated as of PHP 7.2.0 and must no longer be used.
- The “@” operator must not be used to suppress error messages or notices.
- Tabs must be used for indentation
- The creation of global variables is discouraged. They should be used only if absolutely necessary. If used, they must follow the prefixing rules.
- The eval() function must not be used.
Check for PHP Errors and Warnings:
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.
HTML/CSS Code:
Note: It is strongly recommended that your theme follows both the WordPress HTML Coding Standards and the WordPress CSS Coding Standards.
- CSS styling must not be hardcoded anywhere within a theme, either inline or in a tag.
- A table of contents at the top of the stylesheet to act as a guide is required.
- Dynamic styling must be added via wp_add_inline_style() with the exception of adding a background image to an element. In this instance, the following would be permitted:
<div id="header-background" style="background-image: url( <?php echo esc_url( '$header-background' ); ?> );"></div>
IDs and classes must be appropriately named and follow a naming convention.
Strongly Recommended that all your code be run through the W3C validator. Items will be soft-rejected for important errors such as unclosed tags, nesting errors, duplicate IDs, etc.
JavaScript Code:
It is strongly recommended that your theme follow the WordPress JavaScript Coding Standards.
- JavaScript code must be placed in external files whenever possible.
- If defined in the global scope, all functions and variables should be prefixed with a unique identifier.
- Unbind all event handlers before binding.
- If PHP variables or data need to be passed to JavaScript, wp_localize_script() must be used.
- If using jQuery, then .on() must be used instead of .click(), .bind(), .hover(), etc.
- Development and debugging code such as console.log() must be removed.
- Strict mode must be used for all JavaScript. For example, for jQuery:
(function($) {
"use strict";
// your code here
})(jQuery);
Translation Ready:
- All theme text strings must be translatable
- Text strings must not contain variables or constants
- The text domain must use dashes rather than underscores and be lowercase plain-text.
- Translation file should be in English and delivered as a .pot file. The .pot will contain all translation strings. The .pot file name should match the theme-slug (i.e. themeslug.pot).
- Themes can include actual translation files (.po/.mo) for any variety of specific languages, but must not add the en_US.mo or en_US.po because English is already implied.
Theme Security Requirements:
Validation
Where possible, data must be validated on input. Although validation may occur on the client side, this cannot be solely relied on. The data also needs to be revalidated on the server side before the data is saved.
For more information on validation, refer to Data Validation article.Data Validation
Sanitization
If data cannot be validated on input, it must be sanitized instead.For example, it may not be possible to validate a text field, instead, it should be sanitized using the sanitize_text_field() or wp_kses() functions.For more information on sanitization, refer to Data Sanitization/Escaping
Working with the Database
Themes must not work directly with the database to create, update or delete site content and should generally only use WordPress core functions to display content.If there is a valid reason to work with the database, then the wpdb class provided by WordPress must be used. SQL statements must be prepared using $wpdb->prepare().
Escaping Output
WordPress core functions that return dynamic data must be escaped by the theme, except for those core functions starting with ‘the_’, which are generally escaped already. For example, home_url, admin_url, get_permalink, get_header_image, etc., should be escaped, but the_content, the_permalink, etc., are not required to be escaped.
Nonces
Any data that is submitted to the server must use nonces. If a user is allowed to submit data to the server, a nonce must be used to verify the origin and intent of the request.
SVG Upload
Themes must not enable SVG uploads as it raises security concerns due to the possibility of attackers executing malicious code through SVG’s XML.
Update TGMPA:
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.
Properly Include Plugins Using 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,
),
?>
Disable TGMPA Force Actions:
Every user should have free rein to activate or deactivate any WordPress plugins installed on their website.
Core Features:
1.Themes must not use features/APIs meant for WordPress core.
2.Themes must be widget-ready in all advertised locations. All widgetized areas must be appropriately styled to match the theme/demo design.
3.wp_nav_menu() must be included in at least one theme location. Menu locations may only display placeholders such as Add Menu and Set Menu if the current user is a logged in admin user and no menu has yet been set.
4.Themes must not unregister default WordPress widgets. Instead, new widgets should be registered via a plugin.
5.Must support all of the following features:
- Comments
- Sidebars
- Editor style
- Title tag
6.index.php must be reserved for the standard blog “latest posts” view.
7.Content, including placeholder/demo content, must not be hardcoded into the template files.
8.Admin code should be kept separate from public facing code via the is_admin() conditional to prevent unauthorized access.
9.Specify column names instead of * in your queries.
Menu Position:
If the theme has an Options page and no other sub menu items, then it must go in either the Customizer (strongly recommended) or the Appearance section.
Customizer:
Users are increasingly expecting to find theme options within the Customizer. All Customizer settings must be properly validated and sanitized with an appropriate sanitization callback.
Child Themes:
If a child theme is provided with the theme, it must:
- Load the parent stylesheet using wp_enqueue_style() instead of @import.
- Consist of style.css, functions.php and screenshot.png files at a minimum.
- Append “Child” to the theme name so it can be identified as a child theme.
Plugin Territory Functionality:
- Analytics code
- SEO options
- Forms
- Non-design related meta boxes
- Resource caching
- Dashboard widgets
- Custom Post Types
- Custom Taxonomies
- Shortcodes
- Widgets
- Social media like, follow and, share buttons
- Framework related metabox
Third-Party Plugins & Libraries:
If you include plugins with your theme, you must use the TGM Plugin Activation (TGM PA) library.
- You must keep included plugins and libraries up to date.
- The force_activation and force_deactivation TGM PA parameters must not be set to true.
- For plugins included in the zip file, the version TGM PA parameter must be set and kept up to date
- You must not rename the original class-tgm-plugin-activation.php file to anything else.
- Bundled plugins must be included in the main zip file.
Checking for Plugins:
Do not use is_plugin_active() when checking whether a plugin is active or not. is_plugin_active() is not reliable as it depends on the plugin’s folder/filename(which may change). Instead, you can use function_exists() or class_exists() as these are more reliable.
Import & Export Plugin:
Importers must not add content without user permission. Importers must not overwrite current content without clear warnings to the user. Custom Importers must use the WP Filesystem API.
Import/export functionality should be included via a plugin such as One Click Demo Import
Theme Unit Test Data:
Common issues are table display errors, image alignments, responsive comments, pingbacks display errors, password-protected post styling issues, and search index mishaps.
Run Theme Check:
Theme Check is literally the easiest way to check your WordPress theme against the latest coding standards and techniques. You can use Envato Theme Check plugin.
Provide Offline and online Documentation:
Documentation can be either publicly accessible online or included in the archive offline. 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.
Techtalks 