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 – 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.
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 – 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’s get started!
Table of Contents
Understanding Full Site Editing in WordPress
Full Site Editing is a revolutionary feature in WordPress 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.
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 “Add to Cart” buttons writing extensive code.
The Importance of Shortcodes in Website Functionality
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.
The Limitation of Shortcodes in Full Site Editing Templates
While shortcodes are incredibly useful for adding functionality to individual posts or pages, they cannot be directly used within Full Site Editing templates.
Suppose you have a real estate site which was made using a FSE theme ( Full Site Editing ), and the listings use a template called “Single Listing”. 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 “Single Listing” template once and have the map widget indicate the location of the listing for every single listing page. However, as of now, it doesn’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.
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’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 – make the shortcode dynamic specifically for Full Site Editor templates.
How to Create a Dynamic Shortcode for Full Site Editor Templates
To make a typical shortcode dynamic for Full Site Editor templates, you need the following:
- A Code snippet plugin
- A PHP snippet to query the post meta and pass value to shortcode.
Install a Code snippet plugin
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 WPCode. You can also find other similar plugins here.
Add PHP Snippet for Dynamic Shortcode
Once the plugin is installed, head to Code Snippets > Add Snippet > blank snippet.
On the “Create Custom Snippet” screen, enter a title for the code, such as “My Dynamic Map Shortcode”.
Select “Code Type” as “PHP Snippet“.
Paste the following code:
add_filter( 'render_block', function( $block_content, $block ) {
// add class to target block
$block_class = 'dynamic-map';
if (
! empty( $block['attrs']['className'] ) &&
$block_class === $block['attrs']['className']
) {
// get the ID
$post_id = get_the_ID();
//get address
$address = get_post_meta( $post_id,'address' );
// build and return my shortcode
$short_code = '[pw_map address="'.address[0].'" disablecontrols="true" enablescrollwheel="false" zoom="14" key="YOUR_GOOGLE_MAPS_API_KEY"]';
return do_shortcode($short_code );
}
return $block_content;
}, 10, 2 );With the above PHP Snippet, we are looking for all blocks loaded on the page with the class name ‘dynamic-map’. We will be adding a paragraph block with this class on a later step.
Next, you can see, I am getting the ID of the loaded post and using get_post_meta() to get the address from the custom field.
If you check $short_code value, you can see that I have added the shortcode from the plugin “Simple Shortcode for Google Maps” and the value of the address that we grabbed is passed as a parameter on this shortcode along with other parameters.
To optimize the code for better performance, update the settings of the snippet to run on “Frontend Only“. For further optimization, you can select “Frontend Conditional Logic” and add logic to execute this snippet only for pages where you are looking to add the dynamic shortcode.
Make sure to save the code and make it active.
Implementing Dynamic Shortcodes in Full Site Editing Templates
Now that you have created your snippets ready, it’s time to implement it in your Full Site Editing template.
Follow these steps:
- Go to Appearance > Editor > Templates and select the template where you want to add the code.
- On the editor of the template, add an a Paragraph block.
- Add some dummy text like “map” on the Paragrpah block.
- Give it a class name of
dynamic-mapin its Advanced block settings and save the changes.
Here’s a screenshot of how it would look like:
That’s it! If you check your posts with custom field value for address, you should see the map loading.
Conclusion
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’m sure you’ll find it helpful as well! If you have any questions, feel free to ask in the comments or contact me.
I’ll see you again with more tips and tricks related to WordPress and coding. ✌️
Leave a Reply