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 …

Get Thrive Leads for WordPress

How To Add Code To WordPress ContentOne of the best things about using WordPress is that you don’t need to mess with code to run a successful website.

You could come across an instance, however, where you may choose to add a code snippet or script to posts or pages in order to add a particular feature or functionality to your site. Common examples where inserting snippets of code into pages or posts may enhance your site include:

  • Today’s date and time
  • Adding a Google search box
  • Adding newsletter subcription forms
  • Display relevant advertising banners
  • Analytics scripts (e.g. Google Analytics)
  • etc.

Adding scripts to your pages can give your site additional functionality

(Adding code to pages can give you additional functionality)

Important

Some script features can be added to WordPress using plugins that make handling code easier. In this tutorial, we show you how to easily insert snippets of code into WordPress pages and posts. We will also show you different plugins that can be used to insert code and scripts into your content.

Adding Code To WordPress Content Manually

Useful Info

Note: Before adding any code snippets to WordPress make sure to backup your files and database first. If you don’t want to do your own site backups, then consider getting support from a WordPress professional, or use a backup plugin.

You can read about a great WordPress backup plugin that we recommend using to perform complete WordPress backups here:

Important Info

Code cannot be added directly into the WordPress visual editor …

Pasting scripts into your visual editor does not work

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

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

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

You can use a free web-based HTML editor or HTML templates to create your HTML code

(Use a free online HTML editor or HTML templates to create your HTML code. Image source: HTML-Online.com)

Copy all of the code to your clipboard …

Copy your code to the clipboard

(Select and copy the code to your clipboard)

Next, open your post or page and add placeholder characters (e.g. @@@@@) to mark the location where you would like your script to appear in your content (in a blank line) …

Add placeholder text where you want your script to appear

(Add a placeholder where you would like your code to appear in your content)

Next, click on the Text editor …

Switch to the Text editor to paste code

(Code must be pasted in the Text editor)

Find and highlight the placeholder symbols …

Select and highlight your placeholder characters

(Select and highlight your placeholder text)

Paste the code into your content …

Paste the code into your content

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

Remember to save and publish the post or page and preview (and test) the results …

Preview and test any code inserted into pages or posts

(Preview and test any code inserted into your pages or posts)

If you need help using basic HTML in WordPress, see this tutorial:

Important

While the above is fine for adding simple HTML to your content, we do not recommend pasting scripts containing JavaScript code directly into your content (e.g. subscriber forms, etc.) …

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

(Don’t use the text editor to add complex code)

If you paste complex code directly into the WP text editor you will probably find that the script will not display correctly.

A smarter solution for adding scripts to WordPress content is to enter the snippet of code into a plugin that processes the script using ’shortcodes’ pasted into your content.

Shortcodes

A ‘shortcode’ is a small piece of code that allows you to perform complex functions without coding skills or knowledge. Shortcodes are typically used in posts, pages, and widgets to trigger a complex script into action.

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

What a shortcode looks like

(WordPress shortcode)

Shortcodes enable WordPress developers to create complex scripts such as content generators, forms, image tools, etc., which you then add to your content via a simple text code.

How A Shortcode Works

How a shortcode works

(How to use shortcodes)

The above explains how to use shortcodes:

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

[2] After adding the code to the code area and saving, the plugin generates a unique shortcode that will process the script.

[3] Next, copy this shortcode and paste it into a new or existing post, page, or widget where you would like the script to appear and publish.

[4] WordPress will now automatically load your code wherever the shortcode has been added.

Shortcodes are great because you don’t have to mess with the actual code … simply add the shortcode to your content and WordPress does the rest!

Adding Scripts And Code Snippets To Your WordPress Content Using Plugins

There are a number of plugins that let you insert code into WordPress.

Insert Html Snippet

Insert HTML Snippet WordPress Plugin

(Insert Html Snippet Plugin For WordPress)

As the name suggests, Insert HTML Snippet allows you to insert snippets of code into pages, posts or sidebar widgets.

Essentially, how this plugin works is that it lets you create separate HTML snippets and add them to your pages and posts using shortcodes or custom fields.

HTML snippets can store codes and scripts for just about everything: video embed codes from YouTube, custom tracking codes, etc.

The tutorial below shows you how to use Insert HTML Snippet.

How To Add Code Snippets And Scripts To Your Pages – Insert Html Snippet Plugin Tutorial

Download the plugin here, or install the plugin directly from your WordPress dashboard (search for keywords like “Insert HTML, Insert HTML Code, etc.“) …

Install 'Insert Html Snippet'

(Installing ’Insert Html Snippet’)

Activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate the ‘Insert Html Snippet’ plugin)

Once the plugin has been installed, a new menu item called XYZ Html will display in your WP menu …

XYZ HTML plugin menu

(XYZ Html plugin menu)

Idea

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

Highlight and copy all of the code to your clipboard

(Have your code ready)

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

XYZ Html > HTML Snippets plugin menu

(XYZ Html > HTML Snippets)

Click on Add New HTML Snippet

'Add New HTML Snippet'

(Click on the ‘Add New HTML Snippet’ button to create a new snippet)

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

Insert Html Snippet - Adding a new HTML Snippet

(Insert Html Snippet – Creating a new Snippet)

This creates your new HTML Snippet as a shortcode

Shortcode!

(Your new HTML Snippets shortcode!)

You can also create a new shortcode without having a script. This is useful if, for example, you are awaiting approval of the code but would like to publish the content 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 pages then publish. Once your script has been approved, you can then edit the snippet and replace the content …

You can also create a new snippet without having code.

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

After creating snippets the plugin will store it 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 WordPress dashboard menu …

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

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

A table of all your HTML snippets show up in the ‘HTML Snippets’ admin screen …

