How can I add Javascript (JS) to WordPress pages?

The Digital Marketing team has more than 100 plugins available to use on individual sites. These plugins can be used to add sliders, grids, maps, new toolsets, etc. 

There are times though when a page will need some js that is not already provided in the Flex Theme. If a new bit of js is needed on a single page of a given site, open that page in the WordPress dashboard editor, and click on the "+" sign in order to add a new element. Then find the element for "Raw JS", select it, and add the js required for this specific page in the popup window that appears. Then save the page and view it from the front end to verify that the js is working properly.

If js is needed on multiple pages on a given site, access CSS & JS Toolbox Plus in the left menu bar of the WordPress dashboard. Click on "New Code Block." When the new, blank code block appears, give it a name and add the JS that you need in it.

Once the code has been added, go to the tabbed options on the right of the code block that was just created. Select which page, post, category, etc. that this newly created js code block needs to be added to. For example, if the js in that specific code block needs to work on a given site's homepage just click on the "page" tab, and then find the homepage in the list of pages that appear. Click on the check box for homepage, and then click on the save button in the top right of that code block.  

If the js needs to be added to the entire website, or every page, or every post on the site, click on the the "Aux" tab and click on either "Entire Website," "All Pages," or "All Posts." Then click on the save button in the top right of that code block.

The option of choosing if this js appears in the hook or the footer of the pages and posts in question is available too. The hook is the default, and it can be seen by the "H" in the top row of the code block (next to the "Activate All" button). Click on the "H" to change it to an "F", which will place it in the footer.

One can also choose to have this js added to a specific part of a page or post. To do this, take the name of your code block (whatever it was named when it was created) and place it in the following shortcode in a text box wherever you require it on the page that you need it on:

[cjtoolbox name='Your Codeblock Name']

Click on "Save" in your CSS & JS Toolbox Plus code block, then clear your site's cache by going to the Hummingbird Pro option in the left menu bar in your site's backend WordPress dashboard. Go to the "Caching" option under that, and click on "Clear Cache." Then go to a page that the JS was added to and refresh that page if the new JS function that was added cannot be seen.

Update to include instructions on inserting with WordPress editor and making sure the shortcode is closed if multiple will be used.

Feedback and Knowledge Base