BNS Inline Asides


Have you ever wanted to add a personal comment into the body of a post or page and have it stand out from the rest of the content?
Have you really wanted to throw a rant in a review because the subject just really got under your skin but you don’t want to dramatically disrupt the content?
This plugin will allow you to style sections of the post, or page, content with a shortcode that can add more emphasis by leveraging a style element from the active theme.
These asides can be left open as part of the content flow; or these asides can be closed to leave your readers the option of opening them if they choose to.

Copyright 2011-2015 Edward Caissie (email :

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License version 2,
as published by the Free Software Foundation.

You may NOT assume that you can use any other version of the GPL.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA

The license for this software can also likely be found here:


Credits for jQuery assistance: Trevor Mills

Screenshots Source Content

Sample content taken from the “Readability” post of the Theme Unit Test data found here: used with the default Twenty Ten Theme.


Latest version: Download BNS Inline Asides v1.3 [zip]


This section describes how to install the plugin and get it working.

  1. Go to the “Plugins” menu in the Administration Panels (“dashboard”).
  2. Click the ‘Add New’ link.
  3. Click the “Upload” link.
  4. Browse for the file on your computer; upload; and, install accordingly.
  5. Activate.

— or –

  1. Go to the “Plugins” menu in the Administration Panels (“dashboard”).
  2. Click the ‘Add New’ link.
  3. Search for BNS Inline Asides.
  4. Install.
  5. Activate.

Please read this article for further assistance:


This plugin makes use of WordPress Shortcode API (additional information can be found in the codex here:

The basic shortcode usage is

To see the Aside click here.To hide the Aside click here.
. The default values of the shortcode are type: aside; and, status: open.

  • To see the Aside click here.To hide the Aside click here.
    To see the aside click here.To hide the aside click here.

To use the

To see the Aside click here.To hide the Aside click here.
shortcode and have it initially “closed” any status other than “open” will work as the plugin will change the status to “closed” if it is not equal to “open”.

The pre-defined aside types currently included:

  • Note – uses the theme element’s default text color on a Light Grey background
  • Rant – uses black text on a red background with a non-repeating flame graphic
  • Changelog – sets the font to monospace, reminiscent of type written notes
  • Footnote – uses lower-case roman numerals when the items are written using an (HTML) ordered list
  • Nota Bene (NB) – italicizes the text within the aside
  • Black text on a transparent background with a non-repeating hat graphic
  • Correction – Black text on a transparent background with a non-repeating checkbox graphic
  • Update – Black text on a transparent background with a non-repeating circular arrow graphic

See the frequently asked questions section for how to add your own custom type.


Q. Why doesn’t the “Rant” type work with the “H” tags?
A. Not all possible combinations of existing BNS Inline Aside types have been set as defaults.
Please feel free to add the bns-inline-asides-custom-stylesheet.css option and create your own combinations …
… and let us know about them. We would be very happy to consider adding them as defaults.

Q. How can I style the plugin output?
A. To add your own custom aside type styles you might consider creating a new stylesheet in this plugin’s folder using the name: bnsia-custom-types.css
The plugin will create a class name from the custom aside type you use in your shortcode. For example,

To see the bacon click here.To hide the bacon click here.
will generate these classes you can style:

  • .open-aside.bacon
  • .close-aside.bacon
  • .bnsia.aside.bacon
  • blockquote.aside.bacon

This method can also be used to over-write the Pre-Defined Aside Types styles as the bnsia-custom-types.css file loads after the main stylesheet.
The bnsia-custom-types.css stylesheet should not be over-written by updates.

Q. How do I use the ‘show’ and ‘hide’ parameters?
A. If you do not want to use the default ‘show’ and ‘hide’ parameters, you can change them to your own preference in each instance of the shortcode. If you want your aside type to be dynamically inserted into the message simply use the %s placeholder in your custom message.
Here are some examples:

  • Want to see my <em>bacon</em>?To hide the bacon click here.
  • To see the soup click here.No soup for you!



  • Released May 2015
  • Added BNS Inline Asides Update Message function
  • Added i18n support
  • Added default and English (Canada) translation files
  • Updated copyright years
  • Minor code clean-up


  • Released November 2014
  • Added sanity checks for BNS_CUSTOM_* define statements
  • Added _x i18n implementation to show and hide default messages
  • Replaced BNS_Inline_Asides::replace_spaces with sanitize_html_class functionality
  • Renamed BNSIA_Scripts_and_Styles to scripts_and_styles
  • Updated readme.txt to note additional default types of asides


  • Released May 2014
  • Moved custom CSS folder location to /wp-content/bns-customs/
  • Move JavaScript enqueue to footer
  • Updated required version to 3.6 due to use of optional filter variable in shortcode_atts
  • Updated WordPress version compatibility
  • Updated copyright years


  • Released December 2013
  • Code reformatting to better reflect WordPress Coding Standards (see
  • Added functional option to put bnsia-custom-types.css in /wp-content/ folder
  • Code reductions (see replace_spaces usage)
  • Inline documentation updates


  • Released August 2013
  • Added new aside type: Update
  • Added dynamic filter parameter to shortcode attributes


  • Released July 2013
  • Added new aside type: Correction


  • Released <:3()~~~ 2013
  • Added code block termination comments
  • Added ‘hat.png’ image for “Hat Tip” type
  • Added missing bnsia class to theme elements other than default
  • Added style definitions for “Hat Tip” type
  • Minor documentation improvements
  • Moved stylesheet into its own directory
  • Moved images into their own directory
  • Moved JavaScripts into its own directory
  • Refactored $bnsia_element to simply $element
  • Removed direct jQuery enqueue (called as a dependency of ‘bnsia-script.js’)
  • Removed unused style definitions
  • Use an array of elements rather than a convoluted if statement to sort out if an accepted container is being used


  • Released January 2013
  • Removed Jetpack counter-measures hack
  • Moved JavaScript from inline to its own enqueued file
  • Implemented wp_localize_script to maintain the dynamic element


  • Released December 2012
  • Added Jetpack hack for single view conflict


  • Released November 2012
  • Add element shortcode attribute to allow the use of specific HTML tags
  • Corrected documentation typos
  • Implemented HTML tags: aside, blockquote, code, h1 through h6, pre, and q;
  • Removed load_plugin_textdomain as redundant
  • Removed p CSS related elements and properties
  • Removed blockquote background: none property
  • Updated the ‘readme’ FAQ section to reference the new functionality


  • Implement OOP style class coding
  • Internal documentation updates and improve code formatting
  • Add Type: Footnote
  • Add Type: Nota Bene (can also use the more common short-form NB)


  • confirmed compatible with WordPress 3.4
  • inline documentation updates
  • added “changelog” styles


  • released November 2011
  • confirmed compatible with WordPress version 3.3
  • added PHPDoc style documentation
  • added BNS Inline Asides TextDomain i18n support
  • added BNS Theme Element to set CSS element to be used
  • added bnsia class (to be used as default)
  • removed is_admin check from enqueue action function (not needed)
  • removed ‘span’ support; going forward with block display elements only


  • released June 2011
  • re-wrote the enqueue stylesheets code to be more correct


  • enqueued stylesheets
  • released May 23, 2011


  • verified to work with WordPress version 3.2-beta1
  • re-wrote the BNSIA_PATH define statement
  • re-wrote the stylesheet paths to use BNSIA_PATH
  • released May 23, 2011


  • verified to work with WordPress version 3.1.2
  • added new parameters to allow end-user to define ‘show’ and ‘hide’ messages
  • released: May 7, 2011


  • add the ‘span’ element
  • fix readme markup issues


  • Initial Release.
  • Released: February 20, 2011


  • JP Savage says:


    Nice work!

    Is there a way that I can have an in-line link to the aside rather than the message? I’m thinking of defining words, adding details, you know, aside sorta stuff, but more cleanly.

    Thanks again for developing this plug-in!


  • […] This may just be another excuse for me to use my BNS Inline Asides plugin; but, it is also yet another example of what it can be used […]

  • Chip Bennett says:

    Great Plugin, Cais!

    One feature I’d love to see is a shortcode parameter to specify the displayed link text (i.e. the hard-coded “To see the %s click here.”) Since I have need for this very functionality, I’m going to hack it up myself. Would you like a patch when I’m done?

  • Ruth Maude says:

    Hey Ed,

    I’m using your plugin. How can I get rid of the question mark on mouse over?


    ~ Ruth

    • @Ruth – You will need to over-write the CSS for the following elements:

      span.close-aside, {}

      The plugin will read an additional stylesheet (bnsia-custom-types.css) if added to its folder; its design is for another purpose but it will work if used to preserve any additional CSS you may need or want. Using the following CSS should work:

      span.close-aside, { cursor: default; }
  • Drew says:

    Hi Edward,
    Thanks for the plugin – I’m just implementing it on my second site. As with Chip (in the comment above) I’d like a bit more control over the link text.
    I thought I’d try and see if I could set this up in css (rather than building more code).
    So – for the time being – I’ve tried modding a version of your code to comment out the “sprintf” commands (on lines 209/210) – as here :

    . '' ./* sprintf( __( $show ), esc_attr( $type ) ) .*/ ''
    . '' . /*sprintf( __( $hide ), esc_attr( $type ) ) .*/ '

    … and set up the code in my .css file using the content:before attribute (for – in this case – an aside type of “story”):

    .open-aside.story:before {
    content : 'click to open ...\2192';
    .close-aside.story:before {
    content : 'click to close ...\2190';

    It seems to work.
    Hope you don’t mind.

    Thanks again,

    • @Drew – I’m glad you have chosen to use this plugin but you may be making it a bit more complicated than necessary, and your modifications will get over-written with new updates.

      Did you try using the following shortcode with these parameters first:

      aside type="story" show="click to open ...\2192" hide="click to close ...\2190"

      PS: I am always open to suggestions for new types, and I like your “story” which I may add, how are you using it? I did not find a reference on your site.

      • Drew says:

        Hi Edward,
        I’m still building the site, but I’m up-and-running with the plugin in my “Events” pages now. For background : I’ve set up custom post-types for the photo albums (from the NextGen Gallery), but wanted to have the text / main content available to give a context for those who want it.
        So there’s an example in my
        OxJam Gallery page.

        Aha – I hadn’t seen the show/hide parameters. Thanks for putting that in – I think I must have first used the plugin (on another site) before those params came in.
        I really must pay more attention to change documentation !

        I know I’m breaking the update path (I don’t like doing that, which is why I flagged it). I was quite intrigued by using CSS, though – I was playing with the .css file for formatting anyway.
        I’m happy to go back to standard plugin code now 🙂

        Once again, thanks for making this plugin available, and for the clarification.

  • Drew says:

    Hi again,

    Quick update:
    I’ve gone back to the standard plugin, using the following shortcode :
    [aside type="story" status="closed" show='' hide='']
    So I can keep using the CSS setting for all entries for that aside type – less typing (and less typos) in my posts.
    Glad you like “story” as a type (makes me feel useful !).


  • stu ducklow says:

    How are you supposed to use the Aside plug-in? There isn’t anything I can see that says how. Plenty on how to install and how to configure different styles but how exactly am I supposed to use the damned thing?

Leave a Reply to JP Savage Cancel reply

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

Copyright © 2009-2018 BuyNowShop All rights reserved.
This site is using the Custom Child-Theme, v1.0.3, on top of
the Parent-Theme Desk Mess Mirrored, v2.5, from