FD Footnotes Plugin for WordPress
This plugin provides an extremely easy way to add elegant looking footnotes to your posts. The syntax is natural, simple to understand, and degrades gracefully if the plugin is removed. Footnotes are linked unobtrusively and the note itself links back to the original text where the footnote is referenced.
Requirements
- Wordpress 2.0 or higher
Installation
To install the plugin:
- Copy fdfootnotes.php into wp-content/plugins.
- Activate the plugin from the Plugins tab in WordPress.
Usage
Adding footnotes to a post is simple. Just type them inline in your post in square brackets like this:
Each footnote must have a number followed by a period and a space and then the actual footnote. They don’t have to be unique but it is recommended. It doesn’t matter what the numbers are since the footnotes will be automatically renumbered when the post is displayed.
For example, this:
…produces this:
Footnotes can contain anything you’d like (except square brackets) including links, images, etc. Footnotes are automatically linked back to the spot in the text where the note was made.
Note: Do not include square brackets [] inside the footnotes themselves.
Note: Footnote numbers don’t need to be unique but it is recommended, especially if the text is identical for multiple footnotes. If you have multiple footnotes with the exact same text and number then you’ll get weird and incorrect footnotes on your post.
CSS Styling
Here’s the CSS I use:
.footnotes {
font-size: 85%;
line-height: 1.5em;
padding: 10px 0 10px 0;
}
.footnotes .footnotedivider {
width: 120px;
border-bottom: 1px solid #ccc;
}
.footnotes li {
margin: 0 0 5px 0;
}
sup.footnote a {
text-decoration: none;
font-size: 80%;
}
sup.footnote {
line-height: 0em;
}
.footnotereverse a {
padding: 0 0 0 5px;
text-decoration: none;
}
Compatibility
Some users have reported compatibility issues with the EasyTube and WP-Ratings plugins. If you’re having trouble with Footnotes you might try disabling those plugins to see if that fixes the problem.
License
Copyright (C) 2008 John Watson
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3 of the License, or any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
Version history
- April 1, 2008: Version 1.0 released
- April 28, 2008: Version 1.1. Changed priority so that footnotes come immediately after the post and before widgets appended by other plugins.
- May 19, 2008: Version 1.2. Fixed a bug that made the browser scroll to the end of the footnote when clicking on a footnote reference.
RSS Feed
Good plugin!
but it’s not working on my blog(wp 2.5 and visual editor)
Oh! I solve It.
[1.footnote] -> not work.
[1. footnote] -> work.
[footnote] -> not work.
[*. footnote] -> not work.
Hey, any way you could add support for multiple of the same footnotes?
IE define the first one with [1. this is a note], then add other references to same note with [1.]
You could make it work like the tags in wikipedia. That is, each footnote breaks into decimals with each reference.
That sounds like a good idea but I’m not familiar with the Wikipedia way. Can you point me to an example article that does that?
[...] FD Footnotes Plugin von John Watson macht richtig was her. This plugin provides an extremely easy way to add elegant [...]
Hi. I seem to be having problems using the footnotes with links.
I have a few posts where the footnotes have links:
[1. Text ]
[2. Text 2 ]
appears as
1. Text (this text is hyperlinked to footnote 1) ←
2. Text (this text is hyperlinked to nothing) ←
I noticed that the hyperlink to the second footnote is linked to the arrow after the footnote text.
Is this a browser issue, a plugin issue, or a compatibility with other plugins issue?
I’m using WP 2.5
The first footnote will have the correct url but the second footnotes
Ooops. never mind that comment. Found the solution. Apparently, what I needed to do was close the A href tag after the closing square bracket.
Thanks! This plugin rocks!
John,
Thanks for the plugin. My posts tend to be long and “complicated”, and it’s been of great use to me.
I am havong a somewhat minor problem: Instead of appearing right under my entries, they appear below some of the widgets (social bookmarking, etc), as you could see for example in http://blog.intuicionlogica.com/apple-presenta-resultados-q2-2008. I’ve been peeking at my php files, and would feel reasonably comfortable moving some code around – but I don’t find any. Where do I have to look? (No: I am not an expert!)
Thanks in advance and greetings from sunny Spain,
Enrique
How about that, I learn something new every day, today it’s plugin priority.
Open the footnotes plugin file (fdfootnotes.php) and change the last line from this:
add_action(‘the_content’, ‘fdfootnote_convert’);
to this:
add_action(‘the_content’, ‘fdfootnote_convert’, 1);
Let me know if that fixes it for you. If that works I’ll make a new release with this change.
That did the trick :-)))
Thank you again. If I can ever be of help just let me know.
Un saludo,
-Enrique
“That sounds like a good idea but I’m not familiar with the Wikipedia way. Can you point me to an example article that does that?”
Sure, just a second:
Ok, wikipedia uses a,b,c, etc.
http://en.wikipedia.org/wiki/Wikipedia:Footnotes
But the Cite plugin uses 1.1, 1.2, etc. Here is the Cite plugin page.
http://www.mediawiki.org/wiki/Extension:Cite/Cite.php
You can see an example of the numbering under the references section (http://www.mediawiki.org/wiki/Extension:Cite/Cite.php#.3Creferences_.2F.3E)
Great plugin!
My only problem is that I have a fixed header on my page, so when I click the footnote superscript to jump to the footnote itself, the footnote is jumped to *behind* the fixed header. The same applies in reverse when clicking back to the main content.
I can’t think of any way to “push” the footnote underneath the header to display properly through CSS. Any suggestions…?
(I can’t be the only person who has experienced this..)
Thanks!
I can’t think of any way around that in just CSS. You could work around your CSS problem with some javascript… a hook that catches clicks on internal links and then scrolls the page to the right spot. In theory, anyway. Or by not making the header position:fixed, of course. :-)
Hi, super nice and elegant plugin. Thanks!
I’m using it with Wordpress 2.5.1.
One question re: performance:
My footnotes show up in order, but un-numbered, and that nice gray delineation line which looks as if its meant to separate the footnotes from the text is also absent. The return to text link thing’s there after each one, thought. I’m not using either of the plugins you mention, but I’m going to test the ones I’m using right now and I’ll let you know. Thanks, Sean
Thanks. It sounds like your theme stylesheet (style.css) is setup so that it doesn’t number ordered lists. If you add the CSS above to your theme style.css you’ll get the grey divider. Try adding “list-style-type: decimal” to the .footnotes class or hunt through your CSS for something like “list-style: none” which is removing the numbering.
[...] 4. flagrantdisregard » FD Footnotes Plugin for WordPress [...]
Hey John,
Thanks! It worked on both counts. Got the gray line, got the numbers. My only concern is that when I click the link to the footnote, it shoots down below the post and into the previous one. Maybe my post is too short, you actually can see the footnote while reading the text so there’s no need to use the link.
Yah, there’s two issues there. One, a bug in the plugin that I’ve known about for a little while—links to footnotes were scrolling to the bottom of the footnote instead of the top. I’ve just released a new version that addresses that. Second, your blog template has a floating header that obscures some of the text. But the only remedy for that is to modify your theme.
[...] FD Footnotes Plugin for WordPress (tags: wordpress plugin) [...]
Thanks John! I just installed the upgrade. Working on problem #2… Very much appreciated.
This is an excellent plugin. I just have two little questions:
1) I’ve used the “more” tag to separate a long post. The first section has a footnote in it, which appears at the bottom. Is it possible to hide the footnotes when the “more” code is used? If you look at my latest post, you’ll see the problem (www.forest-jones.net)
2) When a viewer clicks the footnote number, reads the note, and then click the “back to text” link, the browser goes right back to the line where the footnote link appeared. Is it possible to have the browser go back a few lines further? I think that this would make the return a little less shocking, if you know what I mean.
I hope these questions are clear. They don’t address bugs, just optional enhancements.
Thanks in advance!
Thanks, IanFJ. Regarding your questions:
1) This is one of those things that feels like it should be optional. I’m sure there are people who would like it both ways. However, I’m hesitant to add an options panel for the plugin because that opens the door to MORE options and I want the plugin to be simple to use. Here’s a suggestion: you could style your index.php posts with an additional class (e.g. <div class=”post multiple”>…) and then in your CSS add
.post .multiple .footnotes, .post .multiple .footnote { display: none }
That’s not quite what you want but it would make it so footnotes only appear when you click through.
2) I agree it can be jarring. I’m not sure how I would implement the solution you suggest, especially if a footnote appeared, for example, in the first line of a post. Something you might try is to install some javascript that does smooth scrolling of internal links (the page is scrolled instead of just jumped to the right spot). There are scripts for this made for the jquery, prototype, and mootools javascript frameworks.
I believe the YUI offers some smooth scrolling. Benefit is you dont have to install it on your server.
An old WP footnote plugin i used had an option for YUI scrolling.
The YUI tools are somewhere on the Yahoo developer page.
[...] flagrantdisregard » FD Footnotes Plugin for WordPress (tags: plugin wordpress footnotes) [...]
John,
Thanks for the great plugin, I use it and love it.
I second the suggestion in comment #21 about having the ability to publish the footnotes “after the jump” when using the “more” separator. Because I’m a total CSS n00b, I’m afraid of trying your suggested fix — I’m confident that I’ll screw it up and break my blog. :-)
Thanks for a great plugin, John! Would it be easy for me to modify the code if I wanted to change the markup to double square brackets? I have some documents that make other use of single square brackets…
[...] where you can get John Watson’s FD Footnotes Plugin. We wanted to put this information in a footnote – but we don’t think that’s possible. [...]
[...] FD Footnotes: Let’s you put footnotes is a very easliy. [...]
Excelent plugin. Easy to use and edit. Thanks!!!
I think it could be upgraded with a style chooser for the footnote.
I’ve added mi own style manually between the , but I’d like to see that option in the plugin itself.
Cheers
Thank you so much.
[...] un plugin de remplacement qui fonctionne tout aussi bien pour faire des notes de bas de page : FD Footnotes Plugin for WordPress Blog, [...]
I tried this plugin in my blog (using wordpress 2.5.1)
and it makes the formatting bar in my new-post page dissapears…
why is it like this??
I really want to use this plugin, help me please
@aRfian, I have no idea. There’s nothing in the plugin that should affect admin pages at all. You’re the only person who’s ever reported this problem to me. It sounds like it could be a problem with your WordPress installation.
[...] FD Footnotes. From the same guy who brought you FD’s Flickr Toys2. This plugin helps you easily [...]
[...] FD Footnotes: Elegant and easy to use footnotes. [...]
Brilliant plugin. Love at first sight. Many thanks. Where’s your PayPal button?
found the button right up there between my eyes just past my nose…
have a cup of coffee on me! thanks again!
Thanks, Tony!
[...] 32. FD Footnotes [...]
Footnotes on the home page will not be converted or hidden(I suggest if use a digest mode home page with “more…” button footnotes should be hidden.). Could you solve the problem?
[...] FD-Footnotes ↩ [...]
Thank you for this plug-in, I love it.
Like some of the commenters above, I would really appreciate it if you could add the option to hide footnotes before the ‘more’ code (or make this standard).
This plugin rocks. I tried WP-Footnotes first, but just couldn’t get my head around what generated the footnote and after messing with it, just gave up. A better manual – like yours – would have solved the problem.
If you do this: [xxxx]
Your get this: [yyyy]
but noooooo…..
Anyway, a big thanks – and – the “big thanks” is located
here
[...] FD Footnotes – This plugin provides an extremely easy way to add elegant looking footnotes to your posts. [...]
Great plugin!! I have but one problem. I’m wanting the footnotes to appear below my signature. I use another addon for my signature. Would you happen to know how I might go about making the footnotes appear below that? Many thanks for a very nice plugin!
@Mae, I think you could do it by changing the plugin priority…
In fdfootnotes.php the last line is: add_action(‘the_content’, ‘fdfootnote_convert’, 1);
The number 1 is the priority. Your signature plugin probably has a similar line, maybe without the priority number. If there’s no number, then the priority is 10 by default. Plugins are run in order from the lowest priority number to the highest so priority 1 plugins run before priority 2 plugins, for example. So you could change the number in fdfootnotes to something really large to make it run last, or just bigger than the number in your sig plugin to make it run after that.
[...] FD Footnotes Plugin für WordPress von John Watson ermöglicht es auf einfache Weise Fußnoten im Text von Beiträgen unterzubringen. Dazu gibt man einfach den Text der Fußnote in eckigen Klammern an passender Stelle im Beitragsatext ein. Im Frontend wiird nun die Nummer der Fußnoten im Beitragstext und unter dem Text die Nummer samt dem Fußnotentext angezeigt. Führt man den Mauszeiger über die Nummer wird ebenfalls der Text der Fußnote angezeigt. Bookmarks setzen: Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können. [...]
[...] to use it. You can review the spam it catches under "Comments." 2. FD Footnotes – flagrantdisregard FD Footnotes Plugin for WordPress This plugin provides an extremely easy way to add elegant looking footnotes to your posts. The [...]
Thanks for this wonderful and truly elegant plugin.
Much appreciated.
Alec Satin