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 …

Adding Scripts And Snippets Of Code To Your Posts And PagesOne of the most powerful aspects of using WordPress is that you don’t need to mess with code to successfully manage a site.

You may come across an instance, however, where you may choose to embed a code snippet or script into posts or pages in order to add particular functions or features to your site. Useful examples where adding snippets of code to content may add functionality to your site include:

  • Today’s date and time
  • Adding a Google search box
  • Adding a lead capture form
  • Display relevant advertising
  • Tracking code (e.g. Google Adwords)
  • etc.

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

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

Useful Info

In this step-by-step tutorial, we show you how to insert code snippets and scripts into your pages and posts with and without plugins.

Adding Code To WordPress Pages And Posts - Manual Method

Note

Note: Remember to backup your files and database before adding any code snippets to WordPress. If you don’t want to do manual backups, then consider getting assistance from a WordPress professional, or use a backup plugin.

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

Important

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

Pasting scripts inside your visual editor will not work

(Do not add scripts inside your visual editor)

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

First, locate or create your code. You can use a simple HTML editor (e.g. search online for “Best Free HTML Online WYSIWYG Editor Tool“) or use HTML templates

Use an HTML editor or HTML templates to create your code

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

Copy all of your code to the clipboard …

Highlight and copy all of the code to your clipboard

(Copy the code to your clipboard)

Next, open your page or post and in the Visual Editor, insert a blank line and add a placeholder (e.g. @@@@@) to mark the location where you want your code to appear in your content …

Add a placeholder where you would like your code to display

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

Switch to the Text editor …

Code must be pasted in the Text editor

(Switch to the Text editor to paste code)

Locate and highlight the placeholder …

Select and highlight the line containing the placeholder symbols

(Select and highlight the line containing the placeholder symbols)

Paste the code over the selected text …

HTML code pasted into text

(HTML code pasted into text)

Save and publish the page or post and preview the results …

Preview and test any code added to your content

(Preview and test any code added to content)

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

Important

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

Don't use the text editor to add Javascript code ... use the methods below instead!

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

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

A better method for inserting code into pages and posts is to use a plugin that will “call” the script from a ‘shortcode’ added to your content.

What’s A Shortcode?

A ‘shortcode’ is a code shortcut. It allows you to trigger complex files with no coding or programming skills. Shortcodes are typically added to pages, posts, and widgets to trigger complex scripts into action.

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

Shortcode structure

(What a shortcode looks like)

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

How To Use WordPress Shortcodes

How a WordPress shortcode works

(How to use shortcodes)

The screenshot above explains how to use a WordPress shortcode:

[1] First, 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 generates a unique text-based shortcode for processing the script.

[3] Once you have inserted the shortcode into your content, publish or update your post or page.

[4] WordPress will now load your script every time someone visits your site.

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

Adding Scripts And Snippets Of Code To Your Posts Using A Plugin

There are a number of plugins available that let you embed code snippets into WordPress.

Insert HTML Snippet

Insert Html Snippet WordPress Plugin

(Insert Html Snippet Plugin For WordPress)

As the name of this plugin suggests, Insert Html Snippet allows you to add HTML code snippets into posts, pages and 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 scripts for just about everything: audio players, custom tracking codes, etc.

The step-by-step tutorial below shows you how to add code to your posts and pages using HTML snippets.

Adding Code And Scripts To Your WordPress Pages And Posts – Insert HTML Snippet Plugin Tutorial

Locate and install the Insert HTML Snippet plugin inside your WordPress dashboard (search for keywords like “Insert HTML, Insert HTML Code, etc.“) …

Install 'Insert Html Snippet'

(Locate and install the ‘Insert Html Snippet’ plugin)

Next, activate the plugin …

Activate 'Insert Html Snippet'

(Activate ’Insert Html Snippet’)

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

XYZ HTML plugin menu

(XYZ HTML plugin menu)

Tip

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

Have your code ready to use

(Highlight and copy your code to the clipboard)

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

XYZ Html > HTML Snippets menu

(XYZ Html > HTML Snippets menu)

Click on the Add New HTML Snippet button …

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

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

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

Add a new Snippet

(Creating a new Snippet)

This creates your new HTML Snippet as a shortcode

Your new shortcode!

(Shortcode!)

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

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

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

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

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

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

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

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

Snippets table

(List of snippets and shortcodes)

Because code snippets get stored in an independent location (i.e. a separate database), you can add a single snippet to multiple posts or pages and control everything from a single location. If you update the code snippet, the script will automatically update everywhere the shortcode has been embedded.

Shortcodes can be added inside the WordPress visual editor.

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

Shortcodes can be pasted in the WordPress visual editor.

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

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

Script added to content via a shortcode

(Script added to content using a shortcode)

Important Info

