Introducing a new WordPress plugin from unFocus Projects: Scripts n Styles!
We wrote this plugin because sometimes you just need a small bit of JavaScript or CSS only on one page or post, but it isn’t very convenient to create a whole new template or write a complicated filter in your theme’s function file just for this.
This plugin allows Admin users the ability to add custom CSS and JavaScript directly into individual Post, Pages or any other registered custom post types.
Because only well trusted users should ever be allowed to insert JavaScript directly into the pages of your site, this plugin restricts usage to admin type users. Admin’s have access to even more sensitive areas by definition, so that should be relatively safe 😉
For example, if you check the source code of this page (or view the element with Firebug), you should see in the following rule:
[css]
.syntaxhighlighter { border: 1px solid blue; }
[/css]
This was simply included only on this page by using the Styles meta box on the page edit screen.
A few notes about the implementation:
- Admin users, or more specifically, *any user with the `manage_options` capability* (which by default is *only* the admin type user) can use this plugin’s functionality. Some plugins extend user rolls, and so this plugin would naturally extend include rolls that have the appropriate capability.
- CSS Styles are included inline, not linked, at the bottom of the `head` element with `style` tags by using `wp-head`. If your theme doesn’t have this hook, this plugin (as well as most others) won’t work.
- JavaScript is included inline, not linked, at the bottom of the `body` element with `script` tags by using `wp-footer`. If your theme doesn’t have this hook, this plugin (as well as most others) won’t work.
- There is no input validation. This plugin puts exactly what you type in the meta box directly into the `html` with no error checking. You are an Admin, and we trust you to be carefull. Try not to break anything.
Current version: 3.3.
If you’d like to contribute, the development is at github and since the plugin is GPLv3+, feel free to fork it up!
The plugin is available at the wordpress.org repos in it’s stable form
(This plugin was inspired by an article at digwp.com.)
hi. i use your plug in over this: http://greenhost.gr/ and sure it was helpfull
I’m very glad you found it useful 🙂
Is this already working on the latest version of WordPress?
I’ve installed it on my blog but it’s not showing up when I’m editing a post or a page.
Thanks! 🙂
Yes, sorry. I’ve just recently learned of a change in WordPress Core that broke Scripts n Styles on Pages so if you look for the box on pages it won’t be there. (If you have a different issue, then I’m unaware of it and please let me know). The next update to Scripts n Styles will fix the pages problem and it’ll be out certainly by the end of the week. I have fixed it in the development channel (https://github.com/WraithKenny/Scripts-n-Styles) if you’d like to install that, but keep in mind that it is development software and therefore change or may contain other bugs.
On the post (and page) edit screen, you may have to Click the “Screen Options” pull-down tab (upper right hand corner of the window), and check Scripts n Styles. The Scripts n Styles options box isn’t visible by default; This is to reduce clutter on the edit screens when not in use.
Many thanks for the plugin! 🙂 It’s REALLY really helpful! I’ll also be using on my blogs for a very lnog time. 😀
Check it out:
http://tweavo.com/wp-content/uploads/2011/07/Working.png
Thanks again 😉
– Jaja
Thanks for this plugin. This is something that was really needed. However, I’m having an issue getting a jquery circleplayer to work. I checked to make sure I had all the js files where they are supposed to be. And your plugin had them where they are supposed to be. But the player still isn’t working.
Was there something else I need to check off on the plugin to get this to work?
I’m not familiar with “CirclePlayer.” There aren’t any options to check off: the plugin is fairly simple. What ever script you put in the box gets added to the page or site. Perhaps you are including the script from inside of jquery.jplayer.min.js (copy and paste the source code) directly into the scripts box? This is the only way I see you doing this with this plugin. Scripts n Styles can “enqueue” (include by location) WordPress included scripts like jQuery, but cannot enqueue external scripts (yet).
I took a quick look at the circleplayer tutorial: Perhaps you are having difficulty with the HTML part of it? WordPress’s editor tends to mangle markup for stuff like that. I’m sorry I couldn’t be more helpful; I’m just not sure what problem you are having. If you have the excellent Firefox plugin Firebug, check to make sure all your scripts are included properly on the theme side, then check that the html markup didn’t get mangled by WordPress.
Great plugin – unfortunatley, with the latest version 3.0.1 I get the following error when saving a post:
Fatal error: Cannot unset string offsets in /wp-content/plugins/scripts-n-styles/includes/class.SnS_Admin_Meta_Box.php on line 375
the change gets saved, but I have to reload the page in order to see it.
I’m taking a look into what’s causing this and expect to have an update out today. Sorry about that.
I’ve released 3.0.2 which fixes this bug. It should be available momentarily.
On WP Multisite, when I activate the plugin on one site, it gets network-activated. Why?
Basically, I thought Network Activation made sense at the time. Only a Super Admin can use the plugin; it’s not useful for blog admins in a MultiSite configuration. I had intended to use the “Network Activation” Flag to hide the plugin from individual blog plugin screens, so that blog admins wouldn’t be exposed to something they can’t use. This functionality seems to be in flux in the core code.
Isn’t this better to leave this to super admins to decide about that? They can network activate the plugin if they like it, or have it enabled on individual sites. Could you please remove this? It’s really annoying! 🙂
Hi,
I love(!) this plugin.. but it would be great if the height of the codefield would be adjustable.. especially on the [age where one edits the themes or plugins.. for my self I now change “body .CodeMirror-scroll”
“max-height” to “auto” which makes it a usable workspace for me..
I have a update for this in my development branch. It’s not quite ready for release just yet.
Hi Authors.I find this plugin very useful but I wanted to point towards an issue.The meta box in post editor is not working(showing) when we move or rename wp-content directory.Kindly check this issue.Thanks
Thanks for pointing this out. I will check on it.
Yo, Since 3.6 (i think) i can’t search with Ctrl F in the code fields.. which renders the whole thing useless :/
Yeah, I thought about putting in a CodeMirror search feature, but the browser search works, so it’d be a lot of work for little utility. I personally find the rest of the plugin quite useful, sorry you don’t. If you’d like to implement the search feature, I’d consider the patch.
The plugin works fine for pages, but for posts, it does not work on the main page, only when you view the single post. All my styling is lost when I am on the main page of my blog, but when I click the link to a single post, it does work. This is not quite what I wanted. If there any workaround for this?
Barry
Hi there!
I probably didn’t explain my difficulty very well. I have been using Scripts n Styles for a month or two, happily thinking it was styling my posts, and it was, however only posts I view by clicking the DIRECT link to the post. None of my styles show up if I load the main page of my blog which displays several posts in reverse date order. If I click on the link to the specific post, great, there is all my styling, but if I load the main blog page, it’s all gone.
It kind of figures, I suppose, because how could any of the Styling intended for a single post apply to all the posts on the main blog page?
Was this the intention of Scripts n Styles? I mean it works fine for a page. Was it intended only for single pages? That would seem to be the case, but I’d like it verified, so I don’t keep beating my head agains a wall trying to get my styles to show up.
Please let me know. I like the plugin and it works fine for pages, just not posts. If it is supposed to work for posts, please let me know. Thanks!
Barry
Yes, the metabox for a single post is meant for the single view of that post.
To style a particular post on an archive type page (like the main blog page) you’d have to use the “Global” settings and carefully select the post’s classes.
(Sorry for the delay in response!)
This is the missing piece to WP plugin arsenal. LOVE HOOPS! I use them with Custom Content Shortcode and it is powerful tool, indeed.
is there any way to remove delete hoops?
Yes, it’s a little counter-intuitive, but you just clear out all the text and save. The plugin should detect an empty hoop and remove it for you.
Hello,
I want first to thank you for putting this piece of code together. It wa sso frustrating not tu easily add hjavascript to some posts.
I am the chief editor of https://www.blindtec.com.br a podcast and blog which helps blind people to better living by using eficiently assistive technology.
And here comes my problem: I am also visually empaired. The editor you are using in the plugin is not accessible with screen readers. It seens the same editor used by json lint. The cursor is not tracked correctly, so I have to type all the scripts in notepad where I can navigate through the code in an accessible manner and then go to the script editor select all and delete, then select all from notepad and copy and past.
For intensive script editing sessions this is very very exaustive. I won’t ask you to reimplement all the editing boxes using another framework, although the wordpress visual editor component works like a breese. Instead, is it possible to give us a choice to use either this inaccessible component or a classic textarea? If this choice existed I would just switch to the classic component and my workflow would work as I need it to.
Thanks,
Marlon
Yes, this is 100% a good point. WordPress 4.9 introduces CodeMirror (the thing I’m using) into the Core software, and will include accessibility enhancements as you’ve described. I will be migrating over to their standard in the next major release, but that release is taking a while to write. Hopefully, I’ll have this out soon.