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 Snippets Of Code Into WordPress Posts And PagesOne of the benefits of using WordPress is that you don’t need to have technical skills like editing code to successfully manage your website or blog.

There could be times, however, where you may be required to embed a script or code snippet into your content in order to add a particular feature to your site. Typical examples where adding code snippets to pages would enhance your site include:

  • Showing the current date on a special offer page
  • Adding a search box to your sidebar, post, or page
  • Adding newsletter subcription forms
  • Display relevant banner ads
  • Tracking scripts (e.g. Facebook Ads)
  • etc.

Adding scripts to content can give your site additional functionality

(Adding scripts to pages can give you additional functionality)

Info

In this tutorial, you are going to learn how to easily add code to WordPress pages with and without plugins.

How To Insert Simple Code Into Your WordPress Pages And Posts Using The Text Editor

Important

Note: Before adding any code or scripts to WordPress make sure to back up your files and database first. If you don’t want to perform your own site backups, then consider getting professional WordPress support, or use WordPress backup plugins.

You can read about a great WordPress backup plugin that can fully automate your site backups here:

Important

Code cannot be added directly into your content via the WordPress visual editor …

Pasting code into your visual editor does not work

(Do not paste scripts into the WordPress visual editor)

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

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

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

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

Highlight and copy the code to your clipboard …

Highlight and copy all of the code to your clipboard

(Select and copy your code to the clipboard)

Next, open your page or post and in the Visual Editor, select the exact location where you would like your code to display, then create a blank line and add placeholder symbols (e.g. @@@@@) …

Add a placeholder where you would like your script to appear in your content

(Add placeholder text to mark the spot where you want your script to display in your content)

Switch to the Text editor to paste in your code …

Code must be pasted in your Text editor

(Code must be pasted in your Text editor)

Locate the placeholder characters and select the line …

Select and highlight your placeholder

(Select and highlight your placeholder)

Paste the code into your text …

Use the text editor to embed simple HTML into your content

(Paste your HTML code over your selected placeholder)

Publish your post or page and preview …

Preview and test any code added to your content

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

If you need help using basic HTML, refer to this step-by-step tutorial:

Important

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

Avoid using the text editor to add complex code

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

Pasting complex code directly into the WP text editor can lead to errors.

A smarter solution for embedding code into WordPress posts and pages is to enter the code into a plugin that processes the script from a ‘shortcode’ pasted into your content.

What’s A Shortcode?

’Shortcodes’ are code shortcuts that allow you to perform complex functions in WordPress with no coding or programming skills. Shortcodes are typically used in widgets, pages, and posts to trigger complex scripts into action.

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

Shortcode structure

(Shortcode)

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

How To Use Shortcodes

How to use WordPress shortcodes

(How to use WordPress shortcodes)

The above explains how to use shortcodes:

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

[2] After adding the code to the special field and saving, the plugin generates a unique shortcode that lets your website process this script.

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

[4] WordPress will now process your code snippet every time someone browses your site.

Shortcodes are great because you don’t have to mess around with the actual code … simply add the shortcode where you would like the functionality to appear and WordPress does the rest!

How To Insert Scripts And Snippets Of Code Into WordPress Posts And Pages Using A Plugin

In this section, you will learn how to insert code and scripts into your content using free WordPress plugins.

Insert Html Snippet

Insert HTML Snippet

(Insert HTML Snippet – WordPress Plugin)

As the name suggests, this plugin lets you easily insert HTML code into a post, page, or a sidebar widget.

How this plugin works is that it 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 scripts for just about anything: video embed codes, tracking codes, etc.

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

Adding Snippets Of Code To Your WordPress Posts – Insert Html Snippet Plugin Tutorial

Install Insert HTML Snippet inside your dashboard (search for keywords like “Insert HTML, Insert HTML Code, etc.“) …

Locate and install the 'Insert Html Snippet' plugin

(Installing the ‘Insert Html Snippet’ plugin)

Activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate ’Insert Html Snippet’)

After installing and activating the plugin, a new menu item called XYZ Html will display in your main menu …

XYZ Html plugin menu

(XYZ Html plugin menu)

Info

Important: Make sure you have your code snippet available (e.g. save it into a plain text file) …

Have your code ready to use

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

The ‘HTML Snippets’ screen will appear. Click on Add New HTML Snippet to create a new snippet …

Click on 'Add New HTML Snippet' to create a new snippet

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

In ‘The Add New HTML Snippet’ section, enter a descriptive title in the Tracking Name section (this is for your own reference to help identify what the snippet is about!), paste the code into the HTML code section and click the Create button …

Insert HTML Snippet - Add a new HTML Snippet

(Adding a new Snippet)

A new snippet will be created and published as a shortcode

HTML Snippets shortcode!

(Add the shortcode to your posts and pages!)

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 would like to go ahead and get content created where your script will eventually display.

In this case, go ahead and create your new code snippet with some placeholder content and insert the shortcode into your content then publish. Once your code has been approved, you can then edit the snippet and replace the content …

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

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

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 your admin menu …

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

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

A table of all your snippets will appear in the ‘HTML Snippets’ admin screen …

Table of snippets

(Snippets table)

Because code snippets get stored in an independent location (i.e. a separate database), you can insert the same snippet into various pages and posts and control everything from one location. If you update the code in your snippet, your code will automatically be updated throughout your content.

Shortcodes can be added to your content inside the WordPress visual editor.

