One of the best things about using WordPress is that you don’t need to mess with code to run a successful website.
You could come across times, however, where you may like to paste a snippet of code into your posts or pages in order to achieve a certain outcome. Some common examples of code snippets you may want to add to your website include:
- Today’s date
- Adding a Google search box to your post, page, or sidebar
- Newsletter subscription forms
- Display relevant advertising
- Tracking scripts (e.g. Google Analytics)
(Adding code to your pages can expand your site’s functionality)
In this tutorial, we will show you how to easily embed code snippets into your WordPress content with and without plugins.
- Inserting Simple Code Snippets Into Your Posts Manually
- How To Add Snippets Of Code To Your WordPress Posts And Pages Using Plugins
Inserting Simple Code Snippets Into Your Posts Manually
Note: We recommend backing up your database and files before adding any scripts to WordPress. If you don’t want to back up your data manually, then get assistance from a WordPress professional, or use backup plugins.
You can learn more about a WordPress backup plugin that we recommend using to perform complete file and data backups here:
With WordPress, you cannot add code directly into the visual editor …
(Pasting scripts inside your visual editor will not work)
You can, however, add simple HTML code to the WordPress text editor. To insert HTML code into a post or page, do the following:
First, find or create your HTML code. You can use an HTML editor (e.g. search online for “Free Online HTML Editor WYSIWYG“) or consider using an HTML cheat sheet …
(You can use a free online HTML editor or HTML templates to create your HTML code. Image source: HTML-Online.com)
Select and copy your code to the clipboard …
(Highlight and copy your code to the clipboard)
Next, open your page or post and in the Visual Editor, insert a blank line and add a placeholder (e.g. @@@@@) to mark the location where you would like your script to appear in your content …
(Add placeholder symbols where you want your code to display)
Next, switch to the Text editor …
(Code must be pasted in your Text editor)
Locate and highlight the placeholder …
(Select and highlight your placeholder characters)
Paste the code into your content, replacing the selected placeholder …
(HTML code pasted into text)
Publish your post or page and preview …
(Preview and test any code inserted into content)
If you need help using basic HTML, refer to this tutorial:
(Don’t use the text editor to add complex code … use the other methods below instead!)
A smarter solution for adding scripts to pages and posts is to use a plugin that then processes the script from ’shortcodes’ pasted into your content.
A ‘shortcode’ is a short bit of code that allows users to perform complex functions in WordPress with no coding skills. Shortcodes are typically used in widgets, posts, and pages to trigger complex scripts into action.
A shortcode looks like a little string of text wrapped in square brackets, e.g. ‘[ezformshortcode]’ …
Shortcodes allow plugin developers to create complex scripts such as image tools, content generators, user forms, etc., which you then add to your content using a simple text string.
How WordPress Shortcodes Work
(How a shortcode works)
The screenshot above explains how WordPress shortcodes work:
 First, install a plugin that allows you to paste snippets of code into a special field (we’ll show you an example of this in the tutorial below)
 After pasting the code snippets into the code area and saving, the plugin creates a unique shortcode for calling up the script.
 You then copy the shortcode and paste it into a new or existing page, widget, or post where you would like the function to appear and publish.
 The plugin will now automatically process your code wherever the shortcode has been added.
