Software Engineering in WordPress and Musings on the Deep Life

SlideNote For WordPress Now Available

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

Shortcodes

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!

39 Comments

  1. Kyle Reed

    Great stuff Tom, thanks for releasing this for WP

  2. Jacob

    Tom –

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

    Jacob

    • Tom

      Awesome. Glad you’ve got a use for it!

  3. Justin Wise

    Well done, sir. Thank you!

  4. John Saddington

    are you kidding me!? EPIC!

  5. Don Gilbert

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

    extract(
    shortcode_atts(
    array(
    ‘where’ => ‘640’,
    ‘corner’ => ‘left’,
    ‘closeImage’ => ”,
    ‘titleelement’ => ‘h3’,
    ‘title’ => ”,
    ‘contentelement’ => ‘p’
    ),
    $atts)
    );

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

    return $str;

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

    • Don Gilbert

      Apparently, you can’t post code in CODE tags. Sent you an email with the updated shortcode function.

    • Tom

      Don – appreciate this. The plugin originally started off as as widget and then I decided to build out simple shortcode functionality around it.

      Dig the recommendation and will definitely be including this when I come back to improve the plugin.

  6. Don Gilbert

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

    Glad it helped.

  7. Jay

    Great stuff man.

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

    Couldn’t resist.

  8. Paul Rosso

    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.

    • Tom

      Hey Paul,

      Thanks for the comment – I found the problem. Download a copy from the WordPress Plugins Repository and you should be good to go.

      Let me know!
      Tom

  9. Zachary

    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!

    Zach

    • Tom

      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!
      Tom

      • Zachary

        Hi Tom,

        Thanks for your reply and the update. Maybe I am doing something wrong here, but I have tried to download the plugin from the depository and upload it manually to my site. However, it still does not work. :(

        Is it not compatible with the theme I am using?

        Thanks,
        Zach

        • Tom

          Shoot me an email and we’ll chat. Odds are it’s something minor and we can get it figured out.

          This happens from time to time with such a wide array of themes available.

  10. Matthew

    Does the widget not allow HTML links?

    • Tom

      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!

  11. John Saddington

    dope as shiz.

  12. Brandon Cox

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

  13. ed

    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?

    http://www.wolverinesocceracademy.com/camps/register

    • Tom

      Sounds like it may be a file path error. Aside from checking the option in the widget, did you make any modifications to the plugin to add a new image?

      If not, send over the URL to the site and I’ll take a look.

      • ed

        http://www.wolverinesocceracademy.com/camps/register

        any help would be great!

        • Tom

          Just checked it out. I can see the the configuration options for the plugin specified in the markup:

          closeImage=&where=500&corner=right

          It looks like the closeImage value wasn’t specified in the widget. You should just have to check the box in the widget area in the WordPress admin area to activate it.

          Let me know if that still doesn’t work.

          • ed

            Sorry for not making myself clear…I don’t want to use the widget…I want to add it to specific pages…I added the shortcode but unable to see the closeimage x…thanks.

  14. ed

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

    • Tom

      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.

  15. Daniel Goepfrich

    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

    Daniel

    http://www.oaktreechurch.com

    • Tom

      Hey Daniel,

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

      • Daniel Goepfrich

        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.

        Thanks

        Daniel

  16. imacg

    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…

    thanks…

    • Tom

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

  17. Andres Sandison

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

10 Pingbacks

  1. SlideNote è ora un plugin per Wordpress
  2. SlideNote: Slickest jQuery WordPress Plugin Ever | ChurchCrunch
  3. Slidenote Wordpress Plugin Is Awesome for Announcements
  4. SlideNote un Plugin de jQuery | InviaDesign - Tutoriales de Photoshop, Fireworks, Flash, HTML/CSS, Wordpress y Mas
  5. SlideNote For WordPress Now Available | WordPress News
  6. SlideNote For WordPress Now Available | WpMash - WordPress News
  7. SlideNote: Sliding Note for Your Website | Resource for Webmasters & Free WordPress Themes
  8. SlideNote | A jQuery Plugin For Sliding Notifications
  9. SlideNote, un plugin para jQuery
  10. Ending Development on Slide Note - Tom McFarlin

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2023 Tom McFarlin

Theme by Anders NorenUp ↑