WordPress javascript in post

WordPress javascript in post

JavaScript will work within WordPress. If used within the template files, most JavaScript will work fine. Here are a few tips to make your JavaScript work in WordPress.

JavaScript in Template Files

To use JavaScript repeatedly within your site, you can either set the call for the JavaScript, or the script itself, in the head of your header.php template file, between the meta tags and the style sheet link, no differently than you would if you were using JavaScript in any HTML page. To «load» the JavaScript file into your site, in the head, add something like this:

Be sure that you define the type correctly, as your site will not validate without it.

In the spot where you wish to use the JavaScript, set the call for the JavaScript. For example, you are using a JavaScript that sets a link for users to «email this page» to a friend and you want it to be under the post title. It might look like this:

JavaScript in Posts

To use JavaScript inside of posts in WordPress, you need to take a few more steps. Odds are that this usage is for one or only a few instances, so adding the script to the header would only add code you don’t need to your header.php template file.

For the occassional or one time use of JavaScript, you need to put the script into a JavaScript file and then call it out from within the post. Make sure that each script is defined by its function name such as:

To include a JavaScript inside a post, you need to combine both the call to the script file with the call to the JavaScript itself.

Creating a Multiple Script File

You might have a collection of scripts that you call from time to time, like a scripts which calculate time zones or distance, or maybe scripts that create some effect or accent on your page. For reoccurring JavaScripts, consider grouping them together into one file.

Let’s call our group JavaScripts file scriptfile.js (choose whatever you want) and say it contains the updatepage, emailpage, and caltimezone scripts. As you copy each JavaScript into the file, make sure it has a unique function name such as with this condensed version:

Place the script file of all the JavaScripts in the head of the header.php template file between the meta tags and the style sheet link. It will just sit there, loaded into the browser’s memory, waiting for one of the scripts inside to be called.

In the spot in your post where you would like to use the JavaScript, call it as follows:

Troubleshooting JavaScript

If you are having trouble with including JavaScripts inside a post, use the Text Control Plugin which allows you to control on a global or per post basis the ability to turn off WordPress’s automatic formatting features which can quickly turn a code into something readable instead of executable. Set the options on the post that you will be using the JavaScript on to have No Formatting or Markup or nl2br and No Character Formatting. You may have to experiment to get it to work. As a reminder, when using the Text Control Plugin, you must first Save and Continue Editing the post in order to see the Text Control Plugin options.

If you choose No Formatting, your post’s text will all run together, so you will have to add paragraph tags and other HTML tags in order to format your page as WordPress normally does that for you.

If your JavaScript doesn’t work, triple check that you haven’t made any errors during the cut and paste into a group or single file. Be sure you used a text editor and not a word processing program to create the JavaScript file. Check the name of the function in the script file as well as on your site. Not all JavaScripts may work, and could possibly conflict with your PHP commands, but this is very rare.

If you are really having trouble with this, the WordPress Support Forum may be able to help.

Источник

How to Easily Add JavaScript in WordPress Pages or Posts (3 Methods)

Last updated on August 19th, 2022 by Editorial Staff | Reader Disclosure Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

Do you want to add JavaScript in your WordPress pages or posts?

Sometimes you may need to add JavaScript code to your entire website or into specific pages and posts. By default, WordPress does not let you add code directly in your posts.

In this article, we’ll show you how to add JavaScript in WordPress pages or posts easily.

What is JavaScript?

JavaScript is a programming language that runs on the user’s browser, not on your server. This client-side programming allows developers to do a lot of cool things without slowing down your website.

If you want to embed a video player, add calculators, or some other third-party service, then you will be often asked to copy and paste a JavaScript code snippet into your WordPress website.

A typical JavaScript code snippet may look like this:

But, if you add a javascript code snippet to a WordPress post or page, then it will be deleted by WordPress when you try to save it.

That being said, let’s see how you can easily add JavaScript to WordPress pages or posts without breaking your website. You can use the quick links below to jump straight to the method you want to use.

