An example would be for a user profile page where the URL includes the user_nicename value instead of a user_id?

Let’s walk through the process of creating a custom page URL like https://xyz.com/user/johndoe, where “johndoe” is the user’s user_nicename value. This can be particularly useful for user profile pages or custom post types.

Step 1: Add a Custom Rewrite Rule

First, we need to add a custom rewrite rule to WordPress. This rule will tell WordPress how to handle our custom URL structure. Add the following code to your theme’s functions.php file:

function add_custom_rewrite_rule() {
    add_rewrite_rule('^user/([^/]*)/?','index.php?pagename=user&user=$matches[1]', 'top');
    add_rewrite_tag('%user%', '([^&]+)');
}
add_action('init', 'add_custom_rewrite_rule', 10, 0);

function add_custom_rewrite_rule() {
    add_rewrite_rule('^user/([^/]*)/?','index.php?pagename=user&user=$matches[1]', 'top');
    add_rewrite_tag('%user%', '([^&]+)');
}
add_action('init', 'add_custom_rewrite_rule', 10, 0);

This rule tells WordPress to match URLs like /user/johndoe and internally rewrite them to index.php?pagename=user-profile&user_slug=johndoe.

Step 2: Add Custom Query Vars

Next, we need to tell WordPress about our custom query variable user_slug. Add this code to your functions.php:

function add_custom_query_vars($query_vars) {
    $query_vars[] = 'user';
    return $query_vars;
}
add_filter('query_vars', 'add_custom_query_vars');

function add_custom_query_vars($query_vars) {
    $query_vars[] = 'user';
    return $query_vars;
}
add_filter('query_vars', 'add_custom_query_vars');

Step 3: Create a Custom Page Template

Now, create a new file in your theme directory called page-user-profile.php. This will be the template for your user profile pages. Here’s a basic example:

<?php
/*
Template Name: User Profile
*/

get_header();

$user_slug = get_query_var('user');
$user = get_user_by('slug', $user_slug);

if ($user) {
    // Display user profile information
    echo '<h1>' . esc_html($user->display_name) . '</h1>';
    echo '<p>Email: ' . esc_html($user->user_email) . '</p>';
    // Add more user information as needed
} else {
    echo '<p>User not found.</p>';
}

get_footer();

<?php
/*
Template Name: User Profile
*/

get_header();

$user_slug = get_query_var('user');
$user = get_user_by('slug', $user_slug);

if ($user) {
    // Display user profile information
    echo '<h1>' . esc_html($user->display_name) . '</h1>';
    echo '<p>Email: ' . esc_html($user->user_email) . '</p>';
    // Add more user information as needed
} else {
    echo '<p>User not found.</p>';
}

get_footer();

Step 4: Create a WordPress Page

In the WordPress admin panel, create a new page and title it “User Profile”. Set the template to the new page you just uploaded, and set the permalink value to “user“. This page won’t be directly accessible, but it’s necessary for our rewrite rule to work.

Step 5: Flush Rewrite Rules

After making these changes, you need to flush the rewrite rules. You can do this by going to Settings > Permalinks in the WordPress admin panel and clicking “Save Changes” without making any changes.

Step 6: Link to User Profiles

Now you can link to user profiles using the custom URL structure. For example:

$user = get_user_by('id', 1);

$profile_url = home_url("/user/{$user->user_nicename}/");

echo '<a href="' . esc_url($profile_url) . '">View Profile</a>';

$user = get_user_by('id', 1);

$profile_url = home_url("/user/{$user->user_nicename}/");

echo '<a href="' . esc_url($profile_url) . '">View Profile</a>';

This should create a link to whichever user has a user ID value of “1”.

Conclusion

Congrats! You’ve successfully created a custom page URL structure for user profiles in WordPress. This technique can be adapted for other custom URL structures as well, such as for custom post types or other specialized pages.

Remember to always sanitize and escape data when working with user input and URLs to ensure the security of your WordPress site.

Good luck!

The Shocking Truth About WordPress Secure Form Security

Let’s kick things off with a jaw-dropping statistic: Did you know that a whopping 43% of cyberattacks target small businesses, with many of these attacks exploiting vulnerabilities in web forms?

As a WordPress developer, you’re not just building websites – you have to create a digital fortress as well. And one of the most crucial battlegrounds in this cybersecurity war is the humble web form. Those innocent-looking input fields can be a hacker’s playground if left unchecked.

By the end of this guide, you’ll be armed with the knowledge and skills to turn your WordPress forms into impenetrable barriers against malicious inputs.

Why Should You Care About Input Validation and Sanitization?

Before we dive into the nitty-gritty, let’s take a moment to understand why we’re even bothering with all this validation and sanitization stuff.

The Dynamic Duo of Form Security

• Input Validation: Think of this as your bouncer at the club door. It checks if the data entering your form meets your criteria. Is that email address actually an email address? Is that phone number made up of digits only? Validation says, “Hey you! Yeah, you with the weird input. You’re not getting in here!” This is primarily handled with JavaScript.
  
• Input Sanitization: This is like your form’s personal hygienist. Once data passes validation, sanitization cleans it up. It removes or encodes potentially harmful characters, ensuring that even if something sneaky slips through validation, it can’t wreak havoc on your system. This is primarily handled with PHP.

The Risks of Skipping Security

Ignoring form security is like leaving your front door wide open in a neighborhood full of mischievous cats. While most visitors might be harmless, eventually one curious feline to knock over your prized vase. In the digital world, these “cats” come in the form of:

• SQL Injection attacks
• Cross-Site Scripting (XSS)
• Remote Code Execution
• Data corruption

Trust me, dealing with any of these is way less fun than cleaning up after a cat party.

Setting Up Your WordPress Form-Handling Fortress

First, we need to set up our WordPress development environment.

The Tools of the Trade

1. WordPress: Make sure you’re running the latest version.
2. A code editor: I’m partial to PHPStorm or VSCode, but use whatever makes your coding heart sing.
3. A local development environment: Tools like Local by Flywheel or XAMPP are great for this.
4. WordPress Debug Mode: Turn this on in your wp-config.php file. It’s like having a super-smart sidekick pointing out your mistakes. Here’s one way.

Creating Your Custom Form-Handling Plugin

Why a plugin? Because it keeps your functionality separate from your theme, making it portable and easier to maintain. Plus, it makes you feel like a real WordPress wizard.

Here’s a basic structure to get you started:

<?php
/**
 * Plugin Name: SuperSecure Form Handler
 * Description: Handles form inputs like a boss!
 * Version: 1.0
 * Author: Your Awesome Name
 */

if (!defined('ABSPATH')) exit; // Exit if accessed directly

class SuperSecureFormHandler {
    public function __construct() {
        add_action('init', array($this, 'init'));
    }

    public function init() {
        // We'll add our form handling magic here
    }
}

new SuperSecureFormHandler();

<?php
/**
 * Plugin Name: SuperSecure Form Handler
 * Description: Handles form inputs like a boss!
 * Version: 1.0
 * Author: Your Awesome Name
 */

if (!defined('ABSPATH')) exit; // Exit if accessed directly

class SuperSecureFormHandler {
    public function __construct() {
        add_action('init', array($this, 'init'));
    }

    public function init() {
        // We'll add our form handling magic here
    }
}

new SuperSecureFormHandler();

Basic PHP Validation Techniques: Your First Line of Defense

Now that we’ve got our plugin set up, let’s start with some basic validation techniques. Think of these as the foundation of your fortress – not flashy, but absolutely essential.

The Power of PHP’s Built-in Functions

PHP comes with a treasure trove of basic validation functions. Here are some of my favorites:

// Is it an email?
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $errors[] = "Invalid email format";
}

// Is it a number?
if (!is_numeric($age)) {
    $errors[] = "Age must be a number";
}

// Is it within a range?
if ($age < 18 || $age > 99) {
    $errors[] = "Age must be between 18 and 99";
}

// Is it not empty?
if (empty($name)) {
    $errors[] = "Name is required";
}

// Is it an email?
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $errors[] = "Invalid email format";
}

// Is it a number?
if (!is_numeric($age)) {
    $errors[] = "Age must be a number";
}

// Is it within a range?
if ($age < 18 || $age > 99) {
    $errors[] = "Age must be between 18 and 99";
}

// Is it not empty?
if (empty($name)) {
    $errors[] = "Name is required";
}

Crafting Custom Validation Rules

Sometimes, the built-in functions just won’t cut it. That’s when you need to roll up your sleeves and create custom validation rules. Here’s an example of validating a username:

function validate_username($username) {
    // Only allow alphanumeric characters and underscores
    if (!preg_match('/^[a-zA-Z0-9_]+$/', $username)) {
        return false;
    }
    
    // Username should be between 4 and 20 characters
    if (strlen($username) < 4 || strlen($username) > 20) {
        return false;
    }
    
    return true;
}

