One of the main advantages of using WordPress is that you don’t need to mess with code to build a successful online presence.
There may be times, however, where you are required to add code to your content in order to add a new feature to your site. Useful examples where inserting snippets of code into pages or posts would extend the functionality of your site include:
- Special offer expiry date
- Adding a search box to your post, page, or sidebar
- Adding lead capture forms
- Display relevant ads
- Conversion tracking code (e.g. Google Adwords)
(Adding code to pages can help expand your site’s functionality)
In this step-by-step tutorial, we show you how to insert scripts into your WordPress posts with and without plugins.
Adding Simple HTML Code To WordPress Posts And Pages Manually
Note: We recommend backing up your site before adding any scripts or code to WordPress. If you don’t want to back up your site yourself, then get help from a WordPress professional, or use backup plugins.
You can learn more about a WordPress backup plugin that can fully automate your backup process here:
You cannot paste code directly into your content via the WordPress visual editor …
(Do not add code inside your visual editor)
You can, however, add simple HTML code to your content through the text editor. To insert code into a post or page, do the following:
First, source or create the HTML code you plan to add to your content. You can use a simple HTML editor (e.g. search online for “HTML Code WYSIWYG Editor“) or consider using HTML cheat sheets …
(You can use a free web-based HTML editor or HTML templates to create your code. Source: HTML-Online.com)
Select the code that you want added to your page and copy it to your clipboard …
(Highlight and copy your code to the clipboard)
Next, open your post or page and add placeholder text where you want your script to appear in your content …
(Add a placeholder to mark the location where you would like your code to display)
Switch to the Text editor …
(Code must be pasted in your Text editor)
Find and select your placeholder …
(Select and highlight the line containing your placeholder)
Paste the code over your selected placeholder …
(Paste the code over your highlighted placeholder)
Remember to save and publish the work, then preview and test the results …
(Preview and test any code added to pages)
To learn more about using basic HTML in WordPress, refer to this step-by-step tutorial:
Pasting scripts directly into the WP text editor could lead to errors.
We recommend using a plugin that lets you “call” the script using ’shortcodes’ pasted into your content.
What’s A Shortcode?
A ‘shortcode’ is a code shortcut. It allows you to embed complex functions without coding or programming knowledge. Shortcodes can typically be added to posts, pages, and widgets to trigger a complex script into action.
A shortcode normally looks like a short string of text wrapped in square brackets, e.g. ‘[ezformshortcode]’ …
(This is what a WP shortcode looks like!)
Shortcodes allow plugin developers to create complex scripts such as user forms, content formatting tools, image tools, etc., which you then insert into your content via a simple text string.
How A WordPress Shortcode Works
(How to use WordPress shortcodes)
The screenshot above explains how to use a WordPress shortcode:
 First, install a plugin that allows you to paste a snippet of code into a special field (see the tutorial below for an example)
 After pasting the code into the field and saving, the plugin creates a unique shortcut for calling up the script.
 After adding the shortcode to 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 code to appear and WordPress does the rest!
