How do I…?

Q: How do I make it so that only the bubble displays, without displaying the list of notes at the end?

Question courtesy of Charles Sullivan.

A. The easiest and best way to make the bottom list of footnotes disappear is to apply a bit of CSS and jQuery hackery.

Footnotes generated by the plugin are displayed under a consistent set of classes, which can be easily manipulated using standard CSS rules, which can be applied either through the stylesheet, or dynamically using JavaScript. In this case, the best way to hide the bottom list of footnotes is to add a few lines of JavaScript to your template header, so as to allow for graceful degradation.[1]

So, here’s a quick way to hide the bottom footnotes, which degrades gracefully in the absence of JavaScript. Open up your WordPress Theme’s 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(); because it depends on jQuery, and you won’t know that jQuery has been loaded until after wp_head();.)

Save your changes, reload, and you should be good to go!

Q: How do you change the styling of the notes at the bottom of the post?

Question courtesy of Knight:

A. Say that you don’t want to make the list of footnotes at the bottom disappear; say you just want to make it look different. Fortunately, since footnote styling is all done through a consistent set of classes and a simple set of CSS rules, it is easily overridden by altering the class for the footnotes or by changing the rules in your stylesheet.

If you’d simply like to change the existing rules for styling footnotes, the thing to do is to add new rules to your WordPress Theme’s Stylesheet, which make use of the selector ol.footnotes li. For example, suppose that, instead of each note being displayed in its own individual grey box, you’d like to have them displayed in a more compact list format, with no boxes or borders. Here’s a rule that will override the default styles in order to make the footnote list display as a simple, slightly-indented list:

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

On the other hand, there may be situations in which you want to make a radical break — where you want to change the CSS class for the footnote list. (Perhaps you want different styling rules for long lists of footnotes from what you use for shorter lists of footnotes.) In order to do this, you can make use of the new [references class="..." /] syntax:

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

[references class="compact" /]

The footnotes list will then be contained by an <ol> element with class="compact", instead of class="footnotes". Note that since all of the default styling rules for footnotes are based on ol.footnotes, a footnotes list with class="compact" will have none of those rules applied to it. If you want class="compact" footnotes lists styled as a simple, slightly-indented list, try adding a style rule something like this to your Theme’s stylesheet:

    /* Override HTML numbering, 
     * since the footnote superscripts
     * provide numbering of our own.
     */
    ol.comact {
            list-style: none;
            margin: 0px;
            padding: 0px;
    }

    ol.compact li {
            list-style: none;
            padding: 0px;
            margin: 0.5em 2em;
    }

Save your changes, reload, and enjoy the results!

  1. [1]Briefly, since the appearance of the footnote bubbles is a behavior created by JavaScript, anyone who doesn’t have JavaScript turned on — such as disabled users with certain kinds of assistive technologies, users relying on text or voice-based browsers, search robots, users with JavaScript turned off for performance or security, etc. — won’t be able to see those bubbles. If you use a stylesheet rule to hide the footnote list, those users won’t have any way to see your footnotes. However, if you hide the end-of-post footnote list dynamically using JavaScript, rather than statically through your stylesheet, the closing list will appear for people who can’t get the bubbles, and disappear for people who can get the bubbles. Everyone wins. Graceful degradation is awesome.↩

Advertisement