function validate_username($username) {
    // Only allow alphanumeric characters and underscores
    if (!preg_match('/^[a-zA-Z0-9_]+$/', $username)) {
        return false;
    }
    
    // Username should be between 4 and 20 characters
    if (strlen($username) < 4 || strlen($username) > 20) {
        return false;
    }
    
    return true;
}

Advanced Validation Strategies: Leveling Up Your Form Game

Let’s explore some advanced techniques that’ll make your forms smoother than a fresh jar of Skippy.

Real-time Validation with AJAX

Nobody likes waiting until they hit the submit button to find out they’ve messed up. With AJAX, you can provide real-time feedback as users fill out your form. Here’s a quick example using jQuery, which comes included with WordPress:

$('#username').on('blur', function() {
    var username = $(this).val();
    $.ajax({
        url: ajaxurl, // This is defined by WordPress
        type: 'POST',
        data: {
            action: 'validate_username',
            username: username
        },
        success: function(response) {
            if (response.valid) {
                $('#username-error').hide();
            } else {
                $('#username-error').show().text(response.message);
            }
        }
    });
});

$('#username').on('blur', function() {
    var username = $(this).val();
    $.ajax({
        url: ajaxurl, // This is defined by WordPress
        type: 'POST',
        data: {
            action: 'validate_username',
            username: username
        },
        success: function(response) {
            if (response.valid) {
                $('#username-error').hide();
            } else {
                $('#username-error').show().text(response.message);
            }
        }
    });
});

And in your PHP file functions.php:

add_action('wp_ajax_validate_username', 'ajax_validate_username');
add_action('wp_ajax_nopriv_validate_username', 'ajax_validate_username');

function ajax_validate_username() {
    $username = $_POST['username'];
    $is_valid = validate_username($username);
    
    wp_send_json(array(
        'valid' => $is_valid,
        'message' => $is_valid ? '' : 'Invalid username'
    ));
}

add_action('wp_ajax_validate_username', 'ajax_validate_username');
add_action('wp_ajax_nopriv_validate_username', 'ajax_validate_username');

function ajax_validate_username() {
    $username = $_POST['username'];
    $is_valid = validate_username($username);
    
    wp_send_json(array(
        'valid' => $is_valid,
        'message' => $is_valid ? '' : 'Invalid username'
    ));
}

Handling File Uploads Like a Pro

File uploads can be a security nightmare if not handled correctly. Here’s how to validate file uploads without breaking a sweat (this code would be in your functions.php file):

