BNS Inline Asides

25

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.

Download

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

Installation

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 bns-inline-asides.zip 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: http://wpfirstaid.com/2009/12/plugin-installation/

Usage

This plugin makes use of WordPress Shortcode API (additional information can be found in the codex here: http://codex.wordpress.org/Shortcode_API)

The basic shortcode usage is

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

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

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

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

FAQ

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!

Changelog

1.1

  • 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

1.0.3

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

1.0.2

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

1.0.1

  • Released July 2013
  • Added new aside type: Correction

1.0

  • 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

0.9

  • 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

0.8.1

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

0.8

  • 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

0.7

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

0.6.2

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

0.6

  • 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

0.5

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

0.4.1

  • enqueued stylesheets
  • released May 23, 2011

0.4

  • 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

0.3

  • 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

0.2

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

0.1

  • Initial Release.
  • Released: February 20, 2011

25 Comments

  • JP Savage says:

    Hi!

    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!

    JP

  • [...] 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?

    Thanks

    ~ Ruth

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

      span.close-aside, span.open-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, span.open-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

    • @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

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

    Drew

  • 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

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

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>

Copyright © 2009-2014 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.2.4.1, from BuyNowShop.com.