Adding Scripts And Snippets Of Code To Your Pages Using A Plugin
There are various plugins that let you insert snippets of code into WordPress.
(Insert HTML Snippet WordPress Plugin)
As the name suggests, this plugin lets you insert HTML code into a post, page, or a sidebar widget.
This plugin lets you create unlimited HTML snippets and add them to your posts and pages using shortcodes or custom fields.
HTML snippets are objects that can store codes and scripts for just about anything: calculators, custom tracking codes, etc.
The step-by-step tutorial below shows you how to use Insert HTML Snippet.
Inserting Code Snippets Into Your Pages And Posts – Step-By-Step Tutorial
Install Insert Html Snippet inside your WP dashboard (search for keywords like “Insert HTML, Insert Code, etc.“) …
(Installing the ‘Insert Html Snippet’ plugin)
Activate the plugin …
(Activate ’Insert Html Snippet’)
Once the plugin has been installed and activated, a new menu item called XYZ Html will appear in your menu …
(XYZ HTML plugin menu)
Important: Make sure to have your code snippet available (e.g. copied and pasted into a plain text file) …
(Have your code ready)
To create a new code snippet, click on XYZ Html > HTML Snippets …
(XYZ Html > HTML Snippets plugin menu)
The ‘HTML Snippets’ screen appears. Click on Add New HTML Snippet to create a new shortcode …
(’Add New HTML Snippet’)
In ‘The Add New HTML Snippet’ section, enter a descriptive name in the Tracking Name field (this is for your own reference), paste your script into the HTML code section and click the Create button …
(Insert Html Snippet – Adding a new HTML Snippet)
A new snippet will be saved and published as a shortcode …
(Your new HTML Snippets shortcode!)
You can also create a new snippet without having the script code. This is handy if, for example, you are waiting for approval of the code but need to create and publish the pages where your script will eventually appear.
In this case, go ahead and create your code snippet with some placeholder content and insert the shortcode into your content then publish. After your code has been approved, you can then edit the snippet, replace the content, and republish …
(You can also create a HTML snippet without having code.)
The plugin stores your snippets in a separate list within the plugin’s database. You can view all the snippets you have created by selecting XYZ Html > HTML Snippets from the admin menu …
(Click on the XYZ Html > HTML Snippets menu to view all of your snippets)
A list of all your HTML snippets and shortcodes show up in the ‘HTML Snippets’ admin screen …
(Snippets and shortcodes table)
Because code snippets get stored in an independent location (i.e. a separate database), you can use a single snippet in a number of posts or pages and control everything from a single location. If you change the snippet code, your script will automatically be updated wherever the shortcode has been inserted.
You can embed shortcodes into your content directly inside the WordPress visual editor.
To place the code into your content using a shortcode, simply go to your page, post, or widget and select the location where you would like to insert the code …
(You can paste shortcodes into your content directly inside the WordPress visual editor.)
After publishing, preview your content and test your script …
(Script added using a shortcode)
As well as editing your snippet codes, you can deactivate or delete the snippets …
(Edit, deactivate, and delete snippets)
- If you delete or deactivate a snippet but leave the plugin active, the shortcode will not display in your content. The plugin will automatically remove the line containing the shortcode so that it will not be noticeable to visitors.
- If you deactivate the HTML Snippets plugin, the shortcode will appear as a line of text in your content.
(If the HTML Snippets plugin is deactivated, the shortcode text will appear in the content)
For more details, go here}: Insert Html Snippet WP Plugin
EmbedIt Pro is similar to the previously described plugin, with some added features.
After installing and activating the plugin, a new menu item called HTML Snippets will display in the menu …
(EmbedIt Pro menu)
To create a new shortcode, click on HTML Snippets > Add New, paste your code, give your snippet a descriptive title and click Publish …
(Shortcode – EmbedIt Pro)
Two new menu items will be added to your Editor toolbar: HTML Snippet and Custom Field…
(EmbedIt Pro adds new menu buttons to the visual editor)
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 insert your snippet shortcode into your text …
(You can use the HTML Snippet button to insert shortcodes into your posts.)
A small window will pop up on your screen allowing you to insert any HTML Snippets you have created. Type in the name of the HTML Snippet you would like added into your page or post and click the ‘OK’ button to proceed …
(Insert your HTML Snippet)
The shortcode will be added in the location you have specified …
(Shortcode inserted into content)
Click Publish or Update to save …
(Publish to save your settings)
View your post or page. The script should have been added to your content …
(Voila … your script has been added!)
While you are logged into your WordPress administration area, you should see an ‘Edit Snippet’ button displayed next to the section where your code snippet has been inserted. This lets you adjust your script “on the fly” (this is useful if you need to edit form parameters, resize videos, etc.)
To update your code, click on the Edit Snippet button …
(Edit scripts “on the fly”!)
The Edit HTML Snippet screen will open in your web browser. Make your changes and resave. All pages and posts will update automatically …
(Edit republish your code to make global changes)
For more details, go here}:
Tip #1: EmbedIt Pro allows you to export your snippets (and import these into other 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 content.
If you are familiar with how custom fields work, you can add your code to a custom field and place a shortcode into 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.
(Add shortcodes to your posts using custom fields)
Tip #3 – Use Themes With Drag And Drop Page Building Plugins
(Some WordPress themes come with built-in code insertion functionality)
Tip #4 – Adding code to the header section of WordPress
A plugin like EmbedIt Pro lets you easily add code to content inside your posts and pages.
Some applications (e.g. analytics and ad tracking tools), however, require code to be inserted into content but also to areas such as page headers, footers, etc.
There are a number of plugins that will allow you to add code to headers and footers of posts and pages. Many of these plugins, however, add code every page on your site, not just the ones you want (check the plugin’s settings – some plugins and themes will add code to every page and then let you turn the code off for selected pages and posts).
If you want to add scripts outside of regular content areas, then you will need to either customize your site or use a plugin like the one described below.
The next section is for advanced WordPress users. If you need any help adding or removing scripts from your site, please contact a professional WordPress web developer.
(CJT WordPress Plugin)
The way the plugin works is that it allows you to extend your site’s functionality and appearance with custom code blocks that can be assigned to individual posts, pages, categories, custom posts, URLs, expressions, and much more!
To view the plugin’s comprehensive documentation and user manual, go here:
Note: After activating the plugin, you will need to install the plugin’s database tables and activate the plugin’s functionality. It’s really simple, just click the ‘Install’ and the plugin will take care of the rest …
(Database tables must be installed the first time you use the plugin)
Click on the New Code Block button to begin adding custom code to your site …
In the ‘Create New Code Block’ window, enter 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 specify the “Initial Block Position” (this lets you specify if 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 area will appear. Paste your code or script into this section …
(CJT code field)
Next, select where you want the code block to be inserted (e.g. Pages, Posts, etc …)
(Specify where to insert your code)
The CJT dashboard also various icons you can click to access different features, help documentation, etc. (hover your mouse over the icons for descriptions of functions) …
(Access more CJT features via toolbar icons)
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 code settings)
For more information, go here:
Tip: How To View Your Code
Some scripts will ask you to verify if your code has been added correctly and some will not.
If you have added conversion tracking 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 the following:
Viewing Page Code In Firefox
First, open up your internet browser (we’ll use Firefox in this example) and visit the page containing the code.
Select Tools > Developer Tools > Page Source from the browser menu …
(Viewing source code in Firefox)
A new window opens with the page code displayed.
Use the search function (Ctrl+F) or scroll down the screen until you can find the code that you have added (code added to a page header is typically placed between the <head> and </head> tags) …
If you can see your code, then the next step is to test your script and make sure that everything is working correctly. If you experience any errors, repeat the process and make sure that your code has been added correctly, or get a professional to help you. As stated at the beginning of this tutorial, always back up your files and database before adding, changing or deleting code.
Congratulations! Now you know how to easily code to your WordPress pages.
"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now