{"id":36592,"date":"2020-10-20T08:04:00","date_gmt":"2020-10-20T08:04:00","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=docs&#038;p=36592"},"modified":"2021-04-05T17:39:59","modified_gmt":"2021-04-05T17:39:59","slug":"shortcode-creator-user-guide","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/shortcode-creator-user-guide\/","title":{"rendered":"Shortcode Creator User Guide"},"content":{"rendered":"\n<p class=\"has-medium-font-size\">Shortcode Creator allows you to create custom shortcodes using HTML or PHP code. This guide contains complete information on how to install the plugin, activate your license, and start creating custom shortcodes.<\/p>\n\n\n<p class=\"h2\">Table of contents<\/p>\n\n<ol><li><a href=\"#installing-the-plugin\">Installing the plugin<\/a><ol><li><a href=\"#installation-from-within-the-dashboard\">Installation from within the Dashboard<\/a><\/li><li><a href=\"#installation-through-ftp\">Installation through FTP<\/a><\/li><\/ol><\/li><li><a href=\"#activating-the-license\">Activating the license<\/a><ol><li><a href=\"#activation-process\">Activation process<\/a><\/li><li><a href=\"#license-activation-errors\">License activation errors<\/a><\/li><li><a href=\"#multisite-installations\">Multisite installations<\/a><\/li><li><a href=\"#localhost-staging\">Localhost \/ Staging<\/a><\/li><li><a href=\"#manual-activation\">Manual activation<\/a><\/li><\/ol><\/li><li><a href=\"#updating-the-plugin\">Updating the plugin<\/a><ol><li><a href=\"#automatic-updates\">Automatic updates<\/a><\/li><li><a href=\"#updating-the-plugin-manually-through-the-dashboard\">Updating the plugin manually through the Dashboard<\/a><\/li><li><a href=\"#updating-the-plugin-manually-over-ftp\">Updating the plugin manually over FTP<\/a><\/li><\/ol><\/li><li><a href=\"#demo-shortcodes\">Demo shortcodes<\/a><\/li><li><a href=\"#creating-a-shortcode\">Creating a shortcode<\/a><ol><li><a href=\"#step-1-create-a-new-shortcode-and-give-it-a-name\">Step 1: Create a new shortcode and give it a name<\/a><\/li><li><a href=\"#step-2-create-an-attribute\">Step 2: Create an attribute<\/a><\/li><li><a href=\"#step-3-the-code\">Step 3: The code<\/a><\/li><li><a href=\"#step-4-time-to-use-the-shortcode\">Step 4: Time to use the shortcode<\/a><\/li><\/ol><\/li><li><a href=\"#creating-a-content-placeholder\">Creating a content placeholder<\/a><ol><li><a href=\"#step-1-create-a-new-placeholder\">Step 1: Create a new placeholder<\/a><\/li><li><a href=\"#step-2-give-the-placeholder-a-name\">Step 2: Give the placeholder a name<\/a><\/li><li><a href=\"#step-3-add-a-dynamic-content\">Step 3: Add a dynamic content<\/a><\/li><li><a href=\"#step-4-save\">Step 4: Save<\/a><\/li><li><a href=\"#step-5-add-the-placeholder-to-posts-or-pages\">Step 5: Add the placeholder to posts or pages<\/a><\/li><li><a href=\"#step-6-edit-the-dynamic-content\">Step 6: Edit the dynamic content<\/a><\/li><\/ol><\/li><li><a href=\"#shortcode-editor\">Shortcode Editor<\/a><ol><li><a href=\"#shortcode-title\">Shortcode title<\/a><\/li><li><a href=\"#shortcode-tag-name\">Shortcode tag name<\/a><\/li><li><a href=\"#shortcode-description\">Shortcode description<\/a><\/li><li><a href=\"#default-content\">Default content<\/a><\/li><li><a href=\"#icon\">Icon<\/a><\/li><li><a href=\"#attributes\">Attributes<\/a><\/li><li><a href=\"#code-editor\">Code editor<\/a><\/li><\/ol><\/li><li><a href=\"#attribute-field-types\">Attribute field types<\/a><ol><li><a href=\"#text\">Text<\/a><\/li><li><a href=\"#number\">Number<\/a><\/li><li><a href=\"#color\">Color<\/a><\/li><li><a href=\"#dropdown\">Dropdown<\/a><\/li><li><a href=\"#switch\">Switch<\/a><\/li><li><a href=\"#icon--1\">Icon<\/a><\/li><li><a href=\"#media-library\">Media Library<\/a><\/li><li><a href=\"#image-source\">Image Source<\/a><\/li><\/ol><\/li><li><a href=\"#exporting-custom-shortcodes\">Exporting custom shortcodes<\/a><\/li><li><a href=\"#importing-custom-shortcodes\">Importing custom shortcodes<\/a><\/li><\/ol><\/li><\/ol>\n\n\n<h2 class=\"wp-block-heading\" id=\"installing-the-plugin\">Installing the plugin<\/h2>\n\n\n\n<p>Premium add-ons are distributed as separate plugins in the zip format. To install the add-on, you should download it first. Use the download link from the email you&#8217;ve received after purchase to download zip-archive with the add-on. Then follow the simple steps below.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"installation-from-within-the-dashboard\">Installation from within the Dashboard<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>Navigate to <em>Dashboard \u2192 Plugins \u2192 Add new<\/em>;<\/li><li>Press the <em>Upload Plugin<\/em> link at the top of the screen;<\/li><li>In the opened dialog choose the downloaded zip-archive and press the <em>Install Now<\/em> button;<\/li><li>Wait until the installation is completed and press the <em>Activate Plugin<\/em> link.<\/li><\/ol>\n\n\n<figure class=\"wp-block-gallery columns-3 wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-1.png\" data-size=\"1505x983\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"669\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-1-1024x669.png\" alt=\"Uploading the zip archive\" data-id=\"36593\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-1.png\" data-link=\"https:\/\/getshortcodes.com\/?attachment_id=36593\" class=\"wp-image-36593\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-1-1024x669.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-1-512x334.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-1-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-1-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-1-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-1-24x16.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-1.png 1505w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-2.png\" data-size=\"1505x983\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"669\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-2-1024x669.png\" alt=\"Activating the plugin\" data-id=\"36594\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-2.png\" data-link=\"https:\/\/getshortcodes.com\/?attachment_id=36594\" class=\"wp-image-36594\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-2-1024x669.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-2-512x334.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-2-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-2-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-2-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-2-24x16.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-2.png 1505w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3.png\" data-size=\"1505x983\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"669\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-1024x669.png\" alt=\"The plugin successfully activated\" data-id=\"36595\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3.png\" data-link=\"https:\/\/getshortcodes.com\/?attachment_id=36595\" class=\"wp-image-36595\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-1024x669.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-512x334.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-24x16.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3.png 1505w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"installation-through-ftp\">Installation through FTP<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>Unzip the downloaded archive using an archiver app;<\/li><li>Copy unpacked folder with add-on to FTP server, to <em>\/wp-content\/plugins\/<\/em> folder; As a result, the path to add-on folder should look like: <em>\/wp-content\/plugins\/shortcodes-ultimate-maker\/<\/em>;<\/li><li>Go to <em>Dashboard \u2192 Plugins<\/em> page;<\/li><li>If you made everything correctly in step 2, a new plugin will appear in the plugin list;<\/li><li>Press the <em>Activate<\/em> link near the add-on to activate it.<\/li><\/ol>\n\n\n<figure class=\"wp-block-gallery columns-2 wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-ftp-maker.png\" data-size=\"1001x570\"><img loading=\"lazy\" decoding=\"async\" width=\"1001\" height=\"570\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-ftp-maker.png\" alt=\"FTP folder structure\" data-id=\"36597\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-ftp-maker.png\" data-link=\"https:\/\/getshortcodes.com\/?attachment_id=36597\" class=\"wp-image-36597\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-ftp-maker.png 1001w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-ftp-maker-512x292.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-ftp-maker-128x73.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-ftp-maker-768x437.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-ftp-maker-80x46.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-ftp-maker-24x14.png 24w\" sizes=\"auto, (max-width: 1001px) 100vw, 1001px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-1.png\" data-size=\"1505x983\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"669\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-1-1024x669.png\" alt=\"Add-on successfully activated\" data-id=\"36596\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-1.png\" data-link=\"https:\/\/getshortcodes.com\/?attachment_id=36596\" class=\"wp-image-36596\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-1-1024x669.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-1-512x334.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-1-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-1-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-1-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-1-24x16.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/upload-zip-maker-3-1.png 1505w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h2 class=\"wp-block-heading\" id=\"activating-the-license\">Activating the license<\/h2>\n\n\n\n<p>Your license key must be activated in order to enable automatic updates for the add-on.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"activation-process\">Activation process<\/h3>\n\n\n\n<p>An email with a license key will be sent to you right after the purchase of a premium add-on. If you&#8217;ve lost the email, please visit the <a href=\"\/support\/restore-purchase\/\">Restore Purchase<\/a> page to recover that information.<\/p>\n\n\n\n<p>Follow the steps below to activate your license key.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Log in to the dashboard of your site (wp-admin);<\/li><li>Navigate to <em>Dashboard \u2192 Shortcodes \u2192 Settings<\/em> and scroll page down;<\/li><li>Paste the received license key into the <em>License Key<\/em> field;<\/li><li>Press the <em>Save Changes<\/em> button to activate the license key.<\/li><\/ol>\n\n\n\n<p>You can clear the <em>License key<\/em> field and click <em>Save Changes<\/em> to deactivate license key later.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"license-activation-errors\">License activation errors<\/h3>\n\n\n\n<p>The following errors may occur upon activation of a license key.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"invalid-license-key\">Invalid license key<\/h4>\n\n\n\n<p>This error may occur if you&#8217;re trying to activate <g class=\"gr_ gr_5 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Grammar only-ins replaceWithoutSep\" id=\"5\" data-gr-id=\"5\">invalid<\/g> license key. Please make sure that you&#8217;ve copied the license key correctly. License key should have the following format: <code>XXXX-XXXX-XXXX-XXXX<\/code> (four groups of four digits\/letters, separated by hyphens).<\/p>\n\n\n\n<p>This error may also occur in local development environments. If you&#8217;re trying to activate a license key on local site, for example, <em>WordPress.wp<\/em> or <em>mywp.develop<\/em>, you&#8217;ll get this error.<\/p>\n\n\n\n<p>However, you can activate license key on the following local domains: <em>*.dev<\/em>, <em>*.local<\/em>, <em>localhost<\/em>. If you&#8217;re using other domain name for local site, you can still activate license key manually. Follow <a href=\"#manual-activation\">this guide<\/a> to do that.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"license-key-reached-its-activation-limit-deactivate-this-license-key-on-other-sites\">License key reached its activation limit. Deactivate this license key on other sites<\/h4>\n\n\n\n<p>If you&#8217;ve purchased a license key with a limit on the number of websites (Single Site or 2-5 Sites options), you could only activate it on the specified number of websites. This error indicates that your license key has reached its activation limit. You should deactivate this license key on other websites to be able to use it again. Just clear License key field on any previous site to deactivate license key on that site. If you do not remember at which site(s) you have activated license key, please contact support.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"this-license-key-is-intended-to-use-with-another-add-on\">This license key is intended to use with another add-on<\/h4>\n\n\n\n<p>Each license key is intended for use with a specific add-on. It means you can not activate Extra Shortcodes add-on (example) using license key of Shortcode Creator add-on (example). If you are feeling confused about purchased license keys, please contact support.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"unable-to-connect-to-the-activation-server\">Unable to connect to the activation server<\/h4>\n\n\n\n<p>If you&#8217;ve faced this error, it&#8217;s most probably that your site unable to connect to the activation server. In this case, you&#8217;ll need to activate your license key manually. <a href=\"\/docs\/unable-to-connect-to-activation-server-please-try-again-later\/\">This article<\/a> will guide you through manual license key activation.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"unknown-error\">Unknown error<\/h4>\n\n\n\n<p>This error should never happen. If you&#8217;ve faced it, please contact support immediately.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"multisite-installations\">Multisite installations<\/h3>\n\n\n\n<p>On multisite installations, license key must be activated only on the main site. The plugin should be updated only on the main site too.<\/p>\n\n\n\n<p>The main site is the site in your network that lives on the same domain as your network admin. For example, if your&nbsp;<strong>network admin<\/strong>&nbsp;is accessible with the following URL&nbsp;<em>example.com\/wp-admin\/network\/<\/em>, you can access&nbsp;<strong>the dashboard of your main site<\/strong>&nbsp;by going to&nbsp;<em>example.com\/wp-admin\/<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"localhost-staging\">Localhost \/ Staging<\/h3>\n\n\n\n<p>You can activate a license key on the following local domains:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>localhost<\/li><li>*.local<\/li><li>*.dev.cc<\/li><\/ul>\n\n\n\n<p>Activations made on a local domain won&#8217;t be counted. If you&#8217;re using another domain name for a local site or for a staging site, you can still activate the license key manually. Follow <a href=\"#manual-activation\">this guide<\/a> to do that.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"manual-activation\">Manual activation<\/h3>\n\n\n\n<p><strong>Step 1<\/strong><\/p>\n\n\n\n<p>Open up  <em>functions.php<\/em> file of your active theme and paste the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Use this code to activate Extra Shortcodes add-on\nupdate_option( 'su_option_extra-shortcodes_license', 'ENTER-YOUR-LICENSE-KEY-HERE' );\n\n\/\/ Use this code to activate Additional Skins add-on\nupdate_option( 'su_option_additional-skins_license', 'ENTER-YOUR-LICENSE-KEY-HERE' );\n\n\/\/ Use this code to activate Shortcode Creator (Maker) add-on\nupdate_option( 'su_option_shortcode-creator_license', 'ENTER-YOUR-LICENSE-KEY-HERE' );<\/code><\/pre>\n\n\n\n<p><strong>Step 2<\/strong><\/p>\n\n\n\n<p>Replace <em>ENTER-YOUR-LICENSE-KEY-HERE<\/em> with your license key.<\/p>\n\n\n\n<p><strong>Step 3<\/strong><\/p>\n\n\n\n<p>Open any page of your site (no matter front page or any admin page). This will run the code in <em>functions.php<\/em> file.<\/p>\n\n\n\n<p><strong>Step 4<\/strong><\/p>\n\n\n\n<p>Now your license key successfully added to the database and you can remove the code from the <em>functions.php<\/em> file.<\/p>\n\n\n\n<p><strong>Step 5<\/strong><\/p>\n\n\n\n<p>Check your license key status by navigating to <em>Dashboard \u2192 Shortcodes \u2192 Settings<\/em> page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"updating-the-plugin\">Updating the plugin<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"automatic-updates\">Automatic updates<\/h3>\n\n\n\n<p class=\"has-black-color has-yellow-background-color has-text-color has-background\">You need to activate your license key to enable automatic updates. See the <a href=\"#activating-the-license\">Activating the license<\/a> section to learn how to do that.<\/p>\n\n\n\n<p>This add-on can be updated as a regular plugin from within the Dashboard of your site. To install an updated version, follow the instructions below.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Navigate to <em>Dashboard \u2192 Updates<\/em>;<\/li><li>Under the <em>Plugins<\/em> section select the plugin by ticking the checkbox;<\/li><li>Click the <em>Update Plugins<\/em> button.<\/li><\/ol>\n\n\n\n<p>If you see the &#8220;Update package not available&#8221; error, read the <a href=\"\/docs\/fixing-update-package-not-available-error\/\">Fixing \u201cUpdate package not available\u201d error<\/a> article.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1362\" height=\"978\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/auto-maker.png\" alt=\"\" class=\"wp-image-37193\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/auto-maker.png 1362w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/auto-maker-512x368.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/auto-maker-1024x735.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/auto-maker-128x92.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/auto-maker-768x551.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/auto-maker-80x57.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/auto-maker-24x17.png 24w\" sizes=\"auto, (max-width: 1362px) 100vw, 1362px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"updating-the-plugin-manually-through-the-dashboard\">Updating the plugin manually through the Dashboard<\/h3>\n\n\n\n<p>If you\u2019re unable to install an update automatically for some reason, you can always update the add-on manually. Follow the instructions below.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Navigate to <em>Dashboard \u2192 Plugins \u2192 Add New<\/em>;<\/li><li>Click the <em>Upload Plugin<\/em> button;<\/li><li>Choose the downloaded zip-archive with the updated version;<\/li><li>Click the <em>Install Now<\/em> button;<\/li><li>WordPress will ask you to replace the existing version with the new one, click the <em>Replace current with uploaded<\/em> button to confirm.<\/li><\/ol>\n\n\n<figure class=\"wp-block-gallery columns-2 wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-1.png\" data-size=\"1362x978\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"735\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-1-1024x735.png\" alt=\"\" data-id=\"37194\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-1.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/shortcode-creator-user-guide\/manual-maker-1\/\" class=\"wp-image-37194\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-1-1024x735.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-1-512x368.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-1-128x92.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-1-768x551.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-1-80x57.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-1-24x17.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-1.png 1362w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-2.png\" data-size=\"1362x978\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"735\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-2-1024x735.png\" alt=\"\" data-id=\"37195\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-2.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/shortcode-creator-user-guide\/manual-maker-2\/\" class=\"wp-image-37195\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-2-1024x735.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-2-512x368.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-2-128x92.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-2-768x551.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-2-80x57.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-2-24x17.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/manual-maker-2.png 1362w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"updating-the-plugin-manually-over-ftp\">Updating the plugin manually over FTP<\/h3>\n\n\n\n<p>If you need to update the plugin over FTP, it&#8217;s as simple as installing the plugin. Follow the steps below.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Download the updated version in a zip format and unpack it;<\/li><li>Upload the unpacked folder <em>shortcodes-ultimate-maker<\/em> to <em>\/wp-content\/plugins\/<\/em> directory on your server, so the resulting path would be <em>\/wp-content\/plugins\/shortcodes-ultimate-maker\/<\/em>.<\/li><\/ol>\n\n\n\n<p>Please note, since you&#8217;re updating the existing plugin on your server, the <em>shortcodes-ultimate-maker<\/em> directory already exists. So, just replace it with the new one.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1085\" height=\"676\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/ftp-maker.png\" alt=\"\" class=\"wp-image-37196\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/ftp-maker.png 1085w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/ftp-maker-512x319.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/ftp-maker-1024x638.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/ftp-maker-128x80.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/ftp-maker-768x478.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/ftp-maker-80x50.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/02\/ftp-maker-24x15.png 24w\" sizes=\"auto, (max-width: 1085px) 100vw, 1085px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"demo-shortcodes\">Demo shortcodes<\/h2>\n\n\n\n<p>Before reading, navigate to <em>Dashboard \u2192 Shortcodes \u2192 Custom shortcodes<\/em>. There you&#8217;ll find 2 demo shortcodes that are created at the first activation of the add-on. You can edit them to see how they work.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"669\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/shortcode-creator-demo-shortcodes-1-1024x669.png\" alt=\"\" class=\"wp-image-36730\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/shortcode-creator-demo-shortcodes-1-1024x669.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/shortcode-creator-demo-shortcodes-1-512x334.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/shortcode-creator-demo-shortcodes-1-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/shortcode-creator-demo-shortcodes-1-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/shortcode-creator-demo-shortcodes-1-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/shortcode-creator-demo-shortcodes-1-24x16.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/10\/shortcode-creator-demo-shortcodes-1.png 1505w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-a-shortcode\">Creating a shortcode<\/h2>\n\n\n\n<p>To help you to understand how does this feature work, let&#8217;s create a simple shortcode with an attribute. Follow the steps below.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1-create-a-new-shortcode-and-give-it-a-name\">Step 1: Create a new shortcode and give it a name<\/h3>\n\n\n\n<p>Navigate to <em>Dashboard \u2013 Shortcodes \u2013 Custom shortcodes<\/em> and click the <em>Create shortcode<\/em> button in the upper part of the screen.<\/p>\n\n\n\n<p>Look for the <em>Shortcode title<\/em> field and give our new shortcode a name, for example, <em>My Awesome Shortcode<\/em>.<\/p>\n\n\n\n<p>The <em>Shortcode tag name<\/em> field should be filled automatically.<\/p>\n\n\n<figure class=\"wp-block-gallery columns-2 wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.15.04.png\" data-size=\"1196x1004\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"860\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.15.04-1024x860.png\" alt=\"\" data-id=\"35755\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.15.04.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-16-15-04\/\" class=\"wp-image-35755\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.15.04-1024x860.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.15.04-512x430.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.15.04-128x107.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.15.04-768x645.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.15.04-80x67.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.15.04-24x20.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.15.04.png 1196w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.23.37.png\" data-size=\"1196x1004\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"860\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.23.37-1024x860.png\" alt=\"\" data-id=\"35756\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.23.37.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-16-23-37\/\" class=\"wp-image-35756\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.23.37-1024x860.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.23.37-512x430.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.23.37-128x107.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.23.37-768x645.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.23.37-80x67.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.23.37-24x20.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.23.37.png 1196w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2-create-an-attribute\">Step 2: Create an attribute<\/h3>\n\n\n\n<p>Scroll the page down and look for the <em>Attributes<\/em> section. Click on the <em>Add attribute<\/em> button to create a new attribute for our shortcode.<\/p>\n\n\n\n<p>Set the <em>Field label<\/em> to <em>Text Color<\/em> and <em>Attribute name<\/em> to <em>color<\/em>.<\/p>\n\n\n\n<p>Now let&#8217;s change the field type. This option defines how our new attribute will look in the shortcode generator (the Insert shortcode window). Set the <em>Field type<\/em> to <em>Color<\/em> and <em>Default value<\/em> to <em>#ffcc00<\/em>.<\/p>\n\n\n\n<p>Click the <em>Close attribute<\/em> button and go to Step 3.<\/p>\n\n\n<figure class=\"wp-block-gallery columns-4 wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.41.19.png\" data-size=\"1196x1052\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"901\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.41.19-1024x901.png\" alt=\"\" data-id=\"35760\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.41.19.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-16-41-19\/\" class=\"wp-image-35760\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.41.19-1024x901.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.41.19-512x450.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.41.19-128x113.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.41.19-768x676.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.41.19-80x70.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.41.19-24x21.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.41.19.png 1196w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.34.20.png\" data-size=\"1196x1052\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"901\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.34.20-1024x901.png\" alt=\"\" data-id=\"35757\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.34.20.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-16-34-20\/\" class=\"wp-image-35757\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.34.20-1024x901.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.34.20-512x450.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.34.20-128x113.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.34.20-768x676.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.34.20-80x70.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.34.20-24x21.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.34.20.png 1196w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.39.05.png\" data-size=\"1196x1052\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"901\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.39.05-1024x901.png\" alt=\"\" data-id=\"35758\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.39.05.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-16-39-05\/\" class=\"wp-image-35758\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.39.05-1024x901.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.39.05-512x450.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.39.05-128x113.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.39.05-768x676.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.39.05-80x70.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.39.05-24x21.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.39.05.png 1196w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.40.00.png\" data-size=\"1196x1052\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"901\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.40.00-1024x901.png\" alt=\"\" data-id=\"35759\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.40.00.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-16-40-00\/\" class=\"wp-image-35759\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.40.00-1024x901.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.40.00-512x450.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.40.00-128x113.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.40.00-768x676.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.40.00-80x70.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.40.00-24x21.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.40.00.png 1196w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3-the-code\">Step 3: The code<\/h3>\n\n\n\n<p>Now, when our shortcode is defined, let&#8217;s write some code. The code, that will be used to display the shortcode in posts or pages.<\/p>\n\n\n\n<p>Scroll the page down and look for the <em>Editor mode<\/em> field. This mode defines what type of code we can use. We&#8217;ll leave the editor in HTML mode.<\/p>\n\n\n\n<p>Add the following snippet to the <em>Shortcode code<\/em> field:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;span style=\"color: {{color}}\"&gt;{{content}}&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><em>{{color}}<\/em> \u2013 is the name of our attribute wrapped with double curly braces, remember the <em>Attribute name<\/em> field from Step 2?<\/li><li><em>{{content}}<\/em> \u2013 is a special variable, that will be replaced with our shortcode content (the content between the opening and closing shortcode tags).<\/li><\/ul>\n\n\n\n<p>Click the <em>Create shortcode<\/em> button.<\/p>\n\n\n<figure class=\"wp-block-gallery columns-2 wp-block-gallery-6 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.02.21.png\" data-size=\"1196x1052\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"901\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.02.21-1024x901.png\" alt=\"\" data-id=\"35761\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.02.21.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-17-02-21\/\" class=\"wp-image-35761\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.02.21-1024x901.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.02.21-512x450.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.02.21-128x113.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.02.21-768x676.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.02.21-80x70.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.02.21-24x21.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.02.21.png 1196w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.26.57.png\" data-size=\"1196x1052\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"901\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.26.57-1024x901.png\" alt=\"\" data-id=\"35762\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.26.57.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-17-26-57\/\" class=\"wp-image-35762\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.26.57-1024x901.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.26.57-512x450.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.26.57-128x113.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.26.57-768x676.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.26.57-80x70.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.26.57-24x21.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.26.57.png 1196w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"step-4-time-to-use-the-shortcode\">Step 4: Time to use the shortcode<\/h3>\n\n\n\n<p>Now, we&#8217;re all set and can use the freshly created shortcode.<\/p>\n\n\n\n<p>Navigate to <em>Dashboard \u2013 Pages \u2013 Add New<\/em> and click the <em>Insert shortcode<\/em> button. Depending on the editor you use, the <em>Insert shortcode<\/em> button may look different.<\/p>\n\n\n\n<p>Look for the new shortcode in the list. Our shortcode should be appended at the very end.<\/p>\n\n\n\n<p>That&#8217;s it, you can insert the shortcode anywhere you need it.<\/p>\n\n\n<figure class=\"wp-block-gallery columns-5 wp-block-gallery-7 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.32.57.png\" data-size=\"1196x1052\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"901\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.32.57-1024x901.png\" alt=\"\" data-id=\"35763\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-17-32-57\/\" class=\"wp-image-35763\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.32.57-1024x901.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.32.57-512x450.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.32.57-128x113.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.32.57-768x676.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.32.57-80x70.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.32.57-24x21.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.32.57.png 1196w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.35.24.png\" data-size=\"1196x1052\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"901\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.35.24-1024x901.png\" alt=\"\" data-id=\"35764\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-17-35-24\/\" class=\"wp-image-35764\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.35.24-1024x901.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.35.24-512x450.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.35.24-128x113.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.35.24-768x676.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.35.24-80x70.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.35.24-24x21.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.35.24.png 1196w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.40.15.png\" data-size=\"1216x1052\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"886\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.40.15-1024x886.png\" alt=\"\" data-id=\"35765\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-17-40-15\/\" class=\"wp-image-35765\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.40.15-1024x886.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.40.15-512x443.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.40.15-128x111.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.40.15-768x664.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.40.15-80x69.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.40.15-24x21.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.40.15.png 1216w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.42.32.png\" data-size=\"1216x1052\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"886\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.42.32-1024x886.png\" alt=\"\" data-id=\"35766\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.42.32.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-17-42-32\/\" class=\"wp-image-35766\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.42.32-1024x886.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.42.32-512x443.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.42.32-128x111.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.42.32-768x664.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.42.32-80x69.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.42.32-24x21.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.42.32.png 1216w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.43.11.png\" data-size=\"1216x1052\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"886\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.43.11-1024x886.png\" alt=\"\" data-id=\"35767\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.43.11.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-17-43-11\/\" class=\"wp-image-35767\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.43.11-1024x886.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.43.11-512x443.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.43.11-128x111.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.43.11-768x664.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.43.11-80x69.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.43.11-24x21.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-17.43.11.png 1216w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-a-content-placeholder\">Creating a content placeholder<\/h2>\n\n\n\n<p>Shortcode Creator can be used for creating dynamic content placeholders, which you can add to multiple posts or pages and edit content from a single place. Follow the instructions below to create one.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1-create-a-new-placeholder\">Step 1: Create a new placeholder<\/h3>\n\n\n\n<p>Navigate to <em>Dashboard \u2013 Shortcodes \u2013 Custom shortcodes<\/em>&nbsp;and click the <em>Create shortcode<\/em> button to create a new custom shortcode.<\/p>\n\n\n<figure class=\"wp-block-gallery alignwide columns-2 wp-block-gallery-8 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-placeholder-1-1.png\" data-size=\"2348x1536\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"670\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-placeholder-1-1-1024x670.png\" alt=\"Step 1: Create shortcode button\" data-id=\"35286\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-placeholder-1-1.png\" data-link=\"https:\/\/getshortcodes.com\/?attachment_id=35286\" class=\"wp-image-35286\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-placeholder-1-1-1024x670.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-placeholder-1-1-512x335.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-placeholder-1-1-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-placeholder-1-1-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-placeholder-1-1-1536x1005.png 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-placeholder-1-1-2048x1340.png 2048w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-placeholder-1-1-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-placeholder-1-1-24x16.png 24w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-2-1.png\" data-size=\"2348x1536\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"670\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-2-1-1024x670.png\" alt=\"Step 1: shortcode editor screen\" data-id=\"35287\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-2-1.png\" data-link=\"https:\/\/getshortcodes.com\/?attachment_id=35287\" class=\"wp-image-35287\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-2-1-1024x670.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-2-1-512x335.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-2-1-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-2-1-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-2-1-1536x1005.png 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-2-1-2048x1340.png 2048w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-2-1-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-2-1-24x16.png 24w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2-give-the-placeholder-a-name\">Step 2: Give the placeholder a name<\/h3>\n\n\n\n<p>Give your new shortcode a name, for example, <em>My Placeholder<\/em>. Type it into the <em>Shortcode title<\/em> field.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"670\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-3-1024x670.png\" alt=\"\" class=\"wp-image-35288\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-3-1024x670.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-3-512x335.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-3-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-3-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-3-1536x1005.png 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-3-2048x1340.png 2048w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-3-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-3-24x16.png 24w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3-add-a-dynamic-content\">Step 3: Add a dynamic content<\/h3>\n\n\n\n<p>Time to add dynamic content. Scroll the page down to the <em>Shortcode code<\/em> field and add the desired content to it. This content will be displayed everywhere you&#8217;ll add the created shortcode. You can use any HTML code or even other shortcodes in this field.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"670\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-4-1024x670.png\" alt=\"\" class=\"wp-image-35289\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-4-1024x670.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-4-512x335.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-4-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-4-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-4-1536x1005.png 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-4-2048x1340.png 2048w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-4-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-4-24x16.png 24w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-4-save\">Step 4: Save<\/h3>\n\n\n\n<p>Click the <em>Create shortcode<\/em> button.<\/p>\n\n\n<figure class=\"wp-block-gallery alignwide columns-2 wp-block-gallery-9 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-5.png\" data-size=\"2348x1536\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"670\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-5-1024x670.png\" alt=\"Step 4: Create shortcode button\" data-id=\"35291\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-5.png\" data-link=\"https:\/\/getshortcodes.com\/?attachment_id=35291\" class=\"wp-image-35291\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-5-1024x670.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-5-512x335.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-5-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-5-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-5-1536x1005.png 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-5-2048x1340.png 2048w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-5-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-5-24x16.png 24w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-6.png\" data-size=\"2348x1536\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"670\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-6-1024x670.png\" alt=\"Step 4: shortcode successfully created\" data-id=\"35292\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-6.png\" data-link=\"https:\/\/getshortcodes.com\/?attachment_id=35292\" class=\"wp-image-35292\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-6-1024x670.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-6-512x335.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-6-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-6-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-6-1536x1005.png 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-6-2048x1340.png 2048w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-6-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-6-24x16.png 24w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"step-5-add-the-placeholder-to-posts-or-pages\">Step 5: Add the placeholder to posts or pages<\/h3>\n\n\n\n<p>Now, you can use the freshly created shortcode to display your dynamic content. Just add the shortcode anywhere you need. For example, navigate to <em>Dashboard \u2013 Pages \u2013 Add New<\/em> and click the <em>Insert shortcode<\/em> button. The new shortcode will be available in the list.<\/p>\n\n\n<figure class=\"wp-block-gallery alignwide columns-3 wp-block-gallery-10 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-7.png\" data-size=\"2348x1536\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"670\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-7-1024x670.png\" alt=\"Step 5: Block editor\" data-id=\"35293\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-7.png\" data-link=\"https:\/\/getshortcodes.com\/?attachment_id=35293\" class=\"wp-image-35293\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-7-1024x670.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-7-512x335.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-7-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-7-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-7-1536x1005.png 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-7-2048x1340.png 2048w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-7-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-7-24x16.png 24w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-8.png\" data-size=\"2348x1536\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"670\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-8-1024x670.png\" alt=\"Step 5: Classic editor\" data-id=\"35294\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-8.png\" data-link=\"https:\/\/getshortcodes.com\/?attachment_id=35294\" class=\"wp-image-35294\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-8-1024x670.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-8-512x335.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-8-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-8-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-8-1536x1005.png 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-8-2048x1340.png 2048w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-8-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-8-24x16.png 24w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-9.png\" data-size=\"2348x1536\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"670\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-9-1024x670.png\" alt=\"Step 5: New shortcode available in the Insert shortcode window\" data-id=\"35295\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-9.png\" data-link=\"https:\/\/getshortcodes.com\/?attachment_id=35295\" class=\"wp-image-35295\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-9-1024x670.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-9-512x335.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-9-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-9-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-9-1536x1005.png 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-9-2048x1340.png 2048w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-9-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-9-24x16.png 24w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-10.png\" data-size=\"2348x1536\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"670\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-10-1024x670.png\" alt=\"Step 5: New shortcode added to the editor\" data-id=\"35296\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-10.png\" data-link=\"https:\/\/getshortcodes.com\/?attachment_id=35296\" class=\"wp-image-35296\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-10-1024x670.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-10-512x335.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-10-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-10-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-10-1536x1005.png 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-10-2048x1340.png 2048w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-10-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-10-24x16.png 24w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-11.png\" data-size=\"2348x1536\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"670\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-11-1024x670.png\" alt=\"Step 5: Dynamic content is displayed on the frontend\" data-id=\"35297\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-11.png\" data-link=\"https:\/\/getshortcodes.com\/?attachment_id=35297\" class=\"wp-image-35297\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-11-1024x670.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-11-512x335.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-11-128x84.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-11-768x502.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-11-1536x1005.png 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-11-2048x1340.png 2048w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-11-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/01\/dynamic-content-11-24x16.png 24w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"step-6-edit-the-dynamic-content\">Step 6: Edit the dynamic content<\/h3>\n\n\n\n<p>Now, when the dynamic content is displayed on your pages, you can change it. To update the dynamic content just edit the contents of the <em>Shortcode code<\/em> field (from step 3).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"shortcode-editor\">Shortcode Editor<\/h2>\n\n\n\n<p>Navigate to <em>Dashboard \u2192 Shortcodes \u2192 Custom shortcodes<\/em> and click the <em>Create shortcode<\/em> button at the top of the screen. Below you&#8217;ll find the description of each field.<\/p>\n\n\n<figure class=\"wp-block-gallery columns-2 wp-block-gallery-11 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-34-46.png\" data-size=\"1392x870\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-34-46-1024x640.png\" alt=\"\" data-id=\"36494\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-34-46.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/15-09-202011-34-46\/\" class=\"wp-image-36494\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-34-46-1024x640.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-34-46-512x320.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-34-46-128x80.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-34-46-768x480.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-34-46-80x50.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-34-46-24x15.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-34-46-114x70.png 114w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-34-46.png 1392w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-32-14-1.png\" data-size=\"1392x870\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-32-14-1-1024x640.png\" alt=\"\" data-id=\"36493\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-32-14-1.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/15-09-202011-32-14-1\/\" class=\"wp-image-36493\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-32-14-1-1024x640.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-32-14-1-512x320.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-32-14-1-128x80.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-32-14-1-768x480.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-32-14-1-80x50.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-32-14-1-24x15.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-32-14-1-114x70.png 114w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/09\/15-09-2020@11-32-14-1.png 1392w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"shortcode-title\">Shortcode title<\/h3>\n\n\n\n<p>Full name of the shortcode. This name will be shown in the shortcode generator (in the Insert shortcode window). You can use any text in this field. It is not recommended to use long names; one-two words will be enough.<\/p>\n\n\n<figure class=\"wp-block-gallery columns-2 wp-block-gallery-12 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.53.png\" data-size=\"1051x981\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"956\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.53-1024x956.png\" alt=\"\" data-id=\"35732\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.53.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-14-26-53\/\" class=\"wp-image-35732\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.53-1024x956.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.53-512x478.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.53-128x119.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.53-768x717.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.53-80x75.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.53-24x22.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.53.png 1051w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.20.png\" data-size=\"1051x981\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"956\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.20-1024x956.png\" alt=\"\" data-id=\"35731\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.20.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-14-26-20\/\" class=\"wp-image-35731\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.20-1024x956.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.20-512x478.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.20-128x119.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.20-768x717.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.20-80x75.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.20-24x22.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.26.20.png 1051w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"shortcode-tag-name\">Shortcode tag name<\/h3>\n\n\n\n<p>Short name of the shortcode. This value will be used at the insertion of the shortcode into the post editor. You can use only Latin letters in lower case <em>a-z<\/em>, digits <em>0-9<\/em>, and underscores <em>_<\/em> in this field. Example: use <code>my_shortcode<\/code> as shortcode tag name and you will create the following shortcode:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;su_my_shortcode]<\/code><\/pre>\n\n\n<figure class=\"wp-block-gallery columns-3 wp-block-gallery-13 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.29.43.png\" data-size=\"1051x981\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"956\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.29.43-1024x956.png\" alt=\"\" data-id=\"35733\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.29.43.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-14-29-43\/\" class=\"wp-image-35733\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.29.43-1024x956.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.29.43-512x478.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.29.43-128x119.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.29.43-768x717.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.29.43-80x75.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.29.43-24x22.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.29.43.png 1051w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.53.21.png\" data-size=\"1051x981\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"956\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.53.21-1024x956.png\" alt=\"\" data-id=\"35739\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.53.21.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-14-53-21\/\" class=\"wp-image-35739\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.53.21-1024x956.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.53.21-512x478.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.53.21-128x119.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.53.21-768x717.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.53.21-80x75.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.53.21-24x22.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.53.21.png 1051w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.51.00.png\" data-size=\"1051x981\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"956\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.51.00-1024x956.png\" alt=\"\" data-id=\"35740\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.51.00.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-14-51-00\/\" class=\"wp-image-35740\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.51.00-1024x956.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.51.00-512x478.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.51.00-128x119.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.51.00-768x717.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.51.00-80x75.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.51.00-24x22.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/Safari-2020-04-20-at-14.51.00.png 1051w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"shortcode-description\">Shortcode description<\/h3>\n\n\n\n<p>A brief description of the shortcode. This value will be used as a pop-up tip at the selection of shortcode in the Insert shortcode window and in the shortcode settings window.<\/p>\n\n\n<figure class=\"wp-block-gallery columns-2 wp-block-gallery-14 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.55.54.png\" data-size=\"1051x981\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"956\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.55.54-1024x956.png\" alt=\"\" data-id=\"35741\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.55.54.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-14-55-54\/\" class=\"wp-image-35741\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.55.54-1024x956.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.55.54-512x478.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.55.54-128x119.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.55.54-768x717.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.55.54-80x75.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.55.54-24x22.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.55.54.png 1051w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.56.54.png\" data-size=\"1051x981\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"956\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.56.54-1024x956.png\" alt=\"\" data-id=\"35742\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.56.54.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-14-56-54\/\" class=\"wp-image-35742\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.56.54-1024x956.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.56.54-512x478.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.56.54-128x119.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.56.54-768x717.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.56.54-80x75.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.56.54-24x22.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-14.56.54.png 1051w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"default-content\">Default content<\/h3>\n\n\n\n<p>This text will be used as default content of the shortcode. Shortcode content is a text placed between opening and closing tags of the shortcode. Leave this field empty if your shortcode does not imply use of any content and closing tag. Example of shortcode with content:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[my_shortcode] Default content [\/my_shortcode]<\/pre>\n\n\n<figure class=\"wp-block-gallery columns-3 wp-block-gallery-15 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.12.24.png\" data-size=\"1051x981\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"956\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.12.24-1024x956.png\" alt=\"\" data-id=\"35744\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.12.24.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-15-12-24\/\" class=\"wp-image-35744\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.12.24-1024x956.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.12.24-512x478.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.12.24-128x119.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.12.24-768x717.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.12.24-80x75.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.12.24-24x22.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.12.24.png 1051w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.13.07.png\" data-size=\"1051x981\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"956\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.13.07-1024x956.png\" alt=\"\" data-id=\"35745\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.13.07.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-15-13-07\/\" class=\"wp-image-35745\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.13.07-1024x956.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.13.07-512x478.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.13.07-128x119.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.13.07-768x717.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.13.07-80x75.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.13.07-24x22.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.13.07.png 1051w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.14.24.png\" data-size=\"1051x981\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"956\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.14.24-1024x956.png\" alt=\"\" data-id=\"35746\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.14.24.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-15-14-24\/\" class=\"wp-image-35746\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.14.24-1024x956.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.14.24-512x478.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.14.24-128x119.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.14.24-768x717.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.14.24-80x75.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.14.24-24x22.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.14.24.png 1051w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"icon\">Icon<\/h3>\n\n\n\n<p>Shortcode icon. This icon will be displayed near your shortcode in the Insert shortcode window.<\/p>\n\n\n<figure class=\"wp-block-gallery columns-2 wp-block-gallery-16 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.38.52.png\" data-size=\"1051x981\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"956\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.38.52-1024x956.png\" alt=\"\" data-id=\"35748\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.38.52.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-15-38-52\/\" class=\"wp-image-35748\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.38.52-1024x956.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.38.52-512x478.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.38.52-128x119.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.38.52-768x717.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.38.52-80x75.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.38.52-24x22.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.38.52.png 1051w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.39.48.png\" data-size=\"1051x981\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"956\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.39.48-1024x956.png\" alt=\"\" data-id=\"35749\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.39.48.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-15-39-48\/\" class=\"wp-image-35749\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.39.48-1024x956.png 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.39.48-512x478.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.39.48-128x119.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.39.48-768x717.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.39.48-80x75.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.39.48-24x22.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-15.39.48.png 1051w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"attributes\">Attributes<\/h3>\n\n\n\n<p>In this section, you can add attributes (options) to your shortcode. Attributes are shortcode settings allowing you to create more flexible shortcodes. Example of a shortcode with an attribute:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[my_shortcode color=\"red\"]<\/pre>\n\n\n\n<p>Read the <a href=\"#creating-a-shortcode\">Creating a shortcode<\/a> section of this article to understand how you can use attributes in your shortcode.<\/p>\n\n\n<figure class=\"wp-block-gallery columns-3 wp-block-gallery-17 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.06.19.png\" data-size=\"1002x1073\"><img loading=\"lazy\" decoding=\"async\" width=\"956\" height=\"1024\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.06.19-956x1024.png\" alt=\"\" data-id=\"35791\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.06.19.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-21-at-12-06-19\/\" class=\"wp-image-35791\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.06.19-956x1024.png 956w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.06.19-478x512.png 478w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.06.19-120x128.png 120w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.06.19-768x822.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.06.19-75x80.png 75w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.06.19-22x24.png 22w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.06.19.png 1002w\" sizes=\"auto, (max-width: 956px) 100vw, 956px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.04.png\" data-size=\"1002x1073\"><img loading=\"lazy\" decoding=\"async\" width=\"956\" height=\"1024\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.04-956x1024.png\" alt=\"\" data-id=\"35790\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.04.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-21-at-12-07-04\/\" class=\"wp-image-35790\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.04-956x1024.png 956w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.04-478x512.png 478w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.04-120x128.png 120w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.04-768x822.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.04-75x80.png 75w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.04-22x24.png 22w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.04.png 1002w\" sizes=\"auto, (max-width: 956px) 100vw, 956px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.26.png\" data-size=\"1002x1073\"><img loading=\"lazy\" decoding=\"async\" width=\"956\" height=\"1024\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.26-956x1024.png\" alt=\"\" data-id=\"35789\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.26.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-21-at-12-07-26\/\" class=\"wp-image-35789\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.26-956x1024.png 956w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.26-478x512.png 478w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.26-120x128.png 120w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.26-768x822.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.26-75x80.png 75w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.26-22x24.png 22w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-21-at-12.07.26.png 1002w\" sizes=\"auto, (max-width: 956px) 100vw, 956px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"field-label\">Field label<\/h4>\n\n\n\n<p>This is the label that will be displayed in the Insert shortcode window near the attribute field.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"attribute-name\">Attribute name<\/h4>\n\n\n\n<p>This is a short name that will be used in the generated shortcode and in the Shortcode code field of the shortcode editor.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"field-type\">Field type<\/h4>\n\n\n\n<p>This is the type of field. Read the <a href=\"#attribute-field-types\">Attribute field types<\/a> section to learn what types of fields you can create.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"default-value\">Default value<\/h4>\n\n\n\n<p>This value will be used in the Insert shortcode window. It will also be used if you don&#8217;t specify a custom value in the shortcode.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"field-description\">Field description<\/h4>\n\n\n\n<p>A brief description of the field.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"code-editor\">Code editor<\/h3>\n\n\n\n<p>This is the code that will be used (executed) to display your shortcode on the front part of your site. You can write the code in two different modes \u2013 HTML and PHP.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"html-mode\">HTML mode<\/h4>\n\n\n\n<p>This simplified mode allows you to use HTML code and other shortcodes.<\/p>\n\n\n\n<p>What you can use in this mode:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Any HTML code;<\/li><li>Other shortcodes;<\/li><li>Variables, like <em>{{color}}<\/em> (to represent an attribute value);<\/li><li>Special variable: <em>{{content}}<\/em>.<\/li><\/ul>\n\n\n\n<p>Variables will be replaced by attribute values. To display a value of an attribute, you should write its name (Attribute name) in double curly brackets. For example, if the attribute name is <em>color<\/em>, then your variable will look like <em>{{color}}<\/em>. Also, you can use the <em>{{content}}<\/em> variable, which will be replaced with shortcode content (the text between the opening and closing tags of the shortcode).<\/p>\n\n\n\n<p>Read the <a href=\"#creating-a-shortcode\">Creating a shortcode<\/a> section of this article to better understand what variables are and how you can utilize them.<\/p>\n\n\n<figure class=\"wp-block-gallery columns-3 wp-block-gallery-18 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.00.04.png\" data-size=\"970x993\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"512\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.00.04-500x512.png\" alt=\"\" data-id=\"35751\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.00.04.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-16-00-04\/\" class=\"wp-image-35751\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.00.04-500x512.png 500w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.00.04-125x128.png 125w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.00.04-768x786.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.00.04-78x80.png 78w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.00.04-24x24.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.00.04.png 970w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.02.27.png\" data-size=\"970x993\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"512\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.02.27-500x512.png\" alt=\"\" data-id=\"35753\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.02.27.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-16-02-27\/\" class=\"wp-image-35753\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.02.27-500x512.png 500w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.02.27-125x128.png 125w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.02.27-768x786.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.02.27-78x80.png 78w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.02.27-24x24.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.02.27.png 970w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.01.38.png\" data-size=\"970x993\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"512\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.01.38-500x512.png\" alt=\"\" data-id=\"35752\" data-full-url=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.01.38.png\" data-link=\"https:\/\/getshortcodes.com\/docs\/creating-custom-shortcodes-with-the-shortcode-creator-add-on\/safari-2020-04-20-at-16-01-38\/\" class=\"wp-image-35752\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.01.38-500x512.png 500w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.01.38-125x128.png 125w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.01.38-768x786.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.01.38-78x80.png 78w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.01.38-24x24.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/Safari-2020-04-20-at-16.01.38.png 970w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"php-mode\">PHP mode<\/h4>\n\n\n\n<p>This mode is intended for advanced users and has much more powerful capabilities compared to HTML mode. In this mode, you can use PHP code.<\/p>\n\n\n\n<p>The code contained in the editor is a body of function invoked at the execution of a shortcode. This means you cannot define new functions or classes in your code. This also means that you should not use opening and closing PHP tags (<code>&lt;?php<\/code> and <code>?&gt;<\/code>) in the beginning and in the end of your code.<\/p>\n\n\n\n<p>You can use variables to get the value of a shortcode attribute. Attribute names should be written in a standard for PHP language way, with a dollar sign at the start. For example, if the name of the attribute is <code>color<\/code>, then the variable should be written as <code>$color<\/code>.<\/p>\n\n\n\n<p>Similar to HTML mode you can use <code>$content<\/code> variable which will contain shortcode content (text between opening and closing tags of the shortcode).<\/p>\n\n\n\n<p>Besides, you can use standard WordPress functions, as well as the other shortcodes. You can find more information on the use of other shortcodes with the help of <code>do_shortcode<\/code> function in <a href=\"\/docs\/using-shortcodes-in-template-files\/\">Use of shortcodes in template files<\/a> article.<\/p>\n\n\n\n<p>In this mode, you can use the keyword echo to display shortcode output.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"attribute-field-types\">Attribute field types<\/h2>\n\n\n\n<p>You can change the way your attributes work and look in the Insert shortcode window by changing their type and settings. The following part will describe available field types and how you can use them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"text\">Text<\/h3>\n\n\n\n<p>Simple text field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium is-style-outline\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"142\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/text-1-512x142.png\" alt=\"\" class=\"wp-image-35772\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/text-1-512x142.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/text-1-128x35.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/text-1-768x213.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/text-1-80x22.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/text-1-24x7.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/text-1.png 880w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"number\">Number<\/h3>\n\n\n\n<p>This field allows a user to choose a number. You can define the minimum and the maximum number as well as the step size.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium is-style-outline\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"142\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/number-1-512x142.png\" alt=\"\" class=\"wp-image-35773\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/number-1-512x142.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/number-1-128x35.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/number-1-768x213.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/number-1-80x22.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/number-1-24x7.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/number-1.png 880w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"color\">Color<\/h3>\n\n\n\n<p>The color picker field. Allows a user to pick a HEX color in the following format:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#AABBCC<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-medium is-style-outline\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"142\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/color-512x142.png\" alt=\"\" class=\"wp-image-35774\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/color-512x142.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/color-128x35.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/color-768x213.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/color-80x22.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/color-24x7.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/color.png 880w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"dropdown\">Dropdown<\/h3>\n\n\n\n<p>Dropdown field. You can define multiple options with labels in the following format:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>option1|Option 1 Label\noption2|Option 2 Label<\/code><\/pre>\n\n\n\n<p>This field returns only selected value, without a label.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium is-style-outline\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"142\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/dropdown-512x142.png\" alt=\"\" class=\"wp-image-35775\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/dropdown-512x142.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/dropdown-128x35.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/dropdown-768x213.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/dropdown-80x22.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/dropdown-24x7.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/dropdown.png 880w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"switch\">Switch<\/h3>\n\n\n\n<p>Toggle field. This field allows a user to set the attribute value to <em>yes<\/em> or to <em>no<\/em>. Mostly useful in PHP mode. Example PHP code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if ( $my_attribute === 'yes' ) {\n   \/\/ do something if the field was set to Yes\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-medium is-style-outline\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"128\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/switch-512x128.png\" alt=\"\" class=\"wp-image-35776\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/switch-512x128.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/switch-128x32.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/switch-768x192.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/switch-80x20.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/switch-24x6.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/switch.png 880w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"icon--1\">Icon<\/h3>\n\n\n\n<p>Icon picker field. This field allows a user to pick an icon from the ForkAwesome icon set or use an image from the Media Library. The resulting value may be a ForkAwesome icon name in the following format \u2013 <em>icon: icon-name<\/em> or an <em>image URL<\/em>. This field type can only be helpful in the PHP mode.<\/p>\n\n\n\n<p>The value can be processed with the <a rel=\"noreferrer noopener\" href=\"https:\/\/plugins.trac.wordpress.org\/browser\/shortcodes-ultimate\/trunk\/includes\/functions-html.php#L10\" data-type=\"URL\" data-id=\"https:\/\/plugins.trac.wordpress.org\/browser\/shortcodes-ultimate\/trunk\/includes\/functions-html.php#L10\" target=\"_blank\">su_html_icon()<\/a> function. The code below shows how you can use it. Depending on the <code>$icon<\/code> value, the function will return markup with <code>&lt;i&gt;<\/code> or <code>&lt;img&gt;<\/code> tag.<\/p>\n\n\n\n<p>In other words, the <code>su_html_icon()<\/code> function takes a string like <code>icon: star<\/code> and turns it into a string like <code>&lt;i class=\"sui sui-star\" style=\"width:48px;height:48px;\"&gt;&lt;i&gt;<\/code>. Also, it can take a string like <code>https:\/\/example.com\/image.png<\/code> and turn it into <code>&lt;img src=\"https:\/\/example.com\/image.png\" width=\"48\" height=\"48\" \/&gt;<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>echo su_html_icon( array(\n  'icon'       =&gt; $icon,     \/\/ this is the value of the attribute\n  'size'       =&gt; 48,        \/\/ Icon size\n  'color'      =&gt; '#ffcc00', \/\/ ForkAwesome icon color\n  'style'      =&gt; '',        \/\/ Additional CSS styles\n  'alt'        =&gt; '',        \/\/ Alternative text for &lt;img&gt; icon\n  'enqueue-fa' =&gt; false,     \/\/ Set to true to load the ForkAwesome font\n) );<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-medium is-style-outline\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"191\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/icon-512x191.png\" alt=\"\" class=\"wp-image-35777\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/icon-512x191.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/icon-128x48.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/icon-768x286.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/icon-80x30.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/icon-24x9.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/icon.png 880w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"media-library\">Media Library<\/h3>\n\n\n\n<p>Image picker field. This field allows a user to pick an image from the Media Library. Selected image URL will be used as the attribute value.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium is-style-outline\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"189\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/media-library-512x189.png\" alt=\"\" class=\"wp-image-35778\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/media-library-512x189.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/media-library-128x47.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/media-library-768x283.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/media-library-80x29.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/media-library-24x9.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/media-library.png 880w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"image-source\">Image Source<\/h3>\n\n\n\n<p>A complex field for picking multiple images. Works similar to the Image Source field in the Image Carousel shortcode.<\/p>\n\n\n\n<p>The value can be processed with the <a rel=\"noreferrer noopener\" href=\"https:\/\/getshortcodes.com\/docs\/function-reference-su_get_gallery_slides\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/getshortcodes.com\/docs\/function-reference-su_get_gallery_slides\/\">su_get_gallery_slides()<\/a> function. Also, you can download the Simple Gallery demo shortcode and import it to your site to better understand how this field type can be utilized.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2021\/04\/simple-gallery-shortcode.xml_.zip\">Download Simple Gallery shortcode<\/a><\/li><li><a href=\"#importing-custom-shortcodes\" data-type=\"internal\" data-id=\"#importing-custom-shortcodes\">How to import the downloaded shortcode<\/a><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-medium is-style-outline\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"249\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/image-source-512x249.png\" alt=\"\" class=\"wp-image-35779\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/image-source-512x249.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/image-source-128x62.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/image-source-768x374.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/image-source-80x39.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/image-source-24x12.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2020\/04\/image-source.png 880w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"exporting-custom-shortcodes\">Exporting custom shortcodes<\/h2>\n\n\n\n<p>You can export created shortcode into an <code>.xml<\/code> file to import it later using the built-in WordPress tool. Take the following steps to export shortcodes:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Navigate to&nbsp;<em>Dashboard \u2192 Tools \u2192 Export<\/em>;<\/li><li>Select <em>Custom shortcodes<\/em> and press the <em>Download Export File<\/em> button.<\/li><\/ol>\n\n\n\n<p>Download of the <code>.xml<\/code> file containing your shortcodes will be started. You can now import this file on another site.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"963\" height=\"636\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-Tl1aVyDnJj.png\" alt=\"\" class=\"wp-image-33846\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-Tl1aVyDnJj.png 963w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-Tl1aVyDnJj-512x338.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-Tl1aVyDnJj-128x85.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-Tl1aVyDnJj-768x507.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-Tl1aVyDnJj-80x53.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-Tl1aVyDnJj-24x16.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-Tl1aVyDnJj-182x120.png 182w\" sizes=\"auto, (max-width: 963px) 100vw, 963px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"importing-custom-shortcodes\">Importing custom shortcodes<\/h2>\n\n\n\n<p>Take the following steps to import custom shortcodes:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Navigate to&nbsp;<em>Dashboard \u2192 Tools \u2192 Import<\/em>;<\/li><li>Find WordPress in the list and click the <em>Run Importer<\/em> link;<\/li><li>Choose an <code>.xml<\/code> file with shortcodes and press the <em>Upload file and import<\/em> button.<\/li><\/ol>\n\n\n\n<p>New shortcodes will be available under the&nbsp;<em>Dashboard \u2192 Shortcodes \u2192 Custom shortcodes<\/em> page after completion of the import process.<\/p>\n\n\n<figure class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-19 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-zTFylo8lQb.png\" data-size=\"965x768\"><img loading=\"lazy\" decoding=\"async\" width=\"965\" height=\"768\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-zTFylo8lQb.png\" alt=\"\" data-id=\"33847\" class=\"wp-image-33847\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-zTFylo8lQb.png 965w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-zTFylo8lQb-512x407.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-zTFylo8lQb-128x102.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-zTFylo8lQb-768x611.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-zTFylo8lQb-80x64.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-zTFylo8lQb-24x19.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-zTFylo8lQb-151x120.png 151w\" sizes=\"auto, (max-width: 965px) 100vw, 965px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-lEe7i9noKi.png\" data-size=\"963x625\"><img loading=\"lazy\" decoding=\"async\" width=\"963\" height=\"625\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-lEe7i9noKi.png\" alt=\"\" data-id=\"33848\" class=\"wp-image-33848\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-lEe7i9noKi.png 963w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-lEe7i9noKi-512x332.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-lEe7i9noKi-128x83.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-lEe7i9noKi-768x498.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-lEe7i9noKi-80x52.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-lEe7i9noKi-24x16.png 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/03\/file-lEe7i9noKi-185x120.png 185w\" sizes=\"auto, (max-width: 963px) 100vw, 963px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n<p><\/p>\n","protected":false},"featured_media":0,"template":"","docs_category":[25],"class_list":["post-36592","docs","type-docs","status-publish","hentry","docs_category-addons"],"_links":{"self":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs\/36592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/types\/docs"}],"wp:attachment":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/media?parent=36592"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs_category?post=36592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}