Scripts n Styles Update 3.1

Scripts n Styles received a major update today. The two big features added are LESS.js support and Dynamic Shortcodes! The “Global” Settings page now has a LESS editor with syntax highlighting (via CodeMirror) and on-the-fly compiling so you can see how it’ll be outputted on the theme-side. The per-page meta-box has gained a new tab in which you can create one-off shortcodes which can contain arbitrary HTML content.

Scripts n Styles is a free OpenSource GPL project that you can fork and contribute to on github! (You can also fork and contribute to CodeMirror and LESS.js)

As a Shortcode example: I placed the following html into the Shortcodes tab and gave it the name “tweet test”.

<a href="" data-via="WraithKenny" data-size="large" data-related="unFocusProjects" data-hashtags="ScriptsnStyles">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src="//";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

I then use the shortcode [sns_shortcode name="tweet test"] to display:

Scripts n Styles update 2.0.1

Scripts n Styles is a tool to allow admins to add scripts and styles without editing template files, or worrying about authors overwriting the code.

Scripts n Styles is a tool to allow admins (and editors in single installs) to add scripts and styles without editing template files, or worrying about authors overwriting the code (code is stripped when an author updates since they don’t have permission to use unfiltered html).

Improvements in version 2.0.1:

The meta box has been improved to provide a tabbed interface for less clutter, and syntax highlight and formating is added using the open-source CodeMirror 2.1.

An option has been added to allow adding script to the head element in addition to the traditional bottom of the page spot.

An Options page (under Tools) has been added so you can add Script n Styles to the entire site, rather then just the individual posts and pages.

Some minor code improvements:

  • Better selection of post_types.
  • micro-optimization for storage of class names.
  • Defined a later priority for Scripts n Styles to print after other scripts and styles.
  • Better adherence to coding standards.
  • began contextual help (notes on capabilities).

WordPress Admin Bar Theme Support

Here’s a quickie for WordPress Theme designers:

If your theme is getting unwanted scroll-bars because of the new Admin Bar is WordPress 3.1, the core team included a way to handle it. Add Theme Support for it!

With a full height layout, you’ll want to avoid adding a margin or padding to a height that is already at 100% because you’ll get useless scrollbars, and no one wants that. Instead, find the first non-full height element (usually #header or some-such), and apply the margin there (either the 28px for the height of the admin bar, or add 28 to the existing margin if the element already has one). In the code snippet below I assumed you’d create an element or assign the class ‘admin-bar-fix’ to an existing element.

In your theme’s function file, add the following and modify as you see fit: (best to leave out the closing php tag though)

add_action( 'after_setup_theme', 'custom_theme_setup' );
function custom_theme_setup() {
add_theme_support( 'admin-bar', array( 'callback' => 'admin_bar_bump_callback') );
function admin_bar_bump_callback() { ?>
<style>.admin-bar-fix { margin-top: 48px; }</style>
<?php } ?>

This snippet is derived from the TwentyTen Theme’s function file. The callback’s original code can be found in the source. Original snippet also found commented in the source (props ocean90).

Basically, by declaring support for the new (as of 3.1) “Admin Bar,” you declare that you can handle how your theme’s content gets “bumped” (by default, it gets pushed down by 28px via a margin on the html.) Most of the time the default behavior is fine… but it’s not fine on theme’s that have a height declaration of 100% (even min-height) or that have external scripts that declare 100% height on the html/body (like Google Translate does).

WordPress’s admin needed a similar treatment but that got patched. The 28px margin is just a default to handle most normal cases. Your theme is your responsibility 🙂

Cheers! Hope this saves some time for someone!

Update: Admin Bar Shim!

If you don’t have a 100% height type of layout but are annoyed by improperly scrolling anchored links try the following.

If you add a >div id=”admin-bar-shim”> (for lack of a better name) in your theme surrounding everything inside the body except the wp_footer call (where the admin-bar gets echoed), you can add

.admin-bar #admin-bar-shim {
    position: fixed;
    bottom: 0pt;
    left: 0pt;
    right: 0pt;
    overflow: auto;
    top: 28px;

to your style sheet, or use the method above adding the callback. This new method allows anchor links to scroll properly.

Update Theme

Just a quick note. The old theme (iNove) was creating extra history entries for some reason when you came to I have no idea why, but that theme is now history. This new theme (iCandy 1.4 by Nischal Maniar) fixes the problem and looks nicer anyway. 🙂

Testing the WordPress iPhone app

Just testing the iPhone app. Seems pretty spiffy. Can’t manage plugins and whatnot but that’s ok. This is pretty good for posting on the go. It supports landscape typing too. 🙂

For fun (and for testing I attached some pics of some cool clouds that rolled right accross the road on the way into work one day). It was fun watching that.

No rich text editor. That’s a significant shortcoming.