How to Reuse Code Snippets Easily in WordPress

Do you have HTML, CSS, or JavaScript code snippets that you frequently use on your WordPress website?

You may want to paste these code snippets inside posts and widgets. What if you want to change these code snippets in the future?

You don’t want to edit each and every post and modify the code snippets.

In this article, I’ll show how you can use the Shortcoder WordPress plugin to create “Shortcodes” for HTML/CSS/JavaScript code snippets so that it is easy to reuse them.

What are Shortcodes?

Shortcodes are tiny pieces of text within square brackets. Example [gallery]. When these shortcodes are used inside posts, they will be replaced with some content. This [gallery] shortcode will display a gallery of images.

There are few inbuilt shortcodes in WordPress that you can use inside posts, pages, and widgets. They offer some functionality as per the name.

These shortcodes can be created using the Shortcode API offered by WordPress in PHP. 

Though we can write these shortcodes easily using PHP, it becomes clumsy and difficult to manage when we write shortcodes for simple code snippets.

This is where the Shortcoder plugin comes into the picture. It offers an admin interface where you can create custom Shortcodes and set the code snippet are shortcode content.

When you use these custom shortcodes, they get replaced with shortcode content.

Now, simply edit the shortcode content in the future and the shortcode will reflect the latest content everywhere it is used. It is that simple. No need to edit every post to modify the code snippet.

Creating Custom Shortcodes using the Shortcoder plugin

Login to your WordPress admin dashboard and head over to Plugins > Add new page.

Search for “Shortcoder” plugin. Install and Activate the plugin.

You will find the “Shortcoder” menu in the navigation bar.

Go to the Shortcoder management page from the left menu and click “Create Shortcode”

On this page, we will create our custom shortcode. For this example, I’ll create a shortcode for the Mailchimp newsletter subscription form.

Mailchimp provides an HTML code snippet to display a form to subscribe to the newsletter. This is just an example. You can use any HTML/CSS or JavaScript. You can even switch to “Visual editor” and compose your own content. Note: we cannot write PHP code here.

At the top, I’ll provide the name of the shortcode. I’ll give the name “mailchimp”.

Now our shortcode is [sc name="mailchimp"]].

I’ll paste the mailchimp HTML code as the shortcode content.

Save the shortcode.

That’s it, we have created a shortcode and HTML code snippet. We can now use the shortcode [[sc name="mailchimp"]][[/sc] inside posts, and widgets.

This will be automatically replaced with the shortcode content. In our case, it is the mailchimp HTML form.

In the future, if we are planning to modify/replace the code snippet, we can simply edit the shortcode content and the changes will be reflected in all places where the shortcode is used. No need to mess with PHP to create this shortcode.

Adding Variables using Custom Parameters

Shortcoder also supports passing variables to the shortcode content. Let’s make the title of the form dynamic.

Click the “Insert shortcode parameters” > “Custom parameter“ and enter a name for the variable. I’ll provide the “title”. You will find the custom parameter %%title:Subscribe%% added to the content.

We can now change this text when using the shortcode like title="Like this post? Subscribe for more"

The title value will be replaced in the content before the shortcode is executed. You can learn more about this on the custom parameter documentation page.

Conclusion #

As we saw in this article, the Shortcoder plugin is really helpful to create simple shortcodes for code snippets like HTML, CSS, and JavaScript and reuse them wherever needed.

If you have any comments, feel free to share them in the comments section below.