function validate_file_upload($file) {
    $allowed_types = array('jpg', 'jpeg', 'png', 'gif');
    $max_size = 5 * 1024 * 1024; // 5MB
    
    $file_name = $file['name'];
    $file_size = $file['size'];
    $file_tmp = $file['tmp_name'];
    
    // Check file extension
    $ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
    if (!in_array($ext, $allowed_types)) {
        return "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    }
    
    // Check file size
    if ($file_size > $max_size) {
        return "Sorry, your file is too large. Max size is 5MB.";
    }
    
    // Check MIME type
    $finfo = finfo_open(FILEINFO_MIME_TYPE);
    $mime = finfo_file($finfo, $file_tmp);
    finfo_close($finfo);
    
    if (!in_array($mime, array('image/jpeg', 'image/png', 'image/gif'))) {
        return "File type not allowed.";
    }
    
    return true; // File is valid
}

function validate_file_upload($file) {
    $allowed_types = array('jpg', 'jpeg', 'png', 'gif');
    $max_size = 5 * 1024 * 1024; // 5MB
    
    $file_name = $file['name'];
    $file_size = $file['size'];
    $file_tmp = $file['tmp_name'];
    
    // Check file extension
    $ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
    if (!in_array($ext, $allowed_types)) {
        return "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    }
    
    // Check file size
    if ($file_size > $max_size) {
        return "Sorry, your file is too large. Max size is 5MB.";
    }
    
    // Check MIME type
    $finfo = finfo_open(FILEINFO_MIME_TYPE);
    $mime = finfo_file($finfo, $file_tmp);
    finfo_close($finfo);
    
    if (!in_array($mime, array('image/jpeg', 'image/png', 'image/gif'))) {
        return "File type not allowed.";
    }
    
    return true; // File is valid
}

Sanitization: Cleaning Up the Riffraff

Validation is great, but sometimes sneaky data can still slip through. That’s where sanitization comes in, ensuring that even if bad data gets past validation, it can’t cause any mischief.

WordPress Sanitization Functions: Your New Best Friends

WordPress comes with a bunch of handy sanitization functions. Here are some you’ll want to keep in your back pocket:

// For plain text
$clean_text = sanitize_text_field($_POST['user_input']);

// For HTML content (like from a WYSIWYG editor)
$clean_html = wp_kses_post($_POST['html_input']);

// For emails
$clean_email = sanitize_email($_POST['email_input']);

// For URLs
$clean_url = esc_url_raw($_POST['url_input']);

// For plain text
$clean_text = sanitize_text_field($_POST['user_input']);

// For HTML content (like from a WYSIWYG editor)
$clean_html = wp_kses_post($_POST['html_input']);

// For emails
$clean_email = sanitize_email($_POST['email_input']);

// For URLs
$clean_url = esc_url_raw($_POST['url_input']);

Creating Custom Sanitization Methods

Sometimes, you need a bit more control. Here’s an example of a custom sanitization method for a username:

function sanitize_username($username) {
    // Remove any HTML tags
    $clean = strip_tags($username);
    
    // Remove any non-alphanumeric characters except underscores
    $clean = preg_replace('/[^a-zA-Z0-9_]/', '', $clean);
    
    // Trim whitespace and limit to 20 characters
    return substr(trim($clean), 0, 20);
}

function sanitize_username($username) {
    // Remove any HTML tags
    $clean = strip_tags($username);
    
    // Remove any non-alphanumeric characters except underscores
    $clean = preg_replace('/[^a-zA-Z0-9_]/', '', $clean);
    
    // Trim whitespace and limit to 20 characters
    return substr(trim($clean), 0, 20);
}

Putting It All Together: A Complete Form Processing Example

Let’s bring everything we’ve learned together into a complete form processing example (in functions.php):

add_action('admin_post_nopriv_submit_user_form', 'handle_user_form');
add_action('admin_post_submit_user_form', 'handle_user_form');

function handle_user_form() {
    // Verify nonce for security
    if (!isset($_POST['user_form_nonce']) || !wp_verify_nonce($_POST['user_form_nonce'], 'submit_user_form')) {
        wp_die('Security check failed');
    }
    
    $username = isset($_POST['username']) ? $_POST['username'] : '';
    $email = isset($_POST['email']) ? $_POST['email'] : '';
    $age = isset($_POST['age']) ? $_POST['age'] : '';
    
    $errors = array();
    
    // Validate inputs
    if (!validate_username($username)) {
        $errors[] = "Invalid username";
    }
    
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = "Invalid email format";
    }
    
    if (!is_numeric($age) || $age < 18 || $age > 99) {
        $errors[] = "Age must be a number between 18 and 99";
    }
    
    // If there are errors, redirect back to the form
    if (!empty($errors)) {
        $error_string = implode('&', array_map('urlencode', $errors));
        wp_redirect(add_query_arg('errors', $error_string, wp_get_referer()));
        exit;
    }
    
    // Sanitize inputs
    $clean_username = sanitize_username($username);
    $clean_email = sanitize_email($email);
    $clean_age = absint($age);
    
    // Process the form (e.g., save to database)
    // ...
    
    // Redirect to success page
    wp_redirect(add_query_arg('success', '1', wp_get_referer()));
    exit;
}

add_action('admin_post_nopriv_submit_user_form', 'handle_user_form');
add_action('admin_post_submit_user_form', 'handle_user_form');

function handle_user_form() {
    // Verify nonce for security
    if (!isset($_POST['user_form_nonce']) || !wp_verify_nonce($_POST['user_form_nonce'], 'submit_user_form')) {
        wp_die('Security check failed');
    }
    
    $username = isset($_POST['username']) ? $_POST['username'] : '';
    $email = isset($_POST['email']) ? $_POST['email'] : '';
    $age = isset($_POST['age']) ? $_POST['age'] : '';
    
    $errors = array();
    
    // Validate inputs
    if (!validate_username($username)) {
        $errors[] = "Invalid username";
    }
    
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = "Invalid email format";
    }
    
    if (!is_numeric($age) || $age < 18 || $age > 99) {
        $errors[] = "Age must be a number between 18 and 99";
    }
    
    // If there are errors, redirect back to the form
    if (!empty($errors)) {
        $error_string = implode('&', array_map('urlencode', $errors));
        wp_redirect(add_query_arg('errors', $error_string, wp_get_referer()));
        exit;
    }
    
    // Sanitize inputs
    $clean_username = sanitize_username($username);
    $clean_email = sanitize_email($email);
    $clean_age = absint($age);
    
    // Process the form (e.g., save to database)
    // ...
    
    // Redirect to success page
    wp_redirect(add_query_arg('success', '1', wp_get_referer()));
    exit;
}

