What Are WordPress Shortcodes and How to Use Them?

If you’ve been using WordPress for a while, you’ve probably heard about shortcodes. But what exactly are they, and how can you use them to make your website better? In this blog, I’ll explain what shortcodes are, how they work, and how you can create and use them based on my own experience.

What Are WordPress Shortcodes?

Shortcodes are small pieces of code that you can insert into your WordPress posts, pages, or widgets. They make it easy to add complex features to your site without writing a lot of code. Think of them as shortcuts for adding functionality. For example, instead of embedding a long piece of code to display a contact form, you can simply use a shortcode like

[contact-form-1 id="123" title="Contact form 1"].

Creating Custom Shortcodes

Sometimes, the built-in shortcodes aren’t enough, and you need something custom. Creating your own shortcodes is straightforward. Here’s how you can do it:

Step 1: Add Code to Your Theme’s Functions.php File

First, you need to add some code to your theme’s functions.php file. This file is found in your theme folder (wp-content/themes/your-theme/functions.php).

Step 2: Define the Shortcode Function

Create a function that will define what the shortcode does. For example, let’s create a simple shortcode that displays a message.

function custom_hello_shortcode() {
return "Hello, welcome to my website!";
}

Step 3: Register the Shortcode

Next, register the shortcode with WordPress using the add_shortcode function.

add_shortcode('hello', 'custom_hello_shortcode');

Step 4: Use the Shortcode

Now you can use your custom shortcode [hello] anywhere in your posts, pages, or widgets

When you add this shortcode to your content, WordPress will replace it with the message “Hello, welcome to my website!”

Examples of Custom Shortcodes

Let me share a few examples based on my experience:

Displaying Current Year

This shortcode will display the current year. It’s useful for updating the copyright year automatically.

function current_year_shortcode() {
return date('Y');
}

add_shortcode('current_year', 'current_year_shortcode');

Use it like this:

© [current_year] Your Company Name

Adding a Button

This shortcode adds a styled button to your content.

function custom_button_shortcode($atts) {
$atts = shortcode_atts(
array(
'url' => '#',
'text' => 'Click Here',
), 
$atts, 
'button'
);

return '<a href="' . esc_attr($atts['url']) . '" class="custom-button">' . esc_html($atts['text']) . '</a>';
}

add_shortcode('button', 'custom_button_shortcode');

Use it like this:

[button url="https://example.com" text="Visit Us"]

Shortcodes are a powerful feature in WordPress that can save you a lot of time and effort. They allow you to add complex functionalities to your site with just a small piece of code. Whether you’re using built-in shortcodes or creating your own, they make your WordPress experience much smoother and more efficient. Give them a try, and see how they can simplify your web development process!

Happy coding!