How to Insert HTML Code Snippets in WordPress?

In our previous article we had explained how to insert raw HTML, CSS and JS codes in WordPress post. There are also scenarios where you might be interested in showing the result of the code snippet. The code could be a widget containing script, styles and plain HTML that you want to run in the frontend. In this article, we will explain how to insert HTML code snippets in WordPress that contains CSS and JavaScript files.

Remember, you can’t run PHP code snippets and show the result in browser’s frontend. PHP is a server side scripting language and need to run on the server and not on the client browser. In WordPress, you can add new PHP functions in your theme’s template file and achieve the result on your own site. If you are looking for inserting PHP code snippets in functions.php file, check out our article on how to add new functions in WordPress by editing functions.php file.

Text Editor and Custom HTML Widget

WordPress Classic editor had an option to toggle to text mode and edit the source HTML code. Similarly, you can edit source HTML in Gutenberg using Code Editor. Though you can insert plain HTML code using these options, you can’t insert an external CSS or JavaScript files along with your HTML code snippet.

Gutenberg has a Custom HTML widget that you can use for inserting HTML code snippets in content and widgets area. However, managing multiple code snippets will become a problem when using Custom HTML widget randomly on your site. The best option here is to use a plugin to overcome all these challenges.

Insert HTML, CSS and JavaScript Code Snippets in WordPress

There are very few plugins on the WordPress repository available for this purpose. Most of the plugins will help you to enqueue the CSS and JS files on the header and footer of the page respectively. But this will not help you to add the snippet code and showcase the results on the post. After testing with multiple plugins we have found Insert HTML Snippet plugin does the work as expected.

Insert HTML Snippet Plugin

Insert HTML Snippet plugin was developed by XYZScripts. It has the following features:

• Allows to insert HTML, CSS and JavaScript codes.
• You can add line by line code or link external CSS and JavaScript files without the need of modifying any template files.
• Create shortcodes and embed on post content, sidebar and footer widget area.
• The plugin will add a button on your post editor to easily select the available widgets from the dropdown.
• You can easily add AdSense ads, social sharing widgets and video embeds.
• All created widgets can be seen in a dashboard.
• Individual widget can be paused, edited and deleted at any point of time.
• The developer also published another plugin Insert PHP Code Snippet for adding PHP code on your posts and pages.

There is one problem with the plugin not related to functionality but on the user interface. It has lot of distractive links on the menu pages which may not be looking good on the admin panel. But nowadays this is common with most of the free plugins.

Creating Code Snippets

Go to “Plugins > Add New” menu and search for “Insert HTML Snippet” plugin. Install and activate the plugin on your site. The plugin will add a new menu called “XYZ HTML” on the admin sidebar.

Navigate to “XYZ HTML > HTML Snippets” and click on the “Add New HTML Snippet” button.

Provide a name for your widget in “Tracking name” box and insert your code inside the “HTML code” text box.

Click on the “Create” button to save the snippet and create a shortcode. The shortcode will look like [ xyz-ihs snippet=”Your-snippet-name” ]. Once the shortcode is created, you can pause the code from running and modify at time later. All created snippets can be seen under “XYZ HTML > HTML Snippets” menu.

You can customize the default sorting criteria and the number of widgets to be shown on the dashboard page under “XYZ HTML > Settings” menu.

Inserting on Posts and Pages

Now go to the WordPress post editor and you will see a button named “HTML” on the Classic editor. Click on the button and choose the snippet shortcode you want to insert on your post.

Preview and publish your posts to see the live result of your code snippet. If you are Gutenberg block editor, you can copy and paste the snippet’s shortcode in a paragraph block.

Inserting Snippets on Widget Area

Insert HTML Snippet plugin also offers a widget which can be inserted on the sidebar and footer widget area. Navigate to “Appearance > Widget” menu and drag and drop the “Insert HTML Snippet” widget to the sidebar or footer. Choose the shortcode of the required snippet and save your changes.

Also you can simple use the “Text” widget and insert the required snippet shortcode.

Points to Remember

This is really a handy plugin to insert HTML, CSS and JavaScript snippets. Remember it works out of the box for inline codes. Though it also works for linking external CSS and script files, all your codes will be inserted under the body section of the page. This plugin will not segregate CSS into header and JavaScript into footer. Also there is no option for enqueuing external CSS and script files to header and footer section of the page respectively.

Unfortunately, you may need multiple plugins to insert CSS in the header, script in the footer and the HTML inside the body of the page. So when you have fewer things to showcase, Insert HTML Snippet plugin should be sufficient regardless of where the code goes on your page. However, you can’t use this plugin for proper insertion of code snippets in header or footer area.

Also the plugin will only work on client side scripts like JavaScript. It will not work with the server side scripts like PHP. You should use separate plugin like Insert PHP Code Snippet or Code Snippet for inserting PHP snippets on your post.

Using Third Party Embed

Maintaining all code snippets on your site will become a difficult task during long run. There are many third party coding sites offer the feature to embed the code snippet on your site. Codepen.io is one of the website allows you to insert HTML, CSS and JavaScript code along with panel showing result of the code. You can easily manage all code snippets on codepen.io and embed wherever you want. The biggest advantage is that anyone likes your snippet can also embed it on their site thus increasing your popularity. Codepen is also having a WordPress plugin to insert the shortcode on your posts and widget area.