Wrapping Up: You’re Now a Form Security Ninja!

Congratulations! You’ve just leveled up your WordPress form-handling skills. By implementing these validation and sanitization techniques, you’re following best practices and protecting your users and your reputation.

The world of web security is always evolving, so stay curious and keep learning.

Happy coding, and if you have any questions, just ask!

It’s a simple function, but it has a few nuances that can drive you crazy until you figure them out. Let’s go over everything.

Syntax and Parameters

The basic syntax of the in_array() function is as follows:

bool in_array ( mixed $needle , array $haystack [, bool $strict = false ] )

Let’s break down the parameters:

1. $needle: The value to search for in the array.
2. $haystack: The array to search in.
3. $strict (optional): If set to true, the function will also check for type equality.

The function returns true if the $needle is found in the $haystack, and false otherwise.

Basic Usage

Here’s a simple example of how to use in_array():

$fruits = array("apple", "banana", "orange");
if (in_array("banana", $fruits)) {
    echo "Found banana!";
} else {
    echo "Banana not found.";
}

In this example, the output will be “Found banana!” because “banana” exists in the $fruits array.

Strict Mode

The third parameter, $strict, is particularly important when dealing with different data types. When set to true, it performs a strict comparison (===) instead of a loose comparison (==).

Consider this example:

$numbers = array(1, "2", 3);

var_dump(in_array(2, $numbers));        // Output: bool(true)
var_dump(in_array(2, $numbers, true));  // Output: bool(false)

In the first case, in_array() returns true because it finds the string “2”, which is loosely equal to the integer 2. In the second case, with strict mode enabled, it returns false because there is no integer 2 in the array.

This Gave Me Trouble

I couldn’t figure out why some searches worked, while others did not.

This works:

// single level array
$array = array(5) {
	["keywords"]=> string(5) "74.51"
	["wordCount"]=> string(1) "0"
	["linkCount"]=> string(1) "0"
	["headingCount"]=> string(1) "0"
	["mediaCount"]=> string(1) "0" }
 }
$test_result = in_array(74.51, $array) // test_result is true

This does not until you reference the sub-array (in $test_result2):

// an array exists within another array
$array = array(6) {
	["width"]=> int(30)
	["height"]=> int(30)
	["file"]=> string(31) "2022/08/icon_mountainbiking.png"
	["filesize"]=> int(1670)
	["sizes"]=> array(0) { }
	["image_meta"]=> array(12) {
		["aperture"]=> string(1) "0"
		["credit"]=> string(0) ""
		["camera"]=> string(0) ""
		["caption"]=> string(0) ""
		["created_timestamp"]=> string(1) "0"
		["copyright"]=> string(0) ""
		["focal_length"]=> string(1) "0"
		["iso"]=> string(1) "0"
		["shutter_speed"]=> string(1) "0"
		["title"]=> string(0) ""
		["orientation"]=> string(1) "0"
		["keywords"]=> array(0) { }
	}
}
$test_result = in_array(0, $array) //test_result is "false"
$test_result2 = in_array(0, $array['image_meta']) //test_result is "true"

Findings:

You must reference the element that contains the array you want to search. You cannot reference the top-level array only and expect it to traverse down through sub-arrays.

Searching in Multidimensional Arrays

While in_array() works great for one-dimensional arrays, it doesn’t directly search nested arrays. To search in multidimensional arrays, you’ll need to use it in combination with other functions or write a custom function.

Here’s an example of how you might search a multidimensional array:

function in_array_r($needle, $haystack, $strict = false) {
    foreach ($haystack as $item) {
        if (($strict ? $item === $needle : $item == $needle) || (is_array($item) && in_array_r($needle, $item, $strict))) {
            return true;
        }
    }
    return false;
}

$users = array(
    array("name" => "John", "age" => 25),
    array("name" => "Jane", "age" => 30)
);

var_dump(in_array_r("Jane", $users));  // Output: bool(true)

Performance Considerations

While in_array() is convenient, it can be slower for large arrays because it performs a linear search. For better performance with large datasets, consider using array_flip() in combination with isset():

$fruits = array("apple", "banana", "orange");
$flipped = array_flip($fruits);

if (isset($flipped["banana"])) {
    echo "Found banana!";
}

This method is generally faster for large arrays because isset() has constant time complexity.

Common Use Cases