Snippets and shortcodes table

(Table of snippets)

Because snippets are stored in an independent location (i.e. a separate database), you can use the same shortcode in multiple pages and control everything from a single location. If you update the code in your snippet, whatever is controlled by the snippet will automatically be updated wherever you have added the shortcode.

Shortcodes can be pasted into content inside the WordPress visual editor.

To place the code into your content via a shortcode, simply go to your post, widget, or page and place your mouse cursor where you would like your code added …

Shortcodes can be pasted in the WordPress visual editor.

(You can paste shortcodes into content in 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

(Script added to content using a shortcode)

Important Info

As well as editing snippet codes, you can deactivate or delete the snippets …

Delete, edit, or deactivate snippets

(Deactivate, edit, and delete snippets)

Note:

  • If you deactivate or delete a snippet but leave the plugin active, your shortcode will not display in your content. The plugin will automatically remove the section that contains the shortcode so that no content gaps will be detected by visitors.
  • If the HTML Snippets plugin gets deactivated, the shortcode will display in your content.

If you deactivate the plugin, your shortcode will show up in your content

(If the HTML Snippets plugin gets deactivated, the shortcode text will display in the content)

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

EmbedIt Pro

EmbedItPro Plugin

(EmbedIt Pro WordPress 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 display in your WP menu …

HTML Snippets [EmbedIt Pro] menu

(EmbedIt Pro plugin menu)

To create a new shortcode, click on HTML Snippets > Add New, add your code, give your snippet a title and click Publish

Shortcode - EmbedIt Pro

(Shortcode – EmbedIt Pro)

Two new menu buttons will display on your Editor menu 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)

You can use the HTML Snippet button to add shortcodes to your posts. With the cursor location selected, click on the HTML Snippet button to select and embed the snippet shortcode in the text …

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

(Use the HTML Snippet button to place shortcodes into your content.)

A small window will display on your screen allowing you to insert any of the HTML Snippets you have saved. Type in the name of the HTML Snippet you want inserted into your content and click the ‘OK’ button to proceed …

Insert your HTML Snippet

(Insert your HTML Snippet)

The shortcode will be inserted 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 and test your script. The code should have been added to your content …

Content with script added

(Voila … your code has been added!)

While you are logged into your admin, you should see an ‘Edit Snippet’ button displayed next to the section where your code snippet has been inserted. This allows you to modify code “on the fly” (this is useful if you need to change code parameters, video sizes, etc.)

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

Make adjustments to scripts on the fly!

(Edit code “on the fly”!)

The Edit HTML Snippet screen will open in your browser. Make your changes and update. All content will automatically update with the changes …

Update and republish your code to make sitewide changes

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

For more details, go here}:

Useful WordPress Tip

Tip #1: You can export HTML 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 (Advanced Users): EmbedIt Pro also uses WordPress Custom Fields to add code to your content.

If you know how to use custom fields in WordPress, you can paste code into 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.

Paste shortcodes into your content using custom fields

(Paste shortcodes into your content via custom fields)

Tip #3 – Use Themes With Drag And Drop Page Building Plugins

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

(Some WordPress themes provide built-in functionality)

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

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

With a plugin like EmbedIt Pro, you easily insert code and scripts into content inside your WordPress pages and posts.

Some applications, however, require that code be added not only to content but also to areas such as headers, footers, etc.

You can find a number of plugins that allow you to add code to headers and footers of pages and posts. Many of these plugins, however, will add code to all pages or posts, not just the ones you want (check the plugin’s settings – some plugins and themes will add code to every page and then let you turn the code off on selected pages).

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 described below.

Useful Information

The section below is for advanced WordPress users. If you need help modifying anything on your site, please contact a professional WordPress web developer.

CSS & JavaScript Toolbox

CJT

(CSS & JavaScript Toolbox – WordPress Plugin)

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

The way this plugin works is that it allows you to extend your site’s functionality by adding custom code via code blocks that you can assign to individual posts, pages, categories, custom posts, URLs, expressions, and more!

Idea

For comprehensive documentation and user manual, go here:

Note: Before using CJT, you will need to go through a custom installation process to create the plugin’s database tables and activate the plugin’s functionality. It’s really simple, just click the ‘Install’ button …

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

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

After installing the plugin, you will see a new menu item on your WP admin menu area 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 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 …

CSS & JavaScript Toolbox - New Code Block Button

(CJT – Add New Code Block Button)

In the ‘Create New Code Block’ window, name 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 specify the “Initial Block Position” (this lets you 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 section …

CJT code area

(CJT content area)

Next, select where you would like to insert the code (e.g. in specific Pages, Posts, etc …)

Specify where to insert your block of code

(Specify where to add your code)

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

Access plugin functionality via the toolbar menu

(Access plugin features via toolbar icons)

Click the ‘Save All Changes’ button after creating or editing your code block to save your settings …

Click 'Save All Changes' to save your settings

(Click ‘Save All Changes’ to save your settings)

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

Important

Tip: Making Sure That Your Code Has Been Added Correctly

Some scripts will ask you to verify that your code has been added correctly and some will not.

If you have added conversion tracking code to an area that is not meant to be visible (like the ”header” section) and you need to check if the code has been added correctly, then follow the steps below:

Viewing Source Code In Firefox

First, open up your internet browser (e.g. Firefox) and visit the page containing your code.

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

Tools > Developer Tools > Page Source

(Viewing hidden page code in Firefox)

A new browser window opens with the page 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) …

How to verify if you have added your code correctly

(Page code)

If you can see the 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 process and make sure that your code has been added 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.

How To Embed Scripts And Code Into Your WordPress Posts

Congratulations! Now you know how to embed code into your posts and pages.

***

"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya

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