One of the advantages of using WordPress is that you don’t need to have technical skills like editing code to run a successful website.
There could be situations, however, where you may decide to insert a code snippet or script into your content in order to add a specific function to your site. Some common snippets of code you may want to insert into your posts include:
- Today’s date and time
- Adding a search box
- Adding lead capture forms
- Display contextual ads
- Conversion tracking code (e.g. Facebook Ads)
(Adding scripts to pages can give your site additional functionality)
In this tutorial, you will learn how to easily insert code snippets into your posts and pages with and without plugins.
- How To Insert Code Into Your WordPress Content Manually
How To Insert Code Into Your WordPress Content Manually
Note: Before adding any code snippets to WordPress we recommend backing up your site files and database first. If you don’t want to perform your own backups, then consider getting professional support, or use a backup plugin.
You can learn more about a great WordPress backup plugin that we recommend using to perform automated WordPress backups here:
(Pasting code inside the WordPress visual editor will not work)
You can, however, place simple code into the WordPress text editor. To insert HTML into a post or page, do the following:
First, source or create the code you would like to add to your content. You can use an online HTML editor (e.g. search online for “HTML Online Editor“) or consider using HTML code templates …
(Use a web-based HTML editor or HTML templates to create your HTML code. Image source: HTML-Online.com)
Select the code that you want added to your content 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 symbols to mark the location where you would like your script to appear in your content …
(Add placeholder characters to mark the location where you would like your code to appear in your content)
Switch to the Text editor …
(Code must be pasted in your Text editor)
Find and highlight your placeholder …
(Select and highlight your placeholder)
Paste your HTML code over your selected placeholder …
(Paste your HTML code into your text)
Republish your post or page, then preview …
(Preview and test any code added to your posts)
We have written a detailed tutorial about using basic HTML in WordPress here:
If you paste complex code directly into the text editor you could experience errors.
A smarter solution for adding code to content is to enter the code into a plugin that then processes the script using a ‘shortcode’ added to your content.
A ‘shortcode’ is a small bit of code that allows users to perform complex functions without coding knowledge. Shortcodes can typically be used in pages, posts, and widgets to trigger complex scripts into action.
A shortcode normally looks like a short bit of text wrapped in square brackets, e.g. ‘[ezformshortcode]’ …
(What a shortcode looks like)
Shortcodes enable WordPress developers to create complex scripts such as content formatting tools, user forms, image tools, etc., which you then insert into your content via a short text code.
How A Shortcode Works
(How a shortcode works)
The above explains how to use a WordPress shortcode:
 You 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 adding the code snippet to the special field and saving, the plugin creates a unique text shortcut that lets your website call up the script.
 You then copy the shortcode to your clipboard and paste it into a new or existing post, page, or widget where you would like the function to display and publish.
 WordPress will now automatically load your code snippet.