1. Input Validation: Check if a user’s input is in a list of allowed values.
2. Filtering Data: Remove or keep elements based on whether they exist in another array.
3. Menu Highlighting: Determine if the current page is in the list of menu items.
4. Permission Checking: Verify if a user has a specific permission from a list.

Conclusion

The in_array() function is a versatile tool in PHP for checking the existence of values in arrays. Unfortunately, I’ve spent many hours trying to debug an in_array() command and wondering why it wasn’t finding a value that was in a sub-array. Seems simple, but it’s easy to forget.

Remember to consider performance implications for large datasets and explore alternative methods when dealing with multidimensional arrays.

As with any PHP function, it’s always a good idea to refer to the official PHP documentation for the most up-to-date information and additional details about in_array() and related functions.

Happy coding!

P.S. Read this if you want to set up your own PHP server in AWS.

We’ll explore how to find shortcodes from various sources such as WordPress core, themes, and plugins. Additionally, we’ll cover how to use shortcodes in both the block editor (Gutenberg) and the classic editor.

Let’s get started

Shortcodes are convenient tools in WordPress that allow you to add features or styled content to your posts or pages without needing to write complex code. Here’s how to use shortcodes created by others:

Understanding shortcodes

Shortcodes typically look like this: [shortcode_name] or [shortcode_name attribute=”value”].

They’re enclosed in square brackets and may include attributes that customize their behavior.

Finding Shortcodes

Shortcodes can come from various sources:

• WordPress core (e.g., gallery, caption)
• Your theme
• Plugins you’ve installed

To find available shortcodes:

• Check your theme’s documentation
• Look in the settings or documentation of your installed plugins
• Use a plugin like “Shortcodes Finder” to discover shortcodes on your site

To find the available shortcodes on your website, check your theme’s documentation, the settings or documentation of your installed plugins, or use a plugin like Shortcode Finder. To install it, go to plugins, click “Add New,” type “Shortcode Finder,” and search for it.

Shortcodes Finder Plugin

First, install this free plugin.

To use the plugin, go to the “Tools” admin section, and find the link called “Shortcodes Finder”.

Click “Tools”, and then “Shortcodes Finder” near the bottom.

In the Shortcodes Finder tool, go to Documentation to find everything or locate unused shortcodes.

If you click on the WordPress front end and do a search, it will display the various shortcodes you can use.

You’ll see some built-in WordPress shortcodes listed.

You have audio, caption, gallery, and others. These are some of the shortcodes built into WordPress that you can use immediately.

How to Reference a Shortcode

How do we actually use shortcodes in a WordPress site? The methods depend on how your site is setup. Your theme will most likely have either a block editor or the classic editor when editing pages and posts.

In the Block Editor (Gutenberg)

While in the area you want to place the shortcode, type “/” to bring up options.

Click on “[ / ] Shortcode”.

Enter your shortcode in the box and hit save.

In the Classic Editor

In the classic editor, you need to go to the Text section of a page (Top right corner of the text area) and manually type out the shortcode.

Simply type or paste the shortcode directly into the content area where you want it to appear and Save the page or post.

When viewed from the front end, the shortcode will be deciphered by WordPress, and the result will be displayed to the user in their browser window.

Using Shortcodes in Widgets

You can also use shortcuts in widgets. To use shortcuts in widgets, go to Appearance, then Widgets.

1. Go to Appearance > Widgets in your WordPress dashboard

2. You can see that this site already uses shortcodes in the “Sidebar 1” widget.

To add another one, click the Add button. Check the shortcode type, then type it in.

3. Click on “+” to add a new shortcode reference.

4. Click on “Custom HTML”. You might have to search for it if it’s not one of the first few.

Type or paste in the new shortcode and hit Save.

Using Shortcodes with Attributes

Many shortcodes accept attributes to customize their output. Check your theme or plugin documentation to see what’s available.

[shortcode_name attribute1="value1" attribute2="value2"]

Here’s an example using a hypothetical “slider” shortcode:

[slider id="homepage" speed="500" arrows="true"]

Here’s a gallery of specific images. The “gallery” shortcode without the IDs attribute will return all images associated with that particular page or post.

[gallery ids="123,124,125"]

Using Shortcodes in PHP code

Let’s say you’re creating a custom theme and need to insert a shortcode directly within the PHP code.

<?php echo do_shortcode('[your_shortcode]'); ?>
//simply replace "your_shortcode" with your actual shortcode and you're set.

Creating Shortcodes in PHP code

This bit is a bit more advanced, but here’s how you can create a completely new shortcode for your theme. The following code would go into your functions.php file.

