By Steve Puddick

January 14, 2023

WP Notes Widget Plugin

Display important, short, time sensitive text and media in a 'sticky note' style. Auto Tweet your notes.

WP Notes Widget PRO is now available

WP Notes Widget PRO offers the following additional features:

Note Categories
Shortcodes
Insert notes in posts, pages, and other post types (not just widget areas)
Order notes in ascending or descending order
Ability to remove all Web Rockstar branding and callouts in WordPress admin

Get WP Notes Widget PRO

Posts and pages have their own characteristics and uses, but sometimes there is a need to display important, very short, time sensitive information which don’t really fit into a post or page. WP Notes Widget fills this gap. The visual design is similar to real sticky notes which adds to the effective communication of the message.

With WP Notes Widget you can:

attach an image, audio, or video to a note
attach a link to either an uploaded file, a link from your website, or a link to another website
integrate with your twitter account to automatically tweet your notes
select the font style, font size, font color, and background color of notes
select which notes appear on a specific widget
post date notes to appear at a certain date/time
set notes to expire at a certain date/time (with additional, free plugin)

Enhancements

To further enhance the functionality of WP Notes Widget you can install these great plugins:

Post Expirator by Aaron Axelsen
Post Types Order by Nsp Code

You can also take advantage of some built in WordPress functionality which you may not have explored yet:

‘post dating’ notes so that they only appear once a certain date and time has been reached

WP Notes Widget has also been designed to work with WPML.

Newsletter

Newsletter Sign Up

Videos

Take a look at these tutorial videos to learn more about how WP Notes Widget works:

Installation

Download plugin from WordPress plugin repository
Activate the plugin through the ‘Plugins’ menu in WordPress (upon activiation some sample notes will be created)
On the main WordPress admin menu, go to ‘Notes’
You can either leave the sample notes published or move them to the trash.
Create/replace/adjust the available notes to your needs (similar to creating pages or posts).
Go to ‘Appearance > Widgets’ in the WordPress Admin (after logging in)
Select ‘WP Notes Widget’ from the selection of available widgets. Drag it to your desired widget area.
Configure the look of the WP Notes Widget to your needs.

The following points explains the settings available on the widget administration page:

Display date when note was published

Displays the date when the note was published. If desired, this date can be changed even after the note is published.

I will use my own CSS styles for WP Notes Widget

If you intend to use your own CSS styles, choose this option (for advanced users).

Use my theme’s widget wrapper for WP Notes Widget

Select this option if you would like to use the generic wrapper your theme uses for all widgets, in a given widget area. Depending on what the widget wrapper does (adds padding, margins, borders, etc) WP Notes Widget may or may not look better with this option checked. Experiment and see what looks best with your theme. Be sure to test at different screen widths.

Hide WP Notes Widget if there are no published notes available

This option prevents WP Notes Widget from displaying entirely if there are no notes to display. Alternatively, a generic note with the text “There are no notes to display right now.” will be displayed when this option is not activated.

Use individual “sticky notes” for each note

This option separates out each note into it’s own individual “sticky note”. Take a look at the screen shots for a visual example.

Enable social sharing of notes

This option creates a “tweet” link below the note. It allows users to easily share the content of your note on their Twitter account.

Do not force uppercase letters

Depending on the selected font, it may be desired to not force uppercase letters for your note text since it looks better visually.

Setting up Automatic Posting to Twitter

In order to set up automatic posting your Twitter account, you will need to set up a couple things:

A Twitter account that has been authenticated with your mobile phone number
A new Twitter application with read and write permissions

For more information on setting up a Twitter App check out apps.twitter.com.

Once you have the appropriate credentials, you can follow the instructions on any Note page in your WordPress admin.

Screenshots

These are the fields and options that are available when editing a single note. Similar to a post.
This is a variation of screenshot 1 with different settings chosen. In this example the ability to post directly to Twitter has been enabled.
This shows the listing of all of the notes in the system. Similar to posts.
This shows the widget controls on the widget admin page.
The show what the front end of the website looks like using the configuration specified. The layout will naturally differ depending on what theme is being used.
This is a variation of screenshot 5. Different settings are being used to alter the front end display.
The admin page to enter your Twitter App credentials for automatic Tweets.
(Available in PRO) Add notes to posts and pages with the "Add Notes" button above the editor
(Available in PRO) Shortcode editor modal window - display settings
(Available in PRO) Shortcode editor modal window - font selection
(Available in PRO) Create note categories to organize your notes. Display notes from a category automatically.
(Available in PRO) Front end example with notes in post content 1
(Available in PRO) Front end example with notes in post content 2

FAQ

What is the best way to customize the look (CSS) of WP Notes Widget?

Select the “I will use my own CSS styles for WP Notes Widget” option on the widget configuration page. This will disable all built in WP Notes Widget styles. You can take a look at public/less/wp-notes-public.less to view the LESS file used to generate the CSS file used on the front end of the website. This may be helpful when creating your own styles. You can add your own styles to the style.css file in your active theme folder, or another file if your theme does not use style.css for theme styles.

How can I get my images to have a transparent background like in the screenshots?

The images used in the screenshots are a PNG file and have been created with a transparent background. Only this file type and GIFs allow transparent backgrounds. JPGs are not capable of having transparent backgrounds.

What type of download attachments can I use?

You can attach any download that WordPress supports. In many cases it would make sense to have .PDF file as an attachment but any file type in your media library will work. This includes .mp3s, images, even video files.

I can’t get my tweets to post to my Twitter account

There are a few possible reasons why you are experiencing difficulties:

You did not check the “send tweet on publish or update” checkbox
Your tweet is over the 140 character limit
You did not enter the proper authentication credentials
You are trying to tweet an exact duplicate of a tweet you recently posted

Changelog

1.0.5

fix: enforce loading of media buttons to admin, for compatibility with some site builder plugins
fix: reset post data after every WP_Query call

1.0.4

change: Admin Code Editor promo link
change: updated WordPress version compatibility

1.0.3

fix: proper html escaping of gettext

1.0.2

fix: utm parameter in links

1.0.1

fix: the use of WP_Query (and manipulation of $post) in admin causes unexpected behaviour in other components

1.0.0

fix: embedded video error on websites using https
fix: widget settings interface size on smaller viewports
fix: PHP 7.1 empty array bugs
add: default note settings

0.5.2

social media share links open in smaller, separate window
fix: explicit reference to https url of fontawesome file

0.5.0

added ability to embed video and audio into notes
filtering options in widget controls to show/hide certain notes
code clean up and optimization

0.3.1

added ability to select font style
optional styling of enforcing all uppercase letters

0.2.1

removed namespacing to be compatible with PHP 5.2.x
trimmed potential whitespace from Twitter credentials
cleaned up inconsistent tabs/spaces in code indentation

0.2.0

added automatic posting of notes to Twitter
cleaned up code and code commenting

0.1.4

optimized and simplified LESS code
added font size controls
added optional, automatic, Twitter tweet link

0.1.3

cleaned up code to be more consistent and reuseable
added image option for note
added download option for note
added option to open link in new tab
cleaned up semantics of code
cleaned up code commenting
added option to include date or not
fixed note updated/published messages (changed wording and removed unnecessary link)
added option to separate each note into individual “sticky notes”

0.1.1.2

Minor adjustments to default CSS

0.1.1

Added option to include theme’s widget wrapper (before_widget and after_widget)
Cleaned up efficiency of code in widget class

0.1

Initial version