To place the code into your content via a shortcode, simply open your post or page and click where you would like to add the code …

 Insert shortcodes into content directly inside the WordPress visual editor.

(Shortcodes can be embedded into your content inside the WordPress visual editor.)

After publishing, preview your content and test your script …

Script added to content via a shortcode

(Script added to content via a shortcode)

Info

You can deactivate, delete, or edit code snippets …

Deactivate, delete, and edit snippets

(Edit, deactivate, or delete your snippets)

Note:

  • If you delete or deactivate a snippet but leave the plugin active, your shortcode will not display in your content. The plugin will automatically remove any lines containing the shortcode so that no gaps in the content will be noticed by visitors.
  • If the plugin itself is deactivated, the shortcode will appear as a line of text in your content (you will need to manually delete the shortcode wherever it’s been placed).

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

(If you deactivate the HTML Snippets plugin, the shortcode itself will show up in the content)

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

EmbedIt Pro

EmbedItPro WordPress Plugin

(EmbedIt Pro)

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

After the plugin has been installed and activated, a new menu item called HTML Snippets will appear in the dashboard menu …

HTML Snippets [EmbedIt Pro] plugin menu

(EmbedIt Pro plugin menu)

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

Shortcode - EmbedIt Pro

(Shortcode – EmbedIt Pro)

You will see that a couple of new items will be added to your Visual Editor toolbar: HTML Snippet and Custom Field

The plugin adds new menu items to the visual editor toolbar

(EmbedIt Pro adds new menu buttons to the 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 your snippet shortcode into your text …

You can use the menu buttons to add shortcodes to your content.

(You can use the HTML Snippet button to add shortcodes to your content.)

A new window will appear on your screen allowing you to insert any of the HTML Snippets you have saved. Select the HTML Snippet you want to embed into your post/page and click the ‘OK’ button to proceed …

Insert your HTML Snippet

(Insert HTML Snippet)

The shortcode will be inserted into the content …

Shortcode added to content

(Shortcode inserted into content)

Click Publish/Update to save …

Publish 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 where you have specified …

What your visitors will see

(What your visitors will see)

While you are logged into your admin, an ‘Edit Snippet’ button should display next to the section where your script has been added. This allows you to change scripts “on the fly” (this is useful if you need to edit form parameters, resize videos, etc.)

To edit your script, click the Edit Snippet button …

Make adjustments to scripts on the fly!

(Change scripts “on the fly”!)

This takes you to the Edit HTML Snippet screen. Make your necessary changes to the script and resave. All posts and pages will automatically update with your changes …

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: You can export your HTML snippets (and import these into other sites) using the Tools > Export function …

Export your Snippets

(Export your Snippets to other sites)

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

If you are familiar with using custom fields, you can paste your HTML code into a custom field and add a shortcode in your content with the “Custom Field” toolbar button. This is useful when you want to embed code into a single post without leaving the post editing window.

Paste shortcodes into your content with custom fields

(Paste shortcodes into your posts using custom fields)

Tip #3 – Use WordPress Themes With Drag And Drop Code Adding 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 come with built-in functionality)

(Some themes are built with built-in features)

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 that code be inserted into content but also to areas such as page headers, footers, etc. (for example, landing pages, opt-in confirmation pages, and so.)

There are a number of WordPress plugins that let you add code to the header section of your pages. Many of these plugins, however, will add code to all posts and pages, not just the ones you want (some plugins will add code to all pages and then let you turn the code on/off on individual pages).

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

Info

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

CSS & JavaScript Toolbox

CJT Plugin For WordPress

(CSS & Javascript Toolbox Plugin)

CSS & JavaScript Toolbox (or CJT) lets you add code and contribute to your WordPress installation software 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 with custom code blocks that you can assign to individual pages, posts, categories, custom posts, URLs, expressions, and much more!

Idea

To view the plugin’s comprehensive documentation, go here:

Note: After activating CJT, you will need to go through a custom installation process to create the plugin’s database tables and activate the plugin’s functionality. To do this, just click the ‘Install’ button …

Database tables need to be installed the first time you use the plugin

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

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

(CJT menu)

Click on CSS & JavaScript Toolbox

CSS & JavaScript Toolbox menu

(CSS & Javascript Toolbox menu)

This brings up the CSS & Javascript Toolbox dashboard …

CSS & JavaScript Toolbox screen

(CSS & JavaScript Toolbox dashboard)

Click on New Code Block to add custom code …

CJT - New Code Block Button

(CJT – Add New Code Block)

In the ‘Create New Code Block’ window, give your code block 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 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’ options)

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

CJT content field

(CJT code field)

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

Specify where to insert your code

(Select where to add your block of code)

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

Access more CJT features via the toolbar menu

(Access CJT functionality 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 code settings

(CJT – ‘Save All Changes’ button)

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

Idea

Tip: Verify If Code Has Been Added Correctly

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

If you have added code to a section of your site like the “header” that is not meant to be visible and you need to check if the code has been added correctly, then follow the steps below:

How To View Hidden Code In Firefox

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

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

How to view page code in Firefox

(How to view page code in Firefox)

A new browser will open with the page code displayed.

Use the search function (Ctrl+F) or scroll down the screen until you spot the code that you have added (code added to the header section is typically placed  between the <head> and </head> tags) …

Verifying that you have added your scripts 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 to make sure that you have entered your code 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.

How To Insert Snippets Of Code In WordPress Pages

Congratulations, now you know how to add code to WordPress pages and posts.

***

"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)