One of the most powerful aspects of using WordPress is that you don’t need to mess with code to run your site.
There could be instances, however, where you may be required to add a code snippet or script to content inside your posts in order to add certain additional functionalities. Useful snippets of code you may want to add to your site include:
- Today’s date
- Adding a search box
- Adding subscription forms
- Display relevant ads
- Analytics scripts (e.g. Google Analytics)
(Adding scripts to your pages can help expand your site’s functionality)
In this tutorial, you will learn how to embed code snippets into WordPress pages and posts with and without plugins.
Inserting Simple HTML Code Into Your WordPress Pages And Posts - Manual Method
Note: Before adding any code or scripts to WordPress we recommend backing up your files and database first. If you don’t want to back up your data manually, then consider getting professional WordPress support, or use a backup plugin.
You can read about a great WordPress backup plugin that we recommend using to perform automated WordPress file and database backups here:
Scripts cannot be added directly into the WordPress visual editor …
(Pasting code inside the WordPress visual editor will not work)
You can, however, add simple HTML code to the text editor. To add HTML to a page or post, do the following:
First, find or create the HTML code you would like to add to your content. You can use an HTML editor (e.g. search online for “HTML Editor“) or consider using HTML cheat sheets …
(You can use a simple HTML editor or HTML templates to create your HTML code. Source: HTML-Online.com)
Copy all of the code to your clipboard …
(Highlight and copy the code to your clipboard)
Next, open your post or page and add placeholder text to mark the spot where you would like your code to display in your content …
(Add placeholder symbols to mark the location where you would like your script to display in your content)
Next, click on the Text editor …
(Switch to the Text editor to paste in code)
Locate the placeholder and select the line …
(Select and highlight the line containing the placeholder)
Paste the code into your content …
(Simple HTML code pasted into text)
Publish your page or post and preview the results …
(Preview and test any code you add to your pages)
If you need help using basic HTML in WordPress, go here:
While the above can be used to add simple HTML code to your content, we do not recommend pasting complex scripts directly into your content (e.g. subscriber forms, etc.) …
(Don’t use the text editor to add complex code … use other methods instead!)
A smarter method for embedding scripts into posts and pages is to enter the code snippet into a plugin that will “call” the script from a ‘shortcode’ pasted into your content.
A ‘shortcode’ is a code shortcut. It allows you to trigger complex scripts with no coding or programming knowledge. Shortcodes are typically added to posts, pages, and widgets to trigger complex scripts into action.
A shortcode looks like a little string of text enclosed by square brackets, e.g. ‘[ezformshortcode]’ …
(This is what a WordPress shortcode looks like!)
Shortcodes allow plugin developers to create complex scripts such as user forms, image galleries, content formatting tools, etc., which you then insert into your content using a short text string.
How A WordPress Shortcode Works
(How a shortcode works)
The screenshot above explains how to use a WordPress shortcode:
 You install a plugin that allows you to paste code into a special field (see the tutorial below for an example)
 After adding the code to the special field and saving, the plugin generates a unique shortcode that will process this script.
 Next, copy this shortcode to your clipboard and paste it into any pages, posts, or widgets where you would like the script to display and publish.
 WordPress will now automatically call up your function whenever someone loads the post or page on their browser.
Shortcodes are great because you don’t have to mess with the actual script … simply add the shortcode where you would like the code to appear and WordPress does the rest!
How To Add Scripts To WordPress Posts And Pages Using A Plugin
There are various plugins available that allow you to add scripts and code snippets into WordPress.
(Insert Html Snippet WordPress Plugin)
As the name suggests, Insert Html Snippet allows you to embed snippets of code into a post, page, or a sidebar widget.
This plugin lets you create unlimited HTML snippets and add them to your content using shortcodes or custom fields.
The step-by-step tutorial below shows you how to use the Insert Html Snippet plugin.
How To Add Code To Your WordPress Pages – Step-By-Step Tutorial
Download the plugin here, or install the plugin directly from your WP dashboard (search for keywords like “Insert HTML, Insert HTML Snippets, etc.“) …
(Installing ’Insert Html Snippet’)
Next, activate the plugin …
(Activate the plugin)
After installing and activating the plugin, a new menu item called XYZ Html will display in your dashboard menu …
(XYZ HTML plugin menu)
Important: Make sure you have your code available (e.g. saved in a plain text file) …
(Copy the code to your clipboard)
To create a new snippet, click on XYZ Html > HTML Snippets …
(XYZ Html > HTML Snippets menu)
Click on the Add New HTML Snippet button to create a new snippet …
(’Add New HTML Snippet’)
In ‘The Add New HTML Snippet’ section, name your snippet (this is for your reference), paste the script into the HTML code section and click on the Create button …
(Add a new Snippet)
This saves and publishes your HTML Snippet as a shortcode …
(Your new HTML Snippets shortcode!)
You can also create a new shortcode without having code. This is useful if, for example, you are awaiting approval of the code but want to go ahead and get pages created where your code will eventually display.
In this case, go ahead and create your new code snippet with some placeholder content and insert the shortcode into your content then publish. After receiving your code, you can then edit the snippet and replace the content …
(You can create a snippet without having a script.)
The plugin stores all snippets in a separate list in the plugin’s database. You can view all the snippets you’ve created by selecting XYZ Html > HTML Snippets from the main menu …
(Click on XYZ Html > HTML Snippets to view a list of all your snippets)
A table of all the snippets you have created will be displayed in the ‘HTML Snippets’ admin screen …
(Table of snippets and shortcodes)
Because code snippets are stored in an independent location (i.e. the plugin’s database), you can use a single snippet in various pages and posts and control everything from one location. If you edit your code and update the snippet, whatever code is in the snippet will automatically update in every instance where you have added the shortcode.
Shortcodes can be inserted into content inside the WordPress visual editor.
To place the code into your content via a shortcode, simply go to your post, page, or widget and click where you would like to embed your code …
(Shortcodes can be inserted into your content directly in the WordPress visual editor.)
After publishing, preview and test your script …
(Script added using a shortcode)
As well as editing the code in your snippets, you can deactivate or delete your snippets …
(Deactivate, delete, or edit code snippets)
- If you deactivate or delete a snippet but the HTML Snippets plugin is left active, the shortcode will not display in your content. The plugin will automatically fix the content so that it will not be noticeable to visitors.
- If you deactivate the HTML Snippets plugin itself, your shortcode will appear as a line of text in your content (the shortcode will need to be manually deleted).
(If the HTML Snippets plugin gets deactivated, the shortcode itself will show up in your content)
For more details, go here}: Insert HTML Snippet WordPress Plugin
(EmbedIt Pro – WordPress Plugin)
EmbedIt Pro gives you similar functionality to the HTML Snippets plugin, with some added features.
After the plugin has been installed, a new menu item called HTML Snippets will display in your main menu …
(HTML Snippets [EmbedIt Pro] plugin menu)
To create a new code snippet, click on HTML Snippets > Add New, add your script, give your snippet a title and click Publish …
(Shortcode – EmbedIt Pro)
You will notice that two new buttons will be added to your Editor toolbar: HTML Snippet and Custom Field…
(The plugin adds new menu buttons to the visual editor toolbar)
You can use the HTML Snippet button to add shortcodes to your content. With the cursor location selected, click on the HTML Snippet button to select and embed your snippet shortcode in the text …
(You can use the menu buttons to insert shortcodes into your posts.)
A small popup window will appear on your screen allowing you to insert any of the HTML Snippets you have stored. Select the HTML Snippet you would like embedded into your page or post and click OK to proceed …
(Insert name of the HTML Snippet)
The shortcode will be inserted in the location of your cursor …
(Shortcode inserted into content)
Click Publish/Update to save …
(Update to save your settings)
View your post or page and test your script. The code should display in your content …
(Content with script added)
While you are logged into your site, you should see an ‘Edit Snippet’ button displayed near the area where your code snippet has been added. This allows you to update code “on the fly” (this is useful if you need to edit form parameters, resize videos, etc.)
To update your code, click the Edit Snippet button …
(Modify scripts “on the fly”!)
This takes you to the Edit HTML Snippet screen. Make your necessary changes to the code and save. All content will automatically update with your changes …
(Update and republish your code to make global changes)
For more details, go here}:
Tip #1: The plugin allows you to export your snippets (and import these into other sites) using the Tools > Export function …
(Export your Snippets to other WordPress sites)
Tip #2 (For Advanced Users): The plugin also uses WordPress Custom Fields to insert code into your posts.
If you know how to use custom fields in WordPress, you can add your code to a custom field and use a shortcode in your content with the “Custom Field” menu button. This is useful if you want to embed code into a single post without leaving the post editing window.
(Paste shortcodes into your posts using custom fields)
Tip #3 – Use WordPress Themes With Drag And Drop Page Building Plugins
(Some WordPress themes provide built-in code adding functionality)
Tip #4 – Adding code to the header section of WordPress
A plugin like EmbeditPro lets you easily add code to content inside your WordPress posts and pages.
Some applications, however, require that code be inserted into content but also to areas such as page headers, footers, etc. (for example, purchase pages, confirmation pages, and so.)
There are a number of WordPress plugins that will allow you to add code to headers and footers of posts and pages. Many of these plugins, however, add code to all posts or pages, not just the ones you want (check the plugin’s settings – some plugins and themes will add the code to every single page and then let you turn the code on/off for selected pages).
If you need to add code or scripts outside of regular content areas, then you will need to either customize your site or use a plugin like the one below.
The information below is for advanced WordPress users. If you need help modifying anything on your site, please contact a professional WordPress web developer.
The way CJT works is that it lets you modify and extend your site’s functionality and appearance by adding custom code using code blocks that can be assigned to individual pages, posts, categories, custom posts, expressions, URLs, and much more!
For comprehensive documentation and user manual, go here:
Note: When you first try using the plugin, you will need to go through a custom installation process to create the plugin’s database tables and activate the plugin’s functionality. It’s really simple, just click the ‘Install’ button …
(Database tables need to be installed the first time you use the plugin)
Click on New Code Block to add custom code to your site …
(CJT – Add New Code Block Button)
In the ‘Create New Code Block’ window, add a name to your code block, select the checkbox to activate it (or leave it unchecked if you don’t want it activated yet), select a “Location Hook” (this specifies where to insert your code block. Options = Header / Footer.), and specify the “Initial Block Position” (specify if the script should be added before or after all other code in the header or footer. Options = First Block / Last Block.). After selecting your options, click Create …
(‘Create New Code Block’ window)
A blank text area will appear. Paste your code or script into this section …
(CJT code area)
Next, select where you want to insert your code block (e.g. in specific Pages, Categories, etc …)
(Specify where to add your block of code)
The main plugin dashboard also various icons you can click to access different features, links to help documentation, etc. (hover your mouse over the icons for tooltips) …
(Access more plugin features via the toolbar)
Click the ‘Save All Changes’ button after creating or editing your code block to save your code settings …
(Click ‘Save All Changes’ to save your settings)
For help and support with this plugin, visit the developer’s site here:
Tip: How To Verify That You Have Added Code Correctly
Some scripts will ask you to verify if you have added the code correctly and some will not.
If you have added code to areas of your site that are not meant to be visible (like the “header”) and you want to check if the code has been added correctly, then do this:
How To View Hidden Page Code In Firefox
First, open up your internet browser (e.g. Firefox) and go to the page where you have added the code.
From the browser menu, select Tools > Developer Tools > Page Source …
(Tools > Web Developer > Page Source)
A new browser window opens with the source code of the page displayed.
Use the search function (Ctrl+F) or scroll down the screen until you find the code that you have added (code added to a page header is typically found between the <head> and </head> tags) …
(Verifying that you have added scripts correctly)
If you can see the code in page source view, then all that’s left is to test your script and make sure that everything is working correctly. If you experience any errors, repeat the above process to make sure that you have pasted in the code correctly, or get help from a professional. As stated at the beginning of this tutorial, always back up your site before adding, changing or deleting code.
Congratulations, now you know how to easily insert code snippets and scripts into your WordPress posts.
"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group