The great thing about using shortcodes is that you don’t have to mess around with scripts … simply add the shortcode to your content and WordPress does the rest!
How To Add Snippets Of Code To Your WordPress Posts And Pages Using Plugins
There are a number of plugins that let you add snippets of code into your WordPress posts.
(Insert HTML Snippet)
As the name of this plugin suggests, Insert HTML Snippet allows you to add snippets of HTML code into posts, pages or sidebar widgets.
This plugin lets you create unlimited HTML snippets and add them to your content using shortcodes or custom fields.
The tutorial below shows you how to paste code into your pages and posts using HTML snippets.
Inserting Snippets Of Code Into WordPress Posts And Pages – Insert HTML Snippet Tutorial
Download the plugin here, or install the plugin directly from your plugin dashboard (search for keywords like “Insert HTML, Insert HTML Snippets, etc.“) …
(Install the ‘Insert Html Snippet’ plugin)
Next, activate the plugin …
(Activate the plugin)
After installing and activating Insert Html Snippet, a new menu item called XYZ Html will display in the menu …
(XYZ HTML plugin menu)
Important: Make sure you have your code snippet available (e.g. copied and pasted into a plain text file) …
(Have your code ready)
To create a new snippet, click on XYZ Html > HTML Snippets …
(XYZ Html > HTML Snippets menu)
Click on Add New HTML Snippet …
(’Add New HTML Snippet’)
In ‘The Add New HTML Snippet’ section, give your code snippet a descriptive title (this is for your own reference to help identify what the snippet is about!), paste your code snippet into the HTML code section and click on the Create button …
(Create a new Snippet)
This saves and publishes a new HTML snippet as a shortcode …
(HTML Snippets shortcode!)
You can also create a snippet without having a script. This is useful if, for example, you are waiting for approval of the code but want to proceed with getting the pages created where your script will eventually appear.
In this case, go ahead and create the code snippet with placeholder content and insert the shortcode into your content then publish. After receiving your live code, you can then edit the snippet and replace the content …
(You can also create a shortcode without having a script.)
The plugin stores your snippets in a separate list in the plugin’s database. You can view all of your stored snippets and shortcodes by selecting XYZ Html > HTML Snippets from the admin menu …
(Click on the XYZ Html > HTML Snippets plugin menu to view a list of all your shortcodes)
A table with all the snippets you create show up in the ‘HTML Snippets’ admin screen …
(Table of snippets)
Because code snippets are stored in an independent location (i.e. a separate database), you can use the same shortcode in various pages and control everything from a single location. If you update the snippet code, the code will automatically be updated in every instance where the shortcode has been inserted.
You can add shortcodes to your content inside the WordPress visual editor.
To place the code into your content via a shortcode, simply open your post, widget, or page and place your mouse cursor where you would like to embed the code …
(Shortcodes can be added in the WordPress visual editor.)
After publishing, preview your content and test the script …
(Script added via a shortcode)
As well as editing your snippet codes, you can deactivate or delete your snippets …
(Edit, deactivate, or delete your snippets)
- If you delete or deactivate a snippet but leave the HTML Snippets plugin active, the shortcode will not display in your content.
- If you deactivate the plugin, your shortcode will display as a line of text in your content and will need to be manually deleted.
(If you deactivate the plugin, your shortcode will display as a line of text in your content)
For more details, go here: Insert Html Snippet Plugin
EmbedIt Pro gives you similar functionality to the HTML Snippets plugin, with some added features.
After the plugin has been installed and activated, a new menu item called HTML Snippets will be added to your WordPress menu …
(EmbedIt Pro plugin menu)
To create a new code snippet, click on HTML Snippets > Add New, add your script, give your snippet a name and click the Publish button …
(Shortcode – EmbedIt Pro)
A couple of new buttons will display on your Editor toolbar: Embed HTML Snippet and Embed From Custom Field…
(EmbedIt Pro adds new menu buttons to the WordPress visual editor)
Use the HTML Snippet button to insert shortcodes into your content. With the cursor location selected, click on the HTML Snippet button to select and insert your snippet shortcode in your text …
(You can use the HTML Snippet button to place shortcodes into your content.)
A window will pop up on your screen allowing you to insert any of the HTML Snippets you have created. Select the HTML Snippet you want added into your page/post and click the ‘OK’ button to continue …
(Insert your HTML Snippet)
The shortcode will be inserted in the location you have specified …
(Shortcode added to content)
Click Publish/Update to save …
(Update to save your settings)
View your post or page and test your script. The script should display in your content …
(What your visitors will see)
While you are logged into your WordPress backend, an ‘Edit Snippet’ button should display near the area where your code snippet has been inserted. This allows you to update scripts “on the fly” (this is useful if you need to change code parameters, resize images, etc.)
To update your script, click on the Edit Snippet button …
(Change scripts “on the fly”!)
The Edit HTML Snippet screen will open in your browser. Make your changes and save. All posts and pages will update globally with the changes …
(Update and republish your code to make sitewide changes)
Go here to learn more about using this plugin:
Tip #1: With EmbedIt Pro, you can export your snippets (and import these into other WordPress sites) using the Tools > Export function …
(Export your Snippets to other sites)
Tip #2 (For Advanced Users): The EmbedIt Pro plugin also uses WordPress Custom Fields to add code to your content.
If you know how custom fields work in WordPress, you can paste HTML code into a custom field and place a shortcode into your content with the “Custom Field” toolbar button. This is useful if you want to insert code 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 Page Building Plugins
(Some themes are built with built-in code adding features)
Tip #4 – Adding code to the header section of WordPress
A plugin like EmbeditPro allows you to easily add code and scripts to content inside your WordPress pages and posts.
Some applications (e.g. analytics and ad tracking tools), however, require that code be inserted into content but also to sections such as page headers, footers, etc. (for example, landing pages, opt-in confirmation pages, and so.)
There are a number of WordPress plugins that let you add code to the header section of your posts and pages. Many of these plugins, however, add code every page on your site, not just the ones you want (some plugins and themes will add code to every single page and then let you turn the code off on individual 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 below.
The next section is for advanced users. If you need any help adding or removing scripts from your site, please contact a professional WordPress web developer.
(CJT Plugin For WordPress)
The way this plugin works is that it allows you to modify your site’s functionality by adding custom code via code blocks that you can assign to individual pages, posts, custom posts, categories, expressions, URLs, 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. It’s really simple, just click the ‘Install’ button …
(Database tables will need to be installed the first time you use CJT)
(CJT plugin menu)
Click on the New Code Block button to add 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 to activate it yet), select a “Location Hook” (specify where to insert your code block. Options = Header / Footer.), and choose the “Initial Block Position” (this lets you 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 field will appear. Paste your code or script into this area …
(CJT code field)
Next, select where you would like your block to be inserted (e.g. Pages, Posts, etc …)
(Specify where to add your code block)
The CJT dashboard also has a number of icons you can click to access different functions, links to help documentation, etc. (hover your mouse over the icons for descriptions) …
(Access plugin features via toolbar icons)
Click Save All Changes to save your settings …
(Click ‘Save All Changes’ to save your code settings)
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 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 here’s how to do it:
Viewing Hidden Page Code In Firefox
First, open up your internet browser (we’ll use Firefox in this example) and go to the page where you have added your code.
Select Tools > Developer Tools > Page Source from the browser menu …
(How to view page code in Firefox)
A new browser opens displaying the source code for that page.
Use the search function (Ctrl+F) or scroll down the screen until you can spot the code that you have added (code added to a page header is normally found between the <head> and </head> tags) …
(How to view your code)
If you can see your code, 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 above process to make sure that your code has been entered correctly, or get a professional to help you. 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 add scripts to your content.
"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
Disclaimer: WordPress and its related trademarks are registered trademarks of Automattic, Inc. This site is not affiliated with nor sponsored by Automattic, Inc. or the WordPress Open Source project. This site and the products and services offered on this site are not associated, affiliated, endorsed, or sponsored by WordPress, nor have they been reviewed, tested, or certified by WordPress. The owner, contributors and/or advertisers may derive financial benefit from sales of items linked to, reviewed, or advertised on this site.
Did you find this article useful? If so, please consider using the social buttons below to share this page with other website owners.