One of the main advantages of using WordPress is that you don’t need to mess with code to run a successful website.
You could come across occasional situations, however, where you may like to add code to content in order to add a new feature to your site. Typical snippets of code you may want to add to your site include:
- Showing the current date and time on a time sensitive offer page
- Adding a search box
- An opt-in form
- Display relevant advertising banners
- Tracking scripts (e.g. Facebook Ads)
(Adding code to pages can give you additional functionality)
In this tutorial, you are going to learn how to easily add scripts to your WordPress content.
- How To Add Simple HTML Code To Your Posts And Pages Using The Text Editor
- Inserting Snippets Of Code Into Your Content Using Plugins
How To Add Simple HTML Code To Your Posts And Pages Using The Text Editor
Note: Remember to backup your site before adding any code or scripts to WordPress. If you don’t want to back up your site manually, then consider getting assistance from a WordPress professional, or use a backup plugin.
Learn about a great WordPress backup plugin that can fully automate your site backups here:
With WordPress, you can’t add code snippets and scripts directly into the visual editor …
(Do not add code inside the WordPress visual editor)
You can, however, add simple code to WordPress via the text editor. To insert code into a post or page, do the following:
First, locate or create the HTML code you plan to add to your content. You can use a free online HTML editor (e.g. search online for “Free Online HTML Editor WYSIWYG“) or use HTML code templates …
(You can use an online HTML editor or HTML templates to create your code. Source: HTML-Online.com)
Select all of the code that you want added to your page or post and copy it to your clipboard …
(Copy your code to the clipboard)
Next, open your post or page and in the Visual Editor, add placeholder text to mark the spot where you would like your code to appear …
(Add placeholder symbols to mark the location where you want your code to appear in your content)
Switch to the Text editor …
(Switch to the Text editor to paste code)
Locate the placeholder and highlight the line …
(Select and highlight your placeholder)
Paste the code into your content …
(Paste the code over the highlighted text)
Remember to publish your page or post and preview …
(Preview and test any code you add to your pages)
We have created a detailed tutorial on using basic HTML here:
(Avoid using the WordPress text editor to add complex code … use other methods instead!)
A smarter way to add scripts to posts and pages is to enter the script into a plugin that ”calls” the script from ’shortcodes’ placed in your content.
A ‘shortcode’ is a code shortcut. It allows you to trigger complex scripts without coding or programming knowledge. Shortcodes can typically be used in posts, pages, and widgets to trigger complex scripts into action.
Shortcodes look like strings of text enclosed in square brackets, e.g. ‘[ezformshortcode]’ …
Shortcodes allow plugin developers to create complex scripts such as content formatting tools, image galleries, user forms, etc., which you then add to your content via a simple text string.
How Shortcodes Work
(How shortcodes work)
The screenshot above explains how to use a shortcode:
 You install a plugin that lets you paste snippets of code into a special field (we’ll show you an example of this in the tutorial below)
 After pasting the code into the code area and saving, the plugin creates a unique shortcut that will process the script.
 After adding your shortcode to the content, publish or update your page or post.
 The plugin will now automatically process the function wherever the shortcode has been added.
