WordPress For Non-Techies: Free WordPress Tutorials – WPCompendium.org

How To Insert Code And Scripts Into WordPress Posts And Pages

One of the best things about using WordPress is that you don’t need to have technical skills like editing code to manage a website successfully.

There may be instances, however, where you may want to insert code into content in your posts in order to add a desired function to your site. Some useful examples of code snippets you may want to add to your site include:

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

Some script functions can be added through plugins that require little to no messing with code. In this tutorial, we are going to show you how to easily embed snippets of code into your pages and posts with and without plugins.

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

Note: Before adding any scripts to WordPress remember to back up your database and files first. If you don’t want to do manual backups, then get support from a WordPress professional, or use a backup plugin.

Learn about a great WordPress backup plugin that we recommend using to completely automate your WordPress file and data backups here:

Scripts cannot be embedded directly into your content using the WordPress visual editor …

(Pasting scripts inside your visual editor will not work)

You can, however, place simple code into your content using the text editor. To add code to 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 “Free Online WYSIWYG HTML Editor“) or use HTML code templates

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

Select and copy your code to the clipboard …

(Highlight and copy all of the code to your clipboard)

Next, open your post or page and select the spot where you would like your script to appear. Create a new line and add a placeholder (e.g. @@@@@) …

(Add placeholder symbols where you would like your script to appear)

Switch to the Text editor to paste your code …

(Code must be pasted in your Text editor)

Find the placeholder and select the line …

(Select and highlight your placeholder)

Paste the code over your selected text …

(HTML code pasted into text)

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

(Preview and test any code inserted into pages)

To learn more about using basic HTML in WordPress, refer to this step-by-step tutorial:

While the above method is fine for adding simple HTML code to content, this is not recommended for pasting scripts containing Javascript code directly into your content (e.g. subscriber forms, etc.) …

(Avoid using the text editor to add complex code)

If you paste Javascript code directly into the WordPress text editor you could experience errors.

We recommend using a plugin that lets you “call” scripts from ’shortcodes’ placed into your content.

What’s A Shortcode?

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

A shortcode looks like a short bit of text wrapped in square brackets, e.g. ‘[ezformshortcode]’ …

(What a shortcode looks like)

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

How Shortcodes Work

(How a shortcode works)

The above explains how to use shortcodes:

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

[2] After pasting the code into the code area and saving, the plugin generates a unique piece of text that will process this script.

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

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

The great thing about using shortcodes is that you don’t have to mess around with the actual code to get the functionality you want … just add the shortcode where you would like the code to appear and WordPress does the rest!

Adding Code To Your Pages Using Plugins

There are various plugins that let you insert code snippets into WordPress.

Insert HTML Snippet

(Insert Html Snippet Plugin For WordPress)

As the name suggests, this plugin lets you easily embed snippets of code into posts, pages and sidebar widgets.

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

HTML snippets are objects that can store codes and scripts for just about anything: a video embed code, custom tracking codes, etc.

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

Inserting Code Into Your Pages And Posts – Insert HTML Snippet Plugin Tutorial

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

(Install the ‘Insert Html Snippet’ plugin)

Activate the plugin …

(Activate the ‘Insert Html Snippet’ plugin)

After installing and activating Insert HTML Snippet, a new menu item called XYZ Html will be added to the WP admin menu section …

(XYZ Html menu)

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

(Copy your code to the clipboard)

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

(XYZ Html > HTML Snippets menu)

The ‘HTML Snippets’ screen loads in your browser. Click on 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 section (this is for your own reference only), paste the script into the HTML code section and click on the Create button …

(Add a new HTML Snippet)

A new HTML Snippet will be saved and published as a shortcode

(Your new shortcode!)

You can also create a snippet without having the code. This is handy if, for example, you are awaiting approval of the code but want to proceed with getting the content published where your code will eventually appear.

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 code, you can then edit the snippet and replace the content …

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

After creating your HTML Snippet the plugin stores it in a separate list within the plugin’s database. You can view your HTML Snippets by selecting XYZ Html > HTML Snippets from your dashboard menu …

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

