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.
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.
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
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.
I have a PC with Chrome and Firefox. JS is turned on.
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.
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
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?
I use version 3.0.1 from FancyBox for WordPress and WordPress version 3.4.1
My website can be found at http://www.allgäupokal.de (http://www.xn--allgupokal-t5a.de). Perhaps the ä is the problem.
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.
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.
Thanks for testing and checking where’s the problem.
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;}
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!
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.
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.
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
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.
Current Theme
Twenty Eleven
By the WordPress teamVersion 1.4
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.
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
Sorry the code in my comment was cleaned up… i have put the code sample here instead… cheers Aaron
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.
Yep that works great, do you have a payment link i can donate to you?
Cheers,
Aaron
http://www.nutt.net/donate/
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!! :)
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
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
Best guess would be the collation settings on your database. It probably needs to be UTF-8.
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
I have the same problem with the german umlaute.
Did you manage to fix it Wolfgang?
The iFrame need meta charset=utf-8
insert-javascript-css/ijsc-frame.php
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.
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.
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.)
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!
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.
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?
“basically” a 404. Can you explain what that means?
I get a WP delivered error page saying “Content Not Found” in the pop up window. I’m assuming that’s a 404. Here’s a screenshot:
http://www.ipublishpress.ca/images/insertjs404.jpg
Sounds like one of the files may not have uploaded. What you’re seeing, or not seeing, is loading into an iframe so it’s looking like that file isn’t on your server for some reason.
Ok. I’ll try re-uploading (I think I already did try that but it’s been a while, so I could be mistaken).
OK. It didn’t work, so I downloaded from scratch and uploaded again. Still the same problem.
Not sure what else to try. Anything different on the two sites that you know of, or are they on the same box?
i just downloaded your JS and CSS plug-in, looks great, but is there a way for me to add jquery and jquery ui?
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.
Will you be updating this to be compatible with WP 3.5?
Just checked and it works in 3.5. Is it not working for you?
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.
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.
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.
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?
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’.
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.
I need to include javascript inside a javascript. Do you have some suggestions how to do that?
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:
//
//
Looks like WordPress filtered out what you were trying to paste in the comment.
What browser are you using?
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.
Haven’t specifically tried the Twitter code. I’ll give it a shot and see what’s happening.