Annie is a comprehensive annotation plugin, making it easy to add both footnotes1 and highlighting to your WordPress posts and pages. You can use one of the default highlighting styles or define your own!
Download
annie.1.3.0.zip
Installation and Usage
Install Annie through your WordPress dashboard plugins page, or download the plugin above, extract it in your wp-content/plugins directory and activate it through the dashboard.
Once installed, Annie will add a new menu under Settings in the dashboard. There, you can specify a few defaults for footnotes and highlighting.
To define a new highlighting style, just add a rule to your theme’s stylesheet. You should name the rule something like .annie_hilight_mystyle. For example, if I wanted a style that did green highlighting with a thick pink dotted underline, I would define it like:
1 2 3 4 5 | .annie_hilight_green_pink_dotted { background-color: green; border-bottom: 3px dotted pink; color: white; } |
To apply highlighting, you use the hi short code. For instance:
I want to Highlight this section
1 | I want to [hi]Highlight this section[/hi] |
This will apply highlighting using the default style specified in Annie options. If you want to apply a different style:
Let’s use the weird style I created above!
1 | Let's use the [hi style="green_pink_dotted"]weird style[/hi] I created above! |
Footnotes are even easier2. For footnotes, you just use the foot short code:
I’ll add a footnote3 in here.
1 | I'll add a footnote[foot]This is my nifty footnote.[/foot] in here. |
Notice that Annie automatically numbers your footnotes and creates links to the footnote content at the end of the post, and from the content back to the spot where the footnote was first added. Also note that in this example I have the footnote reference set up to display the footnote content in a tooltip through the Tippy plugin.
By default, Annie will display your footnote text at the end of the post. You can change the location by adding the [footnotes] shortcode wherever you want the notes to appear.
If you want to adjust footnote styling, you have a few options. You could edit wp-content/plugins/annie.css directly, but that is not recommended since you would lose your changes when upgrading the plugin.
Instead, copy the contents of wp-content/plugins/annie.css to your theme’s style.css and add annie_custom to every rule. For instance, to customize the styling of footnote references, put something like the following in your theme’s css:
1 2 3 4 5 6 | a.annie_footnoteRef.annie_custom { font-size: 1em; vertical-align: middle; border-bottom: none; color: red; } |
1. Footnotes can also be tooltips, if you install Tippy!
2. although “easy” may be a matter of opinion!
3. This is my nifty footnote.
Enjoy! Please post any questions or suggestions in the comments below.
Short link: http://tcnr.me/i65qk
Add a Comment
Recent Entries
Tech Talk
Projects
Archive
Tags
How can I change where the footnotes appear on my post? I want to use the tag but I want the pagination to appear before the Notes section instead of after it.
Right now the location can’t be moved, but your suggestion isn’t one I had considered. I’ll look into a way to specify where notes should go.
Is there any way for me to do that in the mean time? Editing theme files?
Well, it wouldn’t be terribly hard to do it, and I have an idea how I’ll do it when I modify the plugin, but it’s a little more complicated than I could quickly explain.
If you want to fiddle with it, the footnotes are currently added via the_content filter, using the function annie_process_content(). You would need to modify how/where it outputs the footnotes.
Also, I should ask – how are you handling pagination? What exactly are you wanting to show up before or after the footnotes?
I’m actually using the built-in pagination function. Simply adding tags in the content where I would like to have the page breaks. The page numbers will appear at the bottom but it comes after the footnotes. Since I’m using Tippy to display the notes, the footnotes would most probably not be of interest to most readers. If the footnotes has too many entries, the pagination section will be right at the bottom and some readers might miss it.
I’ll work on an update tomorrow with two new features: ability to manually choose the location of the footnotes, and ability to turn off displaying them at the end.
Thanks! I didn’t realise that the tags didn’t show up. I’m using the tag for pagination.
I’m also using the Sharing feature from the Jetpack plugin by WP.com. The sharing section (ie, the Facebook, Google+ sharing buttons) shows up before the footnote.
Just released 1.3.0 with the option to turn off the Notes section, and a new footnotes shortcode to manually place the notes. The new shortcode won’t help in your case because of the way WordPress processes the nextpage tag, but you can turn off the Notes section if you just want them to display in the tooltip.
Thanks! This solves my problem.
Thanks for creating this awesome plugin! This is the first one I have found that works well and does what I was wanting — and some things I didn’t know I wanted.
I was wondering though, is there a way to add brackets to the footnotes, so they will appear like: {1} ?
Up to now I have been using Tippy tooltips as a substitute for footnotes and was delighted to discover Annie. However, I find that tags in the footnote/tooltips (i.e. fubar) are not interpreted. Should I be using an an escape character?
Never mind… got it now
Thanks for the great work.
Well actually, I don’t have it. I was looking at the wrong piece of code. Please use next comment.
Thanks for your patience.
Up to now I have been using Tippy tooltips as a substitute for footnotes and am now beginning to update my footnotes to Annie. However, I find that tags (e.g. emphasis, bold, etc.)within the footnote/tooltips are not interpreted.
I have tried various escape sequences for the less-than/greater-than characters but nothing seems to work. Can you please tell me what I’m doing wrong?
Edward,
You could alter the code to do something like that, but there isn’t a straightforward way. I’ll look into adding an option where you can specify text to go before/after the footnote reference.
Mike,
I’ll check into that, since it should work.
Thanks so much. I would also like to include links to entries in my bibliography.
Btw, Edward could possibly amend your CSS to use the pseudo-elements :before and :after. Something like this…
a.annie_footnoteRef:before {
content: ‘{ ‘;
}
a.annie_footnoteRef:after{
content: ‘ }’;
}
Please forgive me for being so dim but I notice that you already have an example of a link within a footnote-tooltip in the first line of this page. Could you please provide an example showing how this was done?