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 Insert Scripts And Code Into WordPress PagesOne of the main advantages of using WordPress is that you don’t need to know how to write code to manage your website.

There could be occasions, however, where you may choose to add a script or code snippet to content inside your posts or pages in order to add specific features to your site. Useful examples of code snippets you may want to insert into your content include:

  • Current date and time
  • Adding a Google search box
  • Lead capture forms
  • Display contextual banner ads
  • Conversion tracking scripts (e.g. Google Adwords)
  • etc.

Adding scripts to pages can expand your site's functionality

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

Useful Information

Some script functions can be added using plugins that involve little to no handling of code. In this step-by-step tutorial, you will learn how to add code snippets to your WordPress content. We’ll also show you different plugins that can be used to insert code into your content.

Adding Code To Your Content Using The Text Editor

Warning

Note: Remember to back up your files and database before adding any scripts to WordPress. If you don’t want to back up your data manually, then use a professional, or use a WordPress backup plugin.

Learn about a WordPress backup plugin that we recommend using to automate WordPress file and database backups here: Back Up, Duplicate And Protect Your WP Websites And Blogs With Backup Creator Plugin For WordPress

Useful Info

You cannot insert code directly into your content via the WordPress visual editor …

Pasting scripts inside your visual editor will not work

(Pasting scripts into the WordPress visual editor does not work)

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

First, source or create your HTML code. You can use an online HTML editor (e.g. search online for “Free Online WYSIWYG HTML Editor“) or use HTML cheat sheets

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

(You can use a free online HTML editor or HTML templates to create your HTML code. Source: HTML-Online.com)

Highlight and copy your code to the clipboard …

Select and copy your code to the clipboard

(Highlight and copy all of the code to your clipboard)

Next, open your page or post and select the exact spot where you want your code to appear. Create a blank line and add a placeholder (e.g. @@@@@) …

Add a placeholder to mark the spot where you would like your code to appear in your content

(Add a placeholder to mark the spot where you want your code to display in your content)

Next, click on the Text tab to switch to the Text editor …

Switch to the Text editor to paste your code

(Code must be pasted in the Text editor)

Find and select your placeholder symbols …

Select and highlight your placeholder characters

(Select and highlight your placeholder)

Paste the code into your content …

Paste the code into your text

(Paste the code over the highlighted text)

Save and publish your page and preview …

Preview and test any code you add to your pages

(Preview and test any code added to your pages or posts)

We have created a detailed tutorial on using basic HTML in WordPress here: A Beginner’s Guide To HTML Formatting Tags For WordPress Users

Important

While the above can be used to add simple HTML to content, we do not recommend pasting complex scripts directly into your content (e.g. lead capture forms, etc.) …

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

(Avoid using the WordPress text editor to add complex code)

If you paste complex code directly into the WP text editor you could experience errors.

A better method for adding scripts to content is to enter the code into a plugin that processes the script using ’shortcodes’ placed into your content.

What’s A Shortcode?

A ‘shortcode’ is a code shortcut. It allows you to trigger complex scripts without coding skills. Shortcodes can typically be added to pages, posts, and widgets to trigger a complex script into action.

Shortcodes look like short strings of text enclosed by square brackets, e.g. ‘[ezformshortcode]’ …

WP shortcode format

(What a WP shortcode looks like)

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

How WordPress Shortcodes Work

How shortcodes work

(How a shortcode works)

The screenshot above explains how to use a WordPress shortcode:

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

[2] After pasting the script into the code area and saving, the plugin generates a unique text-based shortcut that lets your site process the script.

[3] Copy this shortcode and paste it into any widgets, posts, or pages where you would like the function to appear and publish.

[4] The plugin will now call up your function whenever someone browses your site.

The great thing about using shortcodes is that you don’t have to mess 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!

Embedding Code Into Your WordPress Posts Using Plugins

There are a number of plugins that allow you to add code snippets and scripts into your posts, pages, and widgets.

Insert Html Snippet

Insert Html Snippet - WordPress Plugin

(Insert HTML Snippet – WordPress Plugin)

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

Essentially, this plugin allows you to create HTML snippets and add them to your posts and pages using shortcodes or custom fields.

HTML snippets are objects that can store scripts for just about everything: audio player code, tracking codes, etc.

The step-by-step tutorial below shows you how to use the Insert HTML Snippet plugin.

