There are simpler, more streamlined plugins for this, though we recommend SoGo for the fact that the same plugin can also be used to insert code into a specific post or page as well (see the next section). It’s better to have one plugin do as much as possible, rather than one for each task.
- Code insertions can be limited to just posts, pages, or certain post types
- Code insertions can be limited to a specific post or page.
- Free version displays ads inside the admin panel
Once you’ve installed the SoGo Header and Footer plugin via the admin panel, go to “Settings” -> “Header Footer Script” to add your desired code site wide:
Use the checkboxes to limit the code to certain sections of your site, such as only “posts”, or the “blog” post type etc.
For cases like this, the plugin we suggest is the same as in the first section, and that is SoGo Header and Footer Script Plugin.
Assuming SoGo Header and Footer is installed already, just navigate to the post or page in question inside WordPress admin panel, and scroll down to see two INPUT boxes you use for adding code to that page:
Here you also have the option to disable any site wide external code you may have specified in Section #1 above from being embedded. That’s pretty handy.
And finally, many times the external code to add has pieces that should be embedded directly within your content, such as a slideshow. While you can do this using the WordPress wysiwyg editor, there’s the risk the added code will mess with the formatting of the rest of the content, and even render the editor unusable.
Either of the above plugins accomplishes what we need.
Going with the first xyzscripts plugin, once installed, click on the “XYZ Html” link inside WordPress Admin, and input the desired code to embed anywhere on your site:
Once you’ve saved a snippet, use the generated shortcode to add it anywhere inside a post’s wysiwyg editor without risking Armageddon:
Real World Example
Just to see how this works in real life, lets say you want to add the nifty Before and After Image script to the current blog post:
If you follow along with the instructions on the script page, the code of Step 1 should be added to the HEAD section of the page, while Step 2 asks for some HTML snippet to be inserted where you wishthe Before/After image to appear on the page.
For Step 1, I use the SoGo Plugin to add the code into HEAD section of this specific blog post. Since the script also references two external files (ddbeforeandafter.css and ddbeforeandafter.js), I make sure to upload these two files via FTP to a directory on my server first.
For Step 2, I turn to the xyz html Snipplet plugin to first add the HTML markup into a container, then inside the wysiwyg editor, use the provided shortcode to inject the markup into the wysiwyg editor and exactly where I wish the Before/After Image to appear.
And just like that, we now have a lovely Before and After Effect inside this blog post!
To further customize and differentiate your WordPress blog from the herd, try using a WordPress Page Builder plugin. These add-ons bring drag and drop capabilities to WordPress for modifying the look of your posts and content.