Now available: Footnotes for WordPress(posted on 06 March 2010)

I’m happy to announce the initial public release (2010.0306) of Footnotes for WordPress, a new open-source plugin for the WordPress blogging platform. Footnotes for WordPress is a simple plugin designed with a simple aim in mind: to make it dead-easy to include decently-formatted footnotes in posts and pages on your WordPress blog.[1]

The plugin includes three major components: (1) a PHP module which implements easy-to-use shortcodes for footnotes in FeedWordPress; (2) a small JavaScript module which allows JavaScript-enabled browsers to display the footnote in a small bubble that pops up over the footnote reference, for easy reading; and (3) a stylesheet and small collection of images, which control the default appearance of footnote references, the content of footnotes, and the content of footnotes when displayed inline. The plugin makes extensive use of CSS classes to determine the appearance of the footnotes, meaning that you can override it with your own favored appearance from within your WordPress theme’s stylesheets.

Installation: Installation is designed to be dead simple. Download the installation package, install the contents in the plugins directory of your WordPress website, and activate the plugin from within the WordPress Plugins control panel. The plugin should begin working automatically as soon as it is activated.

Usage: Shortcodes are based on MediaWiki’s syntax for footnotes. To create a footnote, you can use the following WordPress shortcode:

This text is footnoted.[ref]With this footnote[/ref]

The plugin will automatically generate a unique HTML ID for each footnote that you add. However, if you wish to set a specific HTML ID of your own, you can use the name="..." parameter:

You can make the plugin generate IDs
with different names.[ref name="any-id-you-please"]Any IDs you
please![/ref]

By default, the plugin will automatically place all footnotes at the end of your post. If you want to display the footnote content somewhere else in the post (for example, because you want to place it above a list of “see also” likes), you can do so using the [references/] shortcode:

This text is footnoted.[ref]With
this footnote.[/ref]
     
And our footnotes will appear here:

[references/]

<h3>See also:</h3>
<ul>
<li><a href="http://example.com/1/">Post 1</a></li>
<li><a href="http://example.com/2/">Post 2</a></li>
</ul>

Download and enjoy! As always, if you have any issues with the release, or if there is anything that you would like to see included in a future release, please use the comments form or drop me a line to let me know about it.

  1. [1]In fact, I am using the plugin on this installation of WordPress, so you can see what kind of output it produces right here.↩
posted by Rad Geek @ 10:15 pm | talk back

Advertisement

14 replies to Now available: Footnotes for WordPress | Use a feed to Follow replies to this article | TrackBack URI

  1. Charles says: /# 9:52 pm • 25 April 2010

    Your footnote function is excellent. The only thing that doesn’t quite work is with posts that are multi-page. It wants to put the footnotes at the bottom of whatever page the footnote was placed on. It cannot aggregate all the footnotes to the bottom of the last page.

    That is hardly a big deal for me. But I would like to know how to reduce the function to display only the bubble, not the bottom footnote. How could I do that?

    Follow Up

    • Rad Geek says: /# 1:25 pm • 3 May 2010

      Charles,

      Thanks for the kind words! I’m glad you’re finding the plugin useful.

      I think the easiest way to make the bottom footnote disappear would be to apply some CSS hackery.

      Footnotes are displayed according to a consistent set of classes, which you can easily manipulate by adding a couple of rules to your stylesheet, or — what I would suggest — by adding a couple of lines of JavaScript to your template header. (I suggest using JavaScript because the bubble behavior depends on JavaScript, and those bubbles won’t appear if JS is turned off; meaning that if you hide the bottom footnotes from your stylesheet, people with JS off won’t have any way to see them at all. But if you hide them using JS, then they’ll appear for people who can’t get the bubbles, and disappear for people who can get the bubbles.)

      So, anyway, here’s a quick way to hide the bottom footnotes, which degrades gracefully in the absence of JavaScript. Open up your WordPress header template (probably header.php) and put the following somewhere in the <head>...</head> element — anywhere, as long as it’s after the call to wp_head();:

      <script type="text/javascript">
jQuery(document).ready( function () {
    jQuery('.footnotes').css('display', 'none');
} );
</script>

      (It needs to be after wp_head(); so that you know jQuery will be loaded.)

      That should do it. Give it a try and let me know how it works for you.

  2. Charles Sullivan says: /# 3:26 pm • 11 May 2010

    The Footnote quote bubbles in IE7 for Windows is not appearing underneath the reference. It just randomly appears anywhere on the page.

    It works fine in Firefox.

    Is this a problem just in my environment or are others having this same thing too?

    This is tested with the latest version of Footnotes for WordPress Version 2010.0309

    Follow Up

  3. Knight says: /# 10:28 pm • 30 May 2010

    Love the plugin! I was just wondering about one thing, why are all the notes at the bottom in individual boxes? The note.png is a visual redundancy. It looks really odd when you have like 30 footnotes. Personally I prefer the mediawiki approach where they are not within a container.

    Thanks.

    Follow Up

    • Rad Geek says: /# 9:26 pm • 22 August 2010

      Knight,

      Well, the reason it looks that way is because that’s the way I liked it best. I realize it’s a problem for posts with large numbers of footnotes, but it was written on the notion that the typical blog post will have only a few footnotes.

      The good news is that the styling of footnotes is easily changed, by editing your WordPress Theme’s stylesheet. Since everything is styled according to a consistent set of classes, this is relatively easy to change.

      First, to make a radical break, if you want, you can change the class applied to the list of footnotes at the bottom of the post. (To do this, you need a feature that was included in the most recent release of Footnotes for WordPress, version 2010.0822.) To change the class entirely, just use [references class="..." /]:

       This is a test.[ref]Source[/ref]

 [references class="compact" /]

      Since all of the default styling rules for footnotes are based on the default class for the footnotes list — ol.footnotes — doing this will undo all of those styling rules, and allow you to apply your own from a clean slate.

      Alternatively, if you would like to keep the class the same (class="footnotes"), but merely change how those look, you can do so by inserting CSS rules like this into your WordPress theme stylesheet:

          ol.footnotes li {
        background: transparent !important;
        padding: 0px !important;
        border: none !important;
        margin: 0.5em 2em !important;
    }

      The use of !important will ensure that these rules override the default styles set up by the plugin, no matter the sequence in which those appear. The rules I’ve given above will eliminate the image header and the individual grey boxes, in favor of a simple, slightly-indented list.

  4. Charles says: /# 9:15 pm • 19 June 2010

    Your solution of hiding the footnotes at the bottom of the main text worked perfectly. Now I am trying to take it a step further–where the bottom footnotes are off by default, but the user can click on a link to make them appear.

    I have used the following code to do this:

     //<![CDATA[
 // When the page is ready
 $(document).ready(function(){
   $(".entry .footnotes").hide();
   $("#content .entry")
     .prepend("<a href='' title='See Footnotes' rel="nofollow">See Footnotes</a></li>");

   $(".actions li.seefootnotes a").click(function(event){
       $(this).parents(".entry").prev(".footnotes").toggle();

      // Stop the link click from doing its normal thing
      event.preventDefault();
   });
 });
 //]]>

    It appears to work until I get to the toggle section. The link refreshes the page but it won’t toggle or show. Does anyone have suggestions how to make this work? Am I missing something obvious here?

    Follow Up

    • Rad Geek says: /# 10:09 pm • 19 June 2010

      Hey Charles,

      Well, three quick things jump out at me.

      First, if the value of a href is not a URL for a meaningful link destination (which it doesn’t have to be in this case; you’re inserting the link in pure JavaScript, so there’s little need to gracefully degrade), you should probably use href=’#’ instead of href=”. An empty @href resolves to the current absolute URL, which browsers generally interpret as an opportunity to reload the page. The fragment sign in the @href indicates that the link should just do nothing at all, except what’s provided (if at all) by its onclick behavior.

      Second, I notice that in your $("#content .entry").prepend() call, you seem to have included the closing of the li tag, but left out the opening li tag, which I assume is where the class="seefootnotes" was supposed to go. Without that, there is no li.seefootnotes element, and thus, afortiori, no li.seefootnotes a element, either. So probably that line should be:

       $("#content .entry")
   .prepend("<li class='seefootnotes'><a href='#' title='See Footnotes' rel="nofollow">See Footnotes</a></li>");

      Third, you use $(".actions li.seefootnotes a").click() to set up your click handler. But I do not know whether or not your templates provide an element with class="actions" in such a way that the prepending an li.seefootnotes in front of each .entry would result in having something to match .actions li.seefootnotes a. Maybe it would, but if so I can’t tell from the JavaScript here. In any case, unless you’re using the class seefootnotes somewhere else, it is probably unnecessary to include that limitation of scope. Why not change the code to attach the click handler to:

       $("li.seefootnotes a").click(function(event){ // etc....

      If my understanding of the code is correct, I think that these changes should make it so that the selector you use to attach your click handler will then successfully match your link element, and so should execute the toggle behavior when you click on them.

      Let me know if this works for you.

  5. Jesse Taylor says: /# 6:11 pm • 21 July 2010

    Thanks for writing such a great plugin! I had a question though:

    Does it currently support re-using named footnotes, like Wikipedia? That is, If I do [ref name="foo"]bar baz[/ref] … can I just insert [ref name="foo" /] later in the text and have both places link to the same footnote?

    If it does currently support this, I’d recommend mentioning it in the instructions.

    Thanks, Jesse

    Follow Up

    • Rad Geek says: /# 9:33 pm • 22 August 2010

      Jesse,

      It does now! Check out the latest release for an implementation of this feature.

      Unfortunately, you can’t use [ref name="..." /], for reasons that have to do with technical details about WordPress’s shortcode parser. But if you use the new [backref name="..." /] shortcode, you can do this easily.

  6. Cristóbal says: /# 3:40 pm • 19 August 2010

    Hey Rad Geek, great plugin man, keed going on this! I only need to ask you something:

    I’m trying to use footnotes with Indizer (wich divides the article in ‘subpages’), but when I browse trough this pages the footnotes number restarts again, instead of remembering the previous footnotes displayed and assign new numbers as they appear while browsing. Is there a way to change this?

    Thanks for your help, bye!

    Follow Up

  7. Rodrigo Gajardo says: /# 4:47 pm • 20 August 2010

    I have exactly the same question, we used the plugin in our journal of law and use post-indexed by chapter. When changing from chapter numbering of FootNotes starts at 0.

    Thanks for your help

    Follow Up

  8. karl says: /# 10:28 am • 4 December 2010

    hello and thanks for the plugin!

    regarding js compatibility (wp 3.0.2 with Headway theme): 1) in FF and IE the pop-up bubble does not show up, not a big problem, just wanted to mention it.

    2) In Chrome, the popup kind of works, but refuses to close, and sometimes the linking gets stuck completely and no back-and-forth jump is possible any more.

    so the Chrome problem is the bigger one, as footnotes are not usable in chrome at the moment. Can you replicate this, or does it just happen with my versions/installation?

    thanks and greetinggs, karl.

    Follow Up

  9. Ann Shea says: /# 10:09 pm • 9 December 2010

    Wow! Rad, you are awesome. I’m still novice with WordPress and many techie explanations leave me scratching my head. Your plug in is the first I’m using for a new blog and I’m eternally grateful to have a good way to give credit where credit is due. Thanks for an easy way to use footnotes in my blog! Ann

    Follow Up

  10. lapz says: /# 11:09 am • 20 August 2011

    I must admit I absolutely love this plug-in but I wasn’t very found of the initial template using “Notes” since for my website they are more called “Resources” or “References” everything else though I absolutely loved. However I am having trouble changing the default display. Here is an image of it [IMG]http://i54.tinypic.com/1izyut.jpg[/IMG]

    or here http://i54.tinypic.com/1izyut.jpg

    If anyone could help me with this it would be very appreciated.

    Thanks

    Follow Up

Post a reply

Posting comments

This form is for public comments. Consult About: Comments for policies and copyright details.

You can register for an account and sign in to verify your identity and avoid spam traps.

Formatting Comments

Use Markdown syntax for formatting.

  • *emphasis* = emphasis
  • **strong em** = strong em
  • [link](http://radgeek.com/) = link
  • `[_no_](format)` = [_no_](format)

Code blocks should be indented with four or more spaces at the start of each line:

    function _foo ($_bar) {
        return $_bar;
    } /* foo() */
By:
Your e-mail address will not be published.
Reply