How To Add Snippets Of Code To Your WordPress Posts And Pages – Step-By-Step Tutorial

Download the plugin here, or use the “Search method” to install the plugin inside your WP dashboard (search for keywords like “Insert HTML, Insert HTML Snippets, etc.“) …

Installing the 'Insert Html Snippet' plugin

(Locate and install ’Insert Html Snippet’)

Activate the plugin …

Activate the plugin

(Activate the ‘Insert Html Snippet’ plugin)

After the plugin has been installed and activated, a new item called XYZ Html will display in the dashboard menu …

XYZ HTML menu

(XYZ Html plugin menu)

Useful Info

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

Have your code ready to use

(Have your code ready)

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

XYZ Html > HTML Snippets plugin menu

(XYZ Html > HTML Snippets plugin menu)

Click on Add New HTML Snippet

'Add New HTML Snippet'

(’Add New HTML Snippet’)

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

Insert Html Snippet - Add a new Snippet

(Creating a new HTML Snippet)

Your new snippet will be saved and published as a shortcode

Use the shortcode to insert your code into posts and pages!

(Shortcode!)

You can also create a new snippet without having the script code. This is useful if, for example, you are waiting for approval of the code but want to go ahead and get pages created where your code 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. After your code has been approved, you can then edit the snippet, replace the content, and republish …

You can also create a new snippet without having the script code.

(You can also create a new snippet without having code.)

The plugin stores your snippets in a separate list within the plugin’s database. You can view all of your HTML Snippets and shortcodes by selecting XYZ Html > HTML Snippets from your WordPress admin menu …

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

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

A list of all the code snippets you have created will appear in the ‘HTML Snippets’ admin screen …

Table of snippets

(Snippets table)

Because snippets are stored in an independent location (i.e. a separate database), you can use the same shortcode in multiple pages and posts and control everything from one location. If you edit the code inside the snippet, your code will automatically update throughout your content.

Shortcodes can be inserted into content directly inside the WordPress visual editor.

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

Shortcodes can be added in the WordPress visual editor.

( Add shortcodes to your content in the WordPress visual editor.)

After publishing, preview and test the script to ensure that the code has been added correctly …

Script added to content using a shortcode

(Script added to content via a shortcode)

Useful Info

As well as editing the code in your snippets, you can deactivate and delete your snippets …

Delete, edit, and deactivate your snippets

(Delete, deactivate, or edit your snippets)

Notes:

  • If you delete or deactivate a snippet but leave the HTML Snippets plugin active, your shortcode will not display in your content.
  • If you deactivate the HTML Snippets plugin, the shortcode will show up in your content.

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

(If the plugin is deactivated, your shortcode will show up as a line of text in your content)

Go here for more details: Insert HTML Snippet Plugin

EmbedIt Pro

EmbedIt Pro Plugin

(EmbedIt Pro – WordPress Plugin)

EmbedIt Pro is similar to the previously described plugin, with some added features.

After installing and activating the EmbedIt Pro plugin, a new menu item called HTML Snippets will display in the WordPress menu area …

HTML Snippets [EmbedIt Pro] plugin menu

(EmbedIt Pro plugin menu)

To create a shortcode, click on HTML Snippets > Add New, add your script, give your snippet a descriptive title and click the Publish button …

EmbedIt Pro Shortcode

(EmbedIt Pro Shortcode)

Two new menu buttons will appear on your Editor toolbar: Embed HTML Snippet and Embed From Custom Field

EmbedIt Pro adds new menu items to the visual editor

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

Use the HTML Snippet button to insert a shortcode into your content. With the cursor location selected, click on the HTML Snippet button to select and place the code snippet in your text …

You can use the HTML Snippet button to add a shortcode to your content.

(Use the HTML Snippet button to insert a shortcode into your posts.)

A a new window will pop up on your screen allowing you to insert any HTML Snippets you have stored. Select the HTML Snippet you would like inserted into your page or post and click OK to continue …

Insert your HTML Snippet

(Insert HTML Snippet)

Your shortcode will be inserted in the location you have specified …

Shortcode inserted into content

(Shortcode inserted into content)

Click Publish/Update to save …

Publish to save your settings

(Publish to save your settings)

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

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 next to where your code has been added. This allows you to change scripts “on the fly” (this is useful if you need to edit form elements, image sizes, etc.)

