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 Snippets Of Code And Scripts Into Your ContentOne of the most powerful aspects of using WordPress is that you don’t need to have technical skills like editing code to run a successful website.

You may come across certain situations, however, where you may decide to embed code into your content in order to add desired features or functionality to your site. Some common examples where inserting scripts into content may be used to extend the functionality of your site include:

  • Showing the current date on a special offer page
  • Adding a search box to your page, post, or sidebar
  • A lead capture form
  • Display relevant ads
  • Analytics scripts (e.g. Facebook Ads)
  • etc.

Adding scripts to your content can help expand your site's functionality

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

Useful Info

Some script features can be added to WordPress using plugins that involve little to no handling of code. In this tutorial, you will learn how to embed scripts into your content. You will also learn different methods that can be used to add code and scripts to your content.

How To Add Simple Code Snippets To WordPress Posts - Manual Method

Important Info

Note: Make sure to back up your site before adding any code or scripts to WordPress. If you don’t want to back up your data yourself, then get professional support, or use a WordPress backup plugin.

You can learn more about a great WordPress backup plugin that can automate your backup process here:

Important

You cannot add code directly into the WordPress visual editor …

Pasting scripts into the visual editor will not work

(Pasting code inside your visual editor does not work)

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

First, source or create the HTML code you want to add to your content. You can use a free online HTML editor (e.g. search online for “Free HTML WYSIWYG Editor With Preview“) or consider using an HTML cheat sheet

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

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

Copy all of the code to your clipboard …

Select and copy the code to your clipboard

(Select and copy your code to the clipboard)

Next, open your post or page and in the Visual Editor, add placeholder characters where you would like your script to appear …

Add a placeholder where you want your script to display in your content

(Add a placeholder to mark the location where you would like your code to display)

Click on the Text tab to switch to the Text editor …

Switch to the Text editor to paste in your code

(Code must be pasted in your Text editor)

Find your placeholder text and highlight the line …

Select and highlight your placeholder

(Select and highlight the line containing your placeholder text)

Paste your HTML code into your text …

HTML code pasted into text

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

Save your post or page, then preview …

Preview and test any code inserted into your posts

(Preview and test any code added to content)

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

Important

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

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

(Don’t use the WordPress text editor to add JavaScript code … use the other methods below instead!)

Pasting code like Javascript directly into the WP text editor can cause errors.

The method we recommend is to use plugins that automatically process the code from ’shortcodes’ placed into your content.

What Is A Shortcode?

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

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

What a WP shortcode looks like

(What a WordPress shortcode looks like!)

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

How Shortcodes Work

How shortcodes work

(How a WordPress shortcode works)

The screenshot above explains how a shortcode works:

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

[2] After adding the script to the code area and saving, the plugin creates a unique piece of text that lets your website process the script.

[3] You then copy this shortcode and paste it into a new or existing page, post, or widget where you would like the function to display and publish.

[4] The plugin will now automatically process the code.

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

How To Add Scripts To Your Pages Using Plugins

In this section, we show you how to add code snippets into WordPress using free WordPress plugins.

Insert HTML Snippet

Insert Html Snippet

(Insert Html Snippet Plugin)

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

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

HTML snippets can store codes and scripts for just about everything: audio and video players, custom tracking codes, etc.

The step-by-step tutorial below shows you how to use Insert Html Snippet.

How To Embed Code Into Your Pages And Posts – Step-By-Step Tutorial

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

Locate and install 'Insert Html Snippet'

(Installing ’Insert Html Snippet’)

Activate the plugin …

Activate 'Insert Html Snippet'

(Activate the plugin)

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

XYZ Html plugin menu

(XYZ Html menu)

Info

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

Copy your code to the clipboard

(Have your code ready to paste into the plugin)

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 load in your web browser. 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, enter a title in the Tracking Name field (this is for your reference), paste the code into the HTML code section and click on the Create button …

Add a new HTML Snippet

(Create a new Snippet)

Your HTML Snippet will be created, saved, and published as a shortcode

Use the shortcode to add your script to content!

(HTML Snippets shortcode!)

You can also create a shortcode without having the code. This is useful if, for example, you are awaiting approval of the code but need to go ahead and get pages created where your code will eventually appear.

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

You can create a new shortcode without having the code.

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

The plugin stores all snippets 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 main menu …

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

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

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

List of snippets and shortcodes

(Snippets and shortcodes list)

Because code snippets are stored in an independent location (i.e. the plugin’s database), you can add a single snippet to a number of posts or pages and control everything from one location. If you modify the code in your snippet, whatever is controlled by the snippet will automatically update throughout your content.

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

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