The great thing about using shortcodes is that you don’t have to mess around with the actual code to get the functionality you want … simply add the shortcode where you would like the code to appear and WordPress does the rest!
Inserting Snippets Of Code Into Your Content Using Plugins
In the tutorials below, you will learn how to insert code into your posts, widgets, and pages using free WordPress plugins.
(Insert Html Snippet WordPress Plugin)
As the name suggests, this plugin lets you easily add HTML code snippets into posts, pages or sidebar widgets.
Essentially, how this plugin works is that it allows you to create separate HTML snippets and add them to your posts and pages using shortcodes or custom fields.
HTML snippets can store codes and scripts for just about anything: a video embed code from YouTube, custom tracking codes, etc.
The step-by-step tutorial below shows you how to add code to your pages and posts using Insert HTML Snippet.
Adding Snippets Of Code To Your Content – Insert Html Snippet Plugin Tutorial
Download the plugin here, or install the plugin directly from your dashboard (search for keywords like “Insert HTML, Insert HTML Snippets, etc.“) …
(Install ’Insert Html Snippet’)
Next, activate the plugin …
(Activate the ‘Insert Html Snippet’ plugin)
After the plugin has been installed, a new item called XYZ Html will display in the navigation menu …
(XYZ HTML menu)
Important: Make sure you have your script handy (e.g. save it in a plain text file) …
(Highlight and copy your code to the clipboard)
To create a new snippet, click on XYZ Html > HTML Snippets …
(XYZ Html > HTML Snippets menu)
Click on Add New HTML Snippet to create a new shortcode …
(Click on the ‘Add New HTML Snippet’ button to create a new snippet)
In ‘The Add New HTML Snippet’ section, enter a name in the Tracking Name field (this is for your reference), paste your code snippet into the HTML code section and click the Create button …
(Insert HTML Snippet – Add a new Snippet)
A new snippet will be created and published as a shortcode …
You can also create a shortcode without having your code yet. This is handy if, for example, you are waiting for approval of the code but need to publish the pages where your script will eventually show up.
In this case, go ahead and create your snippet with some placeholder content and insert the shortcode into your pages then publish. After receiving your live code, you can then edit the snippet, replace the content, and republish …
(You can create a new shortcode without having your code snippet yet.)
The plugin stores all snippets in a separate list within the plugin’s database. You can view all of your stored snippets by selecting XYZ Html > HTML Snippets from the dashboard menu …
(Click on XYZ Html > HTML Snippets to view all of your shortcodes)
A table of all your snippets and shortcodes show up in the ‘HTML Snippets’ admin screen …
(Table of snippets and shortcodes)
Because code snippets get stored in an independent location (i.e. the plugin’s database), you can use one shortcode in multiple pages and control everything from one location. If you update the code snippet, whatever code is in the snippet will automatically be updated wherever the shortcode has been added.
You can insert shortcodes into content directly in the WordPress visual editor.
To place the code into your content via a shortcode, simply go to your widget, page, or post and select the location where you would like the code added …
(You can add shortcodes to content directly inside the WordPress visual editor.)
After publishing, preview and test your script …
(Script added to content via a shortcode)
As well as modifying the code in your snippets, you can deactivate or delete the snippets …
(Delete, edit, or deactivate 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 remove any lines containing the shortcode from your content so that it will not be visible to your visitors.
- If you deactivate the HTML Snippets plugin, your shortcode will show up in your content (you will need to manually remove the shortcode wherever you have added it).
(If the HTML Snippets plugin is deactivated, the shortcode will appear as text in your content)
Go here for more information about this plugin: Insert Html Snippet – WordPress Plugin
EmbedIt Pro is similar to the previously described plugin, with some added features.
After installing and activating the EmbedIt Pro plugin, a new menu item called HTML Snippets will be added to the main menu …
(HTML Snippets [EmbedIt Pro] menu)
To create a shortcode, click on HTML Snippets > Add New, add your script, give your snippet a descriptive title and click the Publish (or Update) …
(Shortcode – EmbedIt Pro)
Two new buttons will appear on your Editor menu toolbar: HTML Snippet and Custom Field…
(EmbedIt Pro adds new menu items to the visual editor toolbar)
You can 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 place the shortcode into your text …
(Use the menu buttons to insert shortcodes into your posts.)
A a new 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 inserted into your page/post and click the ‘OK’ button to proceed …
(Insert name of the HTML Snippet)
Your shortcode will be added in the location you have specified …
(Shortcode inserted into content)
Click Publish or Update to save …
(Update to save your settings)
View your post or page and test your script. The script should have been added to your content in the specified location …
(Voila … your script has been added!)
While you are logged into your WordPress backend, an ‘Edit Snippet’ button should display below where your code snippet has been inserted. This lets you update scripts “on the fly” (this is useful if you need to edit code parameters, video sizes, etc.)
To edit your script, click on the Edit Snippet button …
(Edit code “on the fly”!)
You will be taken to the Edit HTML Snippet screen. Make your changes and resave. All posts and pages will update automatically …
(Update and republish your code to make sitewide changes)
Tip #1: You can export your HTML snippets (and import these into other WordPress sites) using the Tools > Export function …
(Export your Snippets)
Tip #2 (For Advanced Users): EmbedIt Pro also uses WordPress Custom Fields to insert code into your posts.
If you know how to use custom fields in WordPress, you can paste code into a custom field and place a shortcode into your content with the “Custom Field” toolbar button. This is useful when you want to insert HTML into a single post without leaving the post editing window.
(Paste shortcodes into your posts with custom fields)
Tip #3 – Use WordPress Themes With Drag And Drop Page Building Plugins
(Some themes provide built-in code adding functionality)
Tip #4 – Adding code to the header section of WordPress
With a plugin like EmbedIt Pro, you easily insert scripts and code into content inside your WordPress posts and pages.
Some applications (e.g. analytics and ad conversion tracking tools), however, require code to be inserted into content but also to sections such as headers, footers, etc. (e.g. completed order pages, opt-in confirmation pages, and so.)
There are a number of WordPress plugins that will allow you to add code to headers and footers of pages and posts. Many of these plugins, however, add code to all pages or posts, not just the ones you want (some plugins and themes will add the code to every single page and then let you turn the code off on individual pages).
If you need to add code outside of 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 this plugin works is that it lets you extend your site’s functionality and appearance by adding custom code via code blocks that can be assigned to individual pages, posts, custom posts, categories, URLs, expressions, and more!
To view the plugin’s comprehensive documentation and user manual, go here:
Note: Before using CJT, you will need to install the plugin’s database tables and activate the plugin’s functionality. To do this, just click the ‘Install’ button …
(First-time plugin use requires installing database tables)
(CJT plugin menu)
Click on the New Code Block button to begin adding custom code …
In the ‘Create New Code Block’ window, name your code block, select the checkbox to activate it (or leave it unchecked if you don’t want to activate it yet), select a “Location Hook” (specify where to insert your code block. Options = Header / Footer.), and select the “Initial Block Position” (specify whether the script should be added before or after all other code inside the header or footer. Options = First Block / Last Block.). Click Create …
(‘Create New Code Block’ window)
A blank text field will appear. Paste your code or script into this area …
(CJT code area)
Next, select where you want to insert the block (e.g. in specific Pages, Custom Posts, etc …)
(Select where to add your code block)
The plugin dashboard also has a number of icons you can click to access different features, help documentation, etc. (hover your mouse over the icons for item descriptions) …
(Access more CJT features via toolbar icons)
Click Save All Changes to save your settings …
(CJT – ‘Save All Changes’ button)
For help and support with this plugin, visit the developer’s site here:
Tip: Checking 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 pasted code into an area like the “header” that is not meant to be visible and you need to check if the code has been added correctly, then do this:
How To View Source Code In Firefox
First, open up your internet browser (e.g. Firefox) and go to the page that contains your code.
From the browser menu, select Tools > Web Developer > Page Source …
(How to view page code in Firefox)
A new browser will open with the page code displayed.
Use the search function (Ctrl+F) or scroll down until you spot the code that you have added (if adding code to a page header, it will typically be located between the <head> and </head> tags) …
(How to view your code)
If you can see your code, then the next step is to test your script and make sure that everything is working as it should. If you experience any problems, repeat the above process and make sure that your code has been added correctly, or get help from a professional. As stated earlier in this tutorial, always back up your site before doing anything that involves changing code.
Congratulations, now you know how to easily scripts and snippets of code to WordPress posts and pages.
"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org
Disclaimer: This site is not directly associated with WordPress or any of the WordPress products mentioned or reviewed on this site. We may receive affiliate commissions or financial benefits from sales of third-party products or services advertised on our website. All images are the copyright of their respective owners and are being used only for training or illustrative purposes.
Did you enjoy this post? If so, please take a moment and share this post with anyone thinking of starting a business online using the social buttons below.