One of the main advantages of using WordPress is that you don’t need to know how to edit code to build a successful online presence.
You may come across an instance, however, where you may need to embed code into content in your posts in order to achieve a particular outcome. Some common scripts you may want to add to your site include:
- Current date and time
- Adding a Google search box
- Adding subscription forms
- Display contextual advertising banners
- Tracking code (e.g. Facebook Ads)
(Adding scripts to your pages can expand your site’s functionality)
In this step-by-step tutorial, we show you how to easily insert code into your pages. You are also going to learn different plugins that can be used to add scripts and codes to your content.
- Adding Simple Code To Your Posts - Manual Method
- What Is A Shortcode?
- Embedding Code Into WordPress Content Using A Plugin
Adding Simple Code To Your Posts - Manual Method
Note: We recommend backing up your site files and database before adding any scripts to WordPress. If you don’t want to do your own backups, then get professional WordPress support services, or use a WordPress backup plugin.
Learn about a WordPress backup plugin that can fully automate your backup process here: Backup, Clone And Protect Your WordPress Website With Backup Creator Plugin For WP
In WordPress, you cannot add code directly into the visual editor …
(Do not insert code into your visual editor)
You can, however, add simple code to WordPress via the text editor. To add HTML code to a page or post, do the following:
First, locate or create the HTML code you want to add to your content. You can use a simple HTML editor (e.g. search online for “Free Online HTML Editor WYSIWYG“) or use an HTML cheat sheet …
(Use a web-based HTML editor or HTML templates to create your HTML code. Source: HTML-Online.com)
Highlight and copy your code to the clipboard …
(Highlight and copy your code to the clipboard)
Next, open your post or page and in the Visual Editor, create a blank line and add a placeholder (e.g. @@@@@) to mark the location where you want your script to appear …
(Add a placeholder to mark the location where you would like your code to display in your content)
Switch to the Text editor to paste in the code …
(Switch to the Text editor to paste in your code)
Locate and select your placeholder …
(Select and highlight your placeholder)
Paste the code into your content …
(Simple HTML code pasted into text)
Publish your page or post and preview …
(Preview and test any code added to your content)
If you need help using basic HTML, refer to this tutorial: Using HTML Formatting Tags In WordPress
While the above is fine for adding simple HTML to content, we do not recommend pasting complex scripts directly into your content (e.g. newsletter forms, etc.) …
A better method for inserting code into content is to use a plugin that processes the script from ’shortcodes’ placed in your content.
What Is A Shortcode?
A ‘shortcode’ is a code shortcut. It allows you to trigger complex functions with no coding or programming knowledge. Shortcodes can typically be used in widgets, posts, and pages to trigger complex scripts into action.
Shortcodes look like little strings of text wrapped in square brackets, e.g. ‘[ezformshortcode]’ …
Shortcodes allow plugin developers to create complex scripts such as image galleries, user forms, content formatting tools, etc., which you then insert into your content using a simple text string.
How To Use Shortcodes
(How a WordPress shortcode works)
The above explains how to use a WordPress shortcode:
 First, install a plugin that allows you to paste code into a special field (we’ll show you an example of this in the tutorial below)
 After pasting the code snippets into the field and saving, the plugin generates a unique text-based shortcode that will process the script.
 After embedding the shortcode into your content, publish or update your page.
 The plugin will now automatically process the code wherever the shortcode has been added.