Shortcodes can be embedded into your content in the WordPress visual editor.

( Paste shortcodes into your content directly inside 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)

Info

You can delete, edit, or deactivate your snippets …

Delete, deactivate, and edit code snippets

(Deactivate, delete, and edit your code snippets)

Note:

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

If the HTML Snippets plugin is deactivated, the shortcode will appear in your content

(If you deactivate the HTML Snippets plugin, the shortcode text will display in the content)

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

EmbedIt Pro

EmbedItPro WP Plugin

(EmbedIt Pro)

EmbedIt Pro is similar to the HTML Snippets plugin, with some additional features.

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

HTML Snippets [EmbedIt Pro] plugin menu

(EmbedIt Pro plugin menu)

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

Shortcode - EmbedIt Pro

(Shortcode – EmbedIt Pro)

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

EmbedIt Pro adds new menu items to the visual editor toolbar

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

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

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

(You can use the HTML Snippet button to insert shortcodes into your pages.)

A new window will appear on your screen allowing you to insert any of the HTML Snippets you have stored. Type in the name of the HTML Snippet you would like embedded into your page/post and click OK to continue …

Insert name of the HTML Snippet

(Insert your HTML Snippet)

Your shortcode will be added to the content …

Shortcode inserted into content

(Shortcode added to content)

Click Publish or Update to save …

Update to save your settings

(Publish to save your settings)

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

What your visitors will see

(Content with script added)

While you are logged into your site, you should see an ‘Edit Snippet’ button displayed below the area where your code has been inserted. This allows you to change your script “on the fly” (this is useful if you need to edit form elements, resize images, etc.)

To edit your code, click the Edit Snippet button …

Update code on the fly!

(Update code “on the fly”!)

The Edit HTML Snippet screen will open in your browser. Make the changes to the code and update. All pages and posts will automatically update …

Update and republish your code to make global changes

(Update and republish your code to make global changes)

For more details, go here}:

Useful WordPress Tip

Tip #1: The plugin allows you to export HTML snippets (and import these into other sites) using the Tools > Export function …

Export your HTML Snippets

(Export your Snippets to other WordPress sites)

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

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

Add shortcodes to your posts via custom fields

(Embed shortcodes into your content via custom fields)

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

Many 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 WordPress themes offer built-in features)

(Some themes offer built-in features)

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

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

Some applications (e.g. analytics and conversion tracking tools), however, require that code be inserted into content but also to sections like page headers, footers, etc. (e.g. purchase pages, opt-in confirmation pages, and so.)

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

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

Disclaimer

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 Plugin

(CJT)

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

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

Idea

For comprehensive documentation, go here:

Note: Before using the plugin, you will be asked to install the plugin’s database tables and activate the plugin’s functionality. To do this, just click the ‘Install’ button …

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

(First-time plugin use requires database installation)

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

CSS & JavaScript Toolbox menu

(CSS & Javascript Toolbox plugin menu)

Click on CSS & Javascript Toolbox on the menu …

CSS & JavaScript Toolbox menu

(CSS & Javascript Toolbox plugin menu)

The CSS & Javascript Toolbox screen will come up …

CSS & Javascript Toolbox dashboard

(CSS & JavaScript Toolbox dashboard)

Click on the New Code Block button to begin adding new code to your site …

CJT - Add New Code Block

(CSS & Javascript Toolbox – New Code Block)

In the ‘Create New Code Block’ window, name 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” (specify where to insert your code block. Options = Header / Footer.), and specify the “Initial Block Position” (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' options

(‘Create New Code Block’ window)

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

CJT content area

(CJT code area)

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

Specify where to add your code block

(Specify where to add your code block)

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

Access more CJT features via toolbar icons

(Access CJT functionality via toolbar icons)

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

Click 'Save All Changes' to save your code settings

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

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

Idea

Tip: How To View Your Code

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” section) and you would like to check if the code has been added correctly, then follow the steps below:

Viewing Hidden Page Code In Firefox

First, open up your internet browser (e.g. Firefox) and visit the page where you have added your code.

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

How to view hidden code in Firefox

(Viewing page code in Firefox)

A new browser window will open up and displays the source code for your page.

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

Page code

(Page code)

If you can see the code in your page, then all that’s left is to test your script and make sure that everything is working as it should. If you experience any problems, repeat the above process and make sure that you have pasted in the code 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 Insert Code And Scripts In WordPress Pages And Posts

Congratulations, now you know how to easily scripts to WordPress 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