Posted by & filed under WordPress.

Just finished up a WordPress plugin that allows for arbitrary JavaScript and CSS to be included in the head section of posts.

I needed to come up with some small project to put together and I needed this for a larger scale project I’m planning, so it was a good fit.

For now though, I’m waiting on acceptance into the WP plugin library. When that happens I’ll post again. In the meantime, here are some screen shots to review. –Ryan

Icon added into the media area.

Screen where you can enter JavaScript. Tabs on the same page allow for CSS and display a bit of help.

 

70 Responses to “Plugins for inserting JS and CSS into posts”

  1. manuel

    Doesn’t work for me. When I save the javascript code I get only a empty input field back. And I can’t switch between JS, CSS, and help

    Reply
    • Ryan

      What browser are you using? Mac or PC? Do you have JavaScript turned on?

      The close button actually pushes your JS and CSS back to the main window into a hidden field that’s then saved with the post, and that’s all done via a JS script. It’s also a bit of JS that lets you change tabs.

      Reply
    • Ryan

      Odd. I was using Chrome on a PC when I wrote this plugin.

      Can you turn on the JavaScript console in Chrome while you’re trying out the plugin? It’s under the Tools menu on the Wrench icon. It’s possible that there’s some error message popping up.

      Also thinking maybe it’s an issue of a conflict with another plugin.

      Reply
      • manuel

        It could be a problem with FancyBox for WordPress

        Uncaught TypeError: Object [object Object] has no method ‘fancybox’ ijsc-frame.php:43
        (anonymous function) ijsc-frame.php:43
        f.Callbacks.o load-scripts.php:2
        f.Callbacks.p.fireWith load-scripts.php:2
        e.extend.ready load-scripts.php:2
        c.addEventListener.B load-scripts.php:2

        Reply
    • Ryan

      Doesn’t seem to be that. Tried about half a dozen different FancyBox plugins and none of them caused a problem.

      What version of WordPress are you using?

      What’s your website?

      Reply
    • Ryan

      Think I see what’s going on, and it is related to FancyBox. But it’s not causing a problem for me so it’s a bit hard to diagnose.

      Looks like the FancyBox code is loading on the iframe that IJSC pops up, which shouldn’t be happening. I’ll dig a bit and see if I can find why that’s happening.

      Reply
    • Ryan

      Can you reply and fill in your email address so I can send you a file? I’ve got what I think should fix the issue, but since it was already working on my end I’m not 100% sure. Don’t want to post an update to wp.org if it doesn’t fix the problem, but the fancy box code is no longer showing up on the iframe which I’m pretty sure is the cause of your problem.

      Reply
  2. Aaron Williams

    Love the idea of the plugin, trouble is although the CSS is saved along with the page, i dont see the CSS pushed into the head tag on the page… any ideas?

    I have added the following style to the CSS tab (with and without the tags) to override some basic template styles and as a test but this doesnt appear in the head tag:

    #branding #site-description {margin-bottom:1.65625em; background-color:red;}
    h1 {background-color:black;color:red;}

    Reply
  3. CS

    Hello. Saw your plugin and thought it was a great idea! I’ve installed the plugin and activated it. The Javascript and CSS button display and work just fine. I add the js code and css via the appropriate windows. The problem is this “Any code inserted will be included in the ‘head’ section of your page.” isn’t happening and as a result the JavaScript is not being executed (obviously).

    Any ideas?

    Thanks!

    Reply
    • Ryan

      When you click to go back to your post, does the little icon change into color? If you click it again is the code still there? How ’bout if you come back and edit the post later?

      Just trying to narrow down a cause.

      Reply
      • CS

        Hello! Thanks for replying. Yes, the little icon changed to a blueish color. If I click on it, the code is still there. If I come back later to edit, everything is still there.

        Thanks again! Let me know if you can think of anything else.

        Reply
        • Aaron Williams

          Same problem I am having… please let me know if you find a solution – this plugin seems perfect if i could only get it going! Thanks for sharing Nutt

          Reply
      • Ryan

        What theme are y’all using? The hook that this plugin uses to insert the CSS or JS needs the wp_head() function to be called in the theme. I haven’t ever come across a theme that didn’t, but there are a few.

        Reply
        • Ryan

          What about plugins you’re using? 2011 is the same theme I used when I was writing the plugin, so I assume that’s not the issue.

          Reply
          • Aaron Williams

            I deactivated all plugins, no diff.

            I notice the css is included when i am logged in as admin, but not included when i am joe public. Below is the last lines of the head tag for logged in admin, and then joe public.

            —————– Logged in admin ——–

            #wpadminbar { display:none; }

            html { margin-top: 28px !important; }
            * html body { margin-top: 28px !important; }

            —————– Joe public ——–

            Does the admin bar routine nuke anything below the canonical link in the head tag if it is not present? Thanks for following up… good luck

          • Ryan

            Try this version.

            It looks like the query that was looking for either the CSS or JS to include was only looking in posts, and not pages. The version linked should look for CSS or JS in any post type.

          • CS

            Thank you both for your commitment to figuring this out. The new plugin works great (as Aaraon stated).

            Thank you for the donate link as well. More than happy to pay for products that are of value!! :)

  4. Robyn Zelickson

    Hey Ryan,

    Thanks so much for your plugin. It worked perfectly to solve a problem that I’d been pulling my hair out over all morning. Appreciate the help!

    take care,
    robynz

    Reply
  5. Wolfgang

    Nice addin … I have problems with German umlauts in strings in the javascript.

    Having something like this in the javascritpt
    var monthsArray = new Array(“Januar”,”Februar”,”März);

    will be displayed as
    var monthsArray = new Array(“Januar”,”Februar”,”MÃ�¤rz”);

    after storing … and the number of ‘strange letters’ will increase with every save/restore operation

    any clue why this is?

    thx
    Wolfgang

    Reply
      • Andreas

        my wp-config is set to utf8
        it just happens in your plugin
        if you save it for the first time it appears right
        the error only seems to happen if you edit saved js
        so i guess your plugin has problems to interpret umlauts saved in sql database

        Reply
  6. Kevin

    This is a great plugin that does exactly what I need. It appears to be working as expected, although I dont seem to be able to update the javascript.
    I’m having a strange problem. When I click the save button, the updated javascript appears to be updated in the admin when I go back to it, but the post does not seem to be updated with the new javascript.
    Also, de-activating the plugin does not remove the script from any posts that have it applied.

    Reply
    • Kevin

      I have even found that when I remove the code, it is not removed from the post/page either. It is still applied even after the code is removed from the admin panel.

      Reply
      • Kevin

        Shoot, i’m sorry. I totally messed this one up. the code was in another place on my page, and now that i have removed it, it turns out that this plugin isnt working at all (and never was I suspect.)

        Reply
  7. Vadim

    I am using this plugin and really like it. However, I just noticed that whenever I am Quick Editing a page (right on the admin page with the list of all my pages), then all my javascript/css related to this particular page disappears… In particular, I was quick-altering the Allow Comments option for some pages, and once the save button is clicked, if I enter the full edit mode, I do not see the blueish icon anymore, just grey, and all the code is missing if I click it. Please, fix this, and help me to find my javascript/css code back!

    Reply
    • Ryan

      Wondering if editing through quick edit changes the id of the post or something along those lines…. the script or CSS is saved as a meta field for the post so it’s in the database somewhere.

      Will have to look at what’s happening. I never use quick edit, so I’ve never tested it that way.

      Reply
  8. Ibis

    I have two nearly identical sites. On one, this plugin is working great (thanks!), but on the other one, I basically get a 404 error when I click on the icon. Any ideas?

    Reply
  9. Jessica

    i just downloaded your JS and CSS plug-in, looks great, but is there a way for me to add jquery and jquery ui?

    Reply
    • Ryan

      You’d be better off doing that via the wp_enqueue_script function inside your theme functions.php file. That way it wouldn’t get included more than once.

      Reply
      • Heather

        Hey! I am trying to make this work today. WP 3.5. I get the admin window, type in my code & click save. Nothing happens. I can click on CSS and help. Cancel works & clicking outside the window takes me back to my post but the code didn’t take. When I click on your window again my code is still there though.

        Reply
  10. tornados

    hello Ryan
    for now it work but my code are locate 2 place , homepage and post. i wanna know, if i want to insert code just post only how can i do that.

    Reply
  11. Joey Caparas

    Hi Man,

    Thanks for this plugin. The only problem I had was that the JavaScript code didn’t show up on post previews, But no biggie, really.

    Reply
  12. reg

    Hi,
    The plugin is great. it works perfectly for me, but I have a problem with the admin panel.
    I am using a rtl wordpress with the tewnty ten theme but when activating the plugin the admin panel is switching to ltr and the positioning of the different control boxs becomes a mess.
    Any advice?

    Reply
  13. Kia

    Hi, You might want to consider re-naming your plugin. I don’t know if it’s my set up. However, ‘insert’ is a database query command as you’ll already know. Well if you copy/paste ‘Insert JavaScript & CSS’ into ‘add plugin’ search, firstly the page styling gets screwed and commencing install and confirming install follows with a ‘403 Forbidden Error Page’.

    Reply
  14. Karelle Scharff

    Thanks. I’ve been trying to get a swiffy animation on a website for 2 weeks, and your plugin ended up being key to my success.

    Reply
  15. Thorbjorn Aklint

    I need to include javascript inside a javascript. Do you have some suggestions how to do that?

    Reply
  16. Measuredme

    hi Ryan,

    I am trying to insert some script (Google Charts, see below) but nothing happen when I press “save” button. The script works fine when outside the plugin. What could be wrong? This is what I place into the “javascript” text box:

    //

    //

    Reply
    • Ryan

      Looks like WordPress filtered out what you were trying to paste in the comment.

      What browser are you using?

      Reply
  17. Neil Spellings

    Save button does nothing.

    When inserting the Twitter “follow me” button Javascript code, the Save button does nothing and doesn’t insert the code into my post.

    Reply
    • Ryan

      Haven’t specifically tried the Twitter code. I’ll give it a shot and see what’s happening.

      Reply
  18. Quondos

    Hello

    sorry to say that it don’t work for me. I put the javascript and try to save but BECAUSE there is a Google ad just ON THE BUTTON to save, I am always sent to the ad.. DO you know that you can be reported as a bad practise of google adsense ? Be careful with this !!
    And try to put away this Sve button because. I have to take out the plugin.

    Reply
    • Ryan

      I’m confused. There is nothing related to AdSense in this plugin. Where are you seeing the ad?

      Reply
      • Quondos

        Ok. It is my fault !! I have discovered that the ad injection plugin was inserting at the footer of your panel to insert the JS the adsense code !!!
        Sorry for this error. It works fine now for me !
        A last one : can you think you can add an option to insert php code ? or is it already possible ?
        Thanks

        Reply
  19. Lennart Borgman

    I have just installed the plugin. I have the same problem that others have reported here: The added CSS code does not show up on the page.

    The site is using the theme “Wedding Bells”. I am using Google Chrome here (though I can’t see that this matters ;-) ).

    Reply
    • Lennart Borgman

      Just tested with the standard theme “Twenty Eleven”. Same problem.

      Oh, forgot. WordPress is of course latest version. All plugins updated.

      Reply
      • Lennart Borgman

        And now it suddenly started working – after just setting a few things in the theme… ;-)

        That’s life I guess. (I guess it is some problem with the hook that your plugin must use. It is in “Twenty Eleven” it works now.)

        Reply
  20. Zoran

    Doesn’t work. When I click on save or cancel button, nothing happens. Tried on Firefox 21 (win xp) and Chrome 27 (win 7).

    Reply
  21. 1554325325

    Hey Ryan.
    Thank you very much for this plugin.
    I have one question.

    I need to see java script code only on the page of my post. Not no main page with all posts.

    Sorry, i dont know how to explain correctly.

    Reply
  22. Ulysses Alves

    Hello, Ryan.

    Your plugin is very useful, but I would like to give you a suggestion to improve it in a little detail I have seen while using it in my own pages.
    You know, currently your plugin doesn’t load the JavaScript and CSS code when we preview the page. It only loads them when we publish the page, but I think it would be much better if it allowed us to preview the code as well, because this way we wouldn’t need to publish the page only to see if our javascript and CSS code is doing what it should do.

    Thanks.

    Reply
  23. Lloyd

    Hi Ryan
    I installed your plugin a while back and its been working well. One of the things I use the plugin for is to insert tracking code on my homepage.
    I previously inserted some code on my homepage & now I need to remove the code. But when I go to the post in the dashboard and click on the ‘insert javascript’ button the code is no longer showing – but I know its still there because I can see it in the source code of the page.
    I think this problem may have arisen when I updated my wordpress to version 3.5.2.
    How can I remove this code? – if I disable the plugin the other code I inserted using this plugin will be removed.
    Thanks

    Reply
  24. JP

    This plugin is extremely helpful for me. An update I’d love to see is the ability to post either to the head or at the end before the /body tag. Testing scripts from several vendors want it at the bottom of the page. Would be a great help.

    Reply
  25. Neil

    Sometimes when I go into the CSS editor for a page, then the CSS I previously had disappears. When I go back to the site, without pressing save, it then acts like I deleted the CSS I previously had.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *