{"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":"2025-05-21T20:04:50","modified_gmt":"2025-05-22T03:04:50","slug":"wordpress-shortcodes-101","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-shortcodes-101\/","title":{"rendered":"An Introduction to WordPress Shortcodes (With Examples)"},"content":{"rendered":"\n<p>WordPress shortcodes can easily enhance your website with engaging, interactive elements that can be repeated across posts and pages. Examples include <a href=\"https:\/\/www.dreamhost.com\/blog\/monetize-your-wordpress-image-gallery\/\" target=\"_blank\" rel=\"noopener noreferrer\">image galleries<\/a>, contact forms, and playlists to make your content more useful and engaging.<\/p>\n\n\n\n<p>In this post, we&#8217;ll discuss WordPress shortcodes and why they are helpful. Then, we&#8217;ll outline four methods to start using shortcodes on your site. Let&#8217;s get started!<\/p>\n\n\n\n<h2 id=\"h-wordpress-shortcodes-101\" class=\"wp-block-heading\"><b>WordPress Shortcodes 101<\/b><\/h2>\n\n\n\n<p>WordPress shortcodes are snippets that quickly embed different files, objects, or pieces of content into your website. They are single lines of HTML code that can include interactive post elements.<\/p>\n\n\n\n<p>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><a href=\"https:\/\/www.dreamhost.com\/blog\/history-of-wordpress\/?utm_campaign=coschedule&amp;utm_source=facebook_page&amp;utm_medium=DreamHost\" 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>For instance, you may want to <a href=\"https:\/\/www.dreamhost.com\/wordpress\/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\n<pre class=\"wp-block-preformatted\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-33076 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes-1.jpg\" alt=\"WordPress video shortcode\" width=\"900\" height=\"294\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes-1-300x98.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes-1-768x251.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-600x196.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-730x238.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-784x256.jpg.webp 784w, https:\/\/www-dev.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;\" \/><\/pre>\n\n\n\n<p>Website owners typically use shortcodes in the body of posts, pages, and custom post types. 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>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 learning and writing a long piece of HTML code.<\/p>\n\n\n\n<p>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>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>WordPress Shortcodes 101 (4 Ways to Use These Snippets)<\/b><\/h2>\n\n\n\n<p>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>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>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>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\"]\u200b\u200b<\/pre>\n\n\n\n<p>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. WordPress Default Shortcodes<\/b><\/h3>\n\n\n\n<p>WordPress comes with <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.<\/p>\n\n\n\n<p>These shortcodes include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>[caption]:<\/b> Wraps captions around content.<\/li>\n\n\n\n<li><b>[gallery]:<\/b> Shows image galleries.<\/li>\n\n\n\n<li><b>[audio]:<\/b> Embeds and plays audio files.<\/li>\n\n\n\n<li><b>[video]:<\/b> Embeds and plays video files.<\/li>\n\n\n\n<li><b>[playlist]:<\/b> Displays collection of audio or video files.<\/li>\n\n\n\n<li><b>[embed]:<\/b> Wraps embedded items.<\/li>\n\n\n<\/ul>\n\n\n\n<p>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\n<p>\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-dev.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<\/p>\n\n\n\n<p>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\/uploads\/2022\/03\/wordpress-shortcodes15.jpg\" alt=\"Jetpack\" class=\"wp-image-33089 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes15-300x132.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes15-768x338.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-600x264.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-730x321.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-784x345.jpg.webp 784w, https:\/\/www-dev.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><\/div>\n\n\n<p>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\/uploads\/2022\/03\/wordpress-shortcodes9.jpg\" alt=\"Jetpack\" class=\"wp-image-33083 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes9-300x83.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes9-768x213.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-600x167.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-730x203.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-784x218.jpg.webp 784w, https:\/\/www-dev.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><\/div>\n\n\n<p>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\/uploads\/2022\/03\/wordpress-shortcodes12.jpg\" alt=\"Jetpack\" class=\"wp-image-33086 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes12-300x107.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes12-768x274.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-600x214.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-730x260.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-784x280.jpg.webp 784w, https:\/\/www-dev.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><\/div>\n\n\n<p>Once you have toggled this option, you can use the [tweet] shortcode to embed a specific tweet into your post. Just copy the URL of the tweet 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\/uploads\/2022\/03\/wordpress-shortcodes14.jpg\" alt=\"Tweet shortcode\" class=\"wp-image-33088 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes14-300x77.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes14-768x196.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-600x153.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-730x187.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-784x200.jpg.webp 784w, https:\/\/www-dev.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><\/div>\n\n\n<p>This will embed the linked tweet into your post. 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\/uploads\/2022\/03\/wordpress-shortcodes7.jpg\" alt=\"WordPress Twitter shortcode\" class=\"wp-image-33081 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes7.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes7-282x300.jpg 282w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes7-600x638.jpg.webp 600w, https:\/\/www-dev.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><\/div>\n\n\n<p>You can use these additional shortcodes to embed a host of other media into your content, including Spotify playlists, Google Docs, or recipes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-gutenberg-shortcodes\"><b>2. Gutenberg Shortcodes<\/b><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-gutenberg-for-designers\/\" 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>The <a href=\"https:\/\/www.dreamhost.com\/blog\/most-exciting-features-gutenberg-wordpress-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg editor has evolved<\/a> to make it even easier to put together WordPress posts and pages. It offers a user-friendly way to insert shortcodes. Most Gutenberg blocks replace standard shortcodes, but the block editor has proven to be a bit of a moving target, so learning about using shortcodes for functionality is a good idea.<\/p>\n\n\n\n<p>For example, you could use a Gutenberg block to embed the tweet 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\/uploads\/2022\/03\/wordpress-shortcodes4.jpg\" alt=\"Twitter Block in WordPress\" class=\"wp-image-33079 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes4.jpg.webp 377w, https:\/\/www-dev.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><\/div>\n\n\n<p>This method lets you paste the tweet\u2019s URL directly into the block without writing the shortcode in square brackets.<\/p>\n\n\n\n<p>\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-dev.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<\/p>\n\n\n\n<p>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>Gutenberg also lets you create reusable blocks, 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>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\/uploads\/2022\/03\/wordpress-shortcodes11.jpg\" alt=\"Gutenberg Shortcode block\" class=\"wp-image-33085 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes11-300x88.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes11-768x226.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-600x177.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-730x215.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-784x231.jpg.webp 784w, https:\/\/www-dev.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><\/div>\n\n\n<p>Then once you\u2019ve added your CTA snippet, click on the three dots for an options menu and select <i>Add to Reusabl<\/i>e <i>blocks<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1348\" height=\"590\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8.jpg\" alt=\"WordPress reusable Blocks\" class=\"wp-image-33082 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8.jpg.webp 1348w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8-300x131.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8-1024x448.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8-768x336.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-600x263.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-1200x525.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-730x320.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-784x343.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-877x384.jpg.webp 877w\" data-sizes=\"(max-width: 1348px) 100vw, 1348px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1348px; --smush-placeholder-aspect-ratio: 1348\/590;\" \/><\/figure><\/div>\n\n\n<p>You can then name the reusable block:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"759\" height=\"473\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes13.jpg\" alt=\"naming reusable Blocks\" class=\"wp-image-33087 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes13.jpg.webp 759w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes13-300x187.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes13-600x374.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes13-730x455.jpg.webp 730w\" data-sizes=\"(max-width: 759px) 100vw, 759px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 759px; --smush-placeholder-aspect-ratio: 759\/473;\" \/><\/figure><\/div>\n\n\n<p>Your snippet will then be saved under the reusable tab, enabling you to use it anywhere across your website, including posts, pages, and widget areas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-plugin-shortcodes\"><b>3. Plugin Shortcodes<\/b><\/h3>\n\n\n\n<p>Different WordPress plugins also come with their own shortcodes. Some of these tools can even help you add customizable parameters to existing default shortcodes.<\/p>\n\n\n\n<p>For instance, you can get ready-made shortcodes for contact 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\/uploads\/2022\/03\/wordpress-shortcodes6.jpg\" alt=\"Shortcode form Block in WordPress\" class=\"wp-image-33080 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6.jpg.webp 1000w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes6-300x68.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes6-768x175.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-600x137.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-730x166.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-784x179.jpg.webp 784w, https:\/\/www-dev.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><\/div>\n\n\n<p>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\/uploads\/2022\/03\/wordpress-shortcodes10.jpg\" alt=\"creating a web form in WordPress\" class=\"wp-image-33084 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes10.jpg.webp 687w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes10-300x190.jpg 300w, https:\/\/www-dev.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><\/div>\n\n\n<p>If this interests you, you can read more about <a href=\"https:\/\/www.dreamhost.com\/blog\/best-wordpress-plugins-you-dont-know-about\/\" target=\"_blank\" rel=\"noopener noreferrer\">other WordPress plugins<\/a> that can enhance your website. These include the <a href=\"https:\/\/wordpress.org\/plugins\/enhanced-media-library\/\" target=\"_blank\" rel=\"noopener noreferrer\">Enhanced Media Library plugin<\/a>, which can help you adjust the parameters for the built-in Playlist and Gallery shortcodes.<\/p>\n\n\n\n<p>However, remember to keep your WordPress shortcode plugins updated. Doing this can ensure that your site runs <a href=\"https:\/\/www.dreamhost.com\/blog\/optimize-wordpress-website-speed\/\" target=\"_blank\" rel=\"noopener noreferrer\">as fast as possible<\/a> and isn\u2019t vulnerable to security threats.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-custom-shortcodes\"><b>4. Custom Shortcodes<\/b><\/h3>\n\n\n\n<p>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>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.<\/p>\n\n\n\n<p>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>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>. In action, it will look like this:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">add_shortcode( string $tag, callable $callback )<\/pre>\n\n\n\n<p>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\/uploads\/2022\/03\/wordpress-shortcodes3.jpg\" alt=\"DreamHost Pro Services - WordPress website design\" class=\"wp-image-33078 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3.jpg.webp 1878w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-300x119.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-1024x405.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-768x303.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-1536x607.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-600x237.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1200x474.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-730x288.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1460x577.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-784x310.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1568x620.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-877x347.jpg.webp 877w, https:\/\/www-dev.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><\/div>\n\n\n<p>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\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>WordPress shortcodes can enhance your website content with engaging features for visitors. They can ensure that readers interact with your site and keep coming back for more.<\/p>\n\n\n\n<p>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>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<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"200\" height=\"202\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/07\/CTA-Customer-Spotlight-2.png\" alt=\"DreamHost custom website development services\" class=\"wp-image-25383 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 200px; --smush-placeholder-aspect-ratio: 200\/202;\" \/><\/figure><\/div>\n\n\n<p>\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-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.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<\/p>\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>WordPress shortcodes can easily enhance your website with engaging, interactive elements that can be repeated across posts and pages. Examples include image galleries, contact forms, and playlists to make your content more useful and engaging. In this post, we&#8217;ll discuss WordPress shortcodes and why they are helpful. Then, we&#8217;ll outline four methods to start using [&hellip;]<\/p>\n","protected":false},"author":1060,"featured_media":33073,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Read all about the dynamic powerhouses that are WordPress Shortcodes and how dynamic content continues to evolve with the Gutenberg Blocks. Learn more!","toc_headlines":"[[\"h-wordpress-shortcodes-101\",\"<b>WordPress Shortcodes 101<\/b>\"],[\"h-why-you-might-consider-using-wordpress-shortcodes\",\"<b>Why You Might Consider Using WordPress Shortcodes<\/b>\"],[\"h-wordpress-shortcodes-101-4-ways-to-use-these-snippets\",\"<b>WordPress Shortcodes 101 (4 Ways to Use These Snippets)<\/b>\"],[\"h-use-wordpress-shortcodes-to-enhance-your-content\",\"<b>Use WordPress Shortcodes to Enhance Your Content<\/b>\"]]","hide_toc":false,"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 Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>An Introduction to WordPress Shortcodes - DreamHost<\/title>\n<meta name=\"description\" content=\"Read all about the dynamic powerhouses that are WordPress Shortcodes and how dynamic content continues to evolve with the Gutenberg Blocks. Learn more!\" \/>\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-dev.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=\"An Introduction to WordPress Shortcodes (With Examples)\" \/>\n<meta property=\"og:description\" content=\"Read all about the dynamic powerhouses that are WordPress Shortcodes and how dynamic content continues to evolve with the Gutenberg Blocks. Learn more!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.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=\"2025-05-22T03:04:50+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=\"An Introduction to WordPress Shortcodes (With Examples)\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www-dev.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 Premium plugin. -->","yoast_head_json":{"title":"An Introduction to WordPress Shortcodes - DreamHost","description":"Read all about the dynamic powerhouses that are WordPress Shortcodes and how dynamic content continues to evolve with the Gutenberg Blocks. Learn more!","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-dev.dreamhost.com\/blog\/wordpress-shortcodes-101\/","og_locale":"en_US","og_type":"article","og_title":"An Introduction to WordPress Shortcodes (With Examples)","og_description":"Read all about the dynamic powerhouses that are WordPress Shortcodes and how dynamic content continues to evolve with the Gutenberg Blocks. Learn more!","og_url":"https:\/\/www-dev.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":"2025-05-22T03:04:50+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":"An Introduction to WordPress Shortcodes (With Examples)","twitter_image":"https:\/\/www-dev.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-dev.dreamhost.com\/blog\/wordpress-shortcodes-101\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-shortcodes-101\/"},"author":{"name":"Brian Glassman","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de"},"headline":"An Introduction to WordPress Shortcodes (With Examples)","datePublished":"2022-03-10T15:00:44+00:00","dateModified":"2025-05-22T03:04:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-shortcodes-101\/"},"wordCount":1357,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-shortcodes-101\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","articleSection":["DreamPress","Getting Started","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-shortcodes-101\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-shortcodes-101\/","name":"An Introduction to WordPress Shortcodes - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-shortcodes-101\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-shortcodes-101\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","datePublished":"2022-03-10T15:00:44+00:00","dateModified":"2025-05-22T03:04:50+00:00","description":"Read all about the dynamic powerhouses that are WordPress Shortcodes and how dynamic content continues to evolve with the Gutenberg Blocks. Learn more!","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-shortcodes-101\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/wordpress-shortcodes-101\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-shortcodes-101\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","width":900,"height":598,"caption":"guide to WordPress Shortcodes"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-shortcodes-101\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"An Introduction to WordPress Shortcodes (With Examples)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.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-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.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-dev.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-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de","name":"Brian Glassman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","caption":"Brian Glassman"},"description":"SEO leader and content marketer, Brian is DreamHost\u2019s Director of SEO. Based in Chicago, Brian enjoys the local health food scene (deep dish pizza, Italian beef sandwiches) and famous year-round warm weather. Follow Brian on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/brianglassmandesign\/"],"url":"https:\/\/www-dev.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-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1060"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=33069"}],"version-history":[{"count":10,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33069\/revisions"}],"predecessor-version":[{"id":63743,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33069\/revisions\/63743"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/33073"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=33069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=33069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=33069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}