One of the most powerful aspects of using WordPress is that you don’t need to have technical skills like editing code to run a successful website.
You may come across certain situations, however, where you may decide to embed code into your content in order to add desired features or functionality to your site. Some common examples where inserting scripts into content may be used to extend the functionality of your site include:
- Showing the current date on a special offer page
- Adding a search box to your page, post, or sidebar
- A lead capture form
- Display relevant ads
- Analytics scripts (e.g. Facebook Ads)
(Adding scripts to content can give your site additional functionality)
Some script features can be added to WordPress using plugins that involve little to no handling of code. In this tutorial, you will learn how to embed scripts into your content. You will also learn different methods that can be used to add code and scripts to your content.
How To Add Simple Code Snippets To WordPress Posts - Manual Method
Note: Make sure to back up your site before adding any code or scripts to WordPress. If you don’t want to back up your data yourself, then get professional support, or use a WordPress backup plugin.
You can learn more about a great WordPress backup plugin that can automate your backup process here:
You cannot add code directly into the WordPress visual editor …
(Pasting code inside your visual editor does not work)
You can, however, add simple code to the WordPress text editor. To add code to a post or page, do the following:
First, source or create the HTML code you want to add to your content. You can use a free online HTML editor (e.g. search online for “Free HTML WYSIWYG Editor With Preview“) or consider using an HTML cheat sheet …
(You can use a web-based HTML editor or HTML templates to create your HTML code. Image source: HTML-Online.com)
Copy all of the code to your clipboard …
(Select and copy your code to the clipboard)
Next, open your post or page and in the Visual Editor, add placeholder characters where you would like your script to appear …
(Add a placeholder to mark the location where you would like your code to display)
Click on the Text tab to switch to the Text editor …
(Code must be pasted in your Text editor)
Find your placeholder text and highlight the line …
(Select and highlight the line containing your placeholder text)
Paste your HTML code into your text …
(Use the text editor to add simple HTML code to your content)
Save your post or page, then preview …
(Preview and test any code added to content)
If you need help using basic HTML, see this step-by-step tutorial:
While the above method can be used to add simple HTML to your content, we do not recommend pasting scripts containing complex code directly into your content (e.g. lead capture forms, etc.) …
The method we recommend is to use plugins that automatically process the code from ’shortcodes’ placed into your content.
What Is A Shortcode?
A ‘shortcode’ is a small piece of code that allows users to perform complex functions in WordPress without coding or programming skills or knowledge. Shortcodes are typically added to widgets, posts, and pages to trigger a complex script into action.
A shortcode looks like a descriptive string of text enclosed in square brackets, e.g. ‘[ezformshortcode]’ …
(What a WordPress shortcode looks like!)
Shortcodes enable WordPress developers to create complex scripts such as content generators, image galleries, forms, etc., which you then insert into your content using a simple text code.
How Shortcodes Work
(How a WordPress shortcode works)
The screenshot above explains how a shortcode works:
 First, install a plugin that allows you to paste code snippets into a special field (see the tutorial below for an example)
 After adding the script to the code area and saving, the plugin creates a unique piece of text that lets your website process the script.
 You then copy this shortcode and paste it into a new or existing page, post, or widget where you would like the function to display and publish.
 The plugin will now automatically process the code.
Shortcodes are great because you don’t have to mess around with the actual script to get the functionality you want … simply add the shortcode where you would like the code to appear and WordPress does the rest!
How To Add Scripts To Your Pages Using Plugins
In this section, we show you how to add code snippets into WordPress using free WordPress plugins.
(Insert Html Snippet Plugin)
As the name suggests, Insert HTML Snippet lets you easily insert code snippets into a page, post, or a sidebar widget.
Essentially, this plugin lets you create HTML snippets and add them to your posts and pages using shortcodes or custom fields.
HTML snippets can store codes and scripts for just about everything: audio and video players, custom tracking codes, etc.
The step-by-step tutorial below shows you how to use Insert Html Snippet.
How To Embed Code Into Your Pages And Posts – Step-By-Step Tutorial
Install the Insert HTML Snippet plugin inside your WP dashboard (search for keywords like “Insert HTML, Insert Code, etc.“) …
(Installing ’Insert Html Snippet’)
Activate the plugin …
(Activate the plugin)
Once the plugin has been installed and activated, a new menu item called XYZ Html will be added to your dashboard menu …
(XYZ Html menu)
Important: Make sure to have your script available (e.g. copied and saved into a plain text file) …
(Have your code ready to paste into the plugin)
To create a new shortcode, click on XYZ Html > HTML Snippets …
(XYZ Html > HTML Snippets)
The ‘HTML Snippets’ screen will load in your web browser. Click on Add New HTML Snippet …
(Click on the ‘Add New HTML Snippet’ button to create a new snippet)
In ‘The Add New HTML Snippet’ screen, enter a title in the Tracking Name field (this is for your reference), paste the code into the HTML code section and click on the Create button …
(Create a new Snippet)
Your HTML Snippet will be created, saved, and published as a shortcode …
(HTML Snippets shortcode!)
You can also create a shortcode without having the code. This is useful if, for example, you are awaiting approval of the code but need to go ahead and get pages created where your code will eventually appear.
In this case, go ahead and create your new code snippet with some placeholder content and insert the shortcode into your pages then publish. After your script has been approved, you can then edit the snippet and replace the content …
(You can also create a new HTML snippet without having a script.)
The plugin stores all snippets in a separate list in the plugin’s database. You can view all of your stored snippets by selecting XYZ Html > HTML Snippets from your main menu …
(Click on the XYZ Html > HTML Snippets plugin menu to view a list of all your snippets)
A table with all the snippets and shortcodes you create appear in the ‘HTML Snippets’ admin screen …
(Snippets and shortcodes list)
Because code snippets are stored in an independent location (i.e. the plugin’s database), you can add a single snippet to a number of posts or pages and control everything from one location. If you modify the code in your snippet, whatever is controlled by the snippet will automatically update throughout your content.
Shortcodes can be added to your content inside the WordPress visual editor.
To place the code into your content using a shortcode, simply go to your widget, page, or post and place your mouse cursor where you would like to embed your code …
( Paste shortcodes into your content directly inside the WordPress visual editor.)
After publishing, preview and test the script to ensure that your code is working ok …
(Script added to content using a shortcode)
You can delete, edit, or deactivate your snippets …
(Deactivate, delete, and edit your code snippets)
- If you deactivate or delete a snippet but leave the HTML Snippets plugin active, your shortcode will not display in your content.
- If the HTML Snippets plugin gets deactivated, the shortcode will display in your content.
(If you deactivate the HTML Snippets plugin, the shortcode text will display in the content)
For more details, go here}: Insert HTML Snippet Plugin For WordPress
EmbedIt Pro is similar to the HTML Snippets plugin, with some additional features.
After the plugin has been installed, a new menu item called HTML Snippets will appear in your dashboard menu …
(EmbedIt Pro plugin menu)
To create a new code snippet, click on HTML Snippets > Add New, add your script, give your snippet a title and click the Publish button …
(Shortcode – EmbedIt Pro)
Two new menu buttons will appear in your Editor toolbar: Embed HTML Snippet and Embed From Custom Field…
(The plugin adds new menu items to the WordPress visual editor toolbar)
You can use the HTML Snippet button to insert shortcodes into your pages. With the cursor location selected, click on the HTML Snippet button to select and place your snippet shortcode in your text …
(You can use the HTML Snippet button to insert shortcodes into your pages.)
A new window will appear on your screen allowing you to insert any of the HTML Snippets you have stored. Type in the name of the HTML Snippet you would like embedded into your page/post and click OK to continue …
(Insert your HTML Snippet)
Your shortcode will be added to the content …
(Shortcode added to content)
Click Publish or Update to save …
(Publish to save your settings)
View your updated post or page and test your script. The code should display in your content …
(Content with script added)
While you are logged into your site, you should see an ‘Edit Snippet’ button displayed below the area where your code has been inserted. This allows you to change your script “on the fly” (this is useful if you need to edit form elements, resize images, etc.)
To edit your code, click the Edit Snippet button …
(Update code “on the fly”!)
The Edit HTML Snippet screen will open in your browser. Make the changes to the code and update. All pages and posts will automatically update …
(Update and republish your code to make global changes)
For more details, go here}:
Tip #1: The plugin allows you to export 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 EmbedIt Pro plugin also uses WordPress Custom Fields to add code to your posts.
If you know how to use custom fields in WordPress, you can paste code into a custom field and place a shortcode into 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 content via custom fields)
Tip #3 – Use WordPress Themes With Drag And Drop Code Adding Page Builders
(Some themes offer built-in features)
Tip #4 – Adding code to the header section of WordPress
With a plugin like EmbedIt Pro, you easily insert scripts into content inside your posts and pages.
Some applications (e.g. analytics and conversion tracking tools), however, require that code be inserted into content but also to sections like page headers, footers, etc. (e.g. purchase pages, opt-in confirmation pages, and so.)
There are a number of WordPress plugins that allow you to add code to headers and footers of pages. Many of these plugins, however, will add code every page and post on your site, not just the ones you want (some plugins and themes will add code to every page and then let you turn the code on/off for selected pages).
If you want to add scripts 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 modify your site’s functionality with custom code blocks that you can assign to individual pages, posts, custom posts, categories, expressions, URLs, and more!
For comprehensive documentation, go here:
Note: Before using the plugin, you will be asked to install the plugin’s database tables and activate the plugin’s functionality. To do this, just click the ‘Install’ button …
(First-time plugin use requires database installation)
Click on the New Code Block button to begin adding new code to your site …
In the ‘Create New Code Block’ window, name 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” (specify where to insert your code block. Options = Header / Footer.), and specify the “Initial Block Position” (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 area will appear. Paste your code or script into this section …
(CJT code area)
Next, select where you would like the code to be inserted (e.g. in specific Pages, Categories, etc …)
(Specify where to add your code block)
The plugin screen also has a number of icons you can click to access different features, help, etc. (hover your mouse over the icons for feature descriptions) …
(Access CJT functionality via toolbar icons)
Click the ‘Save All Changes’ button to save your settings …
(Click ‘Save All Changes’ to save your settings)
For help and support with this plugin, visit the developer’s site here:
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 that is not meant to be visible (like the ”header” section) and you would like to check if the code has been added correctly, then follow the steps below:
Viewing Hidden Page Code In Firefox
First, open up your internet browser (e.g. Firefox) and visit the page where you have added your code.
Select Tools > Developer > Page Source from the browser menu …
(Viewing page code in Firefox)
A new browser window will open up and displays the source code for your page.
Scroll down the screen until you find the code that you have added (if adding code to the header section, it will typically be located between the <head> and </head> tags) …
If you can see the code in your page, then all that’s left is to test your script and make sure that everything is working as it should. If you experience any problems, repeat the above process and make sure that you have pasted in the code correctly, or get help from a professional. As stated earlier in this tutorial, always back up your files and database before adding, changing or deleting code.
Congratulations, now you know how to easily scripts to WordPress pages.
"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now