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!

49 Comments

Great stuff Tom, thanks for releasing this for WP

Tom -

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

Jacob

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

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

    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.

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

Glad it helped.

Great stuff man.

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

Couldn’t resist.

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.

    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

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

    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

      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

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!

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

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

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.

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

    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.

      Thanks

      Daniel

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…

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

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

Trackbacks and Pingbacks

SlideNote è ora un plugin per WordpressNovember 18, 2010 at 6:15 am

[...] ci invita a lasciare un feedback sul suo blog. Possiamo anche seguirlo su Twitter su [...]

[...] Plugins0SlideNote: Slickest jQuery WordPress Plugin Ever Posted by John Saddington on Nov 18, 2010Our very own @Tom wrote a slick jQuery plugin for WordPress that you’ve probably seen implemented on more [...]

[...] will NOT be having services this Sunday because of the 38 inches of ice on the roads!” Slidenote is perfect, and Tom McFarlin has made it into a WordPress plugin. It’s super-easy to [...]

SlideNote un Plugin de jQuery | InviaDesign - Tutoriales de Photoshop, Fireworks, Flash, HTML/CSS, Wordpress y MasDecember 6, 2010 at 11:52 am

[...] Version jQuery Plugin WordPress [...]

SlideNote For WordPress Now Available | WordPress NewsDecember 17, 2010 at 11:03 pm

[...] the original: SlideNote For WordPress Now Available Posted in WordPress Tags: plugins, WordPress « WordPress › Modern Style « Free [...]

SlideNote For WordPress Now Available | WpMash - WordPress NewsDecember 18, 2010 at 1:16 am

[...] here to read the rest: SlideNote For WordPress Now Available Posted in WordPress Plugins « 15 Best Church WordPress Themes | Living Open Source Both [...]

[...] SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application. It’s also available as a WordPress plugin! [...]

SlideNote | A jQuery Plugin For Sliding NotificationsJanuary 23, 2011 at 5:28 pm

[...] SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application. It’s also available as a WordPress plugin! [...]

SlideNote, un plugin para jQueryFebruary 22, 2011 at 4:15 pm

[...] es un plugin desarrollado para jQuery, aunque también se puede encontrar para WordPress, que nos permite introducir en nuestras aplicaciones una nota con cierta información que queremos [...]

[...] I built a small WordPress plugin around but retired it shortly after the time required to maintain and support it exceeded the [...]

Leave a Reply

Name and email address are required. Your email address will not be published.

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>