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

How To Insert Code And Scripts Into WordPress Posts And Pages

One of the benefits of using WordPress is that you don’t need to mess with code to manage a website successfully.

There could be occasions, however, where you may decide to add a code snippet or script to your posts or pages in order to add particular features or functionality to your site. Useful examples where adding code snippets to content would enhance the functionality your site include:

(Adding code to pages can expand your site’s functionality)

In this tutorial, we show you how to easily embed snippets of code into WordPress posts and pages with and without plugins.

How To Add Simple HTML Code To WordPress Pages Manually

Note: Remember to back up your database and files before adding any code snippets to WordPress. If you don’t want to do site backups, then hire a professional, or use backup plugins.

Learn about a great WordPress backup plugin that we recommend using to perform complete WordPress file and database backups here:

WordPress does not allow you to add code snippets and scripts (e.g. JavaScript, HTML) directly into the visual editor …

(Pasting scripts inside the visual editor does not work)

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

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

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

Select and copy all of your code to the clipboard …

(Copy the code to your clipboard)

Next, open your post or page and in the Visual Editor, add placeholder characters where you want your code to appear in your content …

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

Switch to the Text editor …

(Code must be pasted in the Text editor)

Find the placeholder text and select the line …

(Select and highlight your placeholder)

Paste the code over your highlighted text …

(Paste your HTML code into your content)

Save the page, then preview the results …

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

To learn more about using basic HTML in WordPress, go here:

While the above is fine for adding simple HTML 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 … use other methods instead!)

Pasting code like Javascript directly into the text editor can lead to errors.

A smarter solution for adding scripts to WordPress pages and posts is to enter the script into a plugin that processes the script from ’shortcodes’ pasted into your content.

WordPress Shortcodes

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

Shortcodes normally look like descriptive strings of text enclosed inside square brackets, e.g. ‘[ezformshortcode]’ …

(Shortcode structure)

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

How To Use WordPress Shortcodes

(How WordPress shortcodes work)

The above explains how to use WordPress shortcodes:

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

[2] After adding the script to the code area and saving, the plugin generates a unique piece of text for calling up this script.

[3] After adding your shortcode to the content, publish or update your page or post.

[4] The plugin will now automatically load your function wherever the shortcode has been added.

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

Adding Code To WordPress Pages Using Plugins

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

Insert HTML Snippet

(Insert Html Snippet – WordPress Plugin)

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

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

HTML snippets are objects that can store scripts for just about anything: codes for embedding calculation tools, custom tracking codes, etc.

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

Adding Scripts To Your WordPress Posts And Pages – Tutorial

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

(Installing the ‘Insert Html Snippet’ plugin)

Next, activate the plugin …

(Activate ’Insert Html Snippet’)

After installing and activating Insert Html Snippet, a new menu item called XYZ Html will appear in the main navigation menu …

(XYZ HTML menu)

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

(Copy all of the code to your clipboard)

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

(XYZ Html > HTML Snippets)

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

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

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

(Add a new Snippet)

Your HTML Snippet will be saved and published as a shortcode

(Paste this shortcode into your pages and posts!)

You can also create a new shortcode without having code. This is useful if, for example, you are waiting for approval of the code but would like to proceed with getting the pages published where your script will eventually appear.

In this case, go ahead and create a snippet with some 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 shortcode without having code.)

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

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

A list of all the code snippets and shortcodes you create show up in the ‘HTML Snippets’ admin screen …

(List of snippets and shortcodes)

Because the plugin keeps all snippets stored in its own database, you can embed a single snippet into various posts and pages and control everything from one location. If you edit your code inside the snippet, your code will automatically be updated wherever the shortcode has been added.

You can paste shortcodes into your content directly in 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 to embed your code …

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

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

(Script added to content via a shortcode)

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

(Edit, delete, or deactivate snippets)

Notes:

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

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

EmbedIt Pro

(EmbedItPro WP Plugin)

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

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

(HTML Snippets [EmbedIt Pro] menu)

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

(Shortcode – EmbedIt Pro)

You will see that two new menu buttons have been added to your Visual Editor menu toolbar: Embed HTML Snippet and Embed From Custom Field

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

Use the HTML Snippet button to insert a shortcode into your pages. With the cursor location selected, click on the HTML Snippet button to select and place the shortcode in your text …

(Use the HTML Snippet button to add shortcodes to your content.)

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

(Insert your HTML Snippet)

The shortcode will be added where your cursor is located …

(Shortcode inserted into content)

Click Publish/Update to save …

(Publish to save your settings)

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

(Voila … your code has been added!)

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

To update your code, click the Edit Snippet button …

(Change scripts “on the fly”!)

You will be taken to the Edit HTML Snippet screen. Perform your desired changes to the script and resave. All pages and posts will automatically update …

(Edit republish your code to make sitewide changes)

For more details, go here}:

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

(Export your HTML Snippets)

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

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

(Paste shortcodes into your posts via custom fields)

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

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

(Some themes come with built-in features)

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

A plugin like EmbedIt Pro allows you to easily insert scripts into content inside your posts and pages.

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

There are a number of WordPress plugins that let you add code to headers and footers of your pages. Many of these plugins, however, add code every page or post on your site, not just the ones you want (check the plugin’s settings – some plugins will add code to all pages and then let you turn the code off for individual pages or posts).

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

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

CSS & JavaScript Toolbox

(CJT)

CSS & JavaScript Toolbox (or CJT) is a flexible plugin that lets you add code elements that contribute to your site’s own coding structure using an easy-to-use web interface.

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

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

Note: When you first try using the plugin, you will need to install the plugin’s database tables and activate the plugin’s functionality. It’s really simple, just click the ‘Install’ and the plugin will take care of the rest …

(First-time plugin use requires database installation)

After installation, a new menu item called CSS & Javascript Toolbox will display in your WordPress admin menu section as well as a dashboard panel with latest news and plugin usage information …

(CSS & Javascript Toolbox menu)

Click on CSS & Javascript Toolbox

(CSS & JavaScript Toolbox menu)

This loads the CSS & Javascript Toolbox screen …

(CSS & Javascript Toolbox dashboard)

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

(CSS & Javascript Toolbox – Add New Code Block)

In the ‘Create New Code Block’ window, give your new code block a name, select the checkbox to activate it (or leave it unchecked if you don’t want to activate it yet), select a “Location Hook” (this specifies where to insert your code block. Options = Header / Footer.), and specify the “Initial Block Position” (this allows you to specify if 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’ options)

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

(CJT code field)

Next, select where you want to insert the block (e.g. in specific Pages, Categories, etc …)

(Specify where to add your code)

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

(Access more CJT functionality via the toolbar)

Click Save All Changes to save your code settings …

(CJT – ‘Save All Changes’ button)

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

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 added code to 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 follow the steps below:

How To View Source Code In Firefox

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

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

(Tools > Developer Tools > Page Source)

A new browser window opens with the source code of the page displayed.

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

(Page code)

If you can see your code, then the next step 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 added your code 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.

Congratulations! Now you know how to easily code snippets to your 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)