For security reasons, standard users usually cannot embed JavaScript in WordPress. However, if you want to make your website more in­ter­ac­tive, scripts are a fast and con­ve­nient solution. We’ll show you the options you have in order to work with JavaScript in WordPress.

$1 Domain Names – Register yours today!
  • Simple reg­is­tra­tion
  • Premium TLDs at great prices
  • 24/7 personal con­sul­tant included
  • Free privacy pro­tec­tion for eligible domains

When does it make sense to add JavaScript to WordPress?

WordPress is a classic content man­age­ment system that separates content and design. Basically, this strict sep­a­ra­tion is practical and makes sense — ad­min­is­tra­tors can manage the technical and visual aspects, while authors can focus entirely on the content design. In principle, blocking JavaScript and other scripts for normal backend users in WordPress is a sound concept, es­pe­cial­ly since it minimizes 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­vid­ual domain today and benefit from ad­van­tages like a free SSL / TLS cer­tifi­cate or a domain lock.

If in­ter­ac­tive content is to become an integral part of content design, there’s prac­ti­cal­ly no way around using JavaScript. 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­ac­tive elements such as chats, surveys or knowledge tests, you should def­i­nite­ly add JavaScript to WordPress.

Available options to embed JavaScript in WordPress

There are several ways to enable users of WordPress to add JavaScript. Among the best and simplest solutions are the following:

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

Are you still looking for a suitable hosting en­vi­ron­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­tho­rized users are ex­pe­ri­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­u­ra­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 JavaScript 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 JavaScript in HTML in the Digital Guide.

Option 2: Embed JavaScript in WordPress headers

Don’t want to create the option to embed JavaScript in WordPress for all au­tho­rized users? You can also work with manual script in­te­gra­tion via headers. With this method, the code must be inserted manually in the functions.php, so that in­di­vid­ual 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­u­ra­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 JavaScript 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 JavaScript code to your project, be sure to create a WordPress backup!

Option 3: Embed JavaScript in the footer of your WordPress project

Instead of in­te­grat­ing JavaScript 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­vid­ual pages by adding an “if” statement and spec­i­fy­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 el­e­men­tary part of WordPress, but which ex­ten­sions are worth­while? In the Digital Guide, you’ll find articles on the various cat­e­gories including the most popular plugins:

Option 4: Embed JavaScript with a WordPress plugin

If manual theme file cus­tomiza­tion isn’t possible or is too com­pli­cat­ed for you, you can also fall back on WordPress plugins to add JavaScript 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­stal­la­tion, click “Activate”.
Image: WordPress backend: Installing “Scripts n Styles”
WordPress backend: In­stalling “Scripts n Styles”.

After in­stal­la­tion, you can find the WordPress JavaScript 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 JavaScript in your WordPress project. For JavaScript, you have three options:

  • Cof­fee­Script
  • 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 JavaScript code with the “Scripts n Styles” plugin.
Summary
You can add more in­ter­ac­tiv­i­ty to your WordPress project with JavaScript code. If you want to give all users the option to include scripts, you can disable script tags or use a plugin. Al­ter­na­tive­ly, users with access to functions.php have the option to embed code in headers or footers.
Go to Main Menu