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:
- 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.
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 TinyMCE 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.
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
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.
Using Third Party Embed
Below is how the snippet created on codepen will look like on your page: