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.

Inserting Code Snippets Into WordPress Posts And PagesOne 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)
  • etc.

Adding scripts to your content can give you additional functionality

(Adding scripts to pages can give your site additional functionality)

Useful Info

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

Useful Info

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:

Important

WordPress does not allow you to add code (e.g. HTML, Javascript) directly into the visual editor …

Do not paste scripts inside the WordPress visual editor

(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

You can use a simple HTML editor or HTML templates to create your code

(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 all of the code 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 text to mark the spot where you want your code to display 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 …

Switch to the Text editor to paste in your code

(Code must be pasted in your Text editor)

Find and highlight your placeholder …

Select and highlight the line containing the placeholder characters

(Select and highlight your placeholder)

Paste your HTML code over your selected placeholder …

Simple HTML code pasted into text

(Paste your HTML code into your text)

Republish your post or page, then preview …

Preview and test any code inserted into pages

(Preview and test any code added to your posts)

We have written a detailed tutorial about using basic HTML in WordPress here:

Important

While the above method is fine for adding simple HTML code to your content, this is not recommended for pasting scripts containing JavaScript code directly into your content (e.g. lead capture forms, etc.) …

Don't use the text editor to add Javascript code

(Avoid using the WordPress text editor to add JavaScript code … use other methods instead!)

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.

Shortcodes

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 WordPress shortcode looks like

(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

(How a shortcode works)

The above explains how to use a WordPress shortcode:

[1] 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)

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

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

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

Insert Html Snippet Plugin

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

HTML snippets are objects that can store codes and scripts for just about anything: audio player code, javascript codes, etc.

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

Locate and install the 'Insert Html Snippet' plugin

(Installing ’Insert Html Snippet’)

Activate the plugin …

Activate 'Insert Html Snippet'

(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

(XYZ Html plugin menu)

Important Info

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

Highlight and copy your code to the clipboard

(Have your code ready to use)

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

XYZ Html > HTML Snippets plugin menu

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

Creating a new Snippet

(Create a new HTML Snippet)

This saves and publishes your new HTML Snippet as a shortcode

Use this shortcode to add your script to your pages and posts!

(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 also create a new shortcode without having the script code.

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

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

List of snippets and shortcodes

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

(Shortcodes can be pasted in the WordPress visual editor.)

After publishing, preview and test the script …

Script added to content via a shortcode

(Script added using a shortcode)

Important

You can edit, delete, and deactivate code snippets …

Deactivate, edit, and delete code snippets

(Edit, delete, or deactivate your code snippets)

Notes:

  • 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 you deactivate the HTML Snippets plugin, the shortcode will display in your content

(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

EmbedIt Pro Plugin

(EmbedItPro)

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

Shortcode - EmbedIt Pro

(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 items to the visual editor toolbar

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

Use the menu buttons to add shortcodes to your pages.

(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 HTML Snippet

(Insert name of the HTML Snippet)

The shortcode will be inserted where the cursor is located …

Shortcode inserted into content

(Shortcode added to content)

Click the ‘Publish’ or ‘Update’ button to save …

Publish to save your settings

(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

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

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

Edit republish your code to make global changes

(Update and republish your code to make sitewide changes)

For more details, go here}:

Useful WordPress Tip

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 Snippets

(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 posts with custom fields

(Embed shortcodes into your content using custom fields)

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

Most WP themes can be used with drag and drop page-building plugins like Visual Composer or Thrive Content Builder that provide built-in script processing features …

(Some themes come with built-in functionality)

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

Info

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.

CSS & JavaScript Toolbox

CJT WP Plugin

(CJT)

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

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!

Important

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 …

Database tables will need to be installed the first time you use CJT

(First-time plugin use requires database tables installation)

After installation, a new item called CSS & Javascript Toolbox will display in the dashboard menu as well as a dashboard panel with latest news and information about how the plugin is being used on your site …

CSS & JavaScript Toolbox plugin menu

(CSS & JavaScript Toolbox plugin menu)

Click on CSS & Javascript Toolbox

CJT menu

(CJT menu)

This loads the CSS & Javascript Toolbox screen …

CSS & Javascript Toolbox screen

(CSS & JavaScript Toolbox screen)

Click on New Code Block to begin adding custom code …

CJT - Add New Code Block

(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

(‘Create New Code Block’ window)

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

CJT code field

(CJT content field)

Next, select where you would like the block to be inserted (e.g. Pages, Custom Posts, etc …)

Specify where to insert your code block

(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 functionality via toolbar icons

(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

(CJT – ‘Save All Changes’ button)

For help and support with this plugin, visit the plugin developer’s site here:

Important Info

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 hidden page code in Firefox

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

Verify that your scripts have been added correctly

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

How To Insert Scripts And Snippets Of Code Into WordPress Content

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.

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and the author of The Small Business Digital Manager. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as How To Insert Code And Scripts Into WordPress Posts And Pages.