{"id":27031,"date":"2018-04-17T11:00:55","date_gmt":"2018-04-17T16:00:55","guid":{"rendered":"https:\/\/getflywheel.com\/?p=27031"},"modified":"2023-03-30T10:52:52","modified_gmt":"2023-03-30T15:52:52","slug":"understanding-wordpress-shortcodes","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/understanding-wordpress-shortcodes\/","title":{"rendered":"Understanding WordPress Shortcodes"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">If you&#8217;ve been using WordPress for any length of time, you&#8217;ve probably already used some shortcodes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Shortcodes are handy little snippets that let you insert some kind of special functionality into your content that wouldn&#8217;t otherwise be possible. As an example: lots of image gallery and slider plugins give you a shortcode that you can simply insert into your content anywhere you like to make the proper images appear there. Shortcodes usually look something like this:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>[example shortcode]<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In other words:<strong> shortcodes cause something special to happen wherever they&#8217;re placed in your text.<\/strong><br>But you&#8217;re not limited to pre-defined shortcodes; you can define custom shortcodes to do whatever you want! They can be simple, complex, or anything in-between.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this series, we\u2019ll start with a simple shortcode, and work our way up to some more intricate (and even more useful!) examples.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong> we&#8217;ll be working mainly with PHP here, specifically in your theme&#8217;s functions.php file. If you aren&#8217;t using a child theme (or a custom\/starter theme that&#8217;s ok to edit without fear of updates overwriting your changes), you&#8217;ll want to create a child theme before starting.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Also note:<\/strong> You don&#8217;t need any PHP knowledge to go through this post, but knowing at least the basics will help. The code involved here is fairly simple, and we&#8217;ve tried to make it as easy as possible to copy and customize. We&#8217;ll explain each piece of the code as we go, but if you&#8217;re completely new to WordPress theme PHP, be aware that a bit of bad code in your <code>functions.php<\/code> file can break the site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A Useful Simple Shortcode Example<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s say we want a shortcode that injects a special author-info section into a post, like this:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/04\/wordpress-shortcodes-Bilbo-baggins.png\" alt=\"bilbo baggins the hobbit shortcode example\" class=\"wp-image-27045\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of creating and styling the box, image, and text in the WordPress visual editor, we\u2019ll just create a shortcode to output that whole thing with a simple snippet!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(Side note: WordPress has better ways of working with author profiles, but we\u2019re sticking with this example because it nicely demonstrates how easy it is to use shortcodes for putting specific blocks of content on a page.)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Add the Shortcode in Your Theme&#8217;s functions.php File<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>You&#8217;ll be using the <code>add_shortcode<\/code> function to give your shortcode a name,\u00a0and tell WordPress what it should do any time the shortcode is used.<\/strong> Add this line to your theme&#8217;s <code>functions.php<\/code> file:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;php]add_shortcode( 'author_bio', 'create_author_bio' );&#91;\/php]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">It doesn&#8217;t really matter <em>where<\/em> inside <code>functions.php<\/code>, but to avoid conflicts, We&#8217;d recommend putting it at the very end. (If the file ends with a closing ?&gt; tag, though, it should go just before that, not after.)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before we go any further, let\u2019s break that line down a little bit, so that we understand what&#8217;s actually going on here. The two bits of text, or \u201carguments,\u201d inside the parentheses aren\u2019t special, really; they\u2019re just names. Let\u2019s go over what each one means:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The first argument: in this case, <code>author_bio<\/code> \u2013 tells WordPress the actual name of your shortcode. This will be the text that users can type, in brackets, to use the shortcode. So with this code as written, <code>[author_bio]<\/code> will be our shortcode to trigger our author bio box.<br>This text could be anything, but it&#8217;s always best to try to be unique. That way, you won&#8217;t run the risk of your shortcode name conflicting with somebody else&#8217;s from another installed plugin or theme.<\/li>\n\n\n\n<li>The second argument: in this case, <code>create_author_bio<\/code> \u2013 points WordPress toward the actual PHP function it should execute whenever this shortcode is used. We&#8217;ll create that function in the next step; for right now, we\u2019re just letting WordPress know what its name is going to be. (This name should also be unique, to avoid conflicts.)<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">So if it helps, you could think of the code like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;php]add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );&#91;\/php]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re interested in more nitty-gritty detail, check out the <code>add_shortcode<\/code> <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_shortcode\/\" target=\"_blank\" rel=\"noreferrer noopener\">Codex entry<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Create the Function to Handle the Shortcode<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now we need to actually make the function we just named!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since we just told WordPress in the last step that the name of our function is create_author_bio, our code should now look like this, once we\u2019ve got the new&nbsp;function added:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;php]add_shortcode( 'author_bio', 'create_author_bio' );\n\nfunction create_author_bio(){\n\/\/Code goes here!\n}&#91;\/php]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You may notice this function doesn\u2019t actually do anything yet; all that\u2019s inside of it is a comment. We&#8217;ll take care of that in the next step. For now, we just want to point out that there are really only two pieces here: the registration of the shortcode, and the function that happens whenever it&#8217;s used. WordPress PHP can look intimidating, but it&#8217;s really that simple!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Side note: it doesn\u2019t matter if the <code>create_author_bio<\/code> function comes after the <code>add_shortcode<\/code> function or before it.&nbsp;Order isn\u2019t important in this case.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Make the Function do Something<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now all that&#8217;s left is to make our function do what we want!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A function like this could do anything, but no matter what, it should eventually <strong>return<\/strong> a single value (such as a string of text or a number). That value could be any length or complexity, but <strong>whatever the function returns is what will appear wherever our shortcode is used.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For our purposes, this will just be some simple HTML. Here&#8217;s the markup to add our author image and bio inside an <code>&lt;aside&gt;<\/code> element with a custom class (but don&#8217;t put this anywhere just yet; we&#8217;re just looking at it as a preview for the moment):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;html]\n&lt;aside class=\"author-bio-box\">\n  &lt;img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/en\/1\/1f\/Bilbo_Baggins_Tolkien_illustration.jpg\">\n  &lt;p>Bilbo Baggins is the author of &lt;cite>The Hobbit&lt;\/cite>, translator of various works from the elvish, and author of a number of poems and songs.&lt;\/p>\n  &lt;p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eress\u00eba home across the sea.&lt;\/p>\n&lt;\/aside>\n&#91;\/html]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Eventually, we\u2019ll use that author-bio-box class on the first line to style the bio with CSS. (We\u2019ll use a class instead of an ID, just in case you want to add more than one author shortcode for content written by multiple authors.) But remember, this could be anything we want to put into the page!<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Now, all we need to do is have our shortcode&#8217;s function return the above HTML!&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since the <code>functions.php<\/code> file should only contain&#8230;well, PHP functions (and also for tidiness), We&#8217;ve removed the line breaks and spaces between those HTML elements we just looked at and tucked them into a string (inside of single quotes). But functionally, it\u2019s still the same HTML snippet we just saw above, and this is how our final PHP code should look:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>'&lt;aside class=\"author-bio-box\">&lt;img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/en\/1\/1f\/Bilbo_Baggins_Tolkien_illustration.jpg\">&lt;p>Bilbo Baggins is the author of &lt;cite>The Hobbit&lt;\/cite>, translator of various works from the elvish, and author of a number of poems and songs.&lt;\/p>&lt;p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eress\u00eba home across the sea.&lt;\/p>&lt;\/aside>'\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>We\u2019re done with PHP!<\/strong> Once we&#8217;ve saved our <code>functions.php<\/code> file with the above final code in it, any author can simply enter <code>[author_bio]<\/code> in any page or post, and the above HTML will appear in the shortcode\u2019s place!&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Plus, the really cool thing is: if we ever need to update our bio, we won\u2019t need to edit every single place it appears! Instead, all we need to do is edit the code in our <code>functions.php<\/code> file, and it will be updated everywhere all at once. Neat, huh?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, to make the most out of this, we\u2019ll probably want to add some special styling to the bio box.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Add Some CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The shortcode isn\u2019t great without some styling, so let\u2019s add it! You may need to adjust some of the values a little bit, depending on your own site&#8217;s fonts (the one in the image above is <a href=\"https:\/\/fonts.google.com\/specimen\/Fanwood+Text\" target=\"_blank\" rel=\"noopener noreferrer\">Fanwood Text<\/a>) and what CSS rules are already in place. Or you may just want to try something different!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This CSS could be copied into your (child) theme\u2019s <code>style.css<\/code> file, or if you\u2019re running WordPress 4.7 or above (which you should be!), you can just paste this CSS into the \u201cAdditional CSS\u201d box in the Customize screen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;css].author-bio-box {\nbackground: #d4ead9;\npadding: 2em;\noverflow: auto;\nfont-family: Fanwood Text;\nfont-size: 1.2em;\nline-height: 1.4em;\n}\n\n.author-bio-box img {\nfloat: left;\nmax-width: 128px;\nheight: auto;\nmargin: 0 1em 0 0;\n}\n\n.author-bio-box &amp;amp;amp;amp;amp;gt; p:first-of-type:first-letter {\nfont-size: 3.1em;\nline-height: 1;\nfloat: left;\nmargin-bottom: -.2em;\n}\n\n.author-bio-box &amp;amp;amp;amp;amp;gt; p:last-of-type {\nmargin: 0;\n}&#91;\/css]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now things should be looking much better. But feel free to play around with the CSS to make the author box your own and make it feel at home on your site!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Recommended: Make the Function \u201cPluggable\u201d<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This isn&#8217;t specific to shortcodes, and it isn&#8217;t strictly needed for the code to work, but it is best practice, and this is a good time to mention it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>First, a little background on how PHP works<\/strong>:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Remember how we got to name our <code>create_author_bio<\/code> function ourselves? Well, there\u2019s nothing special about the name <code>create_author_bio;<\/code> we could have just as easily named our function anything we wanted to (though it\u2019s best if the function name gives you at least a little bit of a hint as to what it does, which is why we chose <code>create_author_bio<\/code>).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But here\u2019s the thing:<strong> if two PHP functions are named the same thing, the result will be a fatal error that will prevent the site from loading,<\/strong> since PHP won\u2019t have any idea which function is the right one. PHP doesn\u2019t guess, so it just stops.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And it\u2019s not only our code we need to worry about; a WordPress site might use code from dozens or maybe even hundreds of different developers, depending on the installed plugins and themes. If the same function name is used twice, everything breaks down!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>That\u2019s bad, and obviously, we want to make sure that never happens.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can do that by making our function \u201cpluggable;\u201d in other words, telling WordPress not to create our function if another one of the same name already exists. It\u2019s elegantly simple; we just wrap our existing code inside of this easy conditional statement:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;php]if( !function_exists( 'create_author_bio' ) ){\n\n\/\/Our existing PHP goes here!\n\n}&#91;\/php]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That conditional if expression just checks to be sure that a function named <code>create_author_bio<\/code> doesn\u2019t already exist. All our PHP code we\u2019ve used so far can just be moved inside of that statement, between the <code>{ }<\/code> braces.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>It&#8217;s still best to name functions as uniquely as possible, though!<\/strong> Making our function pluggable only avoids a fatal error. So if there was a naming conflict, our shortcode still wouldn\u2019t work, but at least the site would still be up and nothing else would be broken.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/04\/2018-04-09_2018-Q2-Retreat_Sales-1582-662.jpg\" alt=\"woman sitting at desk with computer thinking with finger pointed to brain\" class=\"wp-image-27065\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>That\u2019s it! Hope you\u2019ve enjoyed creating a custom author bio shortcode!<\/strong> If you&#8217;ve followed along, all you need to do is type <code>[author_bio]<\/code> anywhere in a page or post and your code will appear!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This shortcode can easily be adapted to output anything to a page. A gif, a custom block of HTML and\/or JavaScript, an image or video\u2026anything you want!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, while this example is useful if you just need to output a single, static value onto the page somewhere, it\u2019s not very flexible. It will always return the exact same thing every time, and we often need shortcodes to be more adaptable than that.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Good news: we\u2019ve only covered the basics of shortcodes, and they\u2019re capable of much, much more!<\/strong> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;ve been using WordPress for any length of time, you&#8217;ve probably already used some shortcodes. Shortcodes are handy little snippets that let you insert some kind of special functionality into your content that wouldn&#8217;t otherwise be possible. As an example: lots of image gallery and slider plugins give you a shortcode that you can<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":142017,"template":"","resource-topic":[901],"resource-role":[1397,896,897],"resource-type":[916],"class_list":["post-27031","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Understanding WordPress Shortcodes<\/title>\n<meta name=\"description\" content=\"WordPress shortcodes are great ways to integrate features on your sites. Read on to understand how they work and how to create your own!\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding WordPress Shortcodes\" \/>\n<meta property=\"og:description\" content=\"WordPress shortcodes are great ways to integrate features on your sites. Read on to understand how they work and how to create your own!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/understanding-wordpress-shortcodes\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-30T15:52:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/04\/shortcode-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Understanding WordPress Shortcodes\" \/>\n<meta name=\"twitter:description\" content=\"WordPress shortcodes are great ways to integrate features on your sites. Read on to understand how they work and how to create your own!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/04\/shortcode-header.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/understanding-wordpress-shortcodes\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/understanding-wordpress-shortcodes\/\",\"name\":\"Understanding WordPress Shortcodes\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2018-04-17T16:00:55+00:00\",\"dateModified\":\"2023-03-30T15:52:52+00:00\",\"description\":\"WordPress shortcodes are great ways to integrate features on your sites. Read on to understand how they work and how to create your own!\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/understanding-wordpress-shortcodes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/understanding-wordpress-shortcodes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/understanding-wordpress-shortcodes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Understanding WordPress Shortcodes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Understanding WordPress Shortcodes","description":"WordPress shortcodes are great ways to integrate features on your sites. Read on to understand how they work and how to create your own!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Understanding WordPress Shortcodes","og_description":"WordPress shortcodes are great ways to integrate features on your sites. Read on to understand how they work and how to create your own!","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/understanding-wordpress-shortcodes\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-03-30T15:52:52+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/04\/shortcode-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"Understanding WordPress Shortcodes","twitter_description":"WordPress shortcodes are great ways to integrate features on your sites. Read on to understand how they work and how to create your own!","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/04\/shortcode-header.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/understanding-wordpress-shortcodes\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/understanding-wordpress-shortcodes\/","name":"Understanding WordPress Shortcodes","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2018-04-17T16:00:55+00:00","dateModified":"2023-03-30T15:52:52+00:00","description":"WordPress shortcodes are great ways to integrate features on your sites. Read on to understand how they work and how to create your own!","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/understanding-wordpress-shortcodes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/understanding-wordpress-shortcodes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/understanding-wordpress-shortcodes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"Understanding WordPress Shortcodes"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/04\/shortcode-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Developer, Freelancer","topic":"<strong>Topics:<\/strong> WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/27031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/142017"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=27031"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=27031"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=27031"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=27031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}