Secure Your WordPress Theme

We’re just about ready to start building our theme’s template files. Before we do this, however, it’s time for a quick briefing on data validation and sanitation, an important procedure we’ll take to ensure that our theme follows best security practices.

Why Is Theme Security Important?

The following line from the WordPress Codex page on Data Validation sums it up nicely:

Untrusted data comes from many sources (users, third party sites, your own database!, …) and all of it needs to be validated both on input and output.

We have to assume that all data coming in and out of your WordPress database is unsafe, and validate and sanitize it depending on the nature of the data and the context in which it is used. This helps to prevent code and markup from becoming “live” when you try to display it on your site. For example, we don’t want HTML code entered into a text box on a settings page to actually run as real HTML within the theme files, because that could break our layout. Even worse is if that “live” code is JavaScript, or an SQL query, because then your site could be at risk for Cross-Site Scripting (XSS) attacks, or SQL Injections.

WordPress provides a number of functions that we can use to make our data safe. These functions help by:

1. Converting special characters such as single and double quotes, ampersands, and greater-than and less-than signs into their entity equivalents (", <, >, etc) so that they can’t be interpreted as code. This is known as output sanitation, or escaping.
2. Ensuring that data about to be input into your database is what you intend it to be (for example, checking that a text box actually contains safe text that is free of HTML tags). This is typically known as input validation.

During this tutorial, we’ll be mostly concerned with #1 above, sanitizing/escaping data.

Scenario #2 becomes important for themes that collect data from users, such as on a theme options page. Theme Options pages are outside of the scope of this tutorial, however.

Output Sanitation/Escaping

Our primary sanitation weapons of choice throughout this tutorial will be esc_attr(), and esc_attr_e(). We may use others at times, and I’ll point them out when we get to them.

Both of these functions weed out characters such as quotes, ampersands and greater-than and less-than signs that, when printed inside HTML attributes, could be misinterpreted as code. esc_attr() is meant for escaping code for use in PHP, while esc_attr_e() is used when we want to echo (display on the screen) the code we’re escaping.

Here’s a live example, using code that we’ll work with in our lesson on the index template.

<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'shape' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>

This code displays post titles. Even if you don’t understand everything it’s doing, notice how we use esc_attr() to wrap everything inside the “title=” attribute on the <a> tag? All data inside HTML attribute tags is assumed to be unsafe. Thus: <?php echo esc_attr( sprintf( __( 'Permalink to %s', 'book' ), the_title_attribute( 'echo=0' ) ) ); ?> could contain anything, including potentially unsafe characters. esc_attr() adds a layer of protection by converting unsafe characters into their HTML entity equivalents.

We’ll see many more examples like this as we work through the lessons.

For an in-depth overview of Data Sanitation and Validation, check out Data Validation and Sanitization With WordPress by Stephen Harris.

You’re on your way to becoming a security-conscious developer!

How To Create a WordPress Theme

This post is part of the The ThemeShaper WordPress Theme Tutorial: 2nd Edition that will show you how to create a powerful WordPress Theme from scratch. Read it from the beginning and code yourself up something awesome.

1. WordPress Theme Tutorial Introduction
2. Developing Theme Sense
3. Theme Development Tools
4. Creating a Theme HTML Structure
5. Template and Directory Structure
6. Setting Up Your Theme Functions
7. Secure Your WordPress Theme
8. The Header Template
9. The Index Template
10. The Single Post, Post Attachment, & 404 Templates
11. The Comments Template
12. The Search Template & The Page Template
13. The Archive Template
14. The Sidebar Template & The Footer Template
15. Reset-Rebuild Theme CSS & Define Your Layouts
16. Custom Background & Custom Header
17. Distributing Your WordPress Theme