{"id":33069,"date":"2022-03-10T07:00:44","date_gmt":"2022-03-10T15:00:44","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=33069"},"modified":"2026-08-26T11:56:47","modified_gmt":"2026-08-26T18:56:47","slug":"wordpress-shortcodes-101","status":"publish","type":"post","link":"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/","title":{"rendered":"An Introduction to WordPress Shortcodes (With Examples)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Need the same gallery or signup form on 20 pages? Don\u2019t paste the underlying code 20 times. A WordPress shortcode is a square-bracket tag that WordPress replaces with dynamic content when the page renders: think image galleries, contact forms, and playlists, repeated across as many posts and pages as you need.<\/p>\n\n\n\n\n\n<h2 id=\"h-wordpress-shortcodes-101\" class=\"wp-block-heading\"><b>What are WordPress shortcodes?<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A WordPress shortcode is a small tag wrapped in square brackets, like [gallery], that WordPress replaces with dynamic content \u2014 an image gallery, a video player, a form \u2014 when the page renders. WordPress\u2019s <a href=\"https:\/\/developer.wordpress.org\/plugins\/shortcodes\/\" target=\"_blank\" rel=\"noopener noreferrer\">Plugin Handbook<\/a> calls shortcodes \u201cmacros\u201d: no markup is added to the post content itself.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A shortcode looks like this, wrapped within two square brackets:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[exampleshortcode]<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.dreamhost.com\/blog\/what-is-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">Shortcodes were introduced in 2008<\/a> to make more complex posts and pages easier to create. They provide a simple way to insert and load dynamic content elements on your site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For instance, you may want to <a href=\"https:\/\/www.dreamhost.com\/blog\/guide-to-wp-front-page\/\" target=\"_blank\" rel=\"noopener noreferrer\">customize your WordPress front page<\/a> by embedding a Google map to show your retail location. You might even add an introductory video using a shortcode:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1.jpg.webp\" alt=\"WordPress video shortcode\" class=\"wp-image-33076 lazyload\" width=\"900\" height=\"294\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1.jpg.webp 900w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes-1-300x98.jpg 300w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes-1-768x251.jpg 768w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-600x196.jpg.webp 600w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-730x238.jpg.webp 730w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-784x256.jpg.webp 784w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-877x286.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/294;\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Website owners typically use shortcodes in the body of posts, pages, and custom post types. Shortcodes also work in widget areas, and theme developers can render them inside template files with the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/do_shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">do_shortcode()<\/a> function. Fortunately, as the Gutenberg block editor has evolved, using shortcodes has become even more user-friendly. We\u2019ll cover this later in the article.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-why-you-might-consider-using-wordpress-shortcodes\" class=\"wp-block-heading\"><b>Why you might consider using WordPress shortcodes<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are a variety of reasons why you may wish to use WordPress shortcodes. For starters, they are often easier to add to your page than hand-coding the same feature: the 9-character [gallery] tag outputs a complete thumbnail gallery that would take far more markup to build yourself.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Furthermore, shortcodes can keep your content clean and organized. They don\u2019t take up as much space in your overall post\u2019s HTML. This can help you identify errors easily when using the code editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Shortcodes are also reusable. You won\u2019t need to manually add the same features, such as a Call to Action (CTA) or social media buttons, to each post. Instead, you can just paste your shortcode.<\/p>\n\n\n\n<h2 id=\"h-wordpress-shortcodes-101-4-ways-to-use-these-snippets\" class=\"wp-block-heading\"><b>How to use shortcodes in WordPress (4 ways)<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are two basic types of shortcodes that you ought to familiarize yourself with: self-closing and enclosing. Self-closing ones stand on their own and don\u2019t need closing tags:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[myshortcode]<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Enclosing shortcodes wrap around a specific piece of content to modify it. Therefore, enclosing shortcodes must be closed manually. They typically look like this:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[myshortcode] content [\/myshortcode]<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You can also change the properties of shortcodes with different attributes. These will affect how the element displays on the front end.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, you could change the size of a gallery shortcode by adding a size attribute:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[gallery id=\"123\" size=\"medium\"]<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If you look through the <a href=\"https:\/\/wordpress.org\/plugins\/search\/shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Plugin Directory<\/a>, you\u2019ll find that there are many options to use shortcodes on your WordPress site. Here are four different options!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-wordpress-default-shortcodes\"><b>1. Default WordPress shortcodes: list with examples<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress comes with six <a href=\"https:\/\/developer.wordpress.org\/plugins\/shortcodes\/#built-in-shortcodes\" target=\"_blank\" rel=\"noopener noreferrer\">basic built-in shortcodes<\/a>. These snippets enable you to embed additional media directly into your posts. Here\u2019s the complete list: what each one does, its syntax as you\u2019d type it, an attribute variation, and what renders.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><b>[caption]]:<\/b> Wraps captions around content. It\u2019s an enclosing shortcode, so it needs a closing tag, and it <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/img_caption_shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">supports align and width attributes<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[[caption]&lt;img src=\"storefront.jpg\" alt=\"Our storefront\" \/&gt; Our new storefront[\/caption]\n[caption align=\"aligncenter\" width=\"300\"]&lt;img src=\"storefront.jpg\" alt=\"Our storefront\" \/&gt; Our new storefront[\/caption]<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The result: the image displays with the caption text beneath it; the second version centers it and constrains the caption to 300 pixels wide.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><b>[gallery]:<\/b> Shows image galleries. On its own, it builds a gallery from the images attached to the post; add IDs and a size to control it:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[gallery]\n[gallery ids=\"1,2,3\" size=\"medium\"]<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The result: a thumbnail grid \u2014 here, the three images with those media library IDs at medium size.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><b>[audio]:<\/b> Embeds and plays audio files. Point it at a file URL, per <a href=\"https:\/\/wordpress.org\/documentation\/article\/audio-shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress\u2019s audio shortcode documentation<\/a>, or add fallback formats and looping:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[audio src=\"audio-source.mp3\"]\n[audio mp3=\"source.mp3\" ogg=\"source.ogg\" loop=\"on\"]<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The result: WordPress\u2019s built-in audio player. Leave off the attributes and it plays the first audio file attached to the post.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><b>[video]:<\/b> Embeds and plays video files. It <a href=\"https:\/\/wordpress.org\/documentation\/article\/video-shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">supports extras<\/a> like loop, autoplay, and a poster image shown before playback:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[video src=\"video-source.mp4\"]\n[video src=\"video-source.mp4\" poster=\"preview.jpg\" loop=\"on\"]<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The result: a video player at the file\u2019s own dimensions, displaying the poster image until someone presses play.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><b>[playlist]:<\/b> Displays a collection of audio or video files attached to the post. Use the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_playlist_shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">ids and type attributes<\/a> to pick specific files or switch to video:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[playlist]\n[playlist type=\"video\" ids=\"10,11,12\"]<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The result: a player with a track list of the chosen media files.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><b>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The result: the embedded player, capped at the maximum (not fixed) size you set.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also enable a variety of additional shortcodes through the <a href=\"https:\/\/jetpack.com\/support\/shortcode-embeds\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jetpack plugin<\/a>.<\/p>\n\n\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tThe Best WordPress Plugins in 2026 (According to Site Owners)\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www.dreamhost.com\/blog\/best-wordpress-plugins\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">First, ensure that the Jetpack module is enabled by clicking on <i>Jetpack <\/i>in your WordPress dashboard:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"396\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15.jpg.webp\" alt=\"Jetpack\" class=\"wp-image-33089 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15.jpg.webp 900w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes15-300x132.jpg 300w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes15-768x338.jpg 768w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-600x264.jpg.webp 600w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-730x321.jpg.webp 730w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-784x345.jpg.webp 784w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-877x386.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/396;\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Then, select <i>Settings<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"250\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9.jpg.webp\" alt=\"Jetpack\" class=\"wp-image-33083 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9.jpg.webp 900w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes9-300x83.jpg 300w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes9-768x213.jpg 768w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-600x167.jpg.webp 600w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-730x203.jpg.webp 730w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-784x218.jpg.webp 784w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-877x244.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/250;\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Head to the <i>Writing <\/i>tab, scroll down to the <i>Composing <\/i>section, and activate <i>Compose using shortcodes to embed media from popular sites<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"321\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12.jpg.webp\" alt=\"Jetpack\" class=\"wp-image-33086 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12.jpg.webp 900w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes12-300x107.jpg 300w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes12-768x274.jpg 768w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-600x214.jpg.webp 600w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-730x260.jpg.webp 730w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-784x280.jpg.webp 784w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-877x313.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/321;\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Once you have toggled this option, you can use the [tweet] shortcode to embed a specific post from X. Jetpack still calls the shortcode [tweet], and the steps haven\u2019t changed since the screenshots below were captured under the platform\u2019s old Twitter branding. Just copy the URL of the post and paste it within your shortcode brackets:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"230\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14.jpg.webp\" alt=\"Tweet shortcode\" class=\"wp-image-33088 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14.jpg.webp 900w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes14-300x77.jpg 300w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes14-768x196.jpg 768w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-600x153.jpg.webp 600w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-730x187.jpg.webp 730w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-784x200.jpg.webp 784w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-877x224.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/230;\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">This will embed the linked post into your page. The result will look like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"750\" height=\"798\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes7.jpg.webp\" alt=\"WordPress Twitter shortcode\" class=\"wp-image-33081 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes7.jpg.webp 750w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes7-282x300.jpg 282w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes7-600x638.jpg.webp 600w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes7-730x777.jpg.webp 730w\" data-sizes=\"(max-width: 750px) 100vw, 750px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 750px; --smush-placeholder-aspect-ratio: 750\/798;\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Jetpack\u2019s additional shortcodes can embed a host of other media into your content. Some of the most useful, by category:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Video and audio:<\/b> [youtube], [vimeo], [ted], and [twitchtv] embed video players; [spotify], [soundcloud], and [bandcamp] embed playlists and tracks (useful for podcast show notes).<\/li>\n\n\n\n<li><b>Images and documents:<\/b> [instagram] embeds a photo, [googleapps] embeds Google Docs, and [slideshare] embeds a slideshow.<\/li>\n\n\n\n<li><b>Forms, posts, and more:<\/b> [contact-form] shows a Jetpack contact form, [recipe] embeds a recipe, [archives] displays an index of your blog posts, and [googlemaps] embeds a map.<\/li>\n\n\n<\/ul>\n\n<h3 class=\"wp-block-heading\" id=\"h-2-gutenberg-shortcodes\"><b>2. Gutenberg shortcodes<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-full-site-editing\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg blocks<\/a> make adding dynamic content into your posts even easier. The Block Editor enables you to change individual sections easily and apply block-specific settings and formatting rules without using plugins.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-full-site-editing\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg editor has evolved<\/a> to make it even easier to put together WordPress posts and pages, and it offers a user-friendly way to insert shortcodes. Our advice: use a dedicated block whenever WordPress or your plugin provides one, and reach for the Shortcode block when a plugin feature, custom callback, or piece of legacy content has no equivalent block. Blocks give you better visual controls; shortcodes are more portable, but they can end up orphaned if the plugin behind them goes away.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, you could use a Gutenberg block to embed the post from our previous example instead of a shortcode. You only need to click on the <i>+ <\/i>icon and select the <i>Twitter <\/i>block:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"377\" height=\"356\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes4.jpg.webp\" alt=\"Twitter Block in WordPress\" class=\"wp-image-33079 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes4.jpg.webp 377w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes4-300x283.jpg 300w\" data-sizes=\"(max-width: 377px) 100vw, 377px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 377px; --smush-placeholder-aspect-ratio: 377\/356;\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">This method lets you paste the post\u2019s URL directly into the block without writing the shortcode in square brackets.<\/p>\n\n\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tYour Complete Guide to WordPress Full-Site Editing\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-full-site-editing\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Furthermore, the Gutenberg Block Editor features a <i>Shortcode <\/i>block. It enables you to manage your snippets in the visual editor without writing the code directly in HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gutenberg also lets you create synced patterns (<a href=\"https:\/\/wordpress.org\/documentation\/article\/reusable-blocks\/\" target=\"_blank\" rel=\"noopener noreferrer\">the WordPress 6.3 replacement for reusable blocks<\/a>), which can come in handy for using the same content snippets in your posts. We can demonstrate this concept with a social media CTA that you might use at the end of posts that you may write on your site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can start by selecting the <i>Shortcode<\/i> block from the pop-up:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"265\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11.jpg.webp\" alt=\"Gutenberg Shortcode block\" class=\"wp-image-33085 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11.jpg.webp 900w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes11-300x88.jpg 300w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes11-768x226.jpg 768w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-600x177.jpg.webp 600w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-730x215.jpg.webp 730w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-784x231.jpg.webp 784w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-877x258.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/265;\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Then, once you\u2019ve added your CTA snippet, click on the three dots for an options menu and select <i>Create pattern<\/i>. Give the pattern a name, turn on the <i>Synced<\/i> toggle, and click <i>Create<\/i>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Your snippet is saved as a synced pattern, available from the Block Inserter\u2019s <i>Synced Patterns<\/i> section (the crossing-rhombus icon) anywhere on your site, including posts, pages, and widget areas. Edit the pattern once from <i>Options<\/i> &gt; <i>Manage Patterns<\/i>, and the change appears everywhere it\u2019s used.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"h-3-plugin-shortcodes\"><b>3. Plugin shortcodes<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Different WordPress plugins also come with their own shortcodes. Dedicated shortcode-library plugins bundle dozens of ready-made content elements: <a href=\"https:\/\/wordpress.org\/plugins\/shortcodes-ultimate\/\" target=\"_blank\" rel=\"noopener noreferrer\">Shortcodes Ultimate<\/a>, for example, includes 50+ shortcodes for tabs, accordions, buttons, columns, sliders, and post lists, and works in the Block Editor, Classic Editor, widgets, and template files.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Other plugins provide shortcodes for one specific job. For instance, you can get ready-made shortcodes for signup forms from the <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/participants-database\/\" target=\"_blank\" rel=\"noopener noreferrer\">Participants Database<\/a> plugin. You could simply type [pdb_signup] to insert a signup form into a post:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1000\" height=\"228\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6.jpg.webp\" alt=\"Shortcode form Block in WordPress\" class=\"wp-image-33080 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6.jpg.webp 1000w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes6-300x68.jpg 300w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes6-768x175.jpg 768w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-600x137.jpg.webp 600w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-730x166.jpg.webp 730w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-784x179.jpg.webp 784w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-877x200.jpg.webp 877w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1000px; --smush-placeholder-aspect-ratio: 1000\/228;\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The form will then display on the front end:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"687\" height=\"436\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes10.jpg.webp\" alt=\"creating a web form in WordPress\" class=\"wp-image-33084 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes10.jpg.webp 687w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes10-300x190.jpg 300w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes10-600x381.jpg.webp 600w\" data-sizes=\"(max-width: 687px) 100vw, 687px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 687px; --smush-placeholder-aspect-ratio: 687\/436;\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">If this interests you, you can read more about <a href=\"https:\/\/www.dreamhost.com\/blog\/best-wordpress-plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">other WordPress plugins<\/a> that can enhance your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, remember to keep your WordPress shortcode plugins updated. Doing this can ensure that your site runs <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-site-speed\/\" target=\"_blank\" rel=\"noopener noreferrer\">as fast as possible<\/a> and isn\u2019t vulnerable to security threats.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-troubleshooting-orphaned-shortcodes\"><b>Troubleshooting: when a shortcode shows up as plain text<\/b><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">One caveat with plugin shortcodes: they only render while the plugin that registers them is active. Deactivate or delete the plugin, and WordPress has no handler for the tag, so visitors see the raw bracketed text right on the live page. The <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/do_shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress developer reference<\/a> flags exactly this: when no shortcode tags are defined, \u201cthe shortcode will still show up in the post or content.\u201d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To clean up these orphaned shortcodes, search your content for the leftover tag (the search box on your dashboard\u2019s <i>Posts<\/i> screen will find it), then either remove the tags or reactivate the plugin that provided them. If you\u2019re switching from one plugin to another, remember to swap the old tags for the new plugin\u2019s shortcodes, too.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"h-4-custom-shortcodes\"><b>4. Custom shortcodes<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you need even more functionality from shortcodes, it is possible to create custom ones. They can be valuable tools for developers looking to reduce time spent on repetitive coding.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You should note that creating custom shortcodes requires some technical knowledge. If you don\u2019t feel confident with coding, you may want to stick to one of the other strategies we mentioned. An AI assistant can also draft the add_shortcode() boilerplate for you \u2014 just review and test the code on a staging site before it goes anywhere near your live one.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to try this method, consider using a <a href=\"https:\/\/generatewp.com\/shortcodes\/\" target=\"_blank\" rel=\"noopener noreferrer\">generator such as GenerateWP<\/a> to assist with formatting your code from scratch. You may fill out different attribute fields to modify the element\u2019s appearance to your liking.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can then implement these shortcodes using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">add_shortcode function<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">add_shortcode( string $tag, callable $callback )<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s what that looks like as a complete, working example, adapted from the add_shortcode() documentation. It registers a [dh_greeting] shortcode, sets a default for its one attribute with shortcode_atts(), and returns the output:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">add_shortcode( 'dh_greeting', 'dh_greeting_func' );\n\nfunction dh_greeting_func( $atts ) {\n    $atts = shortcode_atts(\n        array(\n            'name' => 'friend',\n        ),\n        $atts,\n        'dh_greeting'\n    );\n\n    return 'Hello, ' . esc_html( $atts['name'] ) . '!';\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now [dh_greeting name=&#8221;Ana&#8221;] prints \u201cHello, Ana!\u201d on the page, and a bare [dh_greeting] falls back to \u201cHello, friend!\u201d Two rules from the WordPress documentation keep custom shortcodes healthy: always <i>return<\/i> your output instead of echoing it, and prefix your shortcode name (that\u2019s the dh_ here) to avoid collisions with other plugins. Add the code to a child theme\u2019s functions.php file or a code snippets plugin so it survives theme updates.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, if you don\u2019t feel comfortable creating a custom shortcode from scratch, there is another way! You can contact our <a href=\"https:\/\/www.dreamhost.com\/pro-services\/development\/\" target=\"_blank\" rel=\"noopener noreferrer\">custom web development<\/a> services team, and we can assist you:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1878\" height=\"742\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3.jpg.webp\" alt=\"DreamHost Pro Services - WordPress website design\" class=\"wp-image-33078 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3.jpg.webp 1878w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-300x119.jpg 300w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-1024x405.jpg 1024w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-768x303.jpg 768w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-1536x607.jpg 1536w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-600x237.jpg.webp 600w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1200x474.jpg.webp 1200w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-730x288.jpg.webp 730w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1460x577.jpg.webp 1460w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-784x310.jpg.webp 784w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1568x620.jpg.webp 1568w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-877x347.jpg.webp 877w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1754x693.jpg.webp 1754w\" data-sizes=\"(max-width: 1878px) 100vw, 1878px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1878px; --smush-placeholder-aspect-ratio: 1878\/742;\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Using DreamHost Pro Services, you just need to fill out a web development request. We will ask you a few simple questions about your website and requirements. Then, we can get to work on implementing your changes on a staged version of your site. Once you have approved the final adjustments, we can apply the new code to your live website!<\/p>\n\n<h2 id=\"h-faqs-about-wordpress-shortcodes\" class=\"wp-block-heading\"><b>FAQs about WordPress shortcodes<\/b><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-faq-shortcode-plain-text\"><b>Why is my shortcode showing as plain text instead of working?<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The plugin that registers the shortcode is probably deactivated or deleted. WordPress only replaces a shortcode that has an active handler; without one, visitors see the raw bracketed tag. Reactivate the plugin, or remove the leftover tags from your content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-faq-shortcode-vs-block\"><b>What\u2019s the difference between a shortcode and a block?<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A block is a visual element you add in the WordPress editor, while a shortcode is a text macro that WordPress swaps for dynamic content when the page renders. Blocks now handle most embeds, but many plugins still deliver their features as shortcodes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-faq-find-plugin-shortcode\"><b>How do I find a plugin\u2019s shortcode?<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Check the plugin\u2019s documentation or its settings pages in your WordPress dashboard \u2014 most shortcode-based plugins list their tags and attributes there. Then paste the tag into a Shortcode block wherever you want the output to appear.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-faq-shortcodes-still-used\"><b>Are shortcodes still used in WordPress?<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. WordPress still ships six built-in shortcodes, the add_shortcode() function remains fully supported, and many popular plugins deliver features as shortcodes. Blocks cover most everyday embeds, but shortcodes remain the standard way to drop plugin output and custom dynamic content into your pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-faq-shortcodes-widgets-templates\"><b>Can I use shortcodes in widgets or theme files?<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. Shortcodes work in widget areas, and developers can render them inside theme template files by passing the tag to WordPress\u2019s do_shortcode() function.<\/p>\n\n\n\n<h2 id=\"h-use-wordpress-shortcodes-to-enhance-your-content\" class=\"wp-block-heading\"><b>Use WordPress shortcodes to enhance your content<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Shortcodes can add reusable dynamic features to your site without cluttering the editor, though blocks are usually the better choice when an equivalent block exists.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this post, we have outlined four methods to use WordPress shortcodes on your site:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>WordPress default shortcodes<\/li>\n\n\n\n<li>Gutenberg shortcodes<\/li>\n\n\n\n<li>Plugin shortcodes<\/li>\n\n\n\n<li>Custom shortcodes<\/li>\n\n\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">If you feel like you don\u2019t have the technical expertise or the time to write shortcodes or Blocks, don\u2019t worry! You can check out our <a href=\"https:\/\/www.dreamhost.com\/pro-services\/development\/\" target=\"_blank\" rel=\"noopener noreferrer\">Website Development Pro Services<\/a> to learn how we can customize your site with high-quality code.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"1024\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/dreamhost-custom-web-development-services-dreamops-cd7b4f51f943fd3a050825fe.webp\" alt=\"DreamHost custom website development services\" class=\"wp-image-86863 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/dreamhost-custom-web-development-services-dreamops-cd7b4f51f943fd3a050825fe.webp 1024w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/dreamhost-custom-web-development-services-dreamops-cd7b4f51f943fd3a050825fe-300x300.webp 300w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/dreamhost-custom-web-development-services-dreamops-cd7b4f51f943fd3a050825fe-150x150.webp 150w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/dreamhost-custom-web-development-services-dreamops-cd7b4f51f943fd3a050825fe-768x768.webp 768w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/dreamhost-custom-web-development-services-dreamops-cd7b4f51f943fd3a050825fe-600x600.webp 600w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/dreamhost-custom-web-development-services-dreamops-cd7b4f51f943fd3a050825fe-730x730.webp 730w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/dreamhost-custom-web-development-services-dreamops-cd7b4f51f943fd3a050825fe-784x784.webp 784w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/dreamhost-custom-web-development-services-dreamops-cd7b4f51f943fd3a050825fe-877x877.webp 877w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/1024;\" \/><\/figure>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      You Dream It, We Code It\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Tap into 20+ years of coding expertise when you opt for our Web Development service. Just let us know what you want for your site \u2014 we take it from there.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pro-services\/development\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Learn More                    <\/a>\n\n  <\/div>\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Need the same gallery or signup form on 20 pages? Don\u2019t paste the underlying code 20 times. A WordPress shortcode is a square-bracket tag that WordPress replaces with dynamic content when the page renders: think image galleries, contact forms, and playlists, repeated across as many posts and pages as you need. What are WordPress shortcodes? [&hellip;]<\/p>\n","protected":false},"author":1060,"featured_media":86862,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_opengraph-title":"WordPress Shortcode Examples & How They Work - DreamHost","_yoast_wpseo_opengraph-description":"WordPress shortcode examples show how bracket tags like [gallery] add dynamic content \u2014 galleries, forms, playlists \u2014 to any page without repeating code.","_yoast_wpseo_twitter-title":"WordPress Shortcode Examples & How They Work - DreamHost","_yoast_wpseo_twitter-description":"WordPress shortcode examples show how bracket tags like [gallery] add dynamic content \u2014 galleries, forms, playlists \u2014 to any page without repeating code.","toc_headlines":"[[\"h-wordpress-shortcodes-101\",\"What are WordPress shortcodes?\"],[\"h-why-you-might-consider-using-wordpress-shortcodes\",\"Why you might consider using WordPress shortcodes\"],[\"h-wordpress-shortcodes-101-4-ways-to-use-these-snippets\",\"How to use shortcodes in WordPress (4 ways)\"],[\"h-faqs-about-wordpress-shortcodes\",\"FAQs about WordPress shortcodes\"],[\"h-use-wordpress-shortcodes-to-enhance-your-content\",\"Use WordPress shortcodes to enhance your content\"]]","hide_toc":false,"show_updated_at":"1","footnotes":""},"categories":[6406,13119,696],"tags":[],"class_list":["post-33069","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dreampress","category-getting-started","category-wordpress"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>WordPress Shortcode Examples &amp; How They Work - DreamHost<\/title>\n<meta name=\"description\" content=\"WordPress shortcode examples show how bracket tags like [gallery] add dynamic content \u2014 galleries, forms, playlists \u2014 to any page without repeating code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Shortcode Examples &amp; How They Work - DreamHost\" \/>\n<meta property=\"og:description\" content=\"WordPress shortcode examples show how bracket tags like [gallery] add dynamic content \u2014 galleries, forms, playlists \u2014 to any page without repeating code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-10T15:00:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-26T18:56:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes-social.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian Glassman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"WordPress Shortcode Examples &amp; How They Work - DreamHost\" \/>\n<meta name=\"twitter:description\" content=\"WordPress shortcode examples show how bracket tags like [gallery] add dynamic content \u2014 galleries, forms, playlists \u2014 to any page without repeating code.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes-social.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Glassman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress Shortcode Examples & How They Work - DreamHost","description":"WordPress shortcode examples show how bracket tags like [gallery] add dynamic content \u2014 galleries, forms, playlists \u2014 to any page without repeating code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/","og_locale":"en_US","og_type":"article","og_title":"WordPress Shortcode Examples & How They Work - DreamHost","og_description":"WordPress shortcode examples show how bracket tags like [gallery] add dynamic content \u2014 galleries, forms, playlists \u2014 to any page without repeating code.","og_url":"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-03-10T15:00:44+00:00","article_modified_time":"2026-08-26T18:56:47+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes-social.jpeg","type":"image\/jpeg"}],"author":"Brian Glassman","twitter_card":"summary_large_image","twitter_title":"WordPress Shortcode Examples & How They Work - DreamHost","twitter_description":"WordPress shortcode examples show how bracket tags like [gallery] add dynamic content \u2014 galleries, forms, playlists \u2014 to any page without repeating code.","twitter_image":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes-social.jpeg","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Brian Glassman","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/#article","isPartOf":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/"},"author":{"name":"Brian Glassman","@id":"https:\/\/www.dreamhost.com\/blog\/#\/schema\/person\/86bb3dc104c3ca5e94976bbc9f54dd6e"},"headline":"An Introduction to WordPress Shortcodes (With Examples)","datePublished":"2022-03-10T15:00:44+00:00","dateModified":"2026-08-26T18:56:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/"},"wordCount":2297,"publisher":{"@id":"https:\/\/www.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/blog-hero-wordpress-shortcodes-101-dreamops-9577c25a082be19838a7edfc.webp","articleSection":["DreamPress","Getting Started","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/","url":"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/","name":"WordPress Shortcode Examples & How They Work - DreamHost","isPartOf":{"@id":"https:\/\/www.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/#primaryimage"},"image":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/blog-hero-wordpress-shortcodes-101-dreamops-9577c25a082be19838a7edfc.webp","datePublished":"2022-03-10T15:00:44+00:00","dateModified":"2026-08-26T18:56:47+00:00","description":"WordPress shortcode examples show how bracket tags like [gallery] add dynamic content \u2014 galleries, forms, playlists \u2014 to any page without repeating code.","breadcrumb":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/#primaryimage","url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/blog-hero-wordpress-shortcodes-101-dreamops-9577c25a082be19838a7edfc.webp","contentUrl":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/blog-hero-wordpress-shortcodes-101-dreamops-9577c25a082be19838a7edfc.webp","width":1536,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-shortcodes-101\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dreamhost.com\/blog\/"},{"@type":"ListItem","position":2,"name":"An Introduction to WordPress Shortcodes (With Examples)"}]},{"@type":"WebSite","@id":"https:\/\/www.dreamhost.com\/blog\/#website","url":"https:\/\/www.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www.dreamhost.com\/blog\/#\/schema\/person\/86bb3dc104c3ca5e94976bbc9f54dd6e","name":"Brian Glassman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","contentUrl":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","caption":"Brian Glassman"},"sameAs":["https:\/\/www.linkedin.com\/in\/brianglassmandesign\/"],"url":"https:\/\/www.dreamhost.com\/blog\/author\/brian\/"}]}},"lang":"en","translations":{"en":33069,"es":33096,"de":52332,"pl":55006,"uk":55028,"pt":55062,"ru":55116,"it":68356,"fr":70366,"nl":70395},"pll_sync_post":{},"_links":{"self":[{"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1060"}],"version-history":[{"count":2,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33069\/revisions"}],"predecessor-version":[{"id":90364,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33069\/revisions\/90364"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/86862"}],"wp:attachment":[{"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=33069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=33069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=33069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}