To update your code, click the Edit Snippet button …

Change scripts on the fly!

(Modify scripts “on the fly”!)

You will be taken to the Edit HTML Snippet screen. Make the necessary changes to the code and save. All posts and pages will update throughout your site with the changes …

Edit republish your code to make global changes

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

More information: EmbedItPro

Useful WordPress Tip

Tip #1: You can 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 EmbedIt Pro plugin also uses WordPress Custom Fields to add code to your content.

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

Paste shortcodes into your content via custom fields

(Paste shortcodes into your posts with custom fields)

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

Many WP themes can be used with drag and drop page-building plugins like Visual Composer or Thrive Content Builder that let you insert raw code into your content …

(Some themes offer built-in code adding functionality)

(Some themes come with built-in features)

Tip #4 – Adding code to the header section of WordPress

A plugin like EmbedIt Pro lets you easily insert code and scripts into content inside your WordPress posts and pages.

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

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

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

Important Info

The information below is for advanced WordPress 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

(CSS & JavaScript Toolbox – WordPress Plugin)

CSS & JavaScript Toolbox (or CJT) is a flexible and powerful plugin that lets you add code elements and contribute to your WordPress installation code using an easy-to-use web interface.

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, URLs, expressions, and more!

Info

To view the plugin’s comprehensive documentation and user manual, go here: CSS & JavaScript Toolbox WordPress Plugin.

Note: The first time you try to use CJT, you will be asked to go through an installation process to create 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 database tables installation

(Database tables must be installed the first time the plugin is used)

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

CSS & JavaScript Toolbox menu

(CSS & Javascript Toolbox plugin menu)

Click on CSS & JavaScript Toolbox

CSS & Javascript Toolbox plugin menu

(CSS & Javascript Toolbox menu)

The main CJT dashboard will load …

CSS & JavaScript Toolbox dashboard

(CSS & JavaScript Toolbox screen)

Click on New Code Block to begin adding custom code …

CSS & JavaScript Toolbox - Add New Code Block Button

(CSS & Javascript Toolbox – 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 it activated yet), select a “Location Hook” (specify where to insert your code block. Options = Header / Footer.), and choose the “Initial Block Position” (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' window

(‘Create New Code Block’ window)

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

CJT code field

(CJT code field)

Next, select where you want to insert the block (e.g. in specific Pages, Posts, etc …)

Select where to add your code block

(Select where to add your code block)

The main screen also has a number of icons you can click to access different features, help, etc. (hover your mouse over the icons for descriptions of all items) …

Access more plugin features via the toolbar

(Access plugin functionality via toolbar icons)

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

Click 'Save All Changes' to save your settings

(CJT – ‘Save All Changes’ button)

More information: CJT Plugin For WordPress

Idea

Tip: Checking That Your Scripts Have Been Added Correctly

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”) and you want to check if the code has been added correctly, then do the following:

How To View Source Code In Firefox

First, open up your internet browser (we’ll use Firefox in this example) and go to the page containing the code.

Select Tools > Developer > Page Source from your browser menu …

Viewing page code in Firefox

(Viewing page code in Firefox)

A new browser window will open up displaying the source code for that page.

Use the search function (Ctrl+F) or scroll down until you can see the code that you have added (if adding code to the header section, it will normally be placed  between the <head> and </head> tags) …

Source code

(Page code)

If you can see your code, then the next step is to test your script and make sure that everything is working correctly. If you experience any problems, repeat the process and make sure that your code has been inserted correctly, or get help from a professional. As stated earlier in this tutorial, always back up your site before doing anything that involves changing code.

How To Add Code To WordPress Pages And Posts

Congratulations, now you know how to add code snippets to WordPress content.

***

"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)

Disclaimer: This site has no association with WordPress or any of the products mentioned or reviewed on this website. We may receive affiliate commissions or financial benefits from sales of products advertised, mentioned or linked to this site. All images and descriptions sourced from product websites remain the copyright of their respective owners, comply with all license terms and agreements of use are being used solely for illustrative or training purposes.

***

Did you enjoy this post? If so, please consider using the social buttons below to share this article with other online users.

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and has authored hundreds of FREE WordPress tutorials for beginners. WPCompendium.org provides detailed step-by-step tutorials that will teach you how to use WordPress with no coding skills required and grow your business online at minimal cost!

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