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

How To Insert Code And Scripts Into WordPress Posts And Pages

One of the main advantages of using WordPress is that you don’t need to mess with code to run a site.

You could come across occasions, however, where you may choose to add a snippet of code to content in your posts or pages in order to add certain functionality to your site. Common scripts you may want to insert into your pages include:

(Adding scripts to pages can give you additional functionality)

In this tutorial, we are going to show you how to embed code and scripts into your WordPress content. You will also learn different methods that can be used to insert scripts into your content.

How To Embed Simple Code Into Your Content - Manual Method

Note: Remember to backup your site files and database before adding any code snippets to WordPress. If you don’t want to back up your files manually, then get professional support, or use a WordPress backup plugin.

You can read about a great WordPress backup plugin that can automate your site backups here:

You cannot paste code directly into the WordPress visual editor …

(Do not insert code inside the WordPress visual editor)

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

First, locate or create your HTML code. You can use a free online HTML editor (e.g. search online for “Free Online HTML Editor WYSIWYG“) or use an HTML cheat sheet

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

Highlight and copy all of your code to the clipboard …

(Copy your code to the clipboard)

Next, open your page or post and in the Visual Editor, add placeholder symbols to mark the spot where you would like your code to display in your content …

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

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

(Code must be pasted in your Text editor)

Locate and select your placeholder text …

(Select and highlight your placeholder)

Paste the code into your content, replacing the selected text …

(HTML code pasted into text)

Remember to publish your page or post and preview the results …

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

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

While the above method is fine for adding simple HTML code to content, this is not recommended for pasting complex code directly into your content (e.g. opt-in forms, etc.) …

(Avoid using the text editor to add complex code)

Pasting scripts directly into the WP text editor could lead to errors.

A better solution for adding code to content is to enter the snippet of code into a plugin that then processes the script using ’shortcodes’ pasted into your content.

WordPress Shortcodes

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

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

(This is what a WP shortcode looks like!)

Shortcodes enable plugin developers to create complex scripts such as image tools, user forms, content formatting tools, etc., which you then insert into your content using a simple text code.

How To Use WordPress Shortcodes

(How a WordPress shortcode works)

The screenshot above explains how shortcodes work:

[1] First, install a plugin that lets you paste 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 shortcode that will call up the script.

[3] Copy the shortcode to your clipboard and paste it into any posts, pages, or widgets where you would like the function to display and publish.

[4] The plugin will now call up your function whenever someone brings up the content on their web browser.

The great thing about using shortcodes is that you don’t have to mess with the actual script … simply add the shortcode to your post, widget, or page and WordPress does the rest!

How To Insert Scripts And Code Snippets Into Your Posts Using A Plugin

There are a number of plugins available that allow you to insert scripts and snippets of code into WordPress.

Insert Html Snippet

(Insert HTML Snippet Plugin)

As the plugin name suggests, Insert HTML Snippet allows you to insert HTML code into a page, post, or a sidebar widget.

This plugin lets you create unlimited 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: forms and calculators, custom javascript codes, etc.

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

How To Insert Snippets Of Code Into WordPress 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 Code, etc.“) …

(Install ’Insert Html Snippet’)

Next, activate the plugin …

(Activate the ‘Insert Html Snippet’ plugin)

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

(XYZ Html plugin menu)

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

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

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

(XYZ Html > HTML Snippets plugin menu)

The ‘HTML Snippets’ screen appears. Click on the Add New HTML Snippet button …

(’Add New HTML Snippet’)

In ‘The Add New HTML Snippet’ section, give your snippet a descriptive title (this is for your own reference so you can identify what the snippet is about!), paste the code into the HTML code section and click the Create button …

(Insert Html Snippet – Adding a new Snippet)

Your new snippet will be saved and published as a shortcode

(HTML Snippets shortcode!)

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

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

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

After creating new snippets the plugin will store it in a separate list within the plugin’s database. You can view all of your HTML Snippets by selecting XYZ Html > HTML Snippets from your WordPress admin menu …

(Click on XYZ Html > HTML Snippets to view a list of all your snippets and shortcodes)

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

(List of snippets and shortcodes)

Because code snippets get stored in an independent location (i.e. the plugin’s database), you can use the same shortcode in a number of pages and posts and control everything from a single location. If you change the code in your snippet, your script will automatically be updated wherever the shortcode has been added.

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

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

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

After publishing, preview your content and test the script …

(Script added to content via a shortcode)

You can deactivate, edit, and delete code snippets …

(Deactivate, edit, or delete your snippets)

Notes:

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

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

EmbedIt Pro

(EmbedItPro Plugin For WordPress)

EmbedIt Pro gives you similar functionality to the previously described plugin, with some added features.

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

(EmbedIt Pro menu)

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

(Shortcode – EmbedIt Pro)

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

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

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

(Use the menu buttons to insert shortcodes into your posts.)

A popup window will display on your screen allowing you to insert any of the HTML Snippets you have stored. Select the HTML Snippet you would like to embed into your page/post and click OK to proceed …

(Insert name of the HTML Snippet)

The shortcode will be inserted into the content …

(Shortcode inserted into content)

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

(Publish to save your settings)

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

(Content with script added)

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

To update your script, click the Edit Snippet button …

(Modify scripts “on the fly”!)

You will be taken to the Edit HTML Snippet screen. Make your changes and update. All pages and posts will be automatically updated …

(Update and republish your code to make global changes)

For more details, go here}:

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

(Export your Snippets to other sites)

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

If you are familiar with custom fields, you can paste your HTML code into a custom field and use a shortcode in 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)

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 have built-in code processing features …

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

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

With a plugin like EmbeditPro, you easily add scripts to content inside your WordPress posts and pages.

Some applications, however, require code to be inserted into content but also to sections like page headers, footers, etc.

You can find a number of WordPress plugins that allow you to add code to headers and footers of pages and posts. Many of these plugins, however, will add code to all pages, not just the ones you want (check the plugin’s settings – some plugins will add the code to all pages and then let you turn the code on/off for selected pages and 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 below.

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

CSS & Javascript Toolbox

(CSS & Javascript Toolbox)

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

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

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

Note: Before using CJT, you will be asked to go through an 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 …

(Database tables must be installed the first time you use the plugin)

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

(CJT plugin menu)

Click on CSS & JavaScript Toolbox

(CSS & JavaScript Toolbox plugin menu)

The main CJT screen will come up …

(CSS & Javascript Toolbox screen)

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

(CJT – 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 to activate it yet), select a “Location Hook” (this specifies where to insert your code block. Options = Header / Footer.), and select the “Initial Block Position” (specify whether 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’ window)

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

(CJT code field)

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)

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

(Access more CJT functionality via the toolbar menu)

Click the ‘Save All Changes’ button after creating or editing your code block to save your settings …

(CJT – ‘Save All Changes’ button)

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

Tip: How To View Your Code

Some scripts will ask you to verify that your code has been added correctly and some will not.

If you have pasted conversion tracking code into an area that is 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:

Viewing Hidden Page Code In Firefox

First, open up your internet browser (e.g. Firefox) and visit the page that contains your code.

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

(How to view hidden code in Firefox)

A new window opens up and displays the source code for your page.

Use the search function (Ctrl+F) or scroll down the screen until you can see the code that you have added (if adding code to a page header, it will typically be contained  between the <head> and </head> tags) …

(Checking that code has been added correctly)

If you can see the code, then all that’s left 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 pasted in 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 WordPress pages and posts.

***

"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie