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
- Locate the SlideNote widget in the available widgets area
- Drag it into one of the widgetized areas available in your theme
- 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!
Great stuff Tom, thanks for releasing this for WP
Sure thing, Kyle!
Tom –
Nice work with this, can’t wait to use the new plugin – will be VERY useful.
Jacob
Awesome. Glad you’ve got a use for it!
Well done, sir. Thank you!
Figured you may find this useful!
are you kidding me!? EPIC!
:)
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.
At this point? Probably never ;).
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
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.
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!
dope as shiz.
Yeah, you know.
What John said! I’m just afraid I might mis-type what John said!
Ha! Exactly ;)
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
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.
http://www.wolverinesocceracademy.com/camps/register
any help would be great!
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.
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.
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.