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

How To Insert Code And Scripts Into WordPress Posts And Pages

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

You could come across situations, however, where you may decide to insert a script or code snippet into content in your posts in order to extend the capabilities of your site. Some common examples where adding code snippets to content would enhance the functionality your site include:

(Adding scripts to content can help expand your site’s functionality)

In this tutorial, you will learn how to easily add scripts and code to your posts and pages with and without plugins.

Inserting Simple Code Into WordPress Pages And Posts - Manual Method

Note: Make sure to backup your database and files before adding any scripts to WordPress. If you don’t want to do site backups, then consider getting support from a WordPress professional, or use WordPress backup plugins.

You can read about a WordPress backup plugin that we recommend using to perform automated WordPress file and database backups here:

With WordPress, you cannot add code snippets and scripts (e.g. JavaScript, HTML) directly into the visual editor …

(Do not paste scripts inside the WordPress visual editor)

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

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

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

Copy the code to your clipboard …

(Copy the code to your clipboard)

Next, open your post or page and in the Visual Editor, add placeholder characters to mark the spot where you want your script to display …

(Add a placeholder to mark the spot where you would like your code to display)

Next, click on the Text tab to switch from the Visual editor to the Text editor …

(Switch to the Text editor to paste code)

Find and highlight the placeholder characters …

(Select and highlight the line containing your placeholder)

Paste the code over your highlighted text …

(Simple HTML code pasted into text)

Remember to save the content, then preview …

(Preview and test any code inserted into your pages)

To learn more about using basic HTML, see this tutorial:

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

(Don’t use the text editor to add JavaScript code)

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

The method we recommend is to use plugins that process code snippets from a ‘shortcode’ pasted into your content.

WordPress Shortcodes

A ‘shortcode’ is a short bit of code that allows you to perform complex functions with no coding or programming skills. Shortcodes are typically used in pages, posts, and widgets to trigger a complex script into action.

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

(What a shortcode looks like!)

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

How Shortcodes Work

(How a WordPress shortcode works)

The above explains how to use a shortcode:

[1] First, install a plugin that allows you to paste code snippets into a special field (we’ll show you an example of this in the tutorial below)

[2] After pasting the code snippets into the field and saving, the plugin creates a unique text shortcut for calling up the script.

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

[4] WordPress will now automatically load the function.

Shortcodes are great because you don’t have to mess around with the actual code to get the functionality you want … just add the shortcode to your page, post, or widget and WordPress does the rest!

How To Insert Code Snippets Into WordPress Posts Using Plugins

There are several plugins that let you insert code into WordPress.

Insert HTML Snippet

(Insert Html Snippet Plugin For WordPress)

As the name suggests, this plugin allows you to easily embed HTML code snippets into a post, page, or a sidebar widget.

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

HTML snippets 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 Insert HTML Snippet.

Adding Scripts And Code To Your WordPress Pages – Insert Html Snippet Tutorial

Download the plugin here, or locate and install the plugin directly from your WP dashboard (search for keywords like “Insert HTML, Insert Code, etc.“) …

(Install ’Insert Html Snippet’)

Next, activate the plugin …

(Activate ’Insert Html Snippet’)

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

(XYZ HTML menu)

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

(Copy your code to the clipboard)

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

(XYZ Html > HTML Snippets)

Click on Add New HTML Snippet

(’Add New HTML Snippet’)

In ‘The Add New HTML Snippet’ section, enter a descriptive title in the Tracking Name field (this is for your reference), paste the code into the HTML code section and click the Create button …

(Insert HTML Snippet – Adding a new Snippet)

This creates your new HTML snippet as a shortcode

(HTML Snippets shortcode!)

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

In this case, go ahead and create a new 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 create a snippet without having your code yet.)

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

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

A table of all your HTML snippets and shortcodes show up in the ‘HTML Snippets’ admin screen …

(Snippets list)

Because snippets are stored in an independent location (i.e. a separate database), you can use the same shortcode in different pages and control everything from one location. If you change the code snippet, the code 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 via a shortcode, simply go to your post, page, or widget and place your mouse cursor where you would like the code to display …

(You can insert shortcodes into your content inside the WordPress visual editor.)

After publishing, preview 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 or delete the snippets …

(Delete, edit, or deactivate your snippets)

Note:

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

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

EmbedIt Pro

(EmbedIt Pro Plugin)

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

After installing and activating the plugin, a new menu item called HTML Snippets will display in your dashboard menu …

(EmbedIt Pro plugin menu)

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

(EmbedIt Pro Shortcode)

You will notice that a couple of new menu items have been added to your Editor toolbar: HTML Snippet and Custom Field

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

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

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

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

(Insert your HTML Snippet)

The shortcode will be added to your content …

(Shortcode added to content)

Click Publish/Update to save …

(Publish to save your settings)

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

(What your visitors will see)

While you are logged into your admin, you should see an ‘Edit Snippet’ button displayed below the section where your code has been inserted. This lets you edit scripts “on the fly” (this is useful if you need to change form elements, resize videos, etc.)

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

(Modify scripts “on the fly”!)

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

(Edit, update, and republish your code to make sitewide changes)

For more details, go here}:

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

(Export your Snippets)

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

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

(Add shortcodes to your content with custom fields)

Tip #3 – Use 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 allow you to embed raw HTML or JavaScript code into your pages …

(Some themes are built with built-in code insertion functionality)

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

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

Some applications, however, require code to be inserted into content but also to sections like page headers, footers, etc. (for example, purchase pages, confirmation pages, and so.)

There are a number of plugins that will allow you to add code to headers and footers of your pages. Many of these plugins, however, will add code to all posts or pages, not just the ones you want (some plugins and themes will add code to every page and then let you turn the code off for selected pages and posts).

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

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

CSS & JavaScript Toolbox

(CSS & JavaScript Toolbox)

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

The way CJT works is that it allows you to modify your site’s functionality and appearance by adding custom code using 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 and user manual, go here:

Note: The first time you try to use the plugin, you will need 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 database installation)

After installing and activating CJT, a new item called CSS & Javascript Toolbox will appear in your main dashboard menu as well as a dashboard panel with news and information about how the plugin is being used on your site …

(CSS & Javascript Toolbox plugin menu)

Click on CSS & JavaScript Toolbox on the menu …

(CSS & JavaScript Toolbox menu)

This loads the CSS & JavaScript Toolbox screen …

(CSS & JavaScript Toolbox dashboard)

Click on New Code Block to begin adding custom code …

(CJT – Add New Code Block Button)

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 it activated yet), select a “Location Hook” (this specifies where to insert your code block. Options = Header / Footer.), and choose 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.). Click Create

(‘Create New Code Block’ window)

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

(CJT content area)

Next, select where you would like to insert the code (e.g. Pages, Categories, etc …)

(Specify where to insert your code)

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

(Access plugin functionality via toolbar icons)

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

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

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

Tip: Verifying If You Have Added Scripts 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 would like to check if the code has been added correctly, then do the following:

Viewing Hidden 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 the code.

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

(Tools > Web Developer > Page Source)

A new window opens displaying the source code for that page.

Scroll down until you can locate the code that you have added (code added to the header section is normally located  between the <head> and </head> tags) …

(Page code)

If you can see the 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 process and make sure that you have entered the code correctly, or get a professional to help you. As stated at the beginning of this tutorial, always back up your site before doing anything that involves changing code.

Congratulations! Now you know how to add scripts and code to your posts and pages.

***

"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group