How to add simple JavaScript code in a single WordPress post/page

In addition to HTML and CSS, JavaScript is something that every web developer should be involved in. This programming language is quite easy to learn, yet it will allow you to program your website and expand its functionality. Every modern browser supports JavaScript and no one will ask you to install additional browser plugins in order to get the content.

Even if you don’t speak JavaScript language fluently, sooner or later you will stumble upon its traces in WordPress. Your theme will use it, your plugins will use it and you will find it very useful if you try to expand your site and make it more user-friendly.

There are endless possibilities with JavaScript. Just to show you an example, this is how you can add extra content to copied text with JavaScript.

You don’t have to know how to code to take advantage of scripts on your WordPress website. You can easily find a code on the web, just like the one we have shown you and embed it where needed. But you will have to know how to add the code in your WordPress correctly.

Don’t worry; it is really simple and you’ll have your code executed in a minute.

Add a simple JavaScript code:

If you have a small piece of code which you only want to execute in one post/page, you really shouldn’t have problems with that. All you have to do is take the code and paste it in your Text Editor.

What you need to have in mind is that JavaScript code must be embedded within corresponding <script type=”text/javascript”> </script> tags in order for it to work. If you take the code and leave out those tags, your code will not run, but instead, it will be displayed in your post as a regular text.

Here’s an example:

<script type="text/javascript">

var example = "This is JavaScript";

alert(" The value of variable example is: " + example);

</script>

 

Another simple example will change the text in paragraph once a user clicks on the button:

<script>

function myFunction() {

document.getElementById("demo").innerHTML = "This has changed.";

}

</script>

<p id="demo">Change this text by clicking on the button.</p>

<button type="button" onclick="myFunction()">Click</button>

 

Change this text by clicking on the button.

In some case,s it will be enough just to enter the code directly into a post, like in previous examples. Usually, if you’re working on a theme or a plugin, you will need a larger block of code which will do something for your site. If you have browsed your theme’s and plugin’s directories, you have probably seen that JavaScript codes are stored in separate files. If the code is stored in another file, you will need to include that file on the page where you want your code to be executed.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *