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 Scripts Into WordPressOne of the main advantages of using WordPress is that you don’t need to know how to write code to manage a website successfully.

There may be times, however, where you may be required to paste a code snippet or script into posts or pages in order to extend the capabilities of your site. Typical code snippets you may want to add to your site include:

  • Today’s date
  • Adding a Google search box to your post, sidebar, or page
  • Adding newsletter subcription forms
  • Display relevant advertising
  • Conversion tracking code (e.g. Facebook Ads)
  • etc.

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

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

Important

Some script functions can be added to WordPress using plugins that make handling code easier. In this tutorial, you will learn how to insert snippets of code into your WordPress pages and posts. You will also learn different plugins that can be used to insert code snippets into your content.

Embedding Simple HTML Code Into WordPress Pages - Manual Method

Info

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

Learn about a WordPress backup plugin that can fully automate your site backups here:

Important

WordPress doesn’t let you add code directly into the visual editor …

Do not add scripts inside the WordPress visual editor

(Pasting scripts inside the visual editor will not work)

You can, however, place simple code into the WordPress 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 HTML editor (e.g. search online for “Free Online HTML Editor WYSIWYG“) or consider using an HTML cheat sheet

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

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

Highlight and copy all of your code to the clipboard …

Select and copy your code to the clipboard

(Copy all of the code to your clipboard)

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

Add placeholder characters to mark the spot where you want your script to display in your content

(Add a placeholder to mark the spot where you would like your script to appear in your content)

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

Switch to the Text editor to paste in your code

(Switch to the Text editor to paste in your code)

Find your placeholder symbols and highlight the line …

Select and highlight your placeholder

(Select and highlight your placeholder)

Paste the code over the highlighted placeholder …

Use the text editor to add simple HTML to your content

(HTML code pasted into text)

Publish your page or post, then preview and test the results …

Preview and test any code you add to your pages

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

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

Important

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

Avoid using the WordPress text editor to add complex code

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

Pasting scripts directly into the WP text editor could cause errors.

A smarter way to add code to WordPress posts and pages is to enter the script into a plugin that processes the script using ’shortcodes’ pasted into your content.

Shortcodes

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

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

What a WordPress shortcode looks like

(Shortcode)

Shortcodes allow WordPress developers to create complex scripts such as content generators, image tools, user forms, etc., which you then add to your content via a short text string.

How To Use WordPress Shortcodes

How a shortcode works

(How a shortcode works)

The above explains how to use a shortcode:

[1] You install a plugin that lets you paste a script into a special field (see the tutorial below for an example)

[2] After pasting the script into the special field and saving, the plugin generates a unique text shortcut that will process the script.

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

[4] WordPress will now automatically load your code.

The great thing about using shortcodes is that 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!

Embedding Code Snippets Into Your WordPress Pages Using Plugins

There are several plugins that allow you to add snippets of code into WordPress.

Insert HTML Snippet

Insert HTML Snippet - WordPress Plugin

(Insert Html Snippet – WordPress Plugin)

As the name suggests, this plugin lets you insert code into pages, posts and sidebar widgets.

Essentially, how this plugin works is that it lets you create separate 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: forms and calculators, javascript codes, etc.

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

Adding Code To Your Posts – Tutorial

Locate and 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

(Install ’Insert Html Snippet’)

Activate the plugin …

Activate the plugin

(Activate the plugin)

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

XYZ HTML plugin menu

(XYZ Html menu)

Useful Information

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

Highlight and copy your code to the clipboard

(Highlight and copy your code to the clipboard)

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

XYZ Html > HTML Snippets

(XYZ Html > HTML Snippets plugin menu)

Click on the Add New HTML Snippet button to create a new shortcode …

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

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

