How to add JavaScript code inside a WordPress post?

systematically learnedBuilding websiteTechnicalSEOExperts know how to use JavaScript programs easily.

There are many easy-to-use JavaScript codes shared by others on the Internet.

if you canWordpressAdding JS code to the article will definitely make the article colorful.

How to add JS code to WordPress articles

Adding JavaScript code to a WordPress post is very simple.

Next,Chen WeiliangWill share with you:How to add JavaScript code to WordPress posts?

There are usually 2 ways to add JS code:

1. Add JS code directly to WordPress posts
2. Call JS code in WordPress article after writing JS file

1) Add JS code directly to the WordPress post

The first method, writing JavaScript directly in the WordPress post.

Here is an example of printing the text "Hello World!" ▼

<script type="text/javascript">// <![CDATA[
document.write("Hello World!")
// ]]></script>

This is in a WordPress post that displays "Hello World!" after executing JavaScript ▼

2) After writing the JS file, call the JS code in the WordPress article

For the second method, write the JavaScript code to a separate file.

Then in the WordPress post where the JavaScript needs to be inserted, call the JavaScript file through the WordPress text editor.

The following example is in a WordPress post, printing "Hello World" text ▼

<script type="text/javascript" src="https://img.chenweiliang.com/javascript/hello.js">// <![CDATA[
// ]]></script>

Content of JavaScript file hello.js ▼

document.write("Hello World");

Adding JavaScript code to a WordPress post shows the results ▼

WordPress calls JS code for today's date

There is a lot of fun and useful JavaScript code on the Internet.

Now give an example of how to use them?

Print today's date in WordPress posts.

Insert the following JavaScript date.js file into your WordPress post ▼

<script type="text/javascript" src="https://img.chenweiliang.com/javascript/date.js"></script>
<script type="text/javascript">// <![CDATA[
     // call function if required.
// ]]></script>

Below is the JavaScript content of the date.js file ▼

var calendarDate = getCalendarDate();

document.write("Today is: " + calendarDate);

function getCalendarDate()
{
   var months = new Array(13);
   months[0]  = "January";
   months[1]  = "February";
   months[2]  = "March";
   months[3]  = "April";
   months[4]  = "May";
   months[5]  = "June";
   months[6]  = "July";
   months[7]  = "August";
   months[8]  = "September";
   months[9]  = "October";
   months[10] = "November";
   months[11] = "December";
   var now         = new Date();
   var monthnumber = now.getMonth();
   var monthname   = months[monthnumber];
   var monthday    = now.getDate();
   var year        = now.getYear();
   if(year < 2000) { year = year + 1900; }
   var dateString = monthname +
                    ' ' +
                    monthday +
                    ', ' +
                    year;
   return dateString;
} // function getCalendarDate()

Here are the results of JavaScript executing today's date in a WordPress post ▼

Below is the result of the JavaScript file date.js executed in this article ▼

Attention points

To insert JS code into a post, you need to switch the WordPress editor to text mode.

special attention和之间不能有换行。

If there is a line break, WordPress will automatically process it as a paragraph, and automatically add a p tag that causes the JS script code to fail.

There are more articles about WordPress JavaScript code here ▼

🔗How to specify article pages to load JavaScript/CSS code in WordPress?

🔗How to make WordPress delay loading JavaScript to speed up page rendering?

🔗How to properly introduce JavaScript in WordPress? Custom loading of JS and CSS files