For security reasons, standard users usually cannot embed JavaS­cript in WordPress. However, if you want to make your website more in­ter­act­ive, scripts are a fast and con­veni­ent solution. We’ll show you the options you have in order to work with JavaS­cript in WordPress.

Cheap domain names – buy yours now
  • Free website pro­tec­tion with SSL Wildcard included
  • Free private re­gis­tra­tion for greater privacy
  • Free Domain Connect for easy DNS setup

When does it make sense to add JavaS­cript to WordPress?

WordPress is a classic content man­age­ment system that separates content and design. Basically, this strict sep­ar­a­tion is practical and makes sense — ad­min­is­trat­ors can manage the technical and visual aspects, while authors can focus entirely on the content design. In principle, blocking JavaS­cript and other scripts for normal backend users in WordPress is a sound concept, es­pe­cially since it minimises the risk of malicious code.

Tip

A suitable web address is just as important as the choice of a suitable content man­age­ment system. Register your in­di­vidu­al domain today and benefit from ad­vant­ages like a free SSL / TLS cer­ti­fic­ate or a domain lock.

If in­ter­act­ive content is to become an integral part of content design, there’s prac­tic­ally no way around using JavaS­cript. Various audio and video players only work with the ap­pro­pri­ate script. The same also applies to many third-party forms that are used, for example, for lead gen­er­a­tion. If you want to rely more on other in­ter­act­ive elements such as chats, surveys or knowledge tests, you should def­in­itely add JavaS­cript to WordPress.

Available options to embed JavaS­cript in WordPress

There are several ways to enable users of WordPress to add JavaS­cript. Amongst the best and simplest solutions are the following:

  1. Disable script tag filtering
  2. Embed JavaS­cript in WordPress headers
  3. Embed JavaS­cript in WordPress footers
  4. Enable JavaS­cript with a WordPress plugin
Tip

Are you still looking for a suitable hosting en­vir­on­ment for your WordPress project? With Hosting for WordPress from IONOS, you get access to powerful, fail-safe hardware with fast SSD storage, caching and CDN.

Option 1: Disable script tag filtering

You can disable the default script tag blocking for all users and the entire WordPress project. However, you should only disable this security feature if all au­thor­ised users are ex­per­i­enced with scripts. Otherwise, you increase the risk of malicious code resulting from rogue scripts.

To turn off script tag filtering, the first step is to add the following line to the wp-config.php con­fig­ur­a­tion file:

define( 'CUSTOM_TAGS', true );
php

After that, extend the functions.php theme file with the following entry:

function add_scriptfilter( $string ) {global $allowedtags;$allowedtags['script'] = array( 'src' => array () );return $string;}add_filter( 'pre_kses', 'add_scriptfilter' );
php

Afterward, all users can add JavaS­cript to WordPress by including the ap­pro­pri­ate script tags in the desired location on a page.

Tip

You can also read about the basic procedure for embedding JavaS­cript in HTML in the Digital Guide.

Option 2: Embed JavaS­cript in WordPress headers

Don’t want to create the option to embed JavaS­cript in WordPress for all au­thor­ised users? You can also work with manual script in­teg­ra­tion via headers. With this method, the code must be inserted manually in the functions.php, so that in­di­vidu­al per­mis­sions can be set.

If you want to include a script for the entire website in the header, for example, the code for a tracking tool, add the following input to the theme con­fig­ur­a­tion file:

function wpb_hook_javascript() {
	?>
		<script>
			// JavaScript-Code
		</script>
	<?php
}
add_action('wp_head', 'wpb_hook_javascript');
php

Of course, you can also embed the desired JavaS­cript code into a single page. You just need the ID of the desired page, which you specify in the context of a simple `if´ statement to do this. For the WordPress page with the ID `5´, for example, the ap­pro­pri­ate entry in functions.php looks like this:

function wpb_hook_javascript() {
	if (is_page ('10')) { 
		?>
			<script type="text/javascript">
				// JavaScript-Code
			</script>
		<?php
	}
}
add_action('wp_head', 'wpb_hook_javascript');
php
Tip

Before adding global JavaS­cript code to your project, be sure to create a WordPress backup!

Option 3: Embed JavaS­cript in the footer of your WordPress project

Instead of in­teg­rat­ing JavaS­cript via the header of your WordPress website, you can also place the scripts in the footer. In this case, replace the `wp_head´ parameter with `wp_footer´:

function wpb_hook_javascript() {
	?>
		<script>
			// JavaScript-Code
		</script>
	<?php
}
add_action('wp_footer', 'wpb_hook_javascript');
php

Like the previous variant, scripts can only be embedded in in­di­vidu­al pages by adding an `if´ statement and spe­cify­ing the ID:

function wpb_hook_javascript() {
	if (is_page ('10')) { 
		?>
			<script type="text/javascript">
				// JavaScript-Code
			</script>
		<?php
	}
}
add_action('wp_footer', 'wpb_hook_javascript');
php
Tip

Plugins are an ele­ment­ary part of WordPress, but which ex­ten­sions are worth­while? In the Digital Guide, you’ll find articles on the various cat­egor­ies including the most popular plugins:

Option 4: Embed JavaS­cript with a WordPress plugin

If manual theme file cus­tom­isa­tion isn’t possible or is too com­plic­ated for you, you can also fall back on WordPress plugins to add JavaS­cript to your project. One of the most popular ex­ten­sions for this is Scripts n Styles. You install the script plugin as follows:

  1. Log in to the WordPress backend.
  2. Select `Plugins´ and then `Install´ in the side menu on the left.
  3. Search for “Scripts n Styles” and press `Install Now´ on the matching search result.
  4. After the in­stall­a­tion, click `Activate´.
Image: WordPress backend: Installing `Scripts n Styles´
WordPress backend: In­stalling `Scripts n Styles´.

After in­stall­a­tion, you can find the WordPress JavaS­cript plugin in the `Tools´ section of the side menu on the left. When you access the extension’s menu, you can choose to embed snippets in HTML, CSS or JavaS­cript in your WordPress project. For JavaS­cript, you have three options:

  • Cof­feeScript
  • Scripts in the header (`for the head element´)
  • Scripts in the footer (`end of the body element´)
Image: WordPress: Embed JavaScript code with the `Scripts n Styles´ plugin
WordPress: Embed JavaS­cript code with the `Scripts n Styles´ plugin.
Summary

You can add more in­ter­activ­ity to your WordPress project with JavaS­cript code. If you want to give all users the option to include scripts, you can disable script tags or use a plugin. Al­tern­at­ively, users with access to functions.php have the option to embed code in headers or footers.

Go to Main Menu