Skip to main content Skip to navigation
Web Communication Custom JavaScript

Custom JavaScript

Overview

There are several ways JavaScript can be added to WordPress sites at WSU. Implementation often depends on the complexity of the script, the user applying the script, and the source of the script. As mentioned in the plugin criteria guide, maintaining the security of all sites is the highest priority and this helps guide some of the restrictions around adding JavaScript code.

Note: JavaScript can not be added directly to post or page content. The WordPress editor will filter all <script> tags as the content is stored in the database to avoid possible XSS security issues.

Shortcode

The most common need for custom JavaScript is to embed a script created by a 3rd party such as Twitter or Facebook. In cases like this, where a pattern can be established so that the same script may be used on many different pages, a custom shortcode can be useful. WSUWP has several shortcodes already available via the WSUWP Embeds and Shortcake Bakery plugins.

If you have a script that needs to be embedded on one or more pages, and it seems like it fits this use case, reach out to Web Communication via weekly open labs or on the WSU Web Slack to discuss possibilities.

Custom JavaScript Editor

An option for adding custom JavaScript to individual sites is available where there is a need for JavaScript code not hosted elsewhere. The JavaScript editor is available under Appearance -> Custom JavaScript when the Custom JavaScript Editor plugin is activated on a site and when access to the editor has been enabled for a user.

Code entered in the JavaScript editor will be printed inline at the end of each page on the site.

To have access enabled for your account, please be prepared to show proficiency with JavaScript and agree to some basic guidelines:

  • Wrap all code in an Immediately-Invoked Function Expression to help provide a barrier between this JavaScript and anything else that may be loaded on the page as part of a plugin or theme.
  • Use jQuery instead of $ when accessing jQuery directly. By default, WordPress puts jQuery in no conflict model.
  • Please run large blocks of code created elsewhere by the web team before implementation. Ideally the JavaScript editor is used for smaller functional tasks.
  • Follow the jQuery JavaScript Style Guide as closely as possible. This helps anyone working with the code in the future.
  • Use the classes attached to <body> to determine when an entire script should load. Scripts that run on every page unintentionally can cause issues or slow down sites.

If you would like access to the Custom JavaScript Editor, please reach out to Web Communication via weekly open labs or on the WSU Web Slack with an example of the code you would like to include on a site. After quick review and reiteration of the guidelines, access can be enabled for your user account.

Child Theme

In some cases, the JavaScript may be too complex for what the Custom JavaScript Editor provides. It may be that one or more libraries are required for your script to run or a change must be made to an HTML template to allow for the correct behavior. Once customization has reached this level, creating a proper child theme may be the most viable option.

See the guidelines on building a custom theme at WSU and reach out to Web Communication if this seems like the right option for you. Examples of existing child themes can be found at the WSU GitHub organization.