A list of all your code snippets appear in the ‘HTML Snippets’ admin screen …

(Table of snippets and shortcodes)

Because the plugin keeps all code snippets stored in a separate database, you can use a single shortcode in a number of pages and control everything from one location. If you alter the code and update the snippet, whatever code is in the snippet will automatically update wherever the shortcode has been added.

You can add shortcodes to content directly in the WordPress visual editor.

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

( Add shortcodes to your content in the WordPress visual editor.)

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

(Script added using a shortcode)

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

(Delete, deactivate, and edit snippets)

Notes:

(If the HTML Snippets plugin gets deactivated, the shortcode string will show up in the content)

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

EmbedIt Pro

(EmbedIt Pro – WordPress Plugin)

EmbedIt Pro gives you similar functionality to the HTML Snippets plugin, with some additional features.

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

(HTML Snippets [EmbedIt Pro] menu)

To create a shortcode, click on HTML Snippets > Add New, paste your code, give your snippet a name and click the Publish (or Update) …

(Shortcode – EmbedIt Pro)

You will notice that two new menu items will get added to your Editor menu toolbar: Embed HTML Snippet and Embed From Custom Field

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

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

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

A pop-up window will display on your screen allowing you to insert any HTML Snippets you have saved. Type in the name of the HTML Snippet you would like to add into your post or page and click OK to proceed …

(Insert your HTML Snippet)

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

(Shortcode inserted into content)

Click Publish or Update to save …

(Publish to save your settings)

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

(Content with script added)

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

To edit your script, click the Edit Snippet button …

(Update code “on the fly”!)

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

(Update and republish your code to make global changes)

For more details, go here}:

Tip #1: With EmbedIt Pro, you can export your snippets (and import these into other WordPress sites) using the Tools > Export function …

(Export your Snippets to other sites)

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

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

(Embed shortcodes into your posts using custom fields)

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

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

(Some themes come with built-in code adding functionality)

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

A plugin like EmbedIt Pro lets you easily add code and scripts to content inside your posts and pages.

Some applications (e.g. analytics and conversion tracking tools), however, require code to be inserted into content but also to sections such as headers, footers, etc. (like product download pages, confirmation pages, and so.)

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

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

The next section is for advanced users. If you need any help adding or removing scripts from your site, please contact a professional WordPress web developer.

CSS & JavaScript Toolbox

(CJT)

CSS & JavaScript Toolbox (or CJT) lets you add code to your site’s own code using an easy-to-use web interface.

The way CJT works is that it lets you modify your site’s functionality with custom code blocks that can be assigned to individual pages, posts, categories, custom posts, expressions, URLs, and much more!

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

Note: Before using the plugin, you will need to install 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 CJT is used)

After installation, a new item called CSS & Javascript Toolbox will be added to the main menu as well as a dashboard panel with latest news and plugin usage information …

(CJT menu)

Click on CSS & Javascript Toolbox

(CJT plugin menu)

This brings up the CSS & Javascript Toolbox screen …

(CSS & JavaScript Toolbox dashboard)

Click on New Code Block to add new code …

(CSS & Javascript Toolbox – New Code Block)

In the ‘Create New Code Block’ window, enter 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 choose 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.). After selecting your options, click Create

(‘Create New Code Block’ options)

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

(CJT code field)

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

(Specify where to insert your code block)

The CJT dashboard also various icons you can click to access different features, help documentation, etc. (hover your mouse over the icons for feature descriptions) …

(Access CJT features via the toolbar menu)

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

(CJT – ‘Save All Changes’ button)

Go here to learn more this WordPress plugin:

Tip: Verify If You Have Added Your Code Correctly

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 like the “header” that is not meant to be visible and you want to check if the code has been added correctly, then here’s how to do it:

How To View Source Code In Firefox

First, open up your internet browser (we’ll use Firefox in this example) and go to the page where you have added your code.

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

(Tools > Web Developer > Page Source)

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

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

(Verifying if your scripts have been added 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 correctly. If you experience any errors, repeat the process and make sure that you have entered 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.

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