The new shortcode – [last_10_posts] – will execute the code below and return the most recent 10 post titles.

function last_10_posts_shortcode() {
    // Query for the last 10 posts
    $args = array(
        'numberposts' => 10,
        'post_status' => 'publish',
    );
    $recent_posts = wp_get_recent_posts($args);

    // Start output buffering
    ob_start();

    // Check if there are any posts
    if (!empty($recent_posts)) {
        echo '<ul>';
        foreach ($recent_posts as $post) {
            echo '<li><a href="' . get_permalink($post['ID']) . '">' . esc_html($post['post_title']) . '</a></li>';
        }
        echo '</ul>';
    } else {
        echo '<p>No recent posts found.</p>';
    }

    // Get the output buffer content
    $output = ob_get_clean();

    return $output;
}

// Register the shortcode
add_shortcode('last_10_posts', 'last_10_posts_shortcode');

Troubleshooting Shortcodes

If a shortcode isn’t working:

• Double-check the syntax, including spelling and attributes
• Ensure the plugin or theme providing the shortcode is active
• Check if the shortcode requires any specific setup or configuration

Best Practices

• Don’t overuse shortcodes; they can make your content harder to read and edit
• Keep a list of the shortcodes you frequently use for easy reference
• Always preview your content to ensure shortcodes are rendering correctly

There is additional information on the WordPress site.

By following these steps, you should be able to effectively use shortcodes created by others in your WordPress site, enhancing its functionality and appearance without needing to write complex code yourself.

Good luck!

Sometimes, you may need to delete multiple objects from an S3 bucket efficiently. Here’s how we did it using S3 DeleteObjects and NodeJS.

Assumptions

1. You have some experience with Node.js and can set up your development environment.
2. You know what “S3” and “IAM” are without looking them up.
3. You understand that mass deleting files can be crazy stressful, yet satisfying.
4. You understand that you are responsible for what you do.

Do you fit these criteria? Good, let’s keep going.

Your AWS Environment Requirements

Before you can start using the AWS SDK for JavaScript to delete S3 objects, you need to make sure you have some information regarding your AWS environment:

1. AWS Account: You’ll need to have access to the AWS account.
2. IAM User: You’ll need an IAM (Identity and Access Management) user with the necessary permissions for accessing and deleting objects in the S3 bucket. You need their Access Keys.
3. S3 Bucket: You’ll need to know which S3 bucket you want to delete objects from. Make sure the IAM user has the required permissions for this bucket.

Installing and Configuring the AWS SDK for JavaScript

To use the AWS SDK for JavaScript, you need to install it and configure your AWS credentials. If you haven’t already installed Node.js and npm (Node Package Manager), make sure to do that first.

Installation

You can install the AWS SDK for JavaScript using npm:

npm install @aws-sdk/client-s3

Also, because we’re dealing with credentials, you’ll want to install dotenv-safe.

npm install @dotenv-safe

Alrighty. Let’s do this.

Configuration

There are three main files in this lesson. They could have been combined into a single file, but separating them simplifies things a bit.

After installing the SDK, you must configure it with your AWS credentials. The AWS SDK for JavaScript will use these credentials to interact with your AWS services.

You can configure the SDK credentials using the dotenv-safe library. Create a file named “.env” and update the lines below with your credentials and bucket information:

# credentials
S3_REGION = "us-east-1"
ACCESS_KEY_ID = "AKIX8S45D49DJDH7JUNG"
SECRET_ACCESS_KEY = "f6+wDCaGIadoLdxlsE3d8DsnRv02c7jgo2"

# bucket info.  Leave "S3_FOLDER" value blank if you want to start at the top level
S3_BUCKET = "yourBucketName"
S3_FOLDER = ""

In this script:

• Line 1-4: Your IAM credentials with proper permissions
• Line 7: S3 bucket name
• Line 8: Folder (S3 calls it a “Prefix”) below the bucket listed on line 7. Add a value here only if you want to limit the script to search and delete from this folder (and below).

Listing Out the S3 Objects to be Deleted

Now that your environment is set up and the AWS SDK is configured, let’s explore how to first list out the S3 objects you want to list. Once we limit the list to what we want, we can go on to the next step and delete them.

Here’s how I went about listing the files I wanted to delete:

//this file lists the objects in an S3 bucket.  Max rows is 1000.

import 'dotenv/config';
import { S3Client, ListObjectsV2Command } from "@aws-sdk/client-s3";

