Javascript in Wordpress post

I have been looking for a way to add javascript in wordpress post. This seems an advanced technique as in most cases you write text not code in a post. I also see articles saying you cannot embed javacript code in a wordpress post. For example, this post says:

Now, 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.

In other articles, they say you should use some plugins to include javascript in a post. But I want to add javascript to wordpress without plugin, can I? I continue to find a way to inline javascript in wordpress posts. I even find complex techniques that seem to be used by wordpress gurus in this post. In that post, they teach you quite a few methods to use custom javascript in wordpress including using wordpress wp_enqueue_script() function to enqueue a script,and printing out inline js code with the wp_head or wp_footer action hook. These methods all require you to write php code in your theme’s functions.php file.

I’m scared by those advanced methods. I just want to embed custom javascript in wordpress posts when I compose the posts. I do not want to touch any php code of wordpress. Finally, I got this post which says you can write the js code right in the text view of the wordpress editor. My wordpress uses Gutenberg editor as the default editor, which does not have a text view. But I can switch from the Visual Editor to the Code Editor(by clicking the three-dot icon on the top-right corner of the editor. ). I tried to insert a piece of javascript code in the post with the code editor:

<script>
alert("hello world");
</script>

But when I clicked the Update/Publish button to publish/update the post, the script became:

<script><br />
alert("hello world");<br />
</script>

This broke the javascript syntax and the js code did not work. Why the wordpress editor automatically adds the <br> tags at the end of every line? I searched the solution to stop wordpress from adding tags automatically until I got this post. According to that post, I should add the following code in functions.php to stop this default behavior:

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

Unfortunately, this method does not work for me. I kept getting the extra <br/> tags. I observed that the Gutenberg editor only adds <br/> for lines inside the <script> tag, not the lines outside the script tag. I finally got the cure from this post: add the following line before and after the script tag:

<!-- /wp:html -->

This post says you can also disable wp from adding the line-breaks automatically by enclosing the js code inside <pre></prev>.

Now, after updating the wordpress post containing the javascript code and accessing it, I see the “hello world”, finally.

In fact, you can not only write javascript code directly in your post, but also link to external js script inside the post. For example, you may want to try jQuery in a post, then you can write the following code in the post:

<!-- wp:html -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
window.onload = function() {
 if (window.jQuery) {   alert("Yeah!");  } 
 else {  alert("Doesn't Work"); }
}
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<p><span class="glyphicon glyphicon-star"></span></p>
<!-- /wp:html -->

In the above example, we include the jQuery js in the post and write some js code to verify the jQuery is indeed loaded and running. We also import an external css to prove the custom css can also be embedded within wordpress posts without bothering to use any plugin or writing code like wp_enqueue_style. In practice, you should load js script near the end of the post to prevent it from delaying the parsing of the html.

Did you like this?
Tip admin with Cryptocurrency