One of the main benefits of using WordPress is that you don’t need to mess with code to build a successful web presence.
You may come across a situation, however, where you may be required to embed a snippet of code into posts or pages in order to add certain functions to your site. Useful examples where adding snippets of code to pages or posts would add functionality to your site include:
- Today’s date and time
- Adding a Google search box
- Subscription forms
- Display contextual ads
- Analytics code (e.g. Google Adwords)
(Adding code to content can give your site additional functionality)
In this tutorial, you are going to learn how to insert scripts and code snippets into your content with and without plugins.
Table of Contents
- Adding Code To WordPress Posts - Manual Method
Adding Code To WordPress Posts - Manual Method
Note: Remember to back up your database and files before adding any code snippets to WordPress. If you don’t want to do site backups, then consider getting professional WordPress help, or use WordPress backup plugins.
You can learn more about a WordPress backup plugin that we recommend using to automate site backups here:
You cannot add code directly into content using the WordPress visual editor …
(Do not insert scripts inside the WordPress visual editor)
You can, however, add simple HTML code to the text editor. To insert HTML into a page or post, do the following:
First, source or create the HTML code you would like to add to your content. You can use a free online HTML editor (e.g. search online for “Free HTML Online WYSIWYG Editor“) or consider using an HTML cheat sheet …
(Use an online HTML editor or HTML templates to create your HTML code. Image source: HTML-Online.com)
Copy all of your code to the clipboard …
(Select and copy the code to your clipboard)
Next, open your page or post and in the Visual Editor, insert a blank line and add placeholder characters (e.g. @@@@@) to mark the spot where you would like your script to appear in your content …
(Add placeholder symbols where you want your script to appear)
Switch to the Text editor to paste in your code …
(Switch to the Text editor to paste code)
Find and select the placeholder …
(Select and highlight your placeholder text)
Paste the code over the selected text …
(Paste the code into your text)
Publish your post or page, then preview …
(Preview and test any code inserted into your posts or pages)
To learn more about using basic HTML in WordPress, go here:
While the above can be used to add simple HTML code to content, we do not recommend pasting scripts containing complex code directly into your content (e.g. lead capture forms, etc.) …
(Don’t use the text editor to add complex code … use other methods instead!)
The method we recommend is to use a plugin that processes the code snippet using ’shortcodes’ added to your content.
What Is A Shortcode?
A ‘shortcode’ is a is a code shortcut that allows users to perform complex functions without coding or programming skills. Shortcodes are typically used in pages, widgets, and posts to trigger a complex script into action.
A shortcode looks like a little bit of text enclosed by square brackets, e.g. ‘[ezformshortcode]’ …
(This is what a shortcode looks like!)
Shortcodes enable plugin developers to create complex scripts such as content generators, user forms, image galleries, etc., which you then insert into your content via a short text string.
How To Use Shortcodes
(How WordPress shortcodes work)
The screenshot above explains how a WordPress shortcode works:
 You install a plugin that lets you paste code into a special field (we’ll show you an example of this in the tutorial below)
 After pasting the code into the field and saving, the plugin creates a unique text-based shortcut that will call up this script.
 Copy this shortcode to your clipboard and paste it into any pages, widgets, or posts where you would like the function to appear and publish.
 WordPress will now automatically process your function.
The great thing about using shortcodes is that you don’t have to mess with the actual code … just add the shortcode where you would like the functionality to appear and WordPress does the rest!
Inserting Code Snippets Into Your Pages And Posts Using A Plugin
Let’s now show you how to add scripts and code into your WordPress pages using various free WordPress plugins.
(Insert Html Snippet Plugin)
As the name suggests, this plugin allows you to easily insert HTML snippets into posts, pages and sidebar widgets.
Essentially, how this plugin works is that it allows you to create and store HTML snippets and add them to your pages and posts using shortcodes or custom fields.
The tutorial below shows you how to use Insert Html Snippet.
Embedding Code Snippets And Scripts Into Your WordPress Pages – Tutorial
Find and install Insert HTML Snippet inside your dashboard (search for keywords like “Insert HTML, Insert HTML Code, etc.“) …
(Locate and install ’Insert Html Snippet’)
Activate the plugin …
(Activate the plugin)
After installing and activating Insert Html Snippet, a new menu item called XYZ Html will be added to your main menu …
(XYZ HTML plugin menu)
Important: Make sure to have your code snippet handy (e.g. save it in a plain text file) …
(Select and copy all of the code to your clipboard)
To create a new shortcode, click on XYZ Html > HTML Snippets …
(XYZ Html > HTML Snippets)
Click on the Add New HTML Snippet button to create a new snippet …
(’Add New HTML Snippet’)
In ‘The Add New HTML Snippet’ section, give your code snippet a name (this is for your reference), paste your script into the HTML code section and click on the Create button …
(Insert HTML Snippet – Creating a new Snippet)
This saves and publishes a new HTML snippet as a shortcode …
You can also create a snippet without having the script code. This is useful if, for example, you are awaiting approval of the code but need to create and publish the content where your code will eventually display.
In this case, go ahead and create a new 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 create a HTML snippet without having the code.)
The plugin stores your snippets in a separate list in the plugin’s database. You can view all of your stored snippets by selecting XYZ Html > HTML Snippets from your WordPress main menu …
(Click on the XYZ Html > HTML Snippets plugin menu to view a list of all your shortcodes)
A table with all the code snippets you create show up in the ‘HTML Snippets’ admin screen …
(List of snippets)
Because the plugin stores all snippets in its own database, you can add one shortcode to a number of pages and posts and control everything from one location. If you alter the code and update the snippet, whatever is controlled by the snippet will automatically be updated wherever the shortcode has been added.
Shortcodes can be inserted into your content in the WordPress visual editor.
To place the code into your content using a shortcode, simply open your widget, post, or page and select where you would like your code embedded …
( Paste shortcodes into content directly inside the WordPress visual editor.)
After publishing, preview your content and test your script to ensure that the code is working ok …
(Script added via a shortcode)
As well as editing your snippet codes, you can deactivate and delete the snippets …
(Deactivate, edit, and delete code snippets)
- If you deactivate or delete a snippet but the plugin is left active, the shortcode will not display in your content. The plugin will fix your pages so that it will not be noticeable to your visitors.
- If you deactivate the HTML Snippets plugin itself, the shortcode will show up in your content (you will need to manually removed all instances of the shortcode).
(If you deactivate the plugin itself, your shortcode will show up as text in the content)
For more details, go here}: Insert Html Snippet – WordPress Plugin
(EmbedIt Pro WP Plugin)
EmbedIt Pro is similar to the HTML Snippets plugin, with some additional features.
Once the plugin has been installed and activated, a new menu item called HTML Snippets will display in your main menu …
(HTML Snippets [EmbedIt Pro] plugin menu)
To create a new snippet, 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 menu buttons will display on your Visual Editor menu toolbar: HTML Snippet and Custom Field…
(The plugin adds new menu items to the WordPress visual editor)
You can use the HTML Snippet button to place shortcodes into your content. With the cursor location selected, click on the HTML Snippet button to select and embed the code snippet in the text …
(You can use the HTML Snippet button to add shortcodes to your posts.)
A small popup window will appear on your screen allowing you to insert any of the HTML Snippets you have saved. Type in the name of the HTML Snippet you would like added into your content and click OK to proceed …
(Insert your HTML Snippet)
Your shortcode will be added where the cursor is located …
(Shortcode added to content)
Click the ‘Publish’ or ‘Update’ button to save …
(Update to save your settings)
View your post or page and test your script. The code should display in your content …
(What your visitors will see)
While you are logged into your site, you should see an ‘Edit Snippet’ button displayed below the section where your script has been added. This allows you to update code “on the fly” (this is useful if you need to change code elements, image sizes, etc.)
To edit your script, click on the Edit Snippet button …
(Change scripts “on the fly”!)
The Edit HTML Snippet screen will open in your web browser. Make your changes and resave. All content will automatically update …
(Update and republish your code to make sitewide changes)
For more details, go here}:
Tip #1: EmbedIt Pro lets you 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 add code to your posts.
If you know how to use custom fields in WordPress, you can paste your HTML code into a custom field and use a shortcode in your content with the “Custom Field” button. This is useful if you want to embed HTML into a single post without leaving the post editing window.
(Paste shortcodes into your posts with custom fields)
Tip #3 – Use Themes With Drag And Drop Code Insertion Page Builders
(Some WordPress themes come with built-in functionality)
Tip #4 – Adding code to the header section of WordPress
A plugin like EmbeditPro lets you easily add scripts to content inside your WordPress posts and pages.
Some applications, however, require that code be inserted into content but also to sections such as page headers, footers, etc.
There are a number of plugins that let you add code to the header or footer section of pages and posts. Many of these plugins, however, will add code to all pages and posts, not just the ones you want (some plugins will add the code to every single page and then let you turn the code off for individual pages or posts).
If you need 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 information below is for advanced users. If you need any help modifying code on your site, please contact a professional WordPress web developer.
The way CJT works is that it lets you modify your site’s functionality by adding custom code via code blocks that can be assigned to individual posts, pages, custom posts, categories, expressions, URLs, and more!
For comprehensive documentation, go here:
Note: The first time you try to use CJT, you will be asked to install the plugin’s database tables and activate the plugin’s functionality. It’s really simple, just click the ‘Install’ button …
(First-time plugin use requires database tables installation)
The main CJT dashboard will come up …
Click on the New Code Block button to begin adding new code …
In the ‘Create New Code Block’ window, type a name, select the checkbox to activate it (or leave it unchecked if you don’t want to activate it yet), select a “Location Hook” (this specifies where to insert your code block. Options = Header / Footer.), and specify the “Initial Block Position” (this allows you to specify if 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’ window)
A blank text field will appear. Paste your code or script into this section …
(CJT content field)
Next, select where you want to insert the block (e.g. Pages, Categories, etc …)
(Specify where to insert your code block)
The CJT screen also various icons you can click to access different functions, help, etc. (hover your mouse over the icons for tooltip descriptions) …
(Access more CJT features via the toolbar)
Click the ‘Save All Changes’ button when you you are done creating or editing a code block to save your code settings …
(Click ‘Save All Changes’ to save your code settings)
Tip: How To View Your Code
Some scripts will ask you to verify that you have added the code correctly and some will not.
If you have added conversion tracking code to a section of your site like the “header” that is not meant to be visible and you would like to check if the code has been added correctly, then do the following:
How To View Source Code In Firefox
First, open up your internet browser (e.g. Firefox) and go to the page where you have added the code.
Select Tools > Developer Tools > Page Source from the browser menu …
(How to view hidden code in Firefox)
A new browser opens up with the page code displayed.
Use the search function (Ctrl+F) or scroll down until you can locate the code that you have added (code added to the header section is typically placed between the <head> and </head> tags) …
If you can see the code in your page, then the next step is to test your script and make sure that everything is working correctly. If you experience any problems, repeat the process and make sure that you have embedded your 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 embed snippets of code into your WordPress content.
"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com
Recommended Video Courses For WordPress Users
Learn how to set up an e-commerce store on your WordPress site using e-commerce platforms like WooCommerce and Easy Digital Downloads.
More info: Build An e-Commerce Store With WordPress
Recommended Video Courses For WordPress Users
Learn how to set up a forum for your visitors, prospects, customers, members, or affiliates using WordPress.
More info: How To Set Up A Forum On WordPress
Recommended Video Courses For WordPress Users
Learn how to safely and automatically backup your WordPress files and database and how to easily restore your WordPress site if something were to happen.
More info: How To Back Up & Restore WordPress Sites
Recommended Video Courses For WordPress Users
Learn how to optimize your WordPress site and improve your page loading speed.
More info: How To Optimize WordPress