WordPress shortcodes are a powerful feature that allows you to easily add complex and dynamic content to your website without having to write complex code. In this ultimate guide, we’ll cover everything you need to know about WordPress shortcodes, including how to use them, how to create your own, and some examples to get you started.
What are WordPress shortcodes?
A shortcode is a custom tag that you can use in your WordPress posts, pages, and widgets to add complex and dynamic content to your website. When you use a shortcode, WordPress will automatically replace it with the corresponding content when the page is displayed.
Shortcodes can be used to display a wide variety of content, including images, galleries, buttons, forms, and more. They are an easy way to add advanced functionality to your website without having to know how to write complex code.
To use a WordPress shortcode, simply add the shortcode tag to your post, page, or widget content. The shortcode tag should be enclosed in square brackets [ ] and should contain the name of the shortcode and any necessary attributes or parameters.
For example, the following shortcode will display an image in your post:
[image src="image.jpg" alt="My image"]The “src” attribute specifies the URL of the image, and the “alt” attribute provides a text alternative for the image.
Some shortcodes may also accept parameters, which allow you to specify additional options or customise the content displayed by the shortcode. For example, the following shortcode displays a list of posts with a specific tag:
[posts tag="news"]In this example, the “tag” parameter specifies the tag that the posts should be filtered by.
To use a shortcode in a widget, simply add the shortcode to the widget content area in the WordPress dashboard.
How to create your own WordPress shortcodes
If you want to create your own shortcodes, you can do so by adding a shortcode function to your WordPress child theme, or by using a PHP code snippets plugin.
InformationThe preferred method is to create a simple custom child theme and put your code snippets into functions.php.
To create a shortcode, you’ll need to add a shortcode callback function, then then register the shortcode using add_shortcode().
Here’s an example of a simple shortcode function that displays a message in your post or page:
function my_shortcode_hello_world() {
return 'Hello, world!';
}
add_shortcode('hello_world', 'my_shortcode_hello_world');To use this shortcode, you would add the following tag to your post or page content:
[image src="image.jpg" alt="My image" align="left" size="medium"]This would display the message “Hello, world!” on your website.
You can also pass parameters to your shortcode function to customise the content it displays. For example, the following shortcode function accepts a “name” parameter and displays a personalised message:
function my_shortcode_hello_name($atts) {
extract(shortcode_atts(array('name' => 'world'), $atts));
return "Hello, $name!";
}
add_shortcode('hello_world', 'my_shortcode_hello_name');To use this shortcode, you would add the following tag to your post or page content:
[hello_world name="John"]This would display the message “Hello, John!” on your website.
Shortcode Examples
Here are a few examples of common WordPress shortcodes that you can use on your website:
Image shortcode:
function my_shortcode_image($atts) {
extract(
shortcode_atts(
array(
'src' => '',
'alt' => '',
'align' => 'none',
),
$atts
)
);
$html = '';
if (!empty($src)) {
$html = sprintf(
'<img src="%s" alt="%s" align="%s" />',
esc_url($src),
esc_attr($alt),
esc_attr($align)
);
}
return $html;
}
add_shortcode('image', 'my_shortcode_image');Usage:
[image src="image.jpg" alt="My image" align="left"]This shortcode will display an image with the specified source, alt text and alignment.
Button shortcode:
function my_shortcode_button($atts) {
extract(
shortcode_atts(
array(
'text' => 'My Button',
'url' => '',
'color' => 'primary',
'size' => 'normal',
),
$atts
)
);
if (!empty($url)) {
$classes = array('button', $size, $color);
$html = sprintf(
'<a href="%s" class="%s">%s</a>',
esc_url($url),
esc_attr(implode(' ', $classes)),
esc_html($text)
);
}
return $html;
}
add_shortcode('button', 'my_shortcode_button');Usage:
[button text="Click here" url="http://example.com" color="secondary" size="large"]This shortcode will display a button with the specified text, URL, colour, and size.
Gallery shortcode:
function my_shortcode_gallery($atts) {
extract(
shortcode_atts(
array(
'ids' => '', // comma-separated list of image ids
'size' => 'thumbnail',
),
$atts
)
);
$image_ids = explode(',', $ids);
if (!empty($image_ids)) {
$html = '<div class="gallery">';
foreach ($image_ids as $image_id) {
$html .= sprintf(
'<img src="%s" />',
esc_url(wp_get_attachment_image_src($image_id, $size)[0])
);
}
$html .= '</div>'; // .gallery
}
return $html;
}
add_shortcode('gallery', 'my_shortcode_gallery');Usage:
[gallery ids="1,2,3" size="medium"]This shortcode will display a gallery of images with the specified IDs and size.
In conclusion
Creating a WordPress shortcode is a simple and efficient way to add custom content or functionality to your WordPress site. By using the add_shortcode function, you can create a shortcode that can be easily inserted into posts, pages, and widgets using a simple tag. You can use shortcodes to display custom information, such as lists, buttons, or forms, or to add more advanced functionality, such as image galleries or social media feeds. Whether you want to create a simple shortcode or something more complex, the process is straightforward and can be easily mastered with a little practice. By following the steps outlined in this article, you can quickly and easily create your own WordPress shortcodes and add custom content to your site.
Have fun! 👍