Shortcodes are great because you don’t have to mess with the actual code … simply add the shortcode where you would like the functionality to appear and WordPress does the rest!
Adding Code And Scripts To Your WordPress Posts Using Plugins
There are several plugins that allow you to embed snippets of code into WordPress.
(Insert Html Snippet)
As the name suggests, Insert HTML Snippet lets you insert HTML code snippets into posts, pages or sidebar widgets.
Essentially, how this plugin works is that it allows you to create and create and store unlimited HTML snippets and add them to your posts and pages using shortcodes or custom fields.
The tutorial below shows you how to embed code into your content using HTML snippets.
Adding Snippets Of Code To Your WordPress Posts And Pages – Insert HTML Snippet Tutorial
Download the plugin here, or install the plugin directly from your WP dashboard (search for keywords like “Insert HTML, Insert Code, etc.“) …
(Installing ’Insert Html Snippet’)
Activate the plugin …
(Activate the ‘Insert Html Snippet’ plugin)
After installing and activating Insert HTML Snippet, a new menu item called XYZ Html will appear in the dashboard menu …
(XYZ Html plugin menu)
Important: Make sure you have your code handy (e.g. copied and saved into a plain text file) …
(Have your code ready to use)
To create a new shortcode, click on XYZ Html > HTML Snippets …
(XYZ Html > HTML Snippets menu)
The ‘HTML Snippets’ screen appears. Click on the Add New HTML Snippet button to create a new snippet …
(Click on ‘Add New HTML Snippet’ to create a new shortcode)
In ‘The Add New HTML Snippet’ screen, enter a descriptive name in the Tracking Name section (this is for your reference), paste your script into the HTML code section and click the Create button …
(Create a new HTML Snippet)
This saves and publishes your new HTML Snippet as a shortcode …
(Your new shortcode!)
You can also create a snippet without having the script code. This is useful if, for example, you are waiting for approval of the code but need to go ahead and create the pages where your code will eventually display.
In this case, go ahead and create your new snippet with some placeholder content and insert the shortcode into your content then publish. After receiving your code, you can then edit the snippet, replace the content, and republish …
(You can create a HTML snippet without having a script.)
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 the XYZ Html > HTML Snippets menu to view all of your shortcodes)
A table with all the code snippets and shortcodes you create appear in the ‘HTML Snippets’ admin screen …
(Snippets and shortcodes list)
Because snippets are stored in an independent location (i.e. the plugin’s database), you can add one shortcode to various posts and pages and control everything from one location. If you update the code in your snippet, the script will automatically be updated wherever the shortcode has been inserted.
Shortcodes can be inserted into content in the WordPress visual editor.
To place the code into your content using a shortcode, simply open your page or post and place your mouse cursor where you would like to insert the code …
(Shortcodes can be pasted in the WordPress visual editor.)
After publishing, preview and test the script …
(Script added using a shortcode)
You can edit, delete, and deactivate code snippets …
(Edit, delete, or deactivate your 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 remove any lines that contain the shortcode so that no gaps are visible to your visitors.
- If you deactivate the plugin, the shortcode will show up in your content (you will need to manually delete all instances of the shortcode).
(If the HTML Snippets plugin is deactivated, the shortcode string will show up in the content)
For more details, go here}: Insert HTML Snippet Plugin For WordPress
EmbedIt Pro is similar to the previously described plugin, with some additional features.
Once the plugin has been installed and activated, a new menu item called HTML Snippets will be added to the dashboard menu …
(HTML Snippets [EmbedIt Pro] menu)
To create a new code snippet, click on HTML Snippets > Add New, paste your code, give your snippet a name and click the Publish button …
(EmbedIt Pro Shortcode)
A couple of new menu buttons will be added to your Editor toolbar: Embed HTML Snippet and Embed From Custom Field…
(The plugin adds new menu buttons to the WordPress visual editor)
Use the HTML Snippet button to place a shortcode into your content. With the cursor location selected, click on the HTML Snippet button to select and place your shortcode into the text …
(You can use the HTML Snippet button to insert a shortcode into your pages.)
A a new window will pop up on your screen allowing you to insert any of the HTML Snippets you have stored. Select the HTML Snippet you would like added into your page or post and click OK to proceed …
(Insert name of the HTML Snippet)
The shortcode will be inserted where the cursor is located …
(Shortcode added to content)
Click the ‘Publish’ or ‘Update’ button to save …
(Update to save your settings)
View your updated post or page. The script should have been added to your content …
(What your visitors will see)
While you are logged into your admin, you should see an ‘Edit Snippet’ button displayed near where your code snippet has been inserted. This lets you adjust scripts “on the fly” (this is useful if you need to edit code parameters, resize graphics, etc.)
To update your code, click the Edit Snippet button …
(Edit code “on the fly”!)
This will take you to the Edit HTML Snippet screen. Make your desired changes to the script and save. All pages and posts will automatically update with your changes …
(Update and republish your code to make sitewide changes)
For more details, go here}:
Tip #1: EmbedIt Pro allows you to export your HTML snippets (and import these into other WordPress sites) using the Tools > Export function …
(Export your HTML Snippets)
Tip #2 (Advanced Users): The plugin also uses WordPress Custom Fields to insert code into your content.
If you know how custom fields work in WordPress, you can add 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.
(Embed shortcodes into your content using custom fields)
Tip #3 – Use Themes With Drag And Drop Page Builders
(Some themes offer built-in code insertion functionality)
Tip #4 – Adding code to the header section of WordPress
A plugin like EmbeditPro lets you easily insert code and scripts into content inside your WordPress pages and posts.
Some applications, however, require code to be inserted into content but also to areas such as page headers, footers, etc.
You can find a number of WordPress plugins that let you add code to the header section of 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 will add the code to every single page and then let you turn the code off for selected pages and posts).
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 adding or removing code from your site, please contact a professional WordPress web developer.
The way this plugin works is that it allows you to extend your site’s functionality and appearance by adding custom code using 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: After activating the plugin, you will need to install 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 database tables installation)
Click on New Code Block to begin adding custom code …
(CJT – Add New Code Block Button)
In the ‘Create New Code Block’ window, add a name to your new code block, select the checkbox to activate it (or leave it unchecked if you don’t want it activated yet), select a “Location Hook” (this specifies 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 in the header or footer. Options = First Block / Last Block.). After selecting your options, 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 would like the block to be inserted (e.g. Pages, Custom Posts, etc …)
(Select where to insert your code block)
The main plugin screen also various icons you can click to access different functions, help documentation, etc. (hover your mouse over the icons for item descriptions) …
(Access CJT features via the toolbar)
Click the ‘Save All Changes’ button after creating or editing your code block to save your settings …
(CJT – ‘Save All Changes’ button)
For help and support with this plugin, visit the plugin developer’s site here:
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 pasted conversion tracking code into 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:
Viewing Hidden Code In Firefox
First, open up your internet browser (we’ll use Firefox in this example) and visit the page where you have added your code.
Select Tools > Web Developer > Page Source from the browser menu …
(Viewing page code in Firefox)
A new browser window will open up displaying the source code for the page.
Use the search function (Ctrl+F) or scroll down until you find the code that you have added (if adding code to a page header, it will normally 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 errors, repeat the above process and make sure that your code has been embedded correctly, or get help from a professional. As stated earlier in this tutorial, always back up your site before adding, changing or deleting code.
Congratulations! Now you know how to insert scripts and code snippets into your WordPress posts.
"This is an awesome training series. I have a pretty good understanding of WordPress already, but this is helping me to move somewhere from intermediate to advanced user!" - Kim Lednum
Disclaimer: We have no direct association with WordPress, Automattic, or any of the WordPress products reviewed on this site. We may receive an affiliate commission from the sale of services and products mentioned on this site. All images are the copyright of their respective owners and comply with all license terms and agreements of use.
Did you enjoy this post? If so, please consider using the social links below to share this tutorial with others.