One of the most powerful aspects of using WordPress is that you don’t need to mess with code to run a website or blog.
You may come across times, however, where you may choose to paste a script or code snippet into your content in order to add new features or functionality. Typical examples where inserting scripts into posts or pages would extend the functionality of your site include:
- Current date and time
- Adding a Google search box to your page, post, or sidebar
- Adding a subscription form
- Display relevant ads
- Conversion tracking code (e.g. Facebook Ads)
(Adding scripts to your content can help expand your site’s functionality)
Some script functions can be added with plugins that require little to no messing with code. In this tutorial, we are going to show you how to easily add code snippets to your pages. You will also learn different methods you can use to add scripts and codes to your content.
How To Add Code To Your WordPress Posts Manually
Note: Before adding any code or scripts to WordPress we recommend backing up your files and database first. If you don’t want to back up your files yourself, then get assistance from a WordPress professional, or use a WordPress backup plugin.
Learn about a great WordPress backup plugin that we recommend using to perform automated WordPress file and database backups here:
WordPress doesn’t allow you to add code directly into the visual editor …
(Pasting code inside the WordPress visual editor does not work)
You can, however, place simple HTML code into the text editor. To add HTML code to a post or page, do the following:
First, find or create your HTML code. You can use a free web-based HTML editor (e.g. search online for “Online HTML Editor Free“) or consider using HTML code templates …
(You can use a free web-based HTML editor or HTML templates to create your HTML code. Image source: HTML-Online.com)
Highlight and copy the code to your clipboard …
(Select and copy the code to your clipboard)
Next, open your page or post and add placeholder symbols to mark the spot where you want your script to display in your content …
(Add placeholder symbols where you would like your script to display)
Next, switch to the Text editor to paste in the code …
(Code must be pasted in the Text editor)
Find the placeholder text and select the line …
(Select and highlight the line containing your placeholder text)
Paste your HTML code over the selected placeholder …
(Paste your HTML code over the highlighted text)
Save your page or post and preview (and test) the results …
(Preview and test any code you add to pages)
To learn more about using basic HTML, refer to this tutorial:
While the above method can be used to add simple HTML to content, this is not recommended for pasting scripts containing complex code directly into your content (e.g. newsletter forms, etc.) …
A smarter way to embed code into WordPress content is to use a plugin that will “call” the script from ’shortcodes’ added to your content.
What Is A Shortcode?
’Shortcodes’ are short bits of code that allow users to perform complex functions with no coding or programming skills or knowledge. Shortcodes can typically be added to widgets, posts, and pages to trigger complex scripts into action.
A shortcode normally looks like a descriptive string of text wrapped in square brackets, e.g. ‘[ezformshortcode]’ …
(What a shortcode looks like)
Shortcodes allow WordPress developers to create complex scripts such as user forms, image tools, content formatting tools, etc., which you then insert into your content using a simple text code.
How WordPress Shortcodes Work
(How WordPress shortcodes work)
The above explains how to use a WordPress shortcode:
 First, install a plugin that lets you 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 field and saving, the plugin generates a unique shortcode for processing the script.
 After embedding the shortcode into your content, publish or update your page or post.
 The plugin will now process your code.
