{"id":47575,"date":"2022-03-07T07:41:47","date_gmt":"2022-03-07T07:41:47","guid":{"rendered":"\/tutorials\/?p=47575"},"modified":"2026-03-09T19:18:42","modified_gmt":"2026-03-09T19:18:42","slug":"create-a-shortcode-in-wordpress","status":"publish","type":"post","link":"\/ng\/tutorials\/create-a-shortcode-in-wordpress","title":{"rendered":"How to create a shortcode in WordPress (in 7 steps)"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>Learning how to create a shortcode in WordPress can be an efficient way to customize your posts and pages. However, if you&rsquo;re new to the process, you may struggle to understand how to use such a feature on your site.<\/p><p>That&rsquo;s why we&rsquo;ve put together a guide to help you get started. By looking at how shortcodes work and how to apply them effectively, you can begin customizing your content to your liking without the need for additional plugins.<\/p><p>In this post, we&rsquo;ll discuss what WordPress shortcodes are and why you might consider using them. We&rsquo;ll then show you how to create your own. Let&rsquo;s get started!<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-EN.pdf\">Download all-in-one WordPress cheat sheet<\/a><\/p><p>\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-create-a-shortcode-in-wordpress-video-tutorial\">How to Create a Shortcode in WordPress Video Tutorial<\/h2><p>Learn step-by-step how to create a WordPress shortcode.<\/p><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Create a Shortcode in WordPress\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/ooDcpimdf_w?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><p>\n  <div class=\"youtube-shortcode\">\n    <div class=\"row\">\n      <div class=\"col-7 col-sm-8 d-flex align-items-center\">\n        <img decoding=\"async\" class=\"channel-logo\" src=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/youtube-channels\/hostinger-academy.jpg\" alt=\"youtube channel logo\">\n        <div class=\"d-flex flex-column justify-content-between\">\n          <span class=\"slogan d-none d-sm-block\">Subscribe For more educational videos!<\/span>\n          <span class=\"channel-name\">Hostinger Academy<\/span>\n                    <\/div>\n      <\/div>\n      <div class=\"col-5 col-sm-4 d-flex align-items-center justify-content-end\">\n          <a class=\"subscribe-button\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" href=\"http:\/\/www.youtube.com\/channel\/UCbNIC-svDbtUOH2qsLnPQPg?sub_confirmation=1\">\n            <img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/icons\/youtube.svg\" alt=\"subscribe\">\n            <span>Subscribe<\/span>\n          <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n\n    \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-what-are-wordpress-shortcodes\">What Are WordPress Shortcodes<\/h2><p>WordPress shortcodes act as shortcuts that allow you to embed elements into a post or page quickly. These usually consist of a single line of code within square brackets, such as <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">[exampleshortcode]<\/code>, for example. This code will display a predetermined feature on the front end of your site.<\/p><p>WordPress <a href=\"https:\/\/wordpress.org\/news\/2008\/03\/wordpress-25-brecker\/\">first introduced shortcodes<\/a> with the release of the <a href=\"https:\/\/codex.wordpress.org\/Shortcode_API\">Shortcode API<\/a>. This enables users to easily add engaging elements to their posts and pages, such as <a href=\"\/ng\/tutorials\/wordpress-google-maps\">Google Maps<\/a> or <a href=\"\/ng\/tutorials\/wordpress\/how-to-add-facebook-like-button-to-wordpress\">Facebook &ldquo;Like&rdquo; button<\/a>.<\/p><p>There are <a href=\"https:\/\/developer.wordpress.org\/plugins\/shortcodes\/\">six default shortcodes<\/a> in WordPress:<\/p><ul class=\"wp-block-list\">\n<li><strong>caption<\/strong>: wraps captions around content<\/li>\n\n\n\n<li><strong>gallery<\/strong>: shows image galleries<\/li>\n\n\n\n<li><strong>audio<\/strong>: embeds and plays audio files<\/li>\n\n\n\n<li><strong>video<\/strong>: embeds and plays video files<\/li>\n\n\n\n<li><strong>playlist<\/strong>: displays a collection of audio or video files<\/li>\n\n\n\n<li><strong>embed<\/strong>: wraps embedded items<\/li>\n<\/ul><p>You will also come across two basic types of shortcode formatting &ndash; self-closing and enclosing. Self-closing shortcodes can stand on their own and do not need a closing tag, such as the <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">gallery<\/code> or <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">video<\/code> shortcodes above.<\/p><p>Meanwhile, <a href=\"https:\/\/developer.wordpress.org\/plugins\/shortcodes\/enclosing-shortcodes\/\">enclosing shortcodes<\/a> wrap around the content you want to modify and require you to close the tag manually. For example, you can embed a YouTube video by wrapping the URL in <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">embed<\/code> and <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">\/embed<\/code> tags:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-enclosing-shortcode.png\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"262\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-enclosing-shortcode.png\/public\" alt=\"Example of a enclosing shortcode used to embed a YouTube video on a WordPress post\" class=\"wp-image-47600\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-enclosing-shortcode.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-enclosing-shortcode.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-enclosing-shortcode.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-enclosing-shortcode.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/a><\/figure><\/div><p>For example, this would create the following result:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/embedded-video-shortcode.png\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"518\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/embedded-video-shortcode.png\/public\" alt=\"Example of a WordPress post with an embedded video player\" class=\"wp-image-47601\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/embedded-video-shortcode.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/embedded-video-shortcode.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/embedded-video-shortcode.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/embedded-video-shortcode.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/a><\/figure><\/div><p>Some of the <a href=\"\/ng\/tutorials\/best-wordpress-plugins\">best WordPress plugins<\/a> come with their own shortcodes. For instance, WP Forms and Contact Form 7 have shortcodes that enable you to <a href=\"\/ng\/tutorials\/how-to-create-a-contact-form-on-wordpress\">embed a WordPress contact form<\/a> into a post or page quickly. You can also use a plugin like MaxButtons to add a <a href=\"\/ng\/tutorials\/wordpress-button-shortcode\">WordPress button shortcode<\/a> wherever you want on your site.<\/p><h2 class=\"wp-block-heading\" id=\"h-why-should-you-consider-using-wordpress-shortcodes\">Why Should You Consider Using WordPress Shortcodes<\/h2><p>There are many reasons you may wish to use WordPress shortcodes. For instance, it&rsquo;s easier and quicker than learning and writing a long piece of code in HTML. Moreover, they help you keep your content clean and accessible.<\/p><p>Shortcodes can be used to automate some features that you use repeatedly. For instance, if you use a <strong>call to action (CTA)<\/strong> button on every one of your posts, having a dedicated shortcode ready can be a speedy and practical solution.<\/p><p>It is worth mentioning that the <a href=\"\/ng\/tutorials\/gutenberg-wordpress\">Gutenberg Editor<\/a> does operate similarly, relying on the use of shortcodes. It enables WordPress users to add several interactive features through the use of blocks.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-gutenberg-editor.png\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"403\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-gutenberg-editor.png\/public\" alt=\"Different block options available on the Gutenberg editor for a WordPress post\" class=\"wp-image-47604\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-gutenberg-editor.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-gutenberg-editor.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-gutenberg-editor.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-gutenberg-editor.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/a><\/figure><\/div><p>Such a method is much more beginner-friendly, as you can add content directly onto the user interface. However, the WordPress Block Editor is still limited in what it offers. Luckily, it comes with a <em>Shortcode<\/em> block, enabling you to add custom content to your pages.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-create-a-shortcode-in-wordpress-in-7-steps\">How to Create a Shortcode in WordPress (In 7 Steps)<\/h2><p>If you already have some coding knowledge, you may want to create your own custom shortcodes. This gives you complete control over the appearance and functionality of your site.<\/p><p>Let&rsquo;s look at how to create a custom WordPress shortcode. In this tutorial, we&rsquo;ll be adding social media links to a post as our example.<\/p><h3 class=\"wp-block-heading\" id=\"h-step-1-create-a-new-theme-file\">Step 1 &ndash; Create a New Theme File<\/h3><p>Before you start, it&rsquo;s a good idea to <a href=\"\/ng\/tutorials\/backup-wordpress\">fully backup your WordPress<\/a> site. You&rsquo;ll also need to create a separate file for your custom shortcode outside your <a href=\"\/ng\/tutorials\/functions-php-wordpress\">theme&rsquo;s functions.php file<\/a>. This will provide a fallback in case something goes wrong.<\/p><p>You can use a <strong>File Transfer Protocol (FTP)<\/strong> client such as <a href=\"\/ng\/tutorials\/ftp\/filezilla-ftp-configuration\">FileZilla<\/a> to access your site&rsquo;s theme files. Once connected to your site, navigate to <strong>wp-content &gt; themes<\/strong>, and locate the folder for your current theme. In our example, this will be <strong>rosa-lite<\/strong>:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/filezilla-interface.png\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"234\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/filezilla-interface.png\/public\" alt=\"FileZilla interface, used to access the site&rsquo;s theme files\" class=\"wp-image-47606\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/filezilla-interface.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/filezilla-interface.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/filezilla-interface.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/filezilla-interface.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/a><\/figure><\/div><p>Open your theme&rsquo;s folder, right-click it, and hit the <strong>Create new file <\/strong>button.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/filezilla-create-file.png\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"678\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/filezilla-create-file.png\/public\" alt=\"The create a new file option that appears after clicking right in the theme folder in FileZilla\" class=\"wp-image-47607\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/filezilla-create-file.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/filezilla-create-file.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/filezilla-create-file.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/filezilla-create-file.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/a><\/figure><\/div><p>Name your new file <strong>custom-shortcodes.php<\/strong><em> <\/em>and click <strong>OK<\/strong>. You can then edit it by right-clicking on it and selecting the <strong>View\/Edit<\/strong><em> <\/em>option<em>:<\/em><\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/view-edit-filezilla.png\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"681\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/view-edit-filezilla.png\/public\" alt=\"View\/Edit option to edit files on FileZilla\" class=\"wp-image-47608\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/view-edit-filezilla.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/view-edit-filezilla.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/view-edit-filezilla.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/view-edit-filezilla.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/a><\/figure><\/div><p>This will open the file in your default text editor. Then, you&rsquo;ll simply need to add the following block of code:<\/p><pre class=\"wp-block-preformatted\">&lt;?php \n?&gt;<\/pre><p>This ensures that your new file will be interpreted as PHP, which is the scripting language that WordPress is built on.<\/p><p>You can then save your changes and close the file. Make sure to check the following box to ensure that it is updated on the server and applied to your website:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/save-file-filezilla.png\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"677\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/save-file-filezilla.png\/public\" alt='Tick \"Finish editing and delete local file\" box on the FileZilla interface' class=\"wp-image-47611\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/save-file-filezilla.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/save-file-filezilla.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/save-file-filezilla.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/save-file-filezilla.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/a><\/figure><\/div><p>Next, open the <strong>functions.php<\/strong> file in the same theme folder, and add the following line of code at the bottom of the document:<\/p><pre class=\"wp-block-preformatted\">include('custom-shortcodes.php');<\/pre><p>This will tell the system to include any changes you make to the <strong>custom-shortcodes.php<\/strong> file within <strong>functions.php<\/strong> while allowing you to keep them separate. When you&rsquo;re ready, save your changes and close the file.<\/p><h3 class=\"wp-block-heading\" id=\"h-step-2-create-the-shortcode-function\">Step 2 &ndash; Create the Shortcode Function<\/h3><p>Next, you&rsquo;ll need to create the shortcode&rsquo;s function, commanding it what to do. Select the <strong>View\/Edit<\/strong> option again for your <strong>custom-shortcodes.php<\/strong> file. Use the following code snippet to add an action to hook your function to:<\/p><pre class=\"wp-block-preformatted\">function subscribe_link(){\nreturn 'Follow us on <a rel=\"nofollow\" href=\"https:\/\/twitter.com\/Hostinger?s=20\">Twitter<\/a>';\n}<\/pre><p>Next, you&rsquo;ll need to add a callback function, which will run when the hook action is activated. Adding the following line of code directly after the one mentioned above will tell WordPress that your function is a shortcode:<\/p><pre class=\"wp-block-preformatted\">add_shortcode('subscribe', 'subscribe_link');<\/pre><p>When you create a shortcode using the <strong>add_shortcode<\/strong> function, you assign a shortcode tag &ldquo;($tag)&rdquo; and a corresponding function &ldquo;($func)&rdquo; hook that will run whenever the shortcut is used.<\/p><p>In other words, if the shortcode tag is <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">[subscribe]<\/code>, it makes the hook <strong>&lsquo;subscribe_link&rsquo;<\/strong> direct the visitor to the URL provided.<\/p><p>Therefore, the entire code you&rsquo;ll be using in your <strong>custom-shortcodes.php<\/strong> file will look something like this:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/subscribe-shortcode.png\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"461\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/subscribe-shortcode.png\/public\" alt=\"custom-shortcodes.php file with a subscribe function\" class=\"wp-image-47613\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/subscribe-shortcode.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/subscribe-shortcode.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/subscribe-shortcode.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/subscribe-shortcode.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/a><\/figure><\/div><p>It should be noted that when you&rsquo;re naming tags, you should only use lowercase letters, although underscores can be used. It&rsquo;s also crucial to <a href=\"https:\/\/codex.wordpress.org\/Shortcode_API#Hyphens\">avoid using hyphens<\/a>, as this can interfere with other shortcodes.<\/p><h3 class=\"wp-block-heading\" id=\"h-step-3-add-the-self-closing-shortcode-to-the-website\">Step 3 &ndash; Add the Self-Closing Shortcode to the Website<\/h3><p>You can now test your initial code as a self-closing shortcode on your WordPress site. Using the WordPress Block Editor, you can insert the <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">[subscribe]<\/code> tag directly into the post:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/subscribe-shortcode-wordpress.png\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"269\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/subscribe-shortcode-wordpress.png\/public\" alt=\"The [subscribe] tag in the WordPress editor\" class=\"wp-image-47617\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/subscribe-shortcode-wordpress.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/subscribe-shortcode-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/subscribe-shortcode-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/subscribe-shortcode-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/a><\/figure><\/div><p>This will display the following content to your website visitors:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/shortcode-outcome.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1097\" height=\"722\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/shortcode-outcome.png\/public\" alt=\"Example of the outcome of a subscribe shortcode on a WordPress site\" class=\"wp-image-47618\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/shortcode-outcome.png\/w=1097,fit=scale-down 1097w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/shortcode-outcome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/shortcode-outcome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/shortcode-outcome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/shortcode-outcome.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1097px) 100vw, 1097px\" \/><\/a><\/figure><\/div><p>If you&rsquo;re happy with this shortcode, you don&rsquo;t need to do anything else. However, if you wish to customize it, you can move on to the next step.<\/p><h3 class=\"wp-block-heading\" id=\"h-step-4-add-parameters-to-the-shortcode\">Step 4 &ndash; Add Parameters to the Shortcode<\/h3><p>You can adapt the <strong>&lsquo;subscribe&rsquo;<\/strong> shortcode for additional functionality to display other social media links. You can do this by adding a parameter to change the URL.<\/p><p>To <a href=\"https:\/\/codex.wordpress.org\/Shortcode_API#Handling_Attributes\">add handling attributes<\/a>, you&rsquo;ll need to open the <strong>custom-shortcodes.php<\/strong> file and add in the following code:<\/p><pre class=\"wp-block-preformatted\">function subscribe_link_att($atts) {\n    $default = array(\n        'link' =&gt; '#',\n    );\n    $a = shortcode_atts($default, $atts);\n    return 'Follow us on '.$a['link'];\n}\nadd_shortcode('subscribe', 'subscribe_link_att');<\/pre><p>This will enable you to customize the links within your shortcode tag to add them to the Gutenberg Editor. You can paste it over the previous code in the <strong>custom-shortcodes.php<\/strong> file. It should look something like this:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/custom-links-shortcode-file.png\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"459\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/custom-links-shortcode-file.png\/public\" alt=\"custom-shortcodes.php file with handling attributes to customize the links\" class=\"wp-image-47619\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/custom-links-shortcode-file.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/custom-links-shortcode-file.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/custom-links-shortcode-file.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/custom-links-shortcode-file.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/a><\/figure><\/div><p>The addition of the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/shortcode_atts\/\">shortcode_atts() function<\/a> will combine user attributes with any known attributes, and any missing data will be changed to their default values. When you&rsquo;re ready, save your changes and close the file.<\/p><h3 class=\"wp-block-heading\" id=\"h-step-5-test-the-parameters\">Step 5 &ndash; Test the Parameters<\/h3><p>You can now test the updated shortcode within the WordPress Block Editor. In our example, we&rsquo;re testing our Twitter and Facebook links with the following shortcodes:<\/p><pre class=\"wp-block-preformatted\">[subscribe link='https:\/\/www.facebook.com\/Hostinger\/']\n[subscribe link='https:\/\/twitter.com\/Hostinger?s=20\/']<\/pre><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/testing-updated-shortcode.png\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"382\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/testing-updated-shortcode.png\/public\" alt=\"The shortcode for testing Twitter and Facebook links by  using the Gutenberg Editor\" class=\"wp-image-47622\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/testing-updated-shortcode.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/testing-updated-shortcode.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/testing-updated-shortcode.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/testing-updated-shortcode.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/a><\/figure><\/div><p>This will produce the following result on the front end:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/testing-updated-shortcode-front-end.png\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"657\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/testing-updated-shortcode-front-end.png\/public\" alt=\"Outcome of the shortcodes with Twitter and Facebook links on the site's front-end\" class=\"wp-image-47623\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/testing-updated-shortcode-front-end.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/testing-updated-shortcode-front-end.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/testing-updated-shortcode-front-end.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/testing-updated-shortcode-front-end.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/a><\/figure><\/div><p>This self-closing shortcode displays the direct URLs for your social profiles to visitors. However, you may want this feature to look a bit polished.<\/p><p>For instance, you can create an enclosed version that enables you to fully customize the anchor text displayed for users when they&rsquo;re about to click it. We&rsquo;ll show you how to do that in the following step.<\/p><h3 class=\"wp-block-heading\" id=\"h-step-6-create-an-enclosing-shortcode\">Step 6 &ndash; Create an Enclosing Shortcode<\/h3><p>The enclosing shortcode will be formatted similarly to an earlier self-closing example. However, it will include one additional parameter for the function.<\/p><p>First, you&rsquo;ll need to add <a href=\"https:\/\/developer.wordpress.org\/plugins\/shortcodes\/enclosing-shortcodes\/\">$content = null<\/a>, which identifies this function as an enclosing shortcode. You can then add the <a href=\"\/ng\/tutorials\/wordpress-do_shortcode\">WordPress do_shortcode<\/a>, which will search the content for shortcodes.<\/p><p>Within the <strong>custom-shortcodes.php<\/strong> file, add the new enclosing shortcode:<\/p><pre class=\"wp-block-preformatted\">function subscribe_link_att($atts, $content = null) {<br>    $default = array(<br>        'link' =&gt; '#',<br>    );<br>    $a = shortcode_atts($default, $atts);<br>    $content = do_shortcode($content);<br><br>    return 'Follow us on '.$content.'';<br><br>}<br>add_shortcode('subscribe', 'subscribe_link_att');<\/pre><p>When you&rsquo;re ready, your <strong>custom-shortcode.php<\/strong> file should look like this:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode.png\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"459\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode.png\/public\" alt=\"custom-shortcode.php file with the enclosing shortcode\" class=\"wp-image-47624\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/a><\/figure><\/div><p>The previous code also has an additional <strong>&ldquo;style&rdquo; <\/strong>attribute, which will change the anchor text to a blue color. Don&rsquo;t forget to save your changes when you&rsquo;re done!<\/p><h3 class=\"wp-block-heading\" id=\"h-step-7-add-an-enclosing-shortcode-to-the-website\">Step 7 &ndash; Add an Enclosing Shortcode to the Website<\/h3><p>You can now insert your enclosing shortcode into the WordPress Block Editor to see the final result:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode-block-editor.png\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"364\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode-block-editor.png\/public\" alt=\"The ennclosing shortcode into the WordPress Block Editor\" class=\"wp-image-47625\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode-block-editor.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode-block-editor.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode-block-editor.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode-block-editor.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/a><\/figure><\/div><p>As you noticed, you can easily change the URLs of your social media pages and the anchor text displayed to the visitor using this enclosing shortcode. In this case, we&rsquo;ve chosen <strong>&ldquo;Facebook&rdquo;<\/strong> and <strong>&ldquo;Twitter&rdquo;<\/strong>:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode-front-end.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1074\" height=\"727\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode-front-end.png\/public\" alt=\"Outcome of the enclosing shortcode on the site's front-end\" class=\"wp-image-47626\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode-front-end.png\/w=1074,fit=scale-down 1074w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode-front-end.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode-front-end.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode-front-end.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode-front-end.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1074px) 100vw, 1074px\" \/><\/a><\/figure><\/div><p>That&rsquo;s it! You have now created a customized shortcode for subscription links in your pages and posts. Take note that all of the beforementioned steps can be tweaked to make all kinds of different elements using the WordPress <strong>Shortcodes<\/strong> function.<\/p><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-large\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-wordpress-hosting\" href=\"\/ng\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"600\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-111781\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=2048,fit=scale-down 2048w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>Adding extra functionality to your WordPress website is a lot simpler with shortcodes. You can use them to customize your existing content and add interactive features, such as contact forms, image galleries, or subscription links.<\/p><p>In this post, we learned how to create your very own shortcode in WordPress in seven easy steps:<\/p><ol class=\"wp-block-list\">\n<li>Create a new theme file<\/li>\n\n\n\n<li>Create the shortcode function<\/li>\n\n\n\n<li>Add the self-closing shortcode to the website<\/li>\n\n\n\n<li>Add parameters to the shortcode<\/li>\n\n\n\n<li>Test the parameters<\/li>\n\n\n\n<li>Create an enclosing shortcode<\/li>\n\n\n\n<li>Add the enclosing shortcode to the website<\/li>\n<\/ol><p>Have more questions regarding how to create your very own WordPress shortcodes or planning to optimize your site performance with <a href=\"\/ng\/wordpress-hosting\">WordPress hosting<\/a>? Let us know in the comments section below!<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Learn Other Advanced WordPress Techniques<\/h4>\n                    <p><a href=\"\/ng\/tutorials\/how-to-add-custom-fonts-to-wordpress\">How to Add a Custom Font to WordPress<\/a><br>\n<a href=\"\/ng\/tutorials\/wordpress-memory-limit\">How to Increase WordPress Memory Limit<\/a><br>\n<a href=\"\/ng\/tutorials\/remove-sidebar-wordpress\">How to Remove a Sidebar in WordPress<\/a><br>\n<a href=\"\/ng\/tutorials\/wordpress-excerpt-length\/\">How to Change WordPress Excerpt Length<\/a><br>\n<a href=\"\/ng\/tutorials\/wordpress-a-b-testing\">A Complete Guide to WordPress A\/B Testing<\/a><br>\n<a href=\"\/ng\/tutorials\/how-to-hide-page-title-wordpress\">How to Hide a Page Title in WordPress<\/a><br>\n<a href=\"\/ng\/tutorials\/how-to-duplicate-wordpress-page-or-post\">How to Duplicate Pages in WordPress<\/a><br>\n<a href=\"\/ng\/tutorials\/how-to-add-php-code-to-wordpress-post-or-page\">How to Add PHP to WordPress<\/a><\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-create-a-shortcode-in-wordpress-faq\">Create a Shortcode in WordPress FAQ<\/h2><p>Now that you know how to create a shortcode, here are some of the frequently asked questions about the topic.<\/p><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1676286696970\"><h3 class=\"schema-faq-question\">How Do I Add a Shortcode to My WordPress Website?<\/h3> <p class=\"schema-faq-answer\">The simplest way to add a shortcode is by using the block in your editor. First, you need to edit the post and page where you want to add the shortcode. Then, click on the<strong> Add block<\/strong> button to insert a <strong>Shortcode<\/strong> block.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1676286720891\"><h3 class=\"schema-faq-question\">How Do I Create a Dynamic Shortcode in WordPress?<\/h3> <p class=\"schema-faq-answer\">Creating a dynamic shortcode in WordPress can be simplified using the <strong>Shortcodes Ultimate<\/strong> plugin, which provides an easy-to-use interface to create custom shortcodes. This plugin can help you add unique features and extra functionality to posts and pages throughout your website.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1676286762334\"><h3 class=\"schema-faq-question\">Does WordPress Have a Shortcode Template?<\/h3> <p class=\"schema-faq-answer\">The WordPress <strong>do_shortcode<\/strong> function makes it easy to include shortcodes directly in your theme&rsquo;s template files. All you need to do is include the shortcode inside of the <strong>do_shortcode<\/strong> function. Then, use the function in the template location where you want the shortcode to appear.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learning how to create a shortcode in WordPress can be an efficient way to customize your posts and pages. However, if you&rsquo;re new to the process, you may struggle to understand how to use such a feature on your site. That&rsquo;s why we&rsquo;ve put together a guide to help you get started. By looking at [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ng\/tutorials\/create-a-shortcode-in-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":76,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to Create a Shortcode in WordPress \u2013 A Step-by-Step Guide","rank_math_description":"Learn how to create a shortcode in WordPress. Everything from creating a function to using it in your website, including self-closing and enclosing shortcodes.","rank_math_focus_keyword":"create a shortcode in wordpress","footnotes":""},"categories":[22637],"tags":[],"class_list":["post-47575","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/create-a-shortcode-in-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/criar-shortcode-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/shortcode-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/crear-un-shortcode-en-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/create-a-shortcode-in-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-create-a-shortcode-in-wordpress-in-7-steps","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-create-a-shortcode-in-wordpress-in-7-steps","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/crear-un-shortcode-en-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/crear-un-shortcode-en-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/crear-un-shortcode-en-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/criar-shortcode-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/create-a-shortcode-in-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/create-a-shortcode-in-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/create-a-shortcode-in-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/create-a-shortcode-in-wordpress","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/47575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/users\/76"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/comments?post=47575"}],"version-history":[{"count":23,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/47575\/revisions"}],"predecessor-version":[{"id":144499,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/47575\/revisions\/144499"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/media?parent=47575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/categories?post=47575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/tags?post=47575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}