You can edit, deactivate, or delete code snippets …

Deactivate, edit, and delete your snippets

(Deactivate, edit, and delete snippets)

Notes:

  • If you deactivate or delete a snippet but the HTML Snippets plugin is left active, the shortcode will not display in your content.
  • If the plugin is deactivated, the shortcode will show up in your content and will need to be manually deleted.

If the HTML Snippets plugin itself gets deactivated, the shortcode will display as a line of text in your content

(If the plugin gets deactivated, the shortcode string will display in the content)

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

EmbedIt Pro

EmbedItPro Plugin For WordPress

(EmbedIt Pro Plugin For WordPress)

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

After the plugin has been installed and activated, a new menu item called HTML Snippets will be added to your dashboard menu …

EmbedIt Pro plugin menu

(EmbedIt Pro menu)

To create a shortcode, click on HTML Snippets > Add New, paste your script, give your snippet a title and click Publish

EmbedIt Pro Shortcode

(EmbedIt Pro Shortcode)

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

EmbedIt Pro adds new menu items to the visual editor

(EmbedIt Pro adds new menu items to the WordPress visual editor)

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 the snippet into the text …

Use the HTML Snippet button to add a shortcode to your posts.

(Use the menu buttons to insert a shortcode into your pages.)

A pop-up window will appear on your screen allowing you to insert any of the HTML Snippets you have created. Select the HTML Snippet you want to add into your post/page and click OK to proceed …

Insert your HTML Snippet

(Insert name of the HTML Snippet)

The shortcode will be placed in the location of your cursor …

Shortcode inserted into content

(Shortcode inserted into content)

Click Publish/Update to save …

Update to save your settings

(Publish to save your settings)

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

Content with script added

(Voila … your script has been added!)

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

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

Adjust code on the fly!

(Adjust scripts “on the fly”!)

This takes you to the Edit HTML Snippet screen. Make your changes and update. Wherever your shortcut has been added to content will automatically update …

Edit, update, and republish your code to make sitewide 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 HTML snippets (and import these into other sites) using the Tools > Export function …

Export your HTML Snippets

(Export your Snippets to other sites)

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

If you are familiar with how custom fields work, you can paste your HTML code into a custom field and use a shortcode in your content with the “Custom Field” toolbar button. This is useful when 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 Page Building Plugins

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

(Some WordPress themes are built with built-in code adding features)

(Some WordPress themes are built with built-in functionality)

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

A plugin like EmbeditPro allows you to easily insert code into content inside your WordPress posts and pages.

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

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

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

Disclaimer

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

CSS & Javascript Toolbox

CJT Plugin

(CJT)

CSS & JavaScript Toolbox (or CJT) is a powerful and flexible plugin that lets you add code elements that contribute to your WordPress installation code 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 pages, posts, custom posts, categories, URLs, expressions, and much more!

Important

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

Note: After activating CJT, you will be asked 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’ and the plugin will take care of the rest …

First-time plugin use requires installing database tables

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

After installing CJT, a new item called CSS & Javascript Toolbox will be added to your navigation menu as well as a dashboard panel with latest news and information about how the plugin is being used on your site …

CSS & JavaScript Toolbox plugin menu

(CSS & Javascript Toolbox menu)

Click on CSS & Javascript Toolbox

CJT plugin menu

(CJT menu)

This loads the CSS & JavaScript Toolbox screen …

CSS & Javascript Toolbox screen

(CSS & JavaScript Toolbox screen)

Click on the New Code Block button to add custom code …

CJT - Add New Code Block Button

(CSS & Javascript Toolbox – 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 select the “Initial Block Position” (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' window

(‘Create New Code Block’ window)

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

CJT content area

(CJT code area)

Next, select where you want to insert your code (e.g. Pages, Categories, etc …)

Specify where to add your code block

(Select where to add your block of code)

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

Access CJT functionality via the toolbar

(Access CJT features via the toolbar)

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

CJT - 'Save All Changes' button

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

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

Tip

Tip: Verify If Scripts Have 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 of your site like the “header” that is not meant to be visible and you want 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 (we’ll use Firefox in this example) and visit the page that contains your code.

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

Tools > Developer Tools > Page Source

(How to view hidden page code in Firefox)

A new window will open up with the page code displayed.

Use the search function (Ctrl+F) or scroll down 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 view your code

(How to verify if you have added your scripts 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 to make sure that your code has been entered correctly, or get help from a professional. As stated at the beginning of this tutorial, always back up your site before adding, changing or deleting code.

How To Add Code And Scripts To Your WordPress Posts

Congratulations, now you know how to easily scripts and snippets of code to your posts.

***

"This is an awesome training series. I have a pretty good understanding of WordPress already, but this is helping me to move somewhere from intermediate to advanced user!" - Kim Lednum