Insert JavaScript & CSS

The insert JavaScript and CSS plugin came about while working on a site where most of the posts needed individual JavaScript to work right. Originally this was a very simple plugin, but it has expanded to include the add JavaScript and CSS into the <head> sections of posts and also link to external JS and CSS files.

How to Install

Rather than copy and paste, head over to another page to see how to upload and activate the zip file you’ll get from us. Once you’re done, come back here to learn how to use this plugin… we’ll wait.

Using the Plugin

JS / CSS button

JS / CSS button on the post edit screen

Once uploaded and activated you should see a new button just to the right of the Add Media button on the post editing page. It should look like the image to the right.

Click on the JS / CSS button and you will see a jQuery dialog pop-up. From there you can insert either inline JavaScript and CSS or link to external files.

If you want to manually type JavaScript or CSS for the post you’re working on, enter into the appropriate inline tab. Any code typed into the inline JavaScript will be included in <script> tags in the <head> section of your post. CSS entered as inline will be wrapped in <style> tags. You do not need to include <script> or <style>. The plugin will do it for you.

If you’d rather link to external resources you can do so, either by clicking on the list of registered scripts or styles, or by typing the address into the box on the bottom.

The lists of registered scripts and styles come from scripts and styles that have been registered using the wp_register_script or wp_register_style functions.

Screen Shots

Download

Add to Cart

