Rik Schennink

Use Snippy to quickly create your own custom shortcodes.
A Snippy shortcode is built by combining bits. A bit can be a file, like a Stylesheet or a Script, or a piece of code, like HTML, CSS or JavaScript.
The “code” bits can contain placeholders, which are automatically made accessible as shortcode attributes.
Time for a quick example.
Let’s create a shortcode to embed YouTube videos. We’ll add an HTML bit and set the it’s value to the YouTube embed iframe.
<pre><code><iframe src="https://youtube/embed/JZYYJY4yoK4"/>
</code></pre>
Now to make this bit a bit more flexible we will replace the YouTube video id with a placeholder value <code>{{id}}</code>.
<pre><code><iframe src="https://youtube/embed/{{id}}"/>
</code></pre>
Yay! We’ve finished our first bit!
Now we can create a new Snippy shortcode and add the YouTube iFrame HTML bit. After saving the shortcode we can use our new and shiny YouTube shortcode in the text editor.
<pre><code>[youtube id=JZYYJY4yoK4]
</code></pre>
Ready for more?
The below 3 minute YouTube video shows how you can use Snippy to turn a jQuery plugin into a WordPress plugin.
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/JZYYJY4yoK4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>

Snippy

Makes it easy to create your own custom shortcodes.

Deliinco

The integration of WordPress and ReactJS is a powerful combination that can help developers create dynamic, interactive websites with ease. By combining the power of both platforms, web developers have access tools and features that can significantly improve their workflow.

GoEmbed – Javascript Application Embedded

The idea to embed a Modern Javascript Application into WordPress page

Snippy vs GoEmbed – Javascript Application Embedded