In ‘The Add New HTML Snippet’ screen, name your snippet (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 Snippet

(Insert HTML Snippet – Creating a new HTML Snippet)

This creates and publishes your new snippet as a shortcode

HTML Snippets shortcode!

(HTML Snippets shortcode!)

You can also create a shortcode without having the script code. This is handy if, for example, you are waiting for approval of the code but would like to create and publish the content where your code will eventually show up.

In this case, go ahead and create your code snippet with placeholder content and insert the shortcode into your pages then publish. After receiving your live code, you can then edit the snippet and replace the content …

You can also create a shortcode without having a script.

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

After creating your HTML Snippet the plugin will store it in a separate list within the plugin’s database. You can view all the snippets and shortcodes you’ve created by selecting XYZ Html > HTML Snippets from your admin menu …

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

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

A table with all the code snippets you have created appear in the ‘HTML Snippets’ admin screen …

Snippets table

(List of snippets and shortcodes)

Because the plugin stores all snippets in its own database, you can add a single shortcode to a number of posts and pages and control everything from one location. If you modify the code in your snippet, your script will automatically update everywhere the shortcode has been inserted.

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

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

 Embed shortcodes into your content directly in the WordPress visual editor.

(Shortcodes can be added to your content in the WordPress visual editor.)

After publishing, preview your content and test the script to ensure that your code is working ok …

Script added using a shortcode

(Script added to content via a shortcode)

Useful Info

As well as editing your snippet codes, you can deactivate and delete your snippets …

Deactivate, delete, or edit code snippets

(Deactivate, delete, and edit your snippets)

Notes:

  • If you delete or deactivate a snippet but leave the HTML Snippets plugin active, the shortcode will not display in your content. The plugin will remove any sections that contain the shortcode from your content so that no gaps are visible to visitors.
  • If the HTML Snippets plugin gets deactivated, the shortcode will appear as a line of text in your content.

If the plugin gets deactivated, the shortcode will appear in your content

(If you deactivate the HTML Snippets plugin itself, the shortcode will show up in your content as a line of text)

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

EmbedIt Pro

EmbedItPro

(EmbedIt Pro – WordPress Plugin)

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

After installing and activating the EmbedIt Pro plugin, a new menu item called HTML Snippets will appear in the dashboard menu …

HTML Snippets [EmbedIt Pro] menu

(HTML Snippets [EmbedIt Pro] menu)

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

EmbedIt Pro Shortcode

(Shortcode – EmbedIt Pro)

A couple of new items will be added to your Visual Editor menu toolbar: Embed HTML Snippet and Embed From Custom Field

EmbedIt Pro adds new menu buttons to the visual editor toolbar

(EmbedIt Pro adds new menu buttons to the visual editor toolbar)

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

Use the HTML Snippet button to insert shortcodes into your content.

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

A window will pop up on your screen allowing you to insert any HTML Snippets you have stored. Select the HTML Snippet you want to add into your page or post and click the ‘OK’ button to proceed …

Insert HTML Snippet

(Insert HTML Snippet)

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

Shortcode added to content

(Shortcode added to content)

Click the ‘Publish’ or ‘Update’ button to save …

Publish to save your settings

(Publish to save your settings)

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

Voila ... your code has been added!

(Content with script added)

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

To update your script, click the Edit Snippet button …

Adjust scripts on the fly!

(Change code “on the fly”!)

This will take you to the Edit HTML Snippet screen. Make your changes and update. All posts and pages will update automatically …

Edit 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: The plugin lets you 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): The plugin also uses WordPress Custom Fields to add code to your posts.

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

Paste shortcodes into your content using custom fields

(Add shortcodes to your posts using custom fields)

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

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

(Some themes provide built-in functionality)

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

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

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

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

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

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

Important

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

CSS & Javascript Toolbox

CSS & Javascript Toolbox WP Plugin

(CSS & JavaScript Toolbox – WordPress Plugin)

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

The way the plugin works is that it lets you modify and extend your site’s functionality and appearance by adding custom code using code blocks that can be assigned to individual pages, posts, custom posts, categories, expressions, URLs, and more!

Info

For comprehensive documentation and user manual, go here:

Note: After activating CJT, you will be asked to install 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 …

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

(First-time plugin use requires database installation)

After installing CJT, you will see a new item on the dashboard menu called CSS & Javascript Toolbox as well as a dashboard panel with news and plugin usage information …

CJT menu

(CJT menu)

Click on CSS & JavaScript Toolbox on the menu …

CJT plugin menu

(CJT menu)

This loads the CSS & Javascript Toolbox dashboard …

CSS & Javascript Toolbox dashboard

(CSS & JavaScript Toolbox dashboard)

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

CSS & JavaScript Toolbox - Add New Code Block

(CSS & Javascript Toolbox – Add 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 to activate it yet), select a “Location Hook” (specify where to insert your code block. Options = Header / Footer.), and choose the “Initial Block Position” (this lets you 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 field will appear. Paste your code or script into this area …

CJT code field

(CJT content field)

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

Select where to insert your code block

(Specify where to insert your code)

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

Access plugin functionality via the toolbar

(Access more CJT features via the toolbar menu)

Click Save All Changes after creating or editing your code block to save your settings …

CJT - 'Save All Changes' button

(CJT – ‘Save All Changes’ button)

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

Important

Tip: How To View Your Code

Some scripts will ask you to verify if you have added the code correctly and some will not.

If you have pasted code into areas of your site that are not meant to be visible (like the “header”) and you want to check if the code has been added correctly, then do the following:

Viewing Source Code In Firefox

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

From the browser menu, select Tools > Developer Tools > Page Source

Tools > Web Developer > Page Source

(How to view hidden code in Firefox)

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

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

Source code

(Checking that you have added your code correctly)

If you can see the code in page source view, then all that’s left is to test your script and make sure that everything is working correctly. If you experience any problems, repeat the above process and make sure that you have embedded your code correctly, or get a professional to help you. As stated at the beginning of this tutorial, always back up your files and database before adding, changing or deleting code.

Inserting Code Snippets Into WordPress Pages

Congratulations, now you know how to insert code into WordPress posts.

***

"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com