<\/span><\/h1>\n\n\n\nWordPress shortcodes provide a simple way to insert dynamic content into posts, pages, widgets, and other areas of a website without repeatedly writing complex HTML or PHP code.<\/p>\n\n\n\n
A shortcode looks like a small piece of text enclosed in square brackets, such as:<\/p>\n\n\n\n
[my_shortcode]<\/code><\/pre>\n\n\n\nWhen WordPress processes the page, it detects the shortcode and replaces it with the content generated by the associated PHP function.<\/p>\n\n\n\n
In this guide, you’ll learn how to create a custom WordPress shortcode, pass attributes to it, accept content between shortcode tags, and follow security and performance best practices.<\/p>\n\n\n\n
\n\n\n\n<\/span>What Is a WordPress Shortcode?<\/span><\/h2>\n\n\n\nA WordPress shortcode is a special tag that allows users to execute predefined functionality inside WordPress content.<\/p>\n\n\n\n
For example:<\/p>\n\n\n\n
[contact_box]<\/code><\/pre>\n\n\n\ncould display:<\/p>\n\n\n\n
\nNeed help? Contact our support team today.<\/p>\n<\/blockquote>\n\n\n\n
Instead of manually entering the same HTML every time, you can simply insert the shortcode wherever you want the content to appear.<\/p>\n\n\n\n
WordPress includes several built-in shortcodes, while developers can create their own using PHP.<\/p>\n\n\n\n
\n\n\n\n<\/span>Why Use Shortcodes?<\/span><\/h2>\n\n\n\nShortcodes are useful when you want to reuse specific functionality throughout a website.<\/p>\n\n\n\n
Common applications include:<\/p>\n\n\n\n
\n- Call-to-action boxes<\/li>\n\n\n\n
- Buttons<\/li>\n\n\n\n
- Contact information<\/li>\n\n\n\n
- Product displays<\/li>\n\n\n\n
- Pricing tables<\/li>\n\n\n\n
- Custom notices<\/li>\n\n\n\n
- Download links<\/li>\n\n\n\n
- Dynamic content<\/li>\n\n\n\n
- Custom forms<\/li>\n\n\n\n
- Frequently used HTML layouts<\/li>\n\n\n\n
- Information pulled from WordPress data<\/li>\n<\/ul>\n\n\n\n
For example, instead of repeatedly adding a complex button structure, you could use:<\/p>\n\n\n\n
[hosting_button]<\/code><\/pre>\n\n\n\nThis makes content easier to manage and reuse.<\/p>\n\n\n\n
\n\n\n\n<\/span>Before Creating a Shortcode<\/span><\/h2>\n\n\n\nBefore adding custom PHP code to WordPress, create a backup of your website.<\/p>\n\n\n\n
It is also preferable to test custom code on a staging website before applying it to a production site.<\/p>\n\n\n\n
There are several places where you can add shortcode code:<\/p>\n\n\n\n
\n- A custom plugin<\/li>\n\n\n\n
- A child theme’s
functions.php<\/code><\/li>\n\n\n\n- A code snippets plugin<\/li>\n<\/ol>\n\n\n\n
For functionality that should remain available even when the theme changes, a custom plugin<\/strong> is generally the better choice.<\/p>\n\n\n\n
\n\n\n\n<\/span>Method 1: Create a Simple WordPress Shortcode<\/span><\/h1>\n\n\n\nLet’s create a basic shortcode called:<\/p>\n\n\n\n
[welcome_message]<\/code><\/pre>\n\n\n\nAdd the following PHP code to a custom plugin or your child theme’s functions.php<\/code> file:<\/p>\n\n\n\nfunction ehostpiya_welcome_message() {\n return 'Welcome to our website!';\n}\n\nadd_shortcode('welcome_message', 'ehostpiya_welcome_message');<\/code><\/pre>\n\n\n\nYou can now add this shortcode to a WordPress post or page:<\/p>\n\n\n\n
[welcome_message]<\/code><\/pre>\n\n\n\nWordPress will execute the function and display:<\/p>\n\n\n\n
Welcome to our website!<\/code><\/pre>\n\n\n\n
\n\n\n\n<\/span>Understanding add_shortcode()<\/code><\/span><\/h1>\n\n\n\nThe following line registers the shortcode:<\/p>\n\n\n\n
add_shortcode('welcome_message', 'ehostpiya_welcome_message');<\/code><\/pre>\n\n\n\nIt contains two important parameters:<\/p>\n\n\n\n
add_shortcode('shortcode_name', 'callback_function');<\/code><\/pre>\n\n\n\n<\/span>Shortcode Name<\/span><\/h3>\n\n\n\nThis is the name users enter inside square brackets:<\/p>\n\n\n\n
[welcome_message]<\/code><\/pre>\n\n\n\n<\/span>Callback Function<\/span><\/h3>\n\n\n\nThis is the PHP function WordPress calls when it finds the shortcode:<\/p>\n\n\n\n
ehostpiya_welcome_message<\/code><\/pre>\n\n\n\n
\n\n\n\n<\/span>Important: Return Instead of Echo<\/span><\/h1>\n\n\n\nOne of the most important rules when creating WordPress shortcodes is to return the output rather than echo it<\/strong>.<\/p>\n\n\n\nCorrect:<\/p>\n\n\n\n
function ehostpiya_message() {\n return 'Hello from WordPress!';\n}<\/code><\/pre>\n\n\n\nAvoid:<\/p>\n\n\n\n
function ehostpiya_message() {\n echo 'Hello from WordPress!';\n}<\/code><\/pre>\n\n\n\nShortcode callbacks are expected to return their generated content.<\/p>\n\n\n\n
Returning the output allows WordPress to place the shortcode result correctly within the page content.<\/p>\n\n\n\n
\n\n\n\n<\/span>Create a Shortcode That Outputs HTML<\/span><\/h1>\n\n\n\nShortcodes become more useful when they generate HTML.<\/p>\n\n\n\n
For example:<\/p>\n\n\n\n
function ehostpiya_notice() {\n return '<div class=\"custom-notice\">This is a custom WordPress notice.<\/div>';\n}\n\nadd_shortcode('notice', 'ehostpiya_notice');<\/code><\/pre>\n\n\n\nUse it inside your content:<\/p>\n\n\n\n
[notice]<\/code><\/pre>\n\n\n\nThe shortcode will generate:<\/p>\n\n\n\n
<div class=\"custom-notice\">This is a custom WordPress notice.<\/div><\/code><\/pre>\n\n\n\nYou can then style the .custom-notice<\/code> class with CSS.<\/p>\n\n\n\n
\n\n\n\n<\/span>Creating a Shortcode for a Button<\/span><\/h1>\n\n\n\nA common shortcode application is creating reusable buttons.<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
function ehostpiya_button() {\n return '<a href=\"https:\/\/example.com\" class=\"custom-button\">Learn More<\/a>';\n}\n\nadd_shortcode('learn_more', 'ehostpiya_button');<\/code><\/pre>\n\n\n\nUse:<\/p>\n\n\n\n
[learn_more]<\/code><\/pre>\n\n\n\nThe generated HTML will be:<\/p>\n\n\n\n
<a href=\"https:\/\/example.com\" class=\"custom-button\">Learn More<\/a><\/code><\/pre>\n\n\n\nYou could then add CSS:<\/p>\n\n\n\n
.custom-button {\n display: inline-block;\n padding: 10px 20px;\n text-decoration: none;\n border-radius: 5px;\n}<\/code><\/pre>\n\n\n\n
\n\n\n\n<\/span>How to Add Attributes to a Shortcode<\/span><\/h1>\n\n\n\nShortcodes can accept attributes, allowing users to customize the output.<\/p>\n\n\n\n
For example:<\/p>\n\n\n\n
[button text=\"Learn More\" url=\"https:\/\/example.com\"]<\/code><\/pre>\n\n\n\nCreate the shortcode with:<\/p>\n\n\n\n
function ehostpiya_button_shortcode($atts) {\n\n $atts = shortcode_atts(\n array(\n 'text' => 'Click Here',\n 'url' => '#',\n ),\n $atts,\n 'button'\n );\n\n return '<a href=\"' . esc_url($atts['url']) . '\" class=\"custom-button\">' .\n esc_html($atts['text']) .\n '<\/a>';\n}\n\nadd_shortcode('button', 'ehostpiya_button_shortcode');<\/code><\/pre>\n\n\n\nNow you can customize the button without changing the PHP code.<\/p>\n\n\n\n
For example:<\/p>\n\n\n\n
[button text=\"Get Started\" url=\"https:\/\/example.com\"]<\/code><\/pre>\n\n\n\nOr:<\/p>\n\n\n\n
[button text=\"View Plans\" url=\"https:\/\/example.com\/pricing\"]<\/code><\/pre>\n\n\n\n
\n\n\n\n<\/span>What Is shortcode_atts()<\/code>?<\/span><\/h1>\n\n\n\nThe shortcode_atts()<\/code> function provides default values for shortcode attributes.<\/p>\n\n\n\nFor example:<\/p>\n\n\n\n
$atts = shortcode_atts(\n array(\n 'text' => 'Click Here',\n 'url' => '#',\n ),\n $atts,\n 'button'\n);<\/code><\/pre>\n\n\n\nIf a user writes:<\/p>\n\n\n\n
[button]<\/code><\/pre>\n\n\n\nWordPress will use:<\/p>\n\n\n\n
text = Click Here\nurl = #<\/code><\/pre>\n\n\n\nIf the user provides attributes, those values override the defaults.<\/p>\n\n\n\n
\n\n\n\n<\/span>Always Escape Shortcode Output<\/span><\/h1>\n\n\n\n