23 Responses to “Insert JavaScript & CSS

    • December 13, 2015 at 5:34 pm

      @Mike et all –
      It’s been a while, but the plugin has been updated and should work with WordPress 4+ now. Just tested it with WP 4.4 on this site and it’s working just like it should.

    • December 14, 2014 at 12:17 pm

      Hi Ryan:
      My ‘Insert JavaScript & CSS’ plugin no longer works. I think it is because of incompatibilities with the new WP upgrades. I don’t seem to be able to update the plugin either and I can no longer use it. This was a very helpful plugin when it worked. Please help.

      Thank you,
      Mike

    • December 11, 2014 at 2:14 pm

      Oh, the update link was there and I tried it but got this message:
      Update Plugin
      Downloading update from http://reliti.com/updateCheck/?slug=reliti-insert-js-css/class-insert-js-css.php…

      Download failed. Not Found

      Return to Plugins page

      What do I do now?
      Thanks again,
      Mike

    • July 14, 2014 at 9:48 am

      […] key to this WordPress mini-wizardry is the use of the plugin Insert JS/CSS which allows JavaScript and CSS code to be inserted into the header of the specific post or page […]

    • June 27, 2014 at 11:21 am

      @Michael
      Looks like there are some JavaScript errors on the page, which may be blocking the script you want to run from running.

      Getting an error that twitterWidgets is not defined, and that’s happening on your home page as well so not sure where that’s coming from.

      Also getting an unexpected token < error and a Ewa is not defined error.

      If you view source on your page on around line 258 a script tag opens with myExcel div inside it. It looks like another script tag opens before that one closes which, I assume, would cause the < error.

      And then on line 292 I don’t see the Ewa object getting defined anywhere.

      tl;dr version – looks like an issue with the JavaScript you’re pasting.

    • June 13, 2014 at 12:49 pm

      Nothing is happening, i want to see a copy of our trade log on this page http://traderoomplus.com/trade-log-java-test/

      Cyberchimps neuro pro theme

      Any suggestions welcommed

    • June 13, 2014 at 10:33 am

      @Michael
      Any errors? What’s happening or not happening?

    • June 13, 2014 at 9:49 am

      I have purchased insert Javascript so that I can insert javascript from excel on onedrive. The objective is so that our trade log (onedrive excel file) will appear on our website as a single page or post.

      I am not a javascript user and I’ve tried to insert it but i’m not doing it right.

      Here is the script I’m inserting – can you please advise? Thxs

      	/*
      	 * This code uses the Microsoft Office Excel Javascript object model to programmatically insert the
      	 * Excel Web App into a div with id=myExcelDiv. The full API is documented at
      	 * http://msdn.microsoft.com/en-US/library/hh315812.aspx. There you can find out how to programmatically get
      	 * values from your Excel file and how to use the rest of the object model. 
      	 */
      
      	// Use this file token to reference Trade Room Plus Trade Log.xlsx in Excel's APIs
      	var fileToken = "SDA7C179655160CE5B!188/-6358667722806473125/t=0&s=0&v=!ACB1h6_xEQHPabE";
      
      	// run the Excel load handler on page load
      	if (window.attachEvent) {
      		window.attachEvent("onload", loadEwaOnPageLoad);
      	} else {
      		window.addEventListener("DOMContentLoaded", loadEwaOnPageLoad, false);
      	}
      
      	function loadEwaOnPageLoad() {
      		var props = {
      			uiOptions: {
      				showDownloadButton: false,
      				showGridlines: false,
      				showRowColumnHeaders: false,
      				selectedCell: "'Trade Log '!AE351"
      			},
      			interactivityOptions: {
      				allowTypingAndFormulaEntry: false
      			}
      		};
      
      		Ewa.EwaControl.loadEwaAsync(fileToken, "myExcelDiv", props, onEwaLoaded);
      	}
      
      	function onEwaLoaded(result) {
      		/*
      		 * Add code here to interact with the embedded Excel web app.
      		 * Find out more at http://msdn.microsoft.com/en-US/library/hh315812.aspx.
      		 */
      	}
      
    • June 11, 2014 at 9:37 pm

      […] Insert JavaScript & CSS […]

    • June 11, 2014 at 9:33 pm

      Yup, looked like there was an issue with WP3.9. One of the JavaScript libraries that this plugin uses, and had been automatically enqueued by WordPress, is no longer automatically enqueued.

      It’s now being enqueued by the plugin and the button is back to working like it should.

      You should see a notice in your dashboard to update within the next 12 hours or so or you can use the download link from the “thank you” email you received when you ordered.

    • June 11, 2014 at 8:56 pm

      @Paul
      Looks like the same issue Mike is having. WordPress 3.9.1, correct? I’ll dig a bit and see what’s going on. It was working with WP3.9 on our test servers, but maybe something changed.

    • June 11, 2014 at 8:55 pm

      @Mike

      Haven’t had any other reports of it not working with recent updates. We tested it with WP 3.9 when it was released and didn’t come across any issues.

      What happens when you press the button? Just nothing?

      I’ll take a look tomorrow and see if I can track down what might be happening.

    • June 6, 2014 at 8:27 pm

      The ‘Insert JS / CSS’ button is not working anymore. I recently upgraded my word press. Is there an upgraded version of this plugin that will work.

      Thanks,
      Mike Longo

    • Paul Tabachneck
      June 2, 2014 at 8:39 am

      I added your plugin, installed and activated. I can see the button, but when I click it, no jquery comes up.

    • October 13, 2013 at 2:40 pm

      Is there a way to use this to put code into a page body?

      • October 13, 2013 at 2:51 pm

        What are you wanting to insert into the page body? The JS or CSS? Any reason you don’t want in in the head?

    • qqruza
      September 25, 2013 at 4:08 am

      Any possibility to get a multi site license?

      • September 25, 2013 at 3:57 pm

        Thanks for the reminder. Been meaning to add a multisite license option, and it’s there now. If you need more than 5 let me know and we’ll see what we can work out.

    • September 2, 2013 at 6:32 am

      @Mike Since we’re talking scripts, and as you’ve found WordPress filters those out of comments, I’ll shoot you an email to see what we can do to get this working.

    • September 2, 2013 at 12:39 am

      your comment program will not let me add my script so I’ll add it without the brackets:

      script type=”text/javascript” src=”/wp-content/uploads/javascripts/TEAbanner.js

      /script

    • September 2, 2013 at 12:37 am

      I just purchased your new js / css plugin and I get the button on the pages. I can add the script to the inline Javascript but I can’t get it to work. I think my URLS are wrong. I hope you can help. I certainly would appreciate it.
      Inline Javascript:
      *//*

      The URL in my script to call up banners:
      var banners = [
      new banner(‘image’, ‘http://teaeducationacademy.com’, ‘/wp-content/uploads/js_banners/slideshow_class1.jpg’, ’30/04/2019′, ‘top’)
      ]

      Thanks for your consideration,
      Mike

      Then I added this in the js to call up banners:

    • September 2, 2013 at 12:36 am

      oops the inline javascript I added was:
      /////

    • September 2, 2013 at 12:32 am

      I just purchased your new js / css plugin and I get the button on the pages. I can add the script to the inline Javascript but I can’t get it to work. I think my URLS are wrong. I hope you can help. I certainly would appreciate it.
      Inline Javascript:

      The URL in my script to call up banners:
      var banners = [
      new banner(‘image’, ‘http://teaeducationacademy.com’, ‘/wp-content/uploads/js_banners/slideshow_class1.jpg’, ’30/04/2019′, ‘top’)
      ]

      Thanks for your consideration,
      Mike

      Then I added this in the js to call up banners:

Leave a Reply