Inserting a synced pattern within the content of a WordPress post

Discover in this tutorial how to introduce a synced block pattern in the content of a WordPress post programmatically.

You know that I’ve always been a fan of using hooks (both WordPress and Genesis Framework hooks ) to “hook” things where I was interested.

In previous tutorials I explained how you could add elements like the typical CTA to subscribe to a newsletter at the end of a post or show a specific offer including a top banner, for example.

But sometimes it is more interesting to be able to display these elements in the middle of the post content, since it is more likely that the visitors will see it.

Although we are now in the block era and the paradigm has changed a bit, we can still add content programmatically more or less where we want.

In fact, thanks to synced patterns (formerly called reusable blocks) and a little bit of code you can get away with inserting whatever you want into the content of an entry.

Here’s how to do it:

Steps to insert a synced block pattern into content

1. Create a synced block pattern

Create the design you want to insert (the CTA, point offer…). You can choose from all the blocks you have installed, you can even group several to get the structure you want.

Once you have customized it to your liking, go to the three points of the block toolbar and choose “Create pattern”.

Then give it a name, choose a category (optional), select it to be synced and save it.

2. Examine the pattern ID

Once you have created the block, go to “code editor” mode and examine the HTML.

Pro tip: use the keyboard shortcut: Cmd Alt Shift M to go faster. 😉

At the height of where you have created the block you will see something similar to:

<!-- wp:block {"ref":1460} /-->

That number is your pattern ID, and you are going to need it next. 😉

2.1. [Bonus] Get the pattern ID easily

If you are going to work with synced patterns often and you want to have the ID more at hand I recommend you to apply these two tutorials:

• Show synced patterns in the WordPress admin menu
• Add a column with the ID of the posts and pages to the WordPress admin

This way you will be able to access the synced patterns more easily and get the ID at a glance.

3. Modify functions.php

Add the following code at the end of functions.php or in your functionality plugin:

In this code you use the filter the_content and perform various manipulations of the blocks within the content to insert a synced block pattern after the 5th block of the input.

In this case, you are displaying the block pattern with ID 1460, but you must change that number to yours (step 2) in the line that says: “change the ID”.

You can also change the point in the input where you want your synced pattern to be inserted. Just change the 5 to the number you want.

The above snippet also contains a conditional tag to make sure it is only displayed on blog posts or some Custom Post Type.

Conclusion

In this tutorial you have learned how to identify the IDs of the synced patterns and insert them at the point of your choice in the posts.

If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.

Benefits of being a subscriber. 🙂