When I released SlideNote, I received a lot of feedback but the number one question I had was is this available for WordPress?

At the time of release, it wasn’t but I’m proud to release the first version of SlideNote For WordPress.

SlideNote For WordPress is built on top of the jQuery plugin and ships with both a widget and support for shortcodes.

Getting Started

You can grab a copy of the plugin from the WordPress plugins repository or install it form within the admin area of your WordPress installation.

Once downloaded, verify that it’s activated in the WordPress Plugin administration panel.

How To Use It

The Widget

  1. Locate the SlideNote widget in the available widgets area
  2. Drag it into one of the widgetized areas available in your theme
  3. Configure the widget


You can also include the widget in a post or a page using a shortcodes. The available options are below (and documented more in depth in the README):

  • where is at what point while scrolling you want to display the notification
  • corner specifies from which corner you want to display the notification (being left or right)
  • closeImage is the path to the image you want to use to dismiss the notification
  • titleElement is what element you want to wrap the title content (such as an h2)
  • title the text to display as the string of the notification’s title
  • contentElement is what element you want to wrap the notification’s text content (such as a p)
  • content is the text to display in the notifcation

An example use of shortcodes is:

[slidenote where="100" corner="right" titleElement="h2" title="SlideNote For WordPress" contentElement="p" content="This notification was created with the SlideNote For WordPress plugin."]

Other Stuff

SlideNote For WordPress is unobtrusive in that it doesn’t mix any CSS or JavaScript in the markup. All related code is included in external files.

A very basic, default stylesheet is included with the plugin but its presentation may vary based on what theme you’re currently using. Nonetheless, SlideNote For WordPress is built in such a way that it should be easy to modify the presentation however you want.

Finally, the plugin is fully localized so it is easy to translate into other languages. SlideNote is released under the MIT License and SlideNote For WordPress is released under GPL2.

You can browse the project on GitHub or the WordPress plugin repository.

As usual, any and all feedback is welcome. Hope you dig it!


Join the conversation! 39 Comments

  1. Great stuff Tom, thanks for releasing this for WP

  2. Tom –

    Nice work with this, can’t wait to use the new plugin – will be VERY useful.


  3. Great plugin – great javascript. However, the shortcode functionality seemed a little obtuse to work with, and anti-intuitive.

    Right now, you have to use it like this:
    [slidenote content=”whatever- hard to insert html without escaping it or using single quotes” other_options_here]

    What it should be is:

    [slidenote whatever_options_here]whatever content, including html (easy)[/slidenote]

    To achieve this, it’s a simple edit of the slidenote_func()

    * Short Codes

    function slidenote_func($atts, $content = null) {

    ‘where’ => ‘640’,
    ‘corner’ => ‘left’,
    ‘closeImage’ => ”,
    ‘titleelement’ => ‘h3’,
    ‘title’ => ”,
    ‘contentelement’ => ‘p’

    $str = ”;
    $str .= ” . $title . ” . $content . ”;

    return $str;

    } // end slidenote_func
    add_shortcode(‘slidenote’, ‘slidenote_func’);

  4. That was honestly the fastest reply I’ve ever seen. :)

    Glad it helped.

  5. Great stuff man.

    Now when are going to get working on that WP comment-subscription plug-in? ;)

    Couldn’t resist.

  6. Your plugin looks like it will be a nice addition to my blog but I can’t seem to get it to work. Added your shortcode sample on your website to test it and the shortcode shows up on the blog post but there is no slider note that comes out. I am a novice at this stuff so perhaps I am missing something.

  7. Hi Tom,

    Thanks a lot for making this wonderful plug-in! I think it would be a nice addition to my website. However, after I added the widget, it stays as a textbox on the sidebar instead of floating as slidenote. I also tried to add the widget to the footer. That did not work either.

    I downloaded the plug-in directly from the wordpress dashboard and I am using the theme Boldy.

    Could you tell me whether I did anything wrong?

    Thanks again for your hardwork!


    • Hey Zach,

      Thanks for the heads up – that was a bug. It’s been patched. You should be able to download an updated, working version of the plugin from the WordPress Repository.

      Let me know if it doesn’t work!

  8. Does the widget not allow HTML links?

    • First version of the widget doesn’t but the shortcodes do support it.

      This is something I can work on building in for the next version. Whenever I get to it, I’ll be sure to update a post here on the SlideNote feed.

      Thanks Matthew!

  9. What John said! I’m just afraid I might mis-type what John said!

  10. Tom…thanks for the plugin..checking it out now…looks like the x out (close) in top left is not showing up….any reason why?


  11. Just updated to the latest version and now it does not work at all….ouch!

    • Yep – my bad!

      Fix has already been applied. 1.2 will be available in the WordPress repository in roughly 15 minutes (from the time of writing this comment).

      Your dashboard should show the available update once it’s live.

  12. Love this widget, but I can’t seem to change the content color. I’ve tried everything I can think of in the CSS file. Any thoughts? Thanks



    • Hey Daniel,

      This comment was stuck in my spam filter and I just noticed it. Did you get this resolved?

      • Hi Tom,

        Checked my email just as your reply came through. No, I couldn’t figure it out, so I did a work-around. I could change the background color, so I made that lighter, so the dark text could show.

        The header and background colors change just fine, but the p-tag won’t no matter what I did to it.



  13. Hi Tom,

    I tried to post a full AWeber form html into the content area on the widget, but it truncates it and doesn’t output the form – must be over the allowed no. of characters for the input..? I then tried to add the AWeber javascript version of the form but it does not save that – or deliver it…i.e. something like seems to get stripped or something, so any ideas to let me push these forms in via widget rather than shortcode would be great…


    • There are probably a number of issue with trying to post the HTML into the area of the widget. I’d recommend actually trying to write the markup yourself and test every few elements before something breaks – that way, you’ll know which element is busting the plugin.

      Anyway, I’ve got a backlog of items that I hope to include in the widget sometime but a few outstanding projects are keeping me from it ;).

  14. I dont entirely discover your view, but I get the point.

Leave a Reply