Shortcodes are great because you don’t have to mess around with scripts to get the functionality you want … simply add the shortcode to your content and WordPress does the rest!
How To Add Code Snippets To Your Pages And Posts Using A Plugin
Let’s now show you how to add snippets of code into your WordPress content using various free WordPress plugins.
(Insert HTML Snippet – WordPress Plugin)
As the name suggests, Insert HTML Snippet allows you to embed HTML snippets into posts, pages or sidebar widgets.
How this plugin works is that it lets you create unlimited HTML snippets and add them to your posts and pages using shortcodes or custom fields.
The tutorial below shows you how to paste code into your pages and posts using Insert Html Snippet.
How To Add Snippets Of Code And Scripts To Your Posts – Tutorial
Find and install the Insert HTML Snippet plugin inside your WordPress dashboard (search for keywords like “Insert HTML, Insert HTML Code, etc.“) …
(Installing the ‘Insert Html Snippet’ plugin)
Next, activate the plugin …
(Activate the plugin)
After the plugin has been installed, a new menu item called XYZ Html will appear in the WP menu …
(XYZ HTML menu)
Important: Make sure you have your code available (e.g. saved in a plain text file) …
(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 …
(’Add New HTML Snippet’)
In ‘The Add New HTML Snippet’ screen, enter a name in the Tracking Name field (for your reference only), paste the code into the HTML code section and click the Create button …
(Insert HTML Snippet – Creating a new Snippet)
Your 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 useful if, for example, you are awaiting approval of the code but want to publish the content where your script will eventually show up.
In this case, go ahead and create a snippet with placeholder content and insert the shortcode into your pages then publish. Once your code has been approved, you can then edit the snippet, replace the content, and republish …
(You can also create a shortcode without having your code yet.)
After creating snippets the plugin stores it 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 main menu …
(Click on XYZ Html > HTML Snippets to view a list of all your snippets and shortcodes)
A list of all your code snippets and shortcodes will appear in the ‘HTML Snippets’ admin screen …
Because code snippets are stored in an independent location (i.e. a separate database), you can use one shortcode in various posts and pages and control everything from one location. If you edit the code snippet, your code will automatically update throughout your content.
You can add shortcodes to content directly in the WordPress visual editor.
To place the code into your content using a shortcode, simply go to your page, widget, or post and click where you would like to embed the code …
(You can insert shortcodes into your content directly inside the WordPress visual editor.)
After publishing, preview your content and test the script …
(Script added to content via a shortcode)
As well as modifying the code in your snippet, you can deactivate or delete the snippets …
(Delete, deactivate, and edit code snippets)
- If you delete or deactivate a snippet but the plugin is left active, your shortcode will not display in your content. The plugin will remove any sections containing the shortcode from your content so that no gaps will be detected by visitors.
- If the plugin itself is deactivated, the shortcode will show up as a line of text in your content.
(If the HTML Snippets plugin is deactivated, the shortcode itself will show up in the content)
For more details, go here}: Insert HTML Snippet Plugin For WordPress
(EmbedItPro WordPress Plugin)
EmbedIt Pro gives you similar functionality to the HTML Snippets plugin, with some added features.
Once the plugin has been installed and activated, a new menu item called HTML Snippets will display in the WP menu section …
(HTML Snippets [EmbedIt Pro] menu)
To create a new shortcode, click on HTML Snippets > Add New, add your code, give your snippet a name and click the Publish button …
(Shortcode – EmbedIt Pro)
Two new items will display on your Editor menu toolbar: HTML Snippet and Custom Field…
(The plugin adds new menu buttons to the visual editor)
You can use the HTML Snippet button to add shortcodes to your pages. With the cursor location selected, click on the HTML Snippet button to select and insert your snippet shortcode in your text …
(Use the HTML Snippet button to add shortcodes to your posts.)
A popup window will display on your screen allowing you to insert any of the HTML Snippets you have created. Select the HTML Snippet you want to embed into your content and click the ‘OK’ button to proceed …
(Insert your HTML Snippet)
The shortcode will be added in the location you have specified …
(Shortcode inserted into content)
Click the ‘Publish’ or ‘Update’ button to save …
(Publish to save your settings)
View your updated post or page and test your script. The script should display in your content in the specified location …
(What your visitors will see)
While you are logged into your site, an ‘Edit Snippet’ button should display next to where your script has been added. This allows you to make changes to scripts “on the fly” (this is useful if you need to change form parameters, resize videos, etc.)
To update your code, click on the Edit Snippet button …
(Adjust scripts “on the fly”!)
The Edit HTML Snippet screen will open in your web browser. Make your changes and update. All content will update throughout your site with your new changes …
(Edit, update, and republish your code to make global changes)
For more details, go here}:
Tip #1: The plugin allows you to export your snippets (and import these into other sites) using the Tools > Export function …
(Export your HTML Snippets)
Tip #2 (For Advanced Users): The EmbedIt Pro plugin also uses WordPress Custom Fields to insert code into your posts.
If you know how custom fields work 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 when you want to insert HTML into a single post without leaving the post editing window.
(Embed shortcodes into your posts via custom fields)
Tip #3 – Use Themes With Drag And Drop Code Insertion Page Building Plugins
(Some WordPress themes are built with built-in code adding functionality)
Tip #4 – Adding code to the header section of WordPress
A plugin like EmbedIt Pro lets you easily insert snippets of code into content inside your posts and pages.
Some applications, however, require code to be added not only to content but also to areas such as headers, footers, etc.
There are a number of WordPress plugins that let you add code to the header or footer section of your 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 code to all pages and then let you turn the code off for individual pages).
If you want 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 adding code to your site, please contact a professional WordPress web developer.
The way this plugin works is that it lets you extend your site’s functionality by adding custom code using code blocks that can be assigned to individual posts, pages, categories, custom posts, expressions, URLs, and much more!
For comprehensive documentation, go here:
Note: The first time you try to use CJT, 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 …
(Database tables will need to be installed the first time CJT is used)
(CJT plugin menu)
Click on the New Code Block button to add custom code …
(CJT – Add New Code Block)
In the ‘Create New Code Block’ window, add a name to 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” (specify 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 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 section …
(CJT code field)
Next, select where you want your code to be inserted (e.g. in specific Pages, Categories, etc …)
(Select where to insert your block of code)
The plugin screen also has a number of icons you can click to access different features, links to help documentation, etc. (hover your mouse over the icons for tooltip descriptions) …
(Access CJT functionality via toolbar icons)
Click the ‘Save All Changes’ button when done to save your settings …
(Click ‘Save All Changes’ to save your code settings)
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 your code has been added correctly and some will not.
If you have added code to an area that is not meant to be visible (like the “header”) and you want to check if the code has been added correctly, then follow the steps below:
How To View Hidden Code In Firefox
First, open up your internet browser (e.g. Firefox) and go to the page that contains the code.
Select Tools > Developer > Page Source from your browser menu …
(Viewing page code in Firefox)
A new browser opens and displays the source code for the page.
Use the search function (Ctrl+F) or scroll down the screen until you spot the code that you have added (code added to the header section is normally placed between the <head> and </head> tags) …
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 problems, repeat the process to make sure that your code has been embedded correctly, or get a professional to help you. As stated at the beginning of this tutorial, always back up your files and database before doing anything that involves changing code.
Congratulations, now you know how to add snippets of code to WordPress pages and posts.
"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)