Method 1. Add JavaScript Anywhere on Your WordPress Site Using WPCode

Sometimes a plugin or tool will need you to copy and paste a JavaScript code snippet into your website to work correctly.

Usually, these scripts will go in the header or footer section of your WordPress blog, so the code is loaded on every page view.

For example, when you install Google Analytics, the code needs to run on every page of your website, so it can track your website visitors.

You can manually add the code to your header.php or footer.php files, but these changes will be overwritten when you update or change your theme.

That’s why we recommend using WPCode to add JavaScript anywhere on your entire WordPress site.

WPCode is the most powerful code snippet plugin available for WordPress. It lets you easily add custom code to any area of your site, and best of all, it’s free.

First, you need to install and activate the free WPCode plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Once activated, you need to go to Code Snippets » Headers & Footer.

Here you will see three separate fields labeled ‘Header,’ ‘Body,’ and ‘Footer.’

You can now add your JavaScript code to one of these boxes, and then simply click on the ‘Save’ button. WPCode will now automatically load the code you added to the every page of your website.

You can also add code snippets to any other place on your site, such as inside posts or pages.

To do this, simply go to Code Snippets » + Add Snippet and then click on ‘Create Your Own.’

You will now see a ‘Create Custom Snippet’ page where you can add a title for your code and paste it into the ‘Code Preview’ box.

After that, select ‘JavaScript Snippet’ from the ‘Code Type’ dropdown menu.

Then, just scroll until you find the ‘Insertion’ section.

All you have to do now is select a ‘Location’ for the code from the dropdown menu. Find ‘Page, Post, Custom Post Type’ and choose where in the page or post you want the code to appear.

If you choose to have WPCode insert the snippet before or after a paragraph, you will be able to choose which specific paragraph in the post it will appear before or after.

For example, if you put 1 in the ‘Insert Number’ field, the code snippet will appear before or after the first paragraph. Use 2 for the second paragraph, and so on.

After that, you just have to click the toggle near the top of the screen to switch to ‘Active,’ and then click ‘Save Snippet’ button beside it.

That’s all it takes to make your code snippet live on site!

Method 2. Adding JavaScript Code to WordPress Manually Using Code

With this method, you need to add code to your WordPress files. If you haven’t done this before, then check out our guide on how to copy and paste code in WordPress.

First, we’ll show you how to add code to your WordPress site’s header. You need to copy the following code and add it to your functions.php, in a site-specific plugin, or by using a code snippets plugin.

Adding JavaScript to a Specific WordPress Post Using Code

If you only want to add JavaScript to a single WordPress post, then you will need to add conditional logic to the code.

Take a look at the following code snippet:

The code above will only run the JavaScript if the post ID matches ’5’. Make sure you replace the ’5’ with your own post ID.

To find the post ID open up the post where you want the JavaScript to run. Then, in the URL of the page, you’ll find the post ID.

Adding JavaScript to a Specific WordPress Page Using Code

If you only want to add JavaScript to a single WordPress page, then you will need to add conditional logic to the code, just like above.

Take a look at the following example:

The code above will only run the JavaScript if the page ID is ’10’. Make sure you replace the ’10’ with your own page ID.

You can find the page ID using the same method as above. Simply open the page you want the JavaScript to run and note the page ID in the URL.

Adding JavaScript to a Specific WordPress Post or Page Using Code in the Footer

If you want the JavaScript to run in your site footer instead of the header, then you can add the following code snippet to your website.

This code snippet hooks into wp_footer instead of wp_head . You can also add conditional tags to add javaScript to specific posts and pages like the examples above.

Note: These methods are for beginners and website owners. If you are learning WordPress theme or plugin development, then you need to properly enqueue JavaScript and stylesheets to your projects.

We hope this article helped you learn how to easily add JavaScript in WordPress pages or posts. You may also want to see our guide on how to choose the best blogging platform and our expert picks of the best AI chatbot software for your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Источник

3 ways to insert JavaScript into WordPress pages or posts

