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 ContentOne of the advantages of using WordPress is that you don’t need to have technical skills like editing code to manage a website successfully.

There may be occasions, however, where you may choose to add code to your content in order to extend the functionality of your site. Typical examples where inserting code snippets into content may extend the functionality of your site include:

  • Special offer automatic expiry time
  • Adding a search box
  • Newsletter subscription forms
  • Display contextual advertising banners
  • Analytics code (e.g. Facebook Ads)
  • etc.

Adding scripts to your content can give your site additional functionality

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

Important Info

In this tutorial, we are going to show you how to easily add code snippets and scripts to your WordPress posts and pages. We will also show you different methods you can use to add code to your content.

How To Add Simple Code To Your WordPress Posts And Pages Manually

Important Info

Note: Before adding any code snippets to WordPress make sure to back up your files and database first. If you don’t want to back up your site yourself, then hire a professional, or use a WordPress backup plugin.

Learn about a WordPress backup plugin that can fully automate your backup process here:

Important Info

Code cannot be inserted directly into content using the WordPress visual editor …

Do not insert code into the WordPress visual editor

(Pasting scripts into the visual editor does not work)

You can, however, place simple HTML code into the text editor. To add HTML code to a page or post, do the following:

First, source or create the code you want to add to your content. You can use an online HTML editor (e.g. search online for “HTML Code WYSIWYG Editor“) or use HTML cheat sheets

Use a simple HTML editor or HTML templates to create your code

(Use a web-based HTML editor or HTML templates to create your code. Source: HTML-Online.com)

Copy your code to the clipboard …

Highlight and copy your code to the clipboard

(Copy the code to your clipboard)

Next, open your page or post and in the Visual Editor, add placeholder symbols to mark the location where you want your code to display in your content …

Add placeholder symbols to mark the spot where you would like your code to appear

(Add placeholder symbols to mark the spot where you would like your script to appear in your content)

Next, switch to the Text editor …

Code must be pasted in the Text editor

(Switch to the Text editor to paste code)

Find your placeholder and highlight the line …

Select and highlight your placeholder

(Select and highlight the line containing your placeholder)

Paste the code over the highlighted placeholder …

Simple HTML code pasted into text

(Use the text editor to add simple HTML to your content)

Remember to publish your post or page and preview the results …

Preview and test any code inserted into posts

(Preview and test any code you add to posts)

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

Important

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

Avoid using the text editor to add Javascript code ... use the methods described below instead!

(Avoid using the text editor to add Javascript code … use the other methods described below instead!)

Pasting complex directly into the WordPress text editor can cause errors.

We recommend using a plugin that processes the code snippet from ’shortcodes’ placed into your content.

What’s A Shortcode?

A ‘shortcode’ is a code shortcut. It allows you to trigger complex files with no coding skills. Shortcodes can typically be used in widgets, posts, and pages to trigger a complex script into action.

A shortcode normally looks like a string of text enclosed by square brackets, e.g. ‘[ezformshortcode]’ …

WP shortcode structure

(WP shortcode)

Shortcodes enable plugin developers to create complex scripts such as content generators, image tools, user forms, etc., which you then insert into your content using a short text string.

How To Use Shortcodes

How a WordPress shortcode works

(How WordPress shortcodes work)

The above explains how to use a WordPress shortcode:

[1] You install a plugin that allows you to paste a script into a special field (we’ll show you an example of this in the tutorial below)

[2] After adding the script to the code area and saving, the plugin creates a unique shortcode that lets your website call up the script.

[3] You then copy this shortcode to your clipboard and paste it into any widgets, pages, or posts where you would like the function to display and publish.

[4] The plugin will now process the function.

The great thing about using shortcodes is that you don’t have to mess around with scripts to get the functionality you want … simply add the shortcode where you would like the functionality to appear and WordPress does the rest!

Adding Code Snippets To Your Pages Using A Plugin

There are several plugins available that let you embed code snippets into WordPress.

Insert Html Snippet

Insert Html Snippet

(Insert Html Snippet – WordPress Plugin)

As the name suggests, Insert Html Snippet lets you easily embed snippets of HTML code into a page, post, or a sidebar widget.

This plugin lets you create and store 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, tracking codes, etc.

The tutorial below shows you how to insert code into your pages and posts using the Insert HTML Snippet plugin.

How To Add Snippets Of Code To 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 Code, etc.“) …

Find and install the 'Insert Html Snippet' plugin

(Install ’Insert Html Snippet’)