let client = new S3Client({
    region: process.env.S3_REGION,
    credentials: {
        accessKeyId: process.env.ACCESS_KEY_ID,
        secretAccessKey: process.env.SECRET_ACCESS_KEY
    }
});

const command = new ListObjectsV2Command({
    Bucket: process.env.S3_BUCKET,
    Prefix: process.env.S3_FOLDER,
    MaxKeys: 1000,
});

(async () => {

    const response = await client.send(command);

    // if you want to limit this list, add code here to change the "response" variable to only include files that fit

        //EXAMPLE 1 - reduce list to items between two dates
            // Define the date range for filtering
            //const startDate = new Date('2022-1-1');
            //const endDate = new Date('2023-1-1');
            // Filter the "Contents" array
            //const filteredContents = response.Contents.filter(item => {
            //    const lastModifiedDate = new Date(item.LastModified);
            //    return lastModifiedDate >= startDate && lastModifiedDate <= endDate;
            //});
            // Update the "Contents" property in the response object
            //response.Contents = filteredContents;
        //EXAMPLE 1 END

        //EXAMPLE 2 - reduce file list to items with "150" in the file name
            const filteredContents = response.Contents.filter(item => item.Key.includes("150"));
            // Update the "Contents" property in the response object
            response.Contents = filteredContents;
        //EXAMPLE 2 END

    //at this point we have the results in a single variable("response") with LastModified, Size, and StorageClass attributes included
    //console.log(response); //uncomment to see the full list

    // We just want the filename so we limit this list to get just the "Key" values
    const keys = response.Contents.map(item => item.Key).map(item => ({ Key: item }));
    console.log(keys);

})();

In this script:

• Line 3-4: Import the libraries
• Line 6-12: Create the connection to AWS and authenticate using the credentials in your .env file
• Line 14-18: Create the command that you’ll send to AWS to retrieve all S3 objects
• Line 22: Send the request to AWS and put the values returned in the “response” variable
• Line 26-37: Example code if you want to reduce the file list based on dates
• Line 39-43: Example code if you want to reduce the file list based on a text value in the file name. Comment out if not needed
• Line 49: This line extracts the file name (“Key“) value from the JavaScript object returned and puts it in a format to copy for deletion.
• Line 50: Logs the list of Keys in the console.

Run this script alone to get the full list of objects to be deleted.

Deleting Multiple Objects With S3 DeleteObject

Now that you have the file list you want to delete, let’s explore how to delete multiple S3 objects efficiently. To delete multiple objects, you can use the deleteObjects method provided by the AWS SDK for JavaScript.

Here’s a sample script to delete multiple objects from an S3 bucket:

import 'dotenv/config';
import { DeleteObjectsCommand, S3Client } from "@aws-sdk/client-s3";

let client = new S3Client({
    region: process.env.S3_REGION,
    credentials: {
        accessKeyId: process.env.ACCESS_KEY_ID,
        secretAccessKey: process.env.SECRET_ACCESS_KEY
    }
});

const command = new DeleteObjectsCommand({
    Bucket: process.env.S3_BUCKET,
    Delete: {
        Objects: [
            {Key: "my-random-image.jpg"}, // if in a directory: "directory_name/file.ext"
            {Key: "wp-content/uploads/2022/08/19185558/some-other-random-image.jpg"},
            {Key: "wp-content/uploads/2023/05/19182148/another-random-image.jpg"}
        ],
    }
});

(async () => {

    const response = await client.send(command);
    console.log(response);

})();

I’ve purposely kept this script’s object list manual since I didn’t want anyone to inadvertently delete more than they wanted. It’s easy enough to automate yourself, or you can ask me how to do it.

You’ll want to replace your list with the list I have on lines 16-18. Just specify the directory and filename.

In this script:

• Line 1-2: Import the libraries
• Line 4-10: Create the connection to AWS and authenticate using the credentials in your .env file
• Line 12-21: Create the command that you’ll send to AWS to define which S3 objects to delete
• Line 16-18: Replace these lines with the full list of the files you want deleted. You would have this list from the response that “list-all-s3-files.js” returned. Make sure it’s formatted correctly.
• Line 23-28: Send the delete request to AWS and display the response in the console.

Run this script alone and all items you listed should get deleted.

Summary

This is a quick and easy way to efficiently delete multiple S3 objects using the AWS SDK for JavaScript in your Node.js application. This can be particularly useful for automating cleanup tasks and managing your S3 resources more effectively.

Also, if you want information on how to set up your own web server in AWS, we’ve done that plenty of times too!

Good luck!