The GoDaddy product information in this article is outdated and currently under review for accuracy. For the latest up-to-date product information please visit godaddy.com

• Twitter
• Facebook
• LinkedIn
• Pinterest
• RSS

Editor’s note: This JavaScript post was originally published on September 14, 2015 and updated on September 16, 2018.

The WordPress editor both autoformats your text and restricts the types of tags that are inserted into your content. While some users who are attempting to insert scripts find this frustrating, it’s not a design flaw. Blocking the ability to insert scripts is a security feature.

The purpose of a content management system (CMS) like WordPress is to separate content from design. Ensuring that the administrator sets formatting and layout options at the theme level prevents the WordPress site’s authors from modifying the design.

With JavaScript, you can apply styling, layout and content changes outside the boundaries of the page or post you are authoring. In fact, there would be no restrictions from uploading malicious scripts by your authors.

While this is a good restriction for the average author, there are valid reasons to add JavaScript to specific pages or posts:

• Players — Some audio and video players require a script to display the player within the page.
• Interactive pages — Interactive pages and calculators require embedding of third-party scripts within a site.
• Third-party forms — Subscription and lead generation forms often have remotely loaded scripts that need to be included in the header, body or footer of the page.

How do you add JavaScript to WordPress pages and posts?

We’ll take a look at three options for adding JavaScript to WordPress:

1. Disable WordPress filtering of script tags
2. Using a plugin to enable script loading
3. Using Advanced Custom Fields

Let’s get into the details.

Method 1: Disable WordPress filtering of script tags

If you trust that your authors won’t get themselves into trouble, you can disable the blocking of script tags from within JavaScript. In wp-config.php within your root web directory, you’ll need to enable custom tags by adding the following line of code:

Within your functions.php page, you can add the following code:

Note: Once again, we have to warn against using the above method. Enabling the script tag via this method disables the security feature sitewide for any user permission level.

Method 2: Use a plugin to enable script includes

There are plenty of WordPress JavaScript plugins out there for managing your pages or posts. At times, you will need to load your JavaScript within the tags of the page or after your content adjacent to your

Источник

How to Add Javascript in a WordPress Post or Page

Last updated: August 10, 2013

One of my readers asked me the following question:

“How can I run a JavaScript within a WordPress post?”

In this short post I have explained how I use Javascript in my WordPress posts.

Adding javascript in WordPress post is really simple. You just have to switch to the TEXT view in the editor and paste the JavaScript code and that’s pretty much it.

When the Script is in an External File

If the JavaScript code is in an external file then you need to include it first. You will need to add a bit of code similar to the following in your “header.php” or “footer.php” file to include the external JavaScript file:

I prefer to add javascript in the footer for site performance factors. You can paste it in the HTML view of the post too if this file is only needed in that one post. Replace “http://www.your-domain-name.com/scripts/my-javascript.js” with the actual location of the JavaScript file.

After you have included the file you can use any functions that is defined in that file. Use something similar to the following:

Replace “custom_function();” with the actual name of the function.

Directly Adding Your JavaScript Code

If you have a bit of JavaScript code that you want to execute directly on a post or page then just add your code in the “Text” view of the editor like the following:

Video Tutorial (Adding JavaScript)

Related Posts

WordPress Javascript, WordPress

Reader Interactions

Comments (22 responses)

Hey,
Thank you very much . You really saved me.

A quick word to the wise: If you copy/paste the script tag from the first code box, be sure to add the missing double quote after type=”text/javascript

Thanks for post but super confused. This post starts out by saying its as easy as entering text. That’s not working for me. Then the video lays out like four steps that are required.

I only want a price comparison tool to appear in a single post. Tried a JS plugin and that failed as well. Anyone feel like helping a newbie out? 😉

For site-wide alterations, I always prefer to use a plugin rather than a manual edit, but for a single time need, like when having a special piece of code to add to a specific post or page, then this would work like a treat.

Great tutorial, admin!
Thanks!

Very simple and help. We will javascript chat widget to our website. Thanks dude.

Источник