One of the most powerful aspects of using WordPress is that you don’t need to have technical skills like editing code to build a successful web presence.
There may be instances, however, where you are required to paste a code snippet or script into content inside your posts or pages in order to benefit from certain additional functionalities. Common examples where adding snippets of code to pages could be used to add functionality to your site include:
- Today’s date
- Adding a search box
- Lead capture forms
- Display relevant banner ads
- Conversion tracking scripts (e.g. Google Analytics)
(Adding code to pages can help expand your site’s functionality)
Some script features can be added to WordPress through plugins that make handling code easier. In this tutorial, we show you how to easily add code snippets to your WordPress pages.
How To Insert Code Into Your WordPress Posts And Pages - Manual Method
Note: Before adding any code snippets to WordPress make sure to backup your database and files first. If you don’t want to back up your files manually, then consider getting professional WordPress help, or use WordPress backup plugins.
You can read about a great WordPress backup plugin that we recommend using to completely automate your WordPress file and data backups here:
(Pasting scripts into the WordPress visual editor does not work)
You can, however, add simple code to WordPress via the text editor. To add HTML to a post or page, do the following:
First, find or create your code. You can use a free online HTML editor (e.g. search online for “Free Online WYSIWYG HTML Editor“) or consider using HTML cheat sheets …
(Use an online HTML editor or HTML templates to create your HTML code. Image source: HTML-Online.com)
Select the code that you want to add to your post and copy it to your clipboard …
(Copy your code to the clipboard)
Next, open your page or post and in the Visual Editor, select the exact location where you want your script to display, then create a new line and add a placeholder (e.g. @@@@@) …
(Add a placeholder to mark the spot where you want your script to display in your content)
Next, switch to the Text editor …
(Switch to the Text editor to paste in your code)
Locate your placeholder and select the line …
(Select and highlight your placeholder symbols)
Paste your HTML code over the selected placeholder …
(Simple HTML code pasted into text)
Save and publish the post, then preview (and test) the results …
(Preview and test any code inserted into content)
If you need help using basic HTML, refer to this step-by-step tutorial:
While the above is fine for adding simple HTML code to content, we do not recommend pasting complex scripts directly into your content (e.g. opt-in forms, etc.) …
(Avoid using the text editor to add complex code … use the methods below instead!)
We recommend using plugins that let you “call” code snippets from a ‘shortcode’ added to your content.
What Is A Shortcode?
A ‘shortcode’ is a code shortcut. It allows you to trigger complex scripts without coding or programming knowledge. Shortcodes can typically be used in pages, widgets, and posts to trigger complex scripts into action.
Shortcodes look like little strings of text enclosed in square brackets, e.g. ‘[ezformshortcode]’ …
(WP shortcode format)
Shortcodes enable plugin developers to create complex scripts such as content generators, user forms, image tools, etc., which you then insert into your content via a short text string.
How A WordPress Shortcode Works
(How shortcodes work)
The above explains how a shortcode works:
 First, 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 creates a unique text shortcut that lets your website process the script.
 After pasting the shortcode into your content, publish or update your post or page.
 The plugin will now process your code snippet.
