{"id":3161,"date":"2024-01-22T21:21:33","date_gmt":"2024-01-22T15:51:33","guid":{"rendered":"https:\/\/nigeljoy.me\/?p=3161"},"modified":"2024-01-22T21:21:38","modified_gmt":"2024-01-22T15:51:38","slug":"dynamic-shortcodes-full-site-editor-templates","status":"publish","type":"post","link":"https:\/\/nigeljoy.me\/dynamic-shortcodes-full-site-editor-templates\/","title":{"rendered":"Dynamic Shortcodes for Full Site Editor Templates"},"content":{"rendered":"\n<p>In the ever-evolving world of WordPress, Full Site Editing has emerged as a game-changer for web designers and developers. With its powerful capabilities, you can create stunning websites without touching a single line of code. However, there is one small caveat &#8211; shortcodes, those handy snippets of code that add functionality to your site, are seemingly incompatible with Full Site Editor templates. Frustrating, right? But fear not, for in this blog post, I am going to reveal a secret technique that will let you add any shortcodes on any Full Site Editing template and render data dynamically based on the loaded page. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Now, you might be wondering, why is this such a big deal? Why should I care about dynamic shortcodes for the WordPress Full Site Editor? Well, let me tell you &#8211; the power of customization and personalization cannot be overstated. By making your shortcodes dynamic, you open up a world of possibilities for your website. Whether you want to display different content based on user preferences, or dynamically populate information of the meta property of the loaded page, the ability to use shortcodes in Full Site Editing templates will make your life so much easier! So, are you ready to take your site to the next level using Full Site Editor? Let&#8217;s get started!<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-663ab09ed0ab0\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-663ab09ed0ab0\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nigeljoy.me\/dynamic-shortcodes-full-site-editor-templates\/#Understanding_Full_Site_Editing_in_WordPress\" title=\"Understanding Full Site Editing in WordPress\">Understanding Full Site Editing in WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nigeljoy.me\/dynamic-shortcodes-full-site-editor-templates\/#The_Importance_of_Shortcodes_in_Website_Functionality\" title=\"The Importance of Shortcodes in Website Functionality\">The Importance of Shortcodes in Website Functionality<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nigeljoy.me\/dynamic-shortcodes-full-site-editor-templates\/#The_Limitation_of_Shortcodes_in_Full_Site_Editing_Templates\" title=\"The Limitation of Shortcodes in Full Site Editing Templates\">The Limitation of Shortcodes in Full Site Editing Templates<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nigeljoy.me\/dynamic-shortcodes-full-site-editor-templates\/#How_to_Create_a_Dynamic_Shortcode_for_Full_Site_Editor_Templates\" title=\"How to Create a Dynamic Shortcode for Full Site Editor Templates\">How to Create a Dynamic Shortcode for Full Site Editor Templates<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nigeljoy.me\/dynamic-shortcodes-full-site-editor-templates\/#Install_a_Code_snippet_plugin\" title=\"Install a Code snippet plugin\">Install a Code snippet plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nigeljoy.me\/dynamic-shortcodes-full-site-editor-templates\/#Add_PHP_Snippet_for_Dynamic_Shortcode\" title=\"Add PHP Snippet for Dynamic Shortcode\">Add PHP Snippet for Dynamic Shortcode<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nigeljoy.me\/dynamic-shortcodes-full-site-editor-templates\/#Implementing_Dynamic_Shortcodes_in_Full_Site_Editing_Templates\" title=\"Implementing Dynamic Shortcodes in Full Site Editing Templates\">Implementing Dynamic Shortcodes in Full Site Editing Templates<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nigeljoy.me\/dynamic-shortcodes-full-site-editor-templates\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Understanding_Full_Site_Editing_in_WordPress\"><\/span>Understanding Full Site Editing in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Full Site Editing is a revolutionary feature in <a href=\"https:\/\/nigeljoy.me\/category\/wordpress\/\">WordPress<\/a> that allows users to design and customize their entire website using the block editor. With this powerful tool, you can create stunning websites without any coding knowledge. However, one limitation of Full Site Editing is the inability to use shortcodes directly on the theme templates. In this post, we will explore how shortcodes are useful for website functionality and how they can be used in Full Site Editing templates. <\/p>\n\n\n\n<p>Shortcodes are small snippets of code that allow you to add dynamic functionality to your website. They are typically enclosed in square brackets and can be inserted into posts, pages, or widgets. Shortcodes provide a convenient way to add complex features such as contact forms, widgets, sliders, or customized &#8220;Add to Cart&#8221; buttons writing extensive code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Importance_of_Shortcodes_in_Website_Functionality\"><\/span>The Importance of Shortcodes in Website Functionality<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Shortcodes play a crucial role in enhancing the functionality of your website. They allow you to easily add advanced features without the need for custom coding or plugins. For example, if you want to embed a map for listing on real estate site, instead of manually copying and pasting the embed code on each listing, you can simply use a shortcode provided by a plugin or theme. Shortcodes also make it easier to maintain consistency across your site. By using the same shortcode for similar elements throughout your website, you ensure that they all have a consistent look and feel. This saves time and effort when making global changes or updates.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Limitation_of_Shortcodes_in_Full_Site_Editing_Templates\"><\/span>The Limitation of Shortcodes in Full Site Editing Templates<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>While shortcodes are incredibly useful for adding functionality to individual posts or pages, they cannot be directly used within Full Site Editing templates. <\/p>\n\n\n\n<p>Suppose you have a real estate site which was made using a FSE theme ( Full Site Editing ), and the listings use a template called &#8220;Single Listing&#8221;. Each listing have a custom field indicating the address of the location. Now, imagine if you want to show map widget on each listing page. With the power and features promised with Full Site Editing, you should be able to add the shortcode for the map widget on the &#8220;Single Listing&#8221; template once and have the map widget indicate the location of the listing for every single listing page. However, as of now, it doesn&#8217;t work like because you are not able to pass the address of the location to the map shortcode using Shortcode Block on an FSE template.<\/p>\n\n\n\n<p>This limitation arises because Full Site Editing templates are designed using blocks rather than traditional PHP template files. If it was a PHP template, you could&#8217;ve added a custom WP Query to get address of the listing and pass it to the shortcode as a parameter. This restriction may seem frustrating at first glance since it prevents you from using existing shortcodes within your Full Site Editing templates. However, there is a simple solution &#8211; make the shortcode dynamic specifically for Full Site Editor templates.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Create_a_Dynamic_Shortcode_for_Full_Site_Editor_Templates\"><\/span>How to Create a Dynamic Shortcode for Full Site Editor Templates<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To make a typical shortcode dynamic for Full Site Editor templates, you need the following:<\/p>\n\n\n\n<ul>\n<li>A Code snippet plugin<\/li>\n\n\n\n<li>A PHP snippet to query the post meta and pass value to shortcode.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Install_a_Code_snippet_plugin\"><\/span>Install a Code snippet plugin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>To add the PHP snippet to your site, the easiest way is to use a plugin that lets you add and manage PHP snippets from the WP-admin. I recommend <a href=\"https:\/\/wordpress.org\/plugins\/insert-headers-and-footers\/\" target=\"_blank\" rel=\"noopener\">WPCode<\/a>. You can also find other similar plugins <a href=\"https:\/\/wordpress.org\/plugins\/tags\/php\/\" target=\"_blank\" rel=\"noopener\">here<\/a>. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_PHP_Snippet_for_Dynamic_Shortcode\"><\/span>Add PHP Snippet for Dynamic Shortcode<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Once the plugin is installed, head to <strong>Code Snippets<\/strong> > <strong>Add Snippet<\/strong> > <strong>blank snippet<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"518\" src=\"https:\/\/nigeljoy.me\/wp-content\/uploads\/2024\/01\/create-dynamic-shortcode-wordpress.webp\" alt=\"\" class=\"wp-image-3172\" title=\"\" srcset=\"https:\/\/nigeljoy.me\/wp-content\/uploads\/2024\/01\/create-dynamic-shortcode-wordpress.webp 1000w, https:\/\/nigeljoy.me\/wp-content\/uploads\/2024\/01\/create-dynamic-shortcode-wordpress-300x155.webp 300w, https:\/\/nigeljoy.me\/wp-content\/uploads\/2024\/01\/create-dynamic-shortcode-wordpress-768x398.webp 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>On the &#8220;<strong>Create Custom Snippet<\/strong>&#8221; screen, enter a title for the code, such as &#8220;My Dynamic Map Shortcode&#8221;.<\/p>\n\n\n\n<p>Select &#8220;<strong>Code Type<\/strong>&#8221; as &#8220;<strong>PHP Snippet<\/strong>&#8220;.<\/p>\n\n\n\n<p>Paste the following code: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter( 'render_block', function( $block_content, $block ) {\n    \/\/ add class to target block\n    $block_class = 'dynamic-map';\n    if ( \n        ! empty( $block&#91;'attrs']&#91;'className'] ) &amp;&amp; \n        $block_class === $block&#91;'attrs']&#91;'className'] \n    ) {\n        \/\/ get the ID\n        $post_id = get_the_ID();\n        \/\/get address\n\t$address = get_post_meta( $post_id,'address' );\n        \/\/ build and return  my shortcode\n        $short_code = '&#91;pw_map address=\"'.address&#91;0].'\" disablecontrols=\"true\"  enablescrollwheel=\"false\"  zoom=\"14\" key=\"YOUR_GOOGLE_MAPS_API_KEY\"]';\n        return do_shortcode($short_code );  \n\t\t\n    }\n\n    return $block_content;\n \n}, 10, 2 );<\/code><\/pre>\n\n\n\n<p>With the above PHP Snippet, we are looking for all blocks loaded on the page with the class name &#8216;dynamic-map&#8217;. We will be adding a paragraph block with this class on a later step.<\/p>\n\n\n\n<p>Next, you can see, I am getting the ID of the loaded post and using <code>get_post_meta()<\/code> to get the address from the custom field.<\/p>\n\n\n\n<p>If you check $<code>short_code<\/code> value, you can see that I have added the shortcode from the plugin &#8220;<a href=\"https:\/\/lv.wordpress.org\/plugins\/simple-google-maps-short-code\/\" target=\"_blank\" rel=\"noopener\">Simple Shortcode for Google Maps<\/a>&#8221; and the value of the address that we grabbed is passed as a parameter on this shortcode along with other parameters.<\/p>\n\n\n\n<p>To optimize the code for better performance, update the settings of the snippet to run on &#8220;<strong>Frontend Only<\/strong>&#8220;. For further optimization, you can select &#8220;<strong>Frontend Conditional Logic<\/strong>&#8221; and add logic to execute this snippet only for pages where you are looking to add the dynamic shortcode. <\/p>\n\n\n\n<p>Make sure to save the code and make it active.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Implementing_Dynamic_Shortcodes_in_Full_Site_Editing_Templates\"><\/span>Implementing Dynamic Shortcodes in Full Site Editing Templates<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now that you have created your snippets ready, it&#8217;s time to implement it in your Full Site Editing template. <\/p>\n\n\n\n<p>Follow these steps:<\/p>\n\n\n\n<ol>\n<li>Go to <strong>Appearance<\/strong> > <strong>Editor<\/strong> > <strong>Templates<\/strong> and select the template where you want to add the code.<\/li>\n\n\n\n<li>On the editor of the template, add an a Paragraph block.<\/li>\n\n\n\n<li>Add some dummy text like &#8220;map&#8221; on the Paragrpah block.<\/li>\n\n\n\n<li>Give it a class name of <code>dynamic-map<\/code> in its Advanced block settings and save the changes.<\/li>\n<\/ol>\n\n\n\n<p>Here&#8217;s a screenshot of how it would look like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"523\" src=\"https:\/\/nigeljoy.me\/wp-content\/uploads\/2024\/01\/dynamic-shortcode-wordpress-fse-template.webp\" alt=\"\" class=\"wp-image-3173\" title=\"\" srcset=\"https:\/\/nigeljoy.me\/wp-content\/uploads\/2024\/01\/dynamic-shortcode-wordpress-fse-template.webp 1000w, https:\/\/nigeljoy.me\/wp-content\/uploads\/2024\/01\/dynamic-shortcode-wordpress-fse-template-300x157.webp 300w, https:\/\/nigeljoy.me\/wp-content\/uploads\/2024\/01\/dynamic-shortcode-wordpress-fse-template-768x402.webp 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>That&#8217;s it! If you check your posts with custom field value for <code>address<\/code>, you should see the map loading.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this blog post, although Full Site Editing seems incompatible with the use of traditional WordPress shortcodes, I have showed you a workaround to make the shortcode dynamic and render the data. Whether you have 10 pages or 1 million pages on your WordPress site where you want to use the shortcode, adding this dynamic shortcode to the template once will do the job. This workaround saved me a ton of time on some of my WordPress experiments and I&#8217;m sure you&#8217;ll find it helpful as well! If you have any questions, feel free to ask in the comments or contact me. <\/p>\n\n\n\n<p>I&#8217;ll see you again with more tips and tricks related to WordPress and coding. \u270c\ufe0f<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to use shortcodes on Full Site Editor and Block theme templates to render dynamic data. <\/p>\n","protected":false},"author":193359005,"featured_media":3175,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","footnotes":""},"categories":[1365,1362,1373],"tags":[],"_links":{"self":[{"href":"https:\/\/nigeljoy.me\/wp-json\/wp\/v2\/posts\/3161"}],"collection":[{"href":"https:\/\/nigeljoy.me\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nigeljoy.me\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nigeljoy.me\/wp-json\/wp\/v2\/users\/193359005"}],"replies":[{"embeddable":true,"href":"https:\/\/nigeljoy.me\/wp-json\/wp\/v2\/comments?post=3161"}],"version-history":[{"count":6,"href":"https:\/\/nigeljoy.me\/wp-json\/wp\/v2\/posts\/3161\/revisions"}],"predecessor-version":[{"id":3176,"href":"https:\/\/nigeljoy.me\/wp-json\/wp\/v2\/posts\/3161\/revisions\/3176"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nigeljoy.me\/wp-json\/wp\/v2\/media\/3175"}],"wp:attachment":[{"href":"https:\/\/nigeljoy.me\/wp-json\/wp\/v2\/media?parent=3161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nigeljoy.me\/wp-json\/wp\/v2\/categories?post=3161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nigeljoy.me\/wp-json\/wp\/v2\/tags?post=3161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}