Scripts n Styles

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:


.syntaxhighlighter { border: 1px solid blue; }

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.)

26 thoughts on “Scripts n Styles”

  1. 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! :)

  2. 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.

  3. 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.

  4. 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?

  5. 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.

  6. 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.

  7. 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.

  8. 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! :)

  9. 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..

  10. 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

  11. 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.

  12. 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

  13. 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

  14. 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!)

Leave a Reply

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

Connect with Facebook

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

Home of Scripts 'n Styles for WordPress, Backstage2D and History Keeper!