The great thing about using shortcodes is that you don’t have to mess with code to get the functionality you want … just add the shortcode where you would like the script to appear and WordPress does the rest!
Inserting Code Snippets Into WordPress Posts Using A Plugin
There are a number of plugins that let you 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 pages, posts or sidebar widgets.
Essentially, this plugin allows you to create and create and store unlimited HTML snippets and add them to your content using shortcodes or custom fields.
HTML snippets can store codes and scripts for just about anything: audio players, tracking codes, etc.
The tutorial below shows you how to add code to your content using the Insert HTML Snippet plugin.
How To Add Code Snippets And Scripts To Your WordPress Posts And Pages – Insert Html Snippet Plugin Tutorial
Install the Insert Html Snippet plugin inside your WordPress dashboard (search for keywords like “Insert HTML, Insert HTML Code, etc.“) …
(Installing ’Insert Html Snippet’)
Next, activate the plugin …
(Activate the plugin)
After installing and activating the plugin, a new item called XYZ Html will display in the dashboard menu …
(XYZ Html plugin menu)
Important: Make sure you have your code snippet available (e.g. copied and saved into a plain text file) …
(Have your code ready to paste into the plugin)
To create a new shortcode, click on XYZ Html > HTML Snippets …
(XYZ Html > HTML Snippets plugin menu)
The ‘HTML Snippets’ screen appears. Click on the Add New HTML Snippet button to create a new snippet …
(Click on ‘Add New HTML Snippet’ to create a new shortcode)
In ‘The Add New HTML Snippet’ screen, name your code snippet (this is for your reference), paste your code into the HTML code section and click the Create button …
(Add a new HTML Snippet)
Your new HTML snippet will be created, saved, and published as a shortcode …
(Add the shortcode to content!)
You can also create a shortcode without having your code snippet yet. This is handy if, for example, you are awaiting approval of the code but need to proceed with getting the pages published where your code will eventually display.
In this case, go ahead and create a code snippet with placeholder content and insert the shortcode into your pages then publish. Once your code has been approved, you can then edit the snippet, replace the content, and republish …
(You can also create a shortcode without having the code.)
The plugin stores your snippets in a separate list in the plugin’s database. You can view all of your HTML Snippets and shortcodes by selecting XYZ Html > HTML Snippets from the dashboard menu …
(Click on XYZ Html > HTML Snippets to view a list of all your shortcodes)
A list of all the HTML snippets you have created appear in the ‘HTML Snippets’ admin screen …
(Table of snippets and shortcodes)
Because the plugin keeps all snippets stored in its own database, you can insert one shortcode into multiple pages and control everything from a single location. If you modify the code snippet, whatever is controlled by the snippet will automatically update wherever the shortcode has been embedded.
You can add shortcodes to your content inside the WordPress visual editor.
To place the code into your content using a shortcode, simply go to your post, widget, or page and place your mouse cursor where you would like your code embedded …
(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 snippet, you can deactivate and delete your snippets …
(Edit, deactivate, or delete 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 remove any lines that contain the shortcode so that no gaps in the content will be noticed by visitors.
- If the HTML Snippets plugin is deactivated, the shortcode will appear as a line of text in your content (you will need to manually delete the shortcode wherever it’s been placed).
(If the plugin gets deactivated, the shortcode string will appear in your content)
For more details, go here}: Insert Html Snippet Plugin
(EmbedIt Pro – WordPress Plugin)
EmbedIt Pro gives you similar functionality to the previously described plugin, with some additional features.
Once the plugin has been installed, a new menu item called HTML Snippets will display in your dashboard menu …
(HTML Snippets [EmbedIt Pro] plugin menu)
To create a new shortcode, click on HTML Snippets > Add New, add your script, give your snippet a title and click the Publish button …
(Shortcode – EmbedIt Pro)
A couple of new items will be added to your Visual Editor toolbar: HTML Snippet and Custom Field…
(The plugin adds new menu items to the visual editor toolbar)
Use the HTML Snippet button to place a shortcode into your posts. With the cursor location selected, click on the HTML Snippet button to select and insert your code snippet in the text …
(Use the menu buttons to add shortcodes to your pages.)
A window will pop up on your screen allowing you to insert any of the HTML Snippets you have stored. Type in the name of the HTML Snippet you would like to add into your content and click OK to proceed …
(Insert your HTML Snippet)
Your shortcode will be inserted into your content …
(Shortcode inserted into content)
Click Publish or Update to save …
(Update to save your settings)
View your post or page. The code should display in your content where you have specified …
(What your visitors will see)
While you are logged into your site, an ‘Edit Snippet’ button should display below where your code snippet has been added. This allows you to change your script “on the fly” (this is useful if you need to change form elements, resize videos, etc.)
To edit your script, click the Edit Snippet button …
(Modify code “on the fly”!)
The Edit HTML Snippet screen will open in your browser. Make your changes and save. All pages and posts will update through your entire site with the changes …
(Edit republish your code to make sitewide 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)
Tip #2 (Advanced Users): The plugin also uses WordPress Custom Fields to insert code into your content.
If you are familiar with using custom fields, you can paste your HTML code into a custom field and add a shortcode in your content with the “Custom Field” toolbar button. This is useful if you want to embed code into a single post without leaving the post editing window.
(Paste shortcodes into your content using custom fields)
Tip #3 – Use WordPress Themes With Drag And Drop Code Insertion Page Building Plugins
(Some themes are built with built-in functionality)
Tip #4 – Adding code to the header section of WordPress
A plugin like EmbedIt Pro lets you easily add scripts to content inside your pages and posts.
Some applications (e.g. analytics and ad tracking tools), however, require code to be added not only to content but also to sections like page headers, footers, etc.
There are a number of WordPress plugins that let you add code to the header section of pages and posts. Many of these plugins, however, add code every page and post on your site, not just the ones you want (check the plugin’s settings – some plugins will add code to every page and then let you turn the code on/off for selected pages or posts).
If you want 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 section below is for advanced users. If you need any help customizing your site, please contact a professional WordPress web developer.
(CJT – WordPress Plugin)
The way CJT works is that it lets you modify or extend your site’s functionality and appearance by adding custom code via code blocks that you can assign to individual posts, pages, categories, custom posts, expressions, URLs, and more!
For comprehensive documentation, go here:
Note: When you first try using the plugin, you will need to install the plugin’s database tables and activate the plugin’s functionality. To do this, just click the ‘Install’ button …
(Database tables need to be installed the first time the plugin is used)
Click on New Code Block to begin adding custom code …
In the ‘Create New Code Block’ window, give your code block a name, select the checkbox to activate it (or leave it unchecked if you don’t want it activated yet), select a “Location Hook” (specify where to insert your code block. Options = Header / Footer.), and select the “Initial Block Position” (this allows you to specify whether the script should be added before or after all other code in the header or footer. Options = First Block / Last Block.). Click Create …
(‘Create New Code Block’ options)
A blank text box will appear. Paste your code or script into this area …
(CJT code field)
Next, select where you want your code to be inserted (e.g. Pages, Posts, etc …)
(Select where to add your code block)
The main dashboard also has a number of icons you can click to access different functions, help, etc. (hover your mouse over the icons for tooltip descriptions) …
(Access more CJT functionality via the toolbar)
Click the ‘Save All Changes’ button when done 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 View Your Code
Some scripts will ask you to verify that your code has been added correctly and some will not.
If you have added code to an area that is not meant to be visible (like the ”header” section) and you need to check if the code has been added correctly, then do this:
Viewing Hidden Page Code In Firefox
First, open up your internet browser (we’ll use Firefox in this example) and go to the page that contains the code.
From the browser menu, select Tools > Developer > Page Source …
(Tools > Developer Tools > Page Source)
A new browser opens with the page code displayed.
Use the search function (Ctrl+F) or scroll down until you locate the code that you have added (if adding code to a page header, it will normally be found between the <head> and </head> tags) …
(Verify that you have added your scripts correctly)
If you can see the code in your page, then all that’s left is to test your script and make sure that everything is working correctly. If you experience any problems, repeat the process to make sure that you have inserted your code correctly, or get help from a professional. As stated earlier in this tutorial, always back up your files and database before adding, changing or deleting code.
Congratulations! Now you know how to easily insert code snippets into your WordPress posts and pages.
"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie