One of the main benefits of using WordPress is that you don’t need to have technical skills like editing code to run a successful website.
There could be times, however, where you may need to add a snippet of code to content inside your posts or pages in order to extend the capabilities of your site. Some useful code snippets you may want to add to your website include:
- Today’s date
- Adding a search box
- Subscription forms
- Display relevant advertising banners
- Conversion tracking code (e.g. Facebook Ads)
(Adding scripts to pages can help expand your site’s functionality)
In this step-by-step tutorial, we show you how to add snippets of code and scripts to your WordPress posts and pages. We’ll also show you different plugins you can use to insert code into your content.
How To Add Simple HTML Code To Your Pages And Posts Using The Text Editor
Note: Before adding any scripts or code to WordPress make sure to back up your site first. If you don’t want to back up your data manually, then get professional assistance services, or use backup plugins.
Learn about a WordPress backup plugin that we recommend using to completely automate your file and data backups here:
Code cannot be embedded directly into the WordPress visual editor …
(Do not paste code into the WordPress visual editor)
You can, however, add simple HTML code to WordPress via the text editor. To add HTML to a page or post, do the following:
First, locate or create the code you want to add to your content. You can use a web-based HTML editor (e.g. search online for “Online HTML Editor Free“) or consider using HTML cheat sheets …
(You can use a web-based HTML editor or HTML templates to create your code. Image source: HTML-Online.com)
Select and copy all of your code to the clipboard …
(Copy your code to the clipboard)
Next, open your page or post and in the Visual Editor, add placeholder symbols to mark the location where you would like your code to display …
(Add placeholder characters where you want your script to display in your content)
Next, switch to the Text editor …
(Code must be pasted in the Text editor)
Locate and highlight your placeholder …
(Select and highlight your placeholder)
Paste your HTML code over the highlighted placeholder …
(Use the text editor to add simple HTML code to your content)
Remember to publish your page or post and preview and test the results …
(Preview and test any code added to your posts)
We have created a detailed tutorial about using basic HTML here:
(Don’t use the text editor to add complex code … use the methods below instead!)
Pasting scripts directly into the text editor could cause errors.
A smarter method for adding scripts to posts and pages is to enter the code snippet into a plugin that lets you “call” the script from a ‘shortcode’ pasted into your content.
A ‘shortcode’ is a code shortcut. It allows you to trigger complex functions without coding or programming skills. Shortcodes are typically used in widgets, posts, and pages to trigger a complex script into action.
Shortcodes normally look like short bits of text enclosed inside square brackets, e.g. ‘[ezformshortcode]’ …
(This is what a shortcode looks like!)
Shortcodes allow WordPress developers to create complex scripts such as image tools, user forms, content generators, etc., which you then insert into your content via a simple text code.
How Shortcodes Work
(How to use shortcodes)
The above explains how to use shortcodes:
 You install a plugin that lets you paste code snippets into a special field (see the tutorial below for an example)
 After pasting the script into the code area and saving, the plugin creates a unique text shortcut that lets your site call up the script.
 Once you have embedded the shortcode into your content, publish or update your post or page.
 WordPress will now call up your script when someone browses your site.
The great thing about using shortcodes is that you don’t have to mess with code … simply add the shortcode where you would like the script to appear and WordPress does the rest!
How To Add Code Snippets To Your WordPress Pages Using A Plugin
There are various plugins available that let you insert code and scripts into your WordPress posts, widgets, and pages.
(Insert Html Snippet Plugin For WordPress)
As the name suggests, this plugin lets you embed HTML snippets into a post, page, or a sidebar widget.
How this plugin works is that it lets you create HTML snippets and add them to your pages and posts using shortcodes or custom fields.
HTML snippets can store code for just about anything: video and audio players, custom tracking codes, etc.
The step-by-step tutorial below shows you how to use Insert HTML Snippet.
How To Add Snippets Of Code To Your WordPress Pages And Posts – Step-By-Step Tutorial
Download the plugin here, or locate and install the plugin directly from your WP dashboard (search for keywords like “Insert HTML, Insert HTML Snippets, etc.“) …
(Installing the ‘Insert Html Snippet’ plugin)
Next, activate the plugin …
(Activate ’Insert Html Snippet’)
Once the plugin has been installed and activated, a new item called XYZ Html will display in your dashboard menu …
(XYZ Html menu)
Important: Make sure to have your code snippet handy (e.g. copied and saved into a plain text file) …
(Highlight and copy your code to the clipboard)
To create a new code snippet, click on XYZ Html > HTML Snippets …
(XYZ Html > HTML Snippets plugin menu)
Click on Add New HTML Snippet …
(Click on the ‘Add New HTML Snippet’ button to create a new shortcode)
In ‘The Add New HTML Snippet’ screen, give your snippet a name (this is for your reference), paste the code into the HTML code section and click the Create button …
(Insert HTML Snippet – Add a new Snippet)
Your new HTML Snippet will be saved and published as a shortcode …
(Your new HTML Snippets shortcode!)
You can also create a new shortcode without having code. This is handy if, for example, you are waiting for approval of the code but want to publish the pages where your script will eventually display.
In this case, go ahead and create a new snippet with placeholder content and insert the shortcode into your content then publish. Once your script has been approved, you can then edit the snippet, replace the content, and republish …
(You can also create a snippet without having a script.)
After creating snippets the plugin stores it in a separate list within the plugin’s database. You can view all of your stored snippets by selecting XYZ Html > HTML Snippets from your WordPress admin menu …
(Click on XYZ Html > HTML Snippets to view all of your snippets)
A table with all the code snippets and shortcodes you have created will display in the ‘HTML Snippets’ admin screen …
(Snippets and shortcodes table)
Because snippets are stored in an independent location (i.e. the plugin’s database), you can use the same snippet in a number of posts or pages and control everything from a single location. If you modify the code in your snippet, the script will automatically be updated wherever the shortcode has been inserted.
You can embed shortcodes into content in the WordPress visual editor.
To place the code into your content via a shortcode, simply open your widget, page, or post and select where you would like to add the code …
(You can add shortcodes to content directly in the WordPress visual editor.)
After publishing, preview and test your script to ensure that the code is working ok …
(Script added to content using a shortcode)
As well as editing your snippet codes, you can deactivate and delete your snippets …
(Delete, edit, and deactivate 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 is deactivated, the shortcode will show up in your content and will need to be manually removed.
(If you deactivate the HTML Snippets plugin itself, the shortcode text will display in the content)
For more details, go here}: Insert HTML Snippet Plugin For WordPress
(EmbedItPro – WordPress Plugin)
EmbedIt Pro is similar to the previously described plugin, with some additional features.
After installing and activating EmbedIt Pro, a new menu item called HTML Snippets will appear in the WordPress menu section …
(HTML Snippets [EmbedIt Pro] plugin menu)
To create a shortcode, click on HTML Snippets > Add New, paste your code, give your snippet a descriptive title and click the Publish button …
(Shortcode – EmbedIt Pro)
You will notice that two new buttons will be added to your Editor toolbar: Embed HTML Snippet and Embed From Custom Field…
(EmbedIt Pro adds new menu items to the WordPress visual editor toolbar)
You can use the HTML Snippet button to insert shortcodes into your posts. With the cursor location selected, click on the HTML Snippet button to select and insert the shortcode in the text …
(You can use the HTML Snippet button to place shortcodes into your posts.)
A 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 to embed into your page/post and click the ‘OK’ button to continue …
(Insert HTML Snippet)
Your shortcode will be added in the location of your cursor …
(Shortcode inserted into content)
Click Publish or Update to save …
(Update to save your settings)
View your post or page. The code should have been added to your content where you have specified …
(What your visitors will see)
While you are logged into your admin, you should see an ‘Edit Snippet’ button displayed near the area where your code snippet has been added. This lets you edit scripts “on the fly” (this is useful if you need to change form parameters, resize graphics, etc.)
To update your code, click the Edit Snippet button …
(Modify scripts “on the fly”!)
The Edit HTML Snippet screen will open in your web browser. Make your changes and update. Everywhere your shortcut has been added to content will update automatically …
(Update and republish your code to make global changes)
For more details, go here}:
Tip #1: With EmbedIt Pro, you can export your HTML snippets (and import these into other WordPress sites) using the Tools > Export function …
(Export your Snippets to other WordPress sites)
Tip #2 (For Advanced Users): The EmbedIt Pro plugin also uses WordPress Custom Fields to insert code into your content.
If you know how custom fields work in WordPress, you can add your code to a custom field and use a shortcode in your content with the “Custom Field” button. This is useful if you want to insert 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 Code Insertion Page Builders
(Some themes are built 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 and scripts to content inside your pages and posts.
Some applications (e.g. analytics and ad conversion tracking tools), however, require that code be inserted into content but also to areas like page headers, footers, etc. (like product download pages, confirmation pages, and so.)
You can find a number of plugins that let you add code to headers and footers of your posts and pages. Many of these plugins, however, add code to all pages, not just the ones you want (check the plugin’s settings – some plugins will add the code to all pages and then let you turn the code on/off on individual pages or posts).
If you need to add code outside of content areas, then you will need to either customize your theme files or use a plugin like the one below.
The next section is for advanced users. If you need help adding or removing scripts from your site, please contact a professional WordPress web developer.
The way the plugin works is that it allows you to modify and extend your site’s functionality with custom code blocks that you can assign to individual posts, pages, 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 …
(First-time plugin use requires installing database tables)
Click on the New Code Block button to begin adding new code to your site …
(CJT – New Code Block)
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 to activate it yet), select a “Location Hook” (specify where to insert your code block. Options = Header / Footer.), and select the “Initial Block Position” (this lets you 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 area will appear. Paste your code or script into this area …
(CJT code area)
Next, select where you would like the code to be inserted (e.g. Pages, Categories, etc …)
(Select where to add your code block)
The main plugin screen also various icons you can click to access different features, links to help documentation, etc. (hover your mouse over the icons for descriptions) …
(Access more CJT features via the toolbar menu)
Click the ‘Save All Changes’ button to save your code settings …
(CJT – ‘Save All Changes’ button)
Tip: Verifying That Your Code Has Been Added Correctly
Some scripts will ask you to verify that you have added the code correctly and some will not.
If you have pasted code into areas of your site that are not meant to be visible (like the ”header” section) and you need to check if the code has been added correctly, then do this:
How To View Hidden Page Code In Firefox
First, open up your internet browser (we’ll use Firefox in this example) and go to the page containing your code.
From the browser menu, select Tools > Developer > Page Source …
(Viewing page code in Firefox)
A new browser opens with the source code displayed.
Scroll down the screen until you can find the code that you have added (code added to a page header is normally located between the <head> and </head> tags) …
(Verifying that code has been added correctly)
If you can see the code in page source view, then all that’s left is to test your script and make sure that everything is working correctly. If you experience any errors, repeat the process to make sure that your code has been embedded correctly, or get help from a professional. 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 insert scripts and snippets of code into your pages.
"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)