Skip to content
This repository has been archived by the owner on May 23, 2021. It is now read-only.

Home

Jump to bottom
jocastaneda edited this page Dec 12, 2014 · 1 revision

Welcome to the doingitwrong wiki!

The theme is compilation of things that can be overseen or missed by the automated theme checker. It is also a small list of things to look for when doing a theme review. The list was also feedback from many in the community. The list is comprised of:

  • license issues
  • proper enqueuing
  • proper core usage
  • URIs
  • validation/sanitation
  • translation errors
  • PHP/JS errors
  • hooks/filters

Licensing

Making sure all images and bundled resources are properly attributed with proper license and copyright notices

“Copyright 1998, 1999 Terry Jones” if some versions were finished in 1998 and some were finished in 1999. If several people helped write the code, use all their names.

If you have copied code from other programs covered by the same license, copy their copyright notices too. Put all the copyright notices together, right near the top of each file. GPL how-to

Sample readme file heading:

	Copyright {Year} {Author(s)}
	Code used from {Source} Copyright {Year}
	
	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU General Public License as published by
	the Free Software Foundation, either version 2 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU General Public License for more details.

	You should have received a copy of the GNU General Public License
	along with this program.  If not, see <http://www.gnu.org/licenses/>

Scripts and styles

All script and styles are hooked and enqueued properly using best practices

Good practice:

add_action( 'wp_enqueue_scripts', 'my_theme_name_scripts' );
function my_theme_name_scripts(){
	if( get_post_format_srting() == 'gallery' ){
		// The first argument passed is the name of the script,
		// the second argument is the location of the script,
		// the third argument is an array of dependencies,
		// the fourth argument is the version of the script to enqueue,
		// the fifth argument is wheter or not to load it in the footer
		wp_enqueue_script( 'gallery-slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), '', false );
	}
	wp_enqueue_style( 'theme-style', get_stylesheet_uri() );
}

Try to avoid hard-coding things like stylesheets and scripts.

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Merriweather:400italic,400,300italic' rel='stylesheet' type='text/css'>
	<?php wp_head(); ?>
</head>

Documentation

Missing setup, how-to information about theme.

readme file
== Setting up social icons
* Create a custom menu
* Go to the Appearance > Menus page
* Create a new Menu and give it a name
* On the left hand side select "Links" and create a link to your social profile
* Click "Add to Menu"
* Save the menu
* Go to the Manage Locations tab
* Assign the menu to the "social" theme location

Sanitation, validation, escaping of inputs and outputs

Validate user inputs, sanitize before saving to database and escape as late as possible. This can be done in a variety of ways. The thing to remember is to think about the type of data being validated.

Sample:

// validating a number
if( is_int( $input ) ){
	$value = intval( $input );
} else {
	$value = 42
}
return $value;

// validating an option
$valid_options = array( 'red', 'blue', 'green', 'violet' );
if( in_array( $input, $valid_options ) ){
	$value = $input;
} else {
	$value = 'red';
}
return $value;

Escaping the output

<style>
<?php $bgimage = get_theme_mod( 'bg_image', get_template_directory_uri() . '/img/bg.png' ); ?>
body {
  background-image: url( "<?php echo esc_url( $bgimage ); ?>" );
}
</style>

Miscellaneous or unused files

Often times themes will have some files that go untouched. A good example of this would be version control files. Git and SVN will create .git or .svn folders, respectively. These files, of course, will not be used. Another scenario will be bundling a child theme. It can be a good thing but do keep in mind that it will take up space. It is a better practice to link to documentation about creating child themes.

Theme and Author URI

Author: The author URI should be the theme author's personal site or site with the author's projects. A good example would be Ansel Adams. If you visit his website you will find information about who he is and what he does as well as any of his projects.

Theme: The theme's URI is meant for the information of the theme. It cannot merely just be a demonstration site, or page, but if it is a demonstration site the content has to relate to the theme and it's features.

Translation and text domain issues

Using improper text domain or no text domain is used

The right usage in the style.css file:

/*
* Theme Name: My Theme
* Author: Theme Author
* Text Domain: my-theme
* Domain Path: /languages
*/

How to load the text domain in from the functions.php file of the theme:

function my_theme_load_theme_textdomain() {
load_theme_textdomain( 'my-theme', get_template_directory() . '/languages/' );
}
add_action( 'after_setup_theme', 'my_theme_load_theme_textdomain' );

Proper core functionality ( using core functions the right way )

Hooking and filtering, using the right template_tag(s) where applicable.

// Supporting earlier IE versions
add_action( 'wp_head', 'theme_name_action' );
function theme_name_action(){ ?>
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
<?php }
// creating a sidebar just before the footer.php file is loaded
add_action( 'get_footer', 'theme_name_add_sidebars' );
function theme_name_add_sidebars(){ ?>
<div class="widget-area">
	<?php get_sidebar( 'pre-footer' ); ?>
</div>
<?php } // this will load the sidebar-pre-footer.php file just before footer.php

Using WP_Query example

/* Create the query */
$custom_query = new WP_Query( $args );

/* The Loop */
if ( $custom_query->have_posts() ) {
	echo '<ul>';
	while ( $custom_query->have_posts() ) {
		$custom_query->the_post();
		echo '<li>' . get_the_title() . '</li>';
	}
	echo '</ul>';
} else {
	// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();

PHP/JS errors

Strict standard, undefined, index->array, fatal error, object error(s)

The following example will have a fatal error because there is no function by the name displayHeader. This same principle can be applied to JavaScript as well.

funtion display_header(){
	$title = get_bloginfo( 'name', 'display' );
	$string = "<h2>$input</h2>";
	echo $string;
}
// later on in the code
displayHeader();

Sample JavaScript

function addClass( elem, class ){
	this.className( class );
};
var elem = document.getElementByID( 'access' );
addclass( elem, 'js' );
Clone this wiki locally