Adding wordPress shortcode snippet to Frontity

I am trying to use a plugin for language translations in a site. The plugin provides a php shortcode <?php echo do_shortcode('[gtranslate]'); ?> that is supposed to go in the homepage index php file - it creates a dropdown selector, and when you select a language, the site is translated. I am trying to see if this plugin will work on a Frontity site, but am wondering if it’s possible to somehow use the shortcode above? It wouldn’t be able to go in the Frontity side code of course, but I’m not sure if there’s a way of creating a function.php snippet that will allow me to view the dropdown created by the snippet above in the Frontity site?

Hi @maddogdev

If you put the shortcode in the page content then Frontity will display the HTML it generates along with the rest of the content. However, in that case you need to send the value from the dropdown back to WordPress.

Take a look at this repo which shows a way to display shortcode content in Frontity. The repo is the result of this episode of Frontity Talks where we go into more detail.

This may help you with showing the dropdown in the front end of your site, but you still need to get the value of the dropdown back to WordPress. In the example above we use the Contact Form 7 package to send the form data back to WordPress. The code in that package may give you some ideas of how you can do this.

You shouldn’t need to add anything to the functions.php file unless your translation plugin is lacking something, e.g. support for Ajax.

I didn’t quite get it. Are we able to use WordPress shortcodes generated by plugins to display them wherever we want on frontity or we need to use them as part of post / page’s content (which by the way, doesn’t work for me most of the time, the page renders some kind of block but it’s not visible)?

Hi @mh123

Shortcodes won’t work in Frontity. They only work in WordPress as the shortcode triggers some PHP code which generally adds content to the page/post. So the shortcode must be included in the page or post content.

The shortcode-generated content will then be included as part of the content.rendered property in the JSON returned by the REST API.

However, not all shortcodes create content, though I would guess that most do. What isn’t working for you? Can you provide a link to the WordPress site with the shortcodes that are causing problems for you?

Hi
I am having same problem on my kitchen reviews website. I am also looking for solution.

Hi @stevendrew39

Welcome to the Frontity community. Can you specify what the problem is that you’re looking for a solution for please.

Shortcodes need to be added to the page/post content in the WordPress admin. The plugin that implements the shortcode will normally add content to the page/post in the place that the shortcode was added, replacing or substituting for the shortcode.

That added content will then be included in the content.rendered property in the JSON returned from the REST API. Once it’s in the JSON Frontity will simply render it along with the rest of the content in the content.rendered property.

If this process is not what you’re experiencing then we’ll need to dig in and figure out what’s going on, so the more information you can provide us with the better. Please see here for the kind of information that will be useful to provide.

I’m currently looking at a solution using Custom Content Shortcodes plugin

Since it uses a hidden custom post type you need to expose it on the REST API with a filter and set an archive URL
https://scottbolinger.com/custom-post-types-wp-api-v2/

So you can then access eg /shortcodes/telephone/ with the usual source get/fetch commands.

I’m then running a useShortcodes hook where I pass in a list of shortcodes I want to render, fetch them in a loop and set a ready flag when I’ve got all the content back (a shortcodes object with the result of each shortcode as a key). I then render my page content once that flag is true and just output { shortcodes.telephone } etc. (Well actually dangerouslySetInnerHTML)

(I don’t want to render the page before the shortcodes are loaded as the content will jump)

I’m not quite sure the best architecture for this as I’m currently having to pass state and actions into my use hook. also I need to get it working with SSR yet.

Will post more specific code when I’ve looked further into it.

Since I use ACF I guess another option might be to add the shortcode to a custom field and filter the value beforehand

Adding an endpoint in the REST API to handle shortcodes and having a handler in Frontity to call them is easy enough to add.

However this would only be helpful for “static” shortcodes aka those which only return HTML and don’t require external files (like JS and CSS, or embeds).

So for custom shortcodes, of which you know what they do, it should be fine. But plugins sometimes add more stuff to the HTML in the background which can’t be handled within the shortcode itself.