Shortcodes are great because you don’t have to mess with scripts … simply add the shortcode to your widget, page, or post and WordPress does the rest!
Embedding Code Into WordPress Content Using A Plugin
In the examples below, you will learn how to insert snippets of code and scripts into your pages and posts using various free WordPress plugins.
(Insert HTML Snippet WP Plugin)
As the name suggests, this plugin lets you easily embed HTML code into a page, post, or a sidebar widget.
Essentially, this plugin allows you to create and store HTML snippets and add them to your posts and pages using shortcodes or custom fields.
The step-by-step tutorial below shows you how to add code to your pages and posts using HTML snippets.
Adding Scripts To Your WordPress Pages And Posts – Tutorial
Install Insert HTML Snippet inside your dashboard (search for keywords like “Insert HTML, Insert Code, etc.“) …
(Install the ‘Insert Html Snippet’ plugin)
Activate the plugin …
(Activate the plugin)
Once the plugin has been installed and activated, a new item called XYZ Html will appear in your main menu …
(XYZ HTML menu)
Important: Make sure you have your code snippet available (e.g. save it into a plain text file) …
(Have your code ready to paste into the plugin)
To create a new snippet, click on XYZ Html > HTML Snippets …
(XYZ Html > HTML Snippets plugin menu)
The ‘HTML Snippets’ screen will appear. Click on the Add New HTML Snippet button …
(Click on the ‘Add New HTML Snippet’ button to create a new snippet)
In ‘The Add New HTML Snippet’ screen, name your code snippet (this is for your own reference), paste your code snippet into the HTML code section and click on the Create button …
(Add a new HTML Snippet)
This creates, saves, and publishes your new snippet as a shortcode …
(Add the shortcode to your posts and pages!)
You can also create a new shortcode without having your code snippet yet. This is useful if, for example, you are awaiting approval of the code but need to publish the content where your code will eventually show up.
In this case, go ahead and create your 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 snippet without having the script code.)
The plugin stores your snippets in a separate list within the plugin’s database. You can view all the snippets and shortcodes you’ve created by selecting XYZ Html > HTML Snippets from your WP admin menu …
(Click on the XYZ Html > HTML Snippets menu to view a list of all your shortcodes)
A list of all the code snippets and shortcodes you have created will appear in the ‘HTML Snippets’ admin screen …
(List of snippets and shortcodes)
Because the plugin keeps all snippets stored in a separate database, you can add the same snippet to a number of pages and control everything from one location. If you change the snippet code, your code will automatically be updated wherever the shortcode has been embedded.
Shortcodes can be pasted into content in the WordPress visual editor.
To place the code into your content via a shortcode, simply go to your post, widget, or page and click where you would like your code to display …
(You can add shortcodes to content in the WordPress visual editor.)
After publishing, preview and test your script …
(Script added via a shortcode)
You can deactivate, edit, and delete code snippets …
(Deactivate, edit, or delete your code snippets)
- If you delete or deactivate a snippet but the HTML Snippets plugin is left active, the shortcode will not display in your content.
- If the plugin gets deactivated, the shortcode will show up in your content and will need to be manually removed.
(If the HTML Snippets plugin gets deactivated, your shortcode will show up as text in your content)
For more details, go here: Insert HTML Snippet – WordPress Plugin
(EmbedItPro WordPress Plugin)
EmbedIt Pro is similar to the HTML Snippets 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 dashboard menu …
(EmbedIt Pro menu)
To create a new shortcode, click on HTML Snippets > Add New, add your script, give your snippet a name and click Publish …
(Shortcode – EmbedIt Pro)
You will notice that a couple of new items have been added to your Editor menu toolbar: Embed HTML Snippet and Embed From Custom Field…
(EmbedIt Pro adds new menu buttons to the visual editor toolbar)
You can use the HTML Snippet button to insert a shortcode into your content. With the cursor location selected, click on the HTML Snippet button to select and insert your snippet in the text …
(Use the HTML Snippet button to place a shortcode into your pages.)
A small window will display on your screen allowing you to insert any of the HTML Snippets you have created. Select the HTML Snippet you would like to embed into your page or post and click OK to continue …
(Insert name of the HTML Snippet)
Your shortcode will be inserted where the cursor is located …
(Shortcode added to content)
Click Publish/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 WordPress administration area, you should see an ‘Edit Snippet’ button displayed next to where your code has been added. This lets you make adjustments to scripts “on the fly” (this is useful if you need to edit code elements, image sizes, etc.)
To edit your code, click the Edit Snippet button …
(Change scripts “on the fly”!)
The Edit HTML Snippet screen will open in your web browser. Perform your desired changes to the code and resave. All content will be automatically updated with the changes …
(Edit republish your code to make sitewide changes)
More information: EmbedItPro Plugin
Tip #1: With EmbedIt Pro, you can export your HTML 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 add code to your content.
If you know how custom fields work, you can paste 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 HTML into a single post without leaving the post editing window.
(Add shortcodes to your content with custom fields)
Tip #3 – Use Themes With Drag And Drop Page Builders
(Some themes provide built-in features)
Tip #4 – Adding code to the header section of WordPress
With a plugin like EmbedIt Pro, you easily add snippets of code to content inside your WordPress pages and posts.
Some applications (e.g. analytics and ad conversion tracking tools), however, require that code be inserted into content but also to sections such as page headers, footers, etc.
You can find a number of plugins that let you add code to the header/footer section of your posts and pages. Many of these plugins, however, will add code every page or post on your site, not just the ones you want (check the plugin’s settings – some plugins and themes will add the code to every page and then let you turn the code on/off on individual pages).
If you need to add code outside of regular content areas, then you will need to either customize your site or use a plugin like the one below.
The next section is for advanced users. If you need help modifying scripts on your site, please contact a professional WordPress web developer.
The way the plugin works is that it allows you to modify your site’s functionality and appearance with custom code blocks that can be assigned to individual pages, posts, categories, custom posts, URLs, expressions, and more!
Note: Before using CJT, you will be asked to go through an installation process to create the plugin’s database tables and activate the plugin’s functionality. To do this, just click the ‘Install’ and the plugin will take care of the rest …
(First-time plugin use requires installing database tables)
Click on New Code Block to add new code to your site …
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” (this specifies 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 inside the header or footer. Options = First Block / Last Block.). Click Create …
(‘Create New Code Block’ window)
A blank text box will appear. Paste your code or script into this area …
(CJT code field)
Next, select where you would like your code to be inserted (e.g. in specific Pages, Custom Posts, etc …)
(Specify where to add your block of code)
The plugin dashboard also has a number of icons you can click to access different functions, help, etc. (hover your mouse over the icons for tooltips) …
(Access more CJT features via the toolbar menu)
Click Save All Changes when finished to save your code settings …
(CJT – ‘Save All Changes’ button)
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 code to an area of your site like the “header” that is not meant to be visible and you want to check if the code has been added correctly, then do the following:
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 your code.
From the browser menu, select Tools > Web Developer > Page Source …
(Tools > Web Developer > Page Source)
A new browser window will open up with the page code displayed.
Use the search function (Ctrl+F) or scroll down until you can spot the code that you have added (if adding code to a page header, it will typically be placed between the <head> and </head> tags) …
(How to view your code)
If you can see the code, then all that’s left is to test your script and make sure that everything is working as it should. If you experience any errors, repeat the above process and make sure that your code has been pasted in correctly, or get help from a professional. As stated at the beginning of this tutorial, always back up your site before doing anything that involves changing code.
Congratulations, now you know how to embed scripts and code into your content.
"These tutorials have so much information and are easy to understand. If you use WordPress or plan to in the future these will help you with everything you need to know." - Valisa (Mesa, Arizona)
Disclaimer: This site is not associated with WordPress, Automattic, or any WordPress-related products reviewed on this site. We may derive financial benefits or affiliate commissions from the purchase of any products and services advertised, mentioned or linked to this website. All images remain the copyright of their respective owners and comply with all license terms and agreements of use.
Did you enjoy this post? Feel free to share this post with others using the social links below.