Data escaping (output) in Wordpress - Mini Project: Build & Apply

Data escaping (output) in WordPress

📖 Scenario: You are building a simple WordPress theme template that displays user input safely on a webpage.Users can submit their name and a short message. You want to show these inputs on the page without risking security issues like cross-site scripting (XSS).

🎯 Goal: Build a WordPress PHP template snippet that outputs user-submitted $user_name and $user_message variables safely using proper WordPress escaping functions.

📋 What You'll Learn

Create two variables $user_name and $user_message with exact string values.

Add a configuration variable $max_length to limit message length.

Use WordPress escaping functions esc_html() and esc_attr() to safely output data.

Output the escaped variables inside HTML tags with proper attributes.

💡 Why This Matters

🌍 Real World

Preventing security vulnerabilities like cross-site scripting (XSS) when displaying user input in WordPress themes or plugins.

💼 Career

Essential skill for WordPress developers to ensure safe and secure output of dynamic content on websites.

1

Create user input variables

Create two PHP variables called $user_name and $user_message with these exact values: 'Alice & Bob' for $user_name and 'Hello ' for $user_message.

Wordpress

<?php

// Create variables $user_name and $user_message with exact values
# Your code here

Need a hint?

Use single quotes around the strings exactly as shown.

2

Add message length limit configuration

Add a PHP variable called $max_length and set it to the integer 50 to limit the message length.

Wordpress

alert("XSS")';

// Add $max_length variable set to 50
# Your code here

Need a hint?

Just create a variable named $max_length and assign it the number 50.

3

Escape and trim the user message

Use the PHP function mb_substr() to trim $user_message to $max_length characters, then assign it back to $user_message. Then use the WordPress function esc_html() to escape $user_message for safe HTML output.

Wordpress

alert("XSS")';
$max_length = 50;

// Trim $user_message to $max_length and escape it with esc_html()
# Your code here

Need a hint?

Use mb_substr() to cut the message, then store the escaped version in $escaped_message.

4

Output escaped user name and message in HTML

Output the escaped $user_name inside an <h2> tag using esc_html(). Output the escaped message stored in $escaped_message inside a <p> tag. Also, add the escaped user name as the title attribute of the <h2> tag using esc_attr().

Wordpress

alert("XSS")';
$max_length = 50;
$user_message = mb_substr($user_message, 0, $max_length);
$escaped_message = esc_html($user_message);

// Output escaped $user_name in  with title attribute escaped by esc_attr()
// Output $escaped_message in 
# Your code here

Need a hint?

Use esc_html() for the visible name and esc_attr() for the title attribute. Use echo to output the HTML.