How To Insert Code And Scripts Into WordPress Posts And Pages

Learn how to add code and scripts to content in your WordPress posts and pages …

How To Embed Snippets Of Code Into Your WordPress Posts And PagesOne 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)
  • etc.

Adding code to your content can give your site additional functionality

(Adding scripts to pages can help expand your site’s functionality)

Important

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

Warning

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:

Important Info

Code cannot be embedded directly into the WordPress visual editor …

Do not insert scripts inside the 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 an online HTML editor or HTML templates to create your HTML code

(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 all of the code to your 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 a placeholder to mark the location where you would like your code to display in your content

(Add placeholder characters where you want your script to display in your content)

Next, switch to the Text editor …

Code must be pasted in your Text editor

(Code must be pasted in the Text editor)

Locate and highlight your placeholder …

Select and highlight your placeholder characters

(Select and highlight your placeholder)

Paste your HTML code over the highlighted placeholder …

HTML code pasted into text

(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 inserted into your content

(Preview and test any code added to your posts)

We have created a detailed tutorial about using basic HTML here:

Important

While the above can be used to add simple HTML to your content, this is not recommended for pasting scripts containing Javascript code directly into your content (e.g. opt-in forms, etc.) …

Don't use the text editor to add Javascript code ... use the methods described below instead!

(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.

Shortcodes

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]’ …

What a WP shortcode looks like

(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

(How to use shortcodes)

The above explains how to use shortcodes:

[1] You install a plugin that lets you paste code snippets into a special field (see the tutorial below for an example)

[2] 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.

[3] Once you have embedded the shortcode into your content, publish or update your post or page.

[4] 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

Insert Html Snippet - WordPress Plugin

(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.“) …

Find and install the 'Insert Html Snippet' plugin

(Installing the ‘Insert Html Snippet’ plugin)

Next, activate the plugin …

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 plugin menu

(XYZ Html menu)

Idea

Important: Make sure to have your code snippet handy (e.g. copied and saved into a plain text file) …

Highlight and copy all of the code to your clipboard

(Highlight and copy your code to the clipboard)

To create a new code snippet, click on XYZ Html > HTML Snippets …

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

(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 …

Adding a new Snippet

(Insert HTML Snippet – Add a new Snippet)

Your new HTML Snippet will be saved and published as a shortcode

HTML Snippets 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 code.

(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 the XYZ Html > HTML Snippets plugin menu to view a list of all your shortcodes

(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 …

Table of snippets

(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 inside the WordPress visual editor.

(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 using a shortcode

(Script added to content using a shortcode)

Useful Information

As well as editing your snippet codes, you can deactivate and delete your snippets …

Delete, edit, and deactivate your code snippets

(Delete, edit, and deactivate snippets)

Notes:

  • 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 the plugin itself is deactivated, the shortcode will appear in your content

(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

EmbedIt Pro

EmbedIt Pro WordPress Plugin

(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

(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 …

EmbedIt Pro Shortcode

(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

The plugin adds new menu items to the visual editor

(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 …

Use the menu buttons to add a shortcode to your content.

(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

(Insert HTML Snippet)

Your shortcode will be added in the location of your cursor …

Shortcode added to content

(Shortcode inserted into content)

Click Publish or Update to save …

Update to save your settings

(Update to save your settings)

View your post or page. The code should have been added to your content where you have specified …

Content with script added

(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 code on the fly!

(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 …

Edit, update, and republish your code to make sitewide changes

(Update and republish your code to make global changes)

For more details, go here}:

Useful WordPress Tip

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 HTML Snippets

(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.

Add shortcodes to your posts with custom fields

(Embed shortcodes into your content using custom fields)

Tip #3 – Use Themes With Drag And Drop Code Insertion Page Builders

Most WP themes can be used with drag and drop page-building plugins like Visual Composer or Thrive Content Builder that allow you to add raw HTML and JavaScript code to your content …

(Some WordPress themes offer built-in code adding functionality)

(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.

Important

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.

CSS & Javascript Toolbox

CSS & JavaScript Toolbox Plugin

(CSS & Javascript Toolbox Plugin For WordPress)

CSS & JavaScript Toolbox (or CJT) lets you add code to your site’s own code using an easy-to-use web interface.

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!

Useful Info

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

(First-time plugin use requires installing database tables)

After installing and activating the plugin, you will see a new item on your main menu called CSS & JavaScript Toolbox as well as a dashboard panel with latest news and plugin usage information …

CSS & Javascript Toolbox plugin menu

(CSS & JavaScript Toolbox menu)

Click on CSS & JavaScript Toolbox

CSS & JavaScript Toolbox menu

(CSS & Javascript Toolbox plugin menu)

This brings up the CSS & Javascript Toolbox screen …

CSS & JavaScript Toolbox dashboard

(CSS & Javascript Toolbox screen)

Click on the New Code Block button to begin adding new code to your site …

CSS & Javascript Toolbox - New Code Block

(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

(‘Create New Code Block’ window)

A blank text area will appear. Paste your code or script into this area …

CJT code area

(CJT code area)

Next, select where you would like the code to be inserted (e.g. Pages, Categories, etc …)

Select where to insert your code

(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

(Access more CJT features via the toolbar menu)

Click the ‘Save All Changes’ button to save your code settings …

CJT - 'Save All Changes' button

(CJT – ‘Save All Changes’ button)

More info:

Idea

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

How to view page code in Firefox

(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) …

Page code

(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.

How To Add Snippets Of Code In WordPress Content

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)