Update on the doingitwrong theme

The doing it wrong theme serves as a tool for theme reviewers as well as theme authors to better understand the requirements needed to be met before a theme can be made live. Currently there are fourteen required sections that are looked over when conducting a theme review. They are as follows:

  • Code
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. functionality/features
  • Presentation/Functionality
  • Documentation
  • Language
  • Licensing
  • Naming
  • Options/Settings
  • Plugins
  • Screenshot
  • Security/Privacy
  • Selling/Credits/Links
  • Stylesheets/Scripts
  • Templates

Many of the requirements will overlap with other sections. An example of this is the language requirements. All themes need to be translation ready. What this means is the theme must use the WordPress translation functions such as __(), _e(), or _x() and they must follow core implementation. This means explicitly declaring a text domain, and loading the text domain. This can be done using load_theme_textdomain() inside of a callback function hooked to after_setup_theme.

The following serves as a guide of some common sections that can be missed or over-looked.

Code

It is a given that a theme hosted in the repository should be error free. PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. and JS errors are not welcome here, right? They do happen. Some of the common ones are undefined variables and the rare occasion of when a theme’s option is not set. One example of this can be custom colors being used and not setting a default for get_theme_mod, or get_option depending on how your options are setup.

For example:

.divider {
	background: url( <?php echo get_theme_mod( 'trt-bg-divider' ); ?> );
}

Another example would be element attributes. They do happen and they can be missed. In the following example, an alternate text field is not escaped properly and can lead to potentially breaking the theme’s design.

<?php $alt = get_theme_mod( 'alt-for-img-1' ); ?>
<img src="path/to/img.gif" alt="<?php echo $alt ?>"/>

Core features/functionality

This can be something so simple as creating a custom background setting, custom headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. setting or even displaying a categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. list. What this entails is rather than using core functionality a theme author will create their own version of a core function. An example of this is dates. In the following example you can see the theme is hard-coding the date format making it hard for a user to change that by either creating a child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. or changing the corresponding code:

<p>ublished: <?php the_time('F j, Y'); ?></p>

Instead themes can use:

<p>Published: <?php the_time( get_option( 'date_format' ) ); ?></p>
// or perhaps
<p>Published: <?php the_time( get_option( 'time_format' ) ); ?></p>

In simple terms, it has to be user-configurable just like the display of posts on the front page.

Scripts/Styles

Yes, it does sound a little odd as this is often times one of the first things you see but it can be a common one. In the <head> of the document, there may be one or more files that are included using the get_template_directory_uri() there are times when they will try and load from a third-party. An example of this can be Google fonts or even jQuery. All stylesheets and scripts have to be enqueued and hooked to the proper hook.

Example of proper usage:

add_action( 'wp_enqueue_scripts', 'trt_styles_scripts' );
function trt_styles_scripts(){
	wp_enqueue_style( 'trt-parent', get_stylesheet_uri() );
	wp_enqueue_script( 'trt-js-file', get_template_directory_uri() . '/js/trt-js-functions.js', array( 'jquery', 'backbone', 'underscore' ) );
	wp_enqueue_style( 'trt-monst-font', '//fonts.googleapis.com/css?family=Montserrat' );
}

Documentation

While themes are not required to document every aspect of the theme it does need to have at the very least licensing and copyright information, and any design limitations. For example, if a menu location only displays two levels it should be noted in the readme file of the theme. Please note that all resources included in the theme have to be GPLGPL GPL is an acronym for GNU Public License. It is the standard license WordPress uses for Open Source licensing https://wordpress.org/about/license/. The GPL is a ‘copyleft’ license https://www.gnu.org/licenses/copyleft.en.html. This means that derivative work can only be distributed under the same license terms. This is in distinction to permissive free software licenses, of which the BSD license and the MIT License are widely used examples. compatible. This applies to images as well as the code in the theme.

Plugins/Functionality/Presentation

Never require any pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. A theme needs to work out of the box without having to rely on plugins or external resources. This can mean third-party JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. or even fonts. This is often a gray line for many because there are times when settings, options, or even some content needs to remain when a theme is switched. This will always on a case by case basis.

Closing remarks

As you can see some of the documentation is making progress but we still need more examples. As we are getting closer and closer to the release of 4.4 and the introduction of the REST API we will need to gather a few more examples. Our theme does reside in the Theme Review repo: https://github.com/WPTRT/doingitwrong

If you would like to add more, remember pull requests are more than happily accepted.