How to Insert HTML, CSS and JavaScript Snippets in WordPress Post?

In our previous article we had explained how to insert raw codes in WordPress post. There are also scenarios where you might be interested in showing the result of the code snippet. The code can contain script, styles and plain HTML. Directly inserting such code snippets on WordPress posts and pages is not possible. You can insert plain HTML code under “Text” editor but CSS and JavaScript can’t be added in-between content.

How to Insert HTML, CSS and JavaScript Snippets in WordPress Post?

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 side bar.

Insert HTML Snippet Admin Menu
Insert HTML Snippet Admin Menu

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

Adding New Code Snippet
Adding New Code Snippet

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

Adding the Name and Snippet Code
Adding the Name and Snippet Code

Click on the “Create” button to save the snippet and create a shortcode. The shortcode will look like .

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.

Snippets Dashboard
Snippets Dashboard

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 TinyMCE editor. Click on the button and choose the snippet shortcode you want to insert on your post.

Additional Button on the Editor
Additional Button on the Editor

Preview and publish your posts to see the live result of your code snippet.

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.

Inserting Snippet in Widget Area
Inserting Snippet in Widget Area

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.

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.

Below is how the snippet created on codepen will look like on your page:

See the Pen CSS Shadow Box by WebNots (@WebNots) on CodePen.

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Follow us on Facebook and Twitter.

Leave a Comment