Next, activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate ’Insert Html Snippet’)

Once the plugin has been installed and activated, a new item called XYZ Html will be added to the WordPress menu …

XYZ Html plugin menu

(XYZ HTML menu)

Info

Important: Make sure to have your script available (e.g. pasted into a plain text file) …

Highlight and copy your code to the clipboard

(Copy your code to the clipboard)

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

XYZ Html > HTML Snippets

(XYZ Html > HTML Snippets)

Click on the Add New HTML Snippet button …

Click on the 'Add New HTML Snippet' button to create a new shortcode

(Click on ‘Add New HTML Snippet’ to create a new shortcode)

In ‘The Add New HTML Snippet’ screen, give your code snippet a descriptive name (for your reference only), paste the code snippet into the HTML code section and click on the Create button …

Adding a new Snippet

(Create a new Snippet)

Your new HTML snippet will be created and published as a shortcode

HTML Snippets shortcode!

(Paste this shortcode into content!)

You can also create a new shortcode without having code. This is useful if, for example, you are waiting for approval of the code but need to publish the content where your code will eventually show up.

In this case, go ahead and create your code snippet with some placeholder content and insert the shortcode into your pages then publish. After receiving your live code, you can then edit the snippet, replace the content, and republish …

You can create a snippet without having your code snippet yet.

(You can create a snippet without having your code snippet yet.)

After creating new snippets the plugin stores it in a separate list within the plugin’s database. You can view your HTML Snippets by selecting XYZ Html > HTML Snippets from your admin menu …

Click on XYZ Html > HTML Snippets to view all of your snippets

(Click on the XYZ Html > HTML Snippets menu to view a list of all your snippets and shortcodes)

A table with all the HTML snippets and shortcodes you have created appear in the ‘HTML Snippets’ admin screen …

Snippets table

(Snippets table)

Because the plugin stores all code snippets in a separate database, you can use the same snippet in various pages and posts and control everything from one location. If you update your code snippet, the script will automatically be updated throughout your content.

You can add shortcodes to your content in the WordPress visual editor.

To place the code into your content using a shortcode, simply open your widget, page, or post and select where you would like the code added …

 Add shortcodes to your content in the WordPress visual editor.

(You can add shortcodes to content directly in the WordPress visual editor.)

After publishing, preview and test the script to ensure that your code is working ok …

Script added to content via a shortcode

(Script added using a shortcode)

Important

You can edit, delete, or deactivate snippets …

Delete, deactivate, and edit your snippets

(Delete, deactivate, or edit your code snippets)

Notes:

  • If you delete or deactivate a snippet but the plugin is left active, your shortcode will not display in your content.
  • If the HTML Snippets plugin itself gets deactivated, your shortcode will display as a line of text in your content (you will need to manually removed all instances of the shortcode).

If you deactivate the HTML Snippets plugin itself, your shortcode will appear as a line of text in your content

(If you deactivate the plugin itself, your shortcode will appear in your content as a line of text)

For more details, go here}: Insert HTML Snippet Plugin

EmbedIt Pro

EmbedIt Pro WP Plugin

(EmbedItPro WP Plugin)

EmbedIt Pro gives you similar functionality to the previously described plugin, with some added features.

Once the plugin has been installed and activated, a new menu item called HTML Snippets will appear in your navigation menu …

HTML Snippets [EmbedIt Pro] menu

(EmbedIt Pro menu)

To create a new snippet, click on HTML Snippets > Add New, paste your code, give your snippet a name and click the Publish button …

EmbedIt Pro Shortcode

(Shortcode – EmbedIt Pro)

A couple of new items will display on your Editor menu toolbar: Embed HTML Snippet and Embed From Custom Field

EmbedIt Pro adds new menu buttons to the visual editor toolbar

(The plugin adds new menu items to the visual editor toolbar)

You can use the HTML Snippet button to add a shortcode to your pages. With the cursor location selected, click on the HTML Snippet button to select and insert your code snippet into the text …

You can use the menu buttons to add a shortcode to your posts.

(You can use the HTML Snippet button to add a shortcode to your pages.)

A small window will display on your screen allowing you to insert any HTML Snippets you have created. Type in the name of the HTML Snippet you would like to add into your page/post and click OK to proceed …

Insert name of the HTML Snippet

(Insert HTML Snippet)

The shortcode will be inserted where your cursor is located …

Shortcode added to content

(Shortcode inserted into content)

Click Publish/Update to save …

Update to save your settings

(Update to save your settings)

View your updated post or page and test your script. The code should display in your content where you have specified …

Content with script added

(What your visitors will see)

While you are logged into your site, you should see an ‘Edit Snippet’ button displayed next to where your code snippet has been inserted. This lets you make changes to your code “on the fly” (this is useful if you need to edit code parameters, resize images, etc.)

To edit your code, click on the Edit Snippet button …

Make updates to code on the fly!

(Change scripts “on the fly”!)

The Edit HTML Snippet screen will open in your browser. Make your necessary changes to the script and resave. Everywhere the shortcut has been added will be automatically updated …

Edit, update, and 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: The plugin allows you to export your snippets (and import these into other WordPress sites) using the Tools > Export function …

Export your Snippets to other sites

(Export your Snippets to other sites)

Tip #2 (For Advanced Users): The plugin also uses WordPress Custom Fields to add code to your posts.

If you know how to use custom fields, you can add your code to a custom field and use a shortcode in your content with the “Custom Field” menu button. This is useful if you want to insert code into a single post without leaving the post editing window.

Add shortcodes to your content using custom fields

(Add shortcodes to your posts via custom fields)

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

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

(Some WordPress themes provide built-in code insertion functionality)

(Some WordPress themes offer 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 posts and pages.

Some applications, however, require code to be inserted into content but also to areas like page headers, footers, etc.

You can find a number of plugins that let you add code to headers and footers of pages. Many of these plugins, however, add code every post and page on your site, not just the ones you want (some plugins and themes will add the code to all pages and then let you turn the code on/off for selected pages or posts).

If you want to add code or scripts outside of content areas, then you will need to either customize your site or use a plugin like the one described below.

Important Info

The next section is for advanced WordPress users. If you need any help adding scripts to your site, please contact a professional WordPress web developer.

CSS & JavaScript Toolbox

CSS & Javascript Toolbox WordPress Plugin

(CJT Plugin)

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

The way this plugin works is that it lets you extend your site’s functionality with custom code blocks that can be assigned to individual pages, posts, categories, custom posts, URLs, expressions, and much more!

Tip

For comprehensive documentation, go here:

Note: When you first try using the plugin, you will be asked to install the plugin’s database tables and activate the plugin’s functionality. It’s really simple, 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 installing database tables)

After installation, a new item called CSS & JavaScript Toolbox will appear in the main navigation menu as well as a dashboard panel with news and plugin usage information …

CSS & Javascript Toolbox plugin menu

(CJT plugin menu)

Click on CSS & Javascript Toolbox on the menu …

CSS & Javascript Toolbox menu

(CSS & Javascript Toolbox menu)

The CSS & JavaScript Toolbox screen will display …

CSS & Javascript Toolbox screen

(CSS & Javascript Toolbox screen)

Click on New Code Block to add new code …

CSS & Javascript Toolbox - Add New Code Block Button

(CJT – New Code Block)

In the ‘Create New Code Block’ window, type a name, 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 choose the “Initial Block Position” (this lets you specify if the script should be added before or after all other code inside the header or footer. Options = First Block / Last Block.). After selecting your options, click Create

'Create New Code Block' options

(‘Create New Code Block’ options)

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

CJT code field

(CJT content area)

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

Select where to insert your block of code

(Select where to insert your code block)

The main plugin dashboard also various icons you can click to access different features, help, etc. (hover your mouse over the icons for tooltip descriptions) …

Access plugin features via the toolbar

(Access more plugin features via the toolbar menu)

Click Save All Changes when finished to save your code 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:

Idea

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 like the “header” that is not meant to be visible and you want to check if the code has been added correctly, then do the following:

How To View Page Code In Firefox

First, open up your internet browser (we’ll use Firefox in this example) and visit the page that contains the code.

From the browser menu, select Tools > Developer Tools > Page Source

Viewing hidden code in Firefox

(Tools > Web Developer > Page Source)

A new window opens up and displays the source code for your page.

Scroll down until you find the code that you have added (if adding code to the header section, it will normally be located  between the <head> and </head> tags) …

Verify if code has been added correctly

(How to verify if you have added code correctly)

If you can see the code in your page, 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 entered correctly, or get a professional to help you. As stated at the beginning of this tutorial, always back up your site before doing anything that involves changing code.

Adding Snippets Of Code And Scripts To Your WordPress Pages And Posts

Congratulations, now you know how to insert code snippets and scripts into WordPress posts and 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

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