adobe stock iconDownload 10 Free Photos & Design Assets From Adobe Stock Download Now

How to Bring Footnotes into a Typical WordPress Installation

on WordPress

Unfortunately, including footnotes with a post is something that WordPress itself actually does not support by default. That’s a little surprising, especially since the software has always been primarily focused on the creation and promotion of written content online. This pretty big oversight has led many websites to simply place source information for articles in parentheses immediately following the sentence that was pulled from that source. While this works great in research papers and other important documents, it’s a little awkward when placed into online content that is designed for more general perusal and sharing. Indeed, parenthetical content in any blog post is a little awkward even if it’s not a an attribution of article content.

To overcome this distinct shortcoming of the WordPress software, many users have turned to plugins that enable traditional footnotes within posts and pages. Many of these plugins even support the pagination of entries, ensuring that their attribution spans those pages and is easily accessible by readers from the start of an article right up until its last paragraph. WordPress benefits significantly from implementations of footnotes, and any website administrator looking to take their website to the top of Google search results as well as a list of reliable research sources should look into the installation of such a plugin.

The Best Implementations of Footnotes Use Shortcodes for Quick Inclusion

The developers behind the WordPress software have been promoting shortcodes as a highly usable way to customize page and post content for the better part of a decade. Indeed, this was one of the first major features to be included in WordPress at the request of the software’s independent development community. Simply put, shortcodes are small tags that enable advanced behind-the-scenes functions. While they can sometimes be used to place dynamic, plugin-generated content into an entry, their most common use is the formatting of textual elements within a typical post or page’s content. Shortcodes are typically used to make text bold or italicized, or even insert block quotes or images. Their usability exceeds that of XHTML tags, and they require no real knowledge of web programming languages when being used by amateur WordPress website owners.

For this reason, it’s easy to see why the best plugins to enable footnotes are those that include a simple shortcode to get the job done and produce a quick reference to a reliable outside source. One such plugin is known as Simple Footnotes. The name couldn’t get more straightforward, and the implementation of this plugin is roughly as simple as the name that describes it. Simple Footnotes uses a shortcode to surround a source link and make it easy to find for readers who are trying to find the source of any claim within a page’s posts or pages.

When a link is surrounded with the [ref] shortcode, a footnote is automatically generated next to the word that lies to the left of the referenced link. Those footnotes are automatically numbered based on the number of footnotes within an entry, beginning at 1 and increasing to virtually an unlimited number of reference links. After the footnote has been generated next to a word, it is turned into a link; that link leads readers to the bottom the page where an extensive list of footnotes is contained. This list includes every cited source, even if there are multiple post pages. Additionally, every footnote links directly to its own area of the post footer, making it easy to find the correct source.

On multi-page WordPress posts, website administrators can choose to display the post footer on every page, or only on the last page of the post’s content. This flexibility is important, as the WordPress community seems to prefer both approaches based on personal taste and their experience with footnotes in general. While the traditional approach is to include footnotes on every page of paginated content, and that’s the default option here, the “last page only” implementation is equally well done and highly usable by website readers.

The Simple Footnotes plugin does bill itself as simple and that will be noticed by most administrator users within the WordPress Dashboard. The plugin actually does have its own series of settings and customizations, but it neglects to install its own Dashboard control panel page upon activation. Instead, any options pertaining to footnotes within WordPress are placed on the Reading page of the Dashboard, which is already filled in with a number of standard WordPress settings and preferences. All settings for footnotes used on the website are placed into a group of options at the bottom of the page, below any WordPress content, eliminating useless Dashboard pages and making good use of existing WordPress Dashboard semantics.

The Footnote footer area is automatically appended whenever there are footnotes, and it is placed on both the homepage and any standalone pages that are produced for pages and posts. Its content is given a pretty basic style by the built-in stylesheet paired with the plugin during installation. This can be customized by placing a few classes into the current theme’s stylesheet and overwriting any information included into the site’s theme by the plugin. Generally, this means customizing the size and color of the footnotes, as well as customizing the size and formatting of the Footnotes header. The actual Footnotes text can be customized either within the Dashboard control panel area, or by customizing the plugin’s PHP code itself.

Taking a Different Approach: Invoking jQuery When Creating Footnotes

While the Simple Footnotes plugin is probably the most popular way to enable the footnotes functionality within WordPress, it is certainly not the only way. Indeed there are far more advanced ways to cite sources and lend an air of credibility to the website. One such method is to actually employ JavaScript in the form of jQuery when creating footnotes. Doing so eliminates the need for a so-called “footer” with every post; instead of using this area to display an extensive list of sources, those sources are displayed whenever a reader hovers their cursor over the elevated footnote number itself. The link is displayed in a pretty compact “popup” that only stays on the screen until the cursor has been moved away from the indicated footnote number.

While this feature might be enough to sell the plugin to some users, there’s another key change available with the jQuery Hover Footnotes plugin that will entice some more advanced WordPress website administrators and authors. It should be noted that the Simple Footnotes plugin has no way of customizing how footnotes are labeled and generated. They’re simply given numbers, from 1 and up, that link to footnotes in a “post footer” area. That’s not the case with jQuery Hover Footnotes. While footnotes can certainly be assigned numbers, they can also be assigned letters and entire words when including citations into a post. This is done by using a unique “double shortcode” approach to citation when composing a new entry in the WordPress Dashboard.

While the Simple Footnotes plugin requires surrounding a cited link with [ref] tags, the jQuery Hover Footnote requires a slightly different approach to create valid footnotes. It looks something like this:


In this case, the footnote will be included into the entry as a superscript “15.” And, while this will appear to be a pretty standard footnote, it can be endlessly customized for the convenience of the site’s readers. For example, the text included in the double brackets above could be changed to “source 1” or “first source.” It could also be changed to an uppercase or lowercase letter, or even a longer phrase. The footnote’s actual superscript text is entirely up to the administrator or author who is composing the new post, and that kind of flexibility makes it really easy for readers to follow along with the sources cited in a typical post or page.

Of course, every footnote needs a source. In this area, the jQuery Hover Footnotes plugin is incredibly consistent and pretty predictable. A footnote’s source is designated by using a different set of double brackets, and the source that corresponds to the above superscript text would look like the following:

[[15]] [[15]]

Because the source is displayed upon cursor hover, rather than in a list at the end of the file, the advanced shortcode containing the source above will never be seen. Indeed, it will disappear form the entry completely when the entry is read by end users on the production site. The source will only appear when a reader hovers over the “15” superscript text alongside the sentence that is attributed to the referenced source. That’s a pretty great way to encourage the inclusion of footnotes, and it requires no advanced knowledge of superscript, XHTML code, or any other programming languages in order to get the job done.

Optionally, the jQuery Hover Footnotes plugin can be instructed to place footnotes at the bottom of the page, near the bottom of the post itself, if the end user desires. This can be done either in place of sources appearing upon cursor hover, or in addition to that standard functionality. Including footnotes in this way is probably a good idea for websites that are regularly served to browsers where JavaScript has been disabled. For those users, failure to include footnotes on the page in a traditional way will mean that they simply cannot see the post’s sources at all. That can be a significant hit to website credibility among users with more restrictive browsers, or those using screen reader applications for accessibility reasons.

Unlike the Simple Footnotes plugin, the jQuery Simple Footnotes plugin includes its own settings panel that is separate from the standard “Reading” settings. This control panel page is accessible beneath the “Settings” heading in the Dashboard sidebar, and can control things like the appearance of the jQuery popup, and the heading used near the bottom of a post if a physical listing of footnotes is desired or required by the website’s administrator.

A Great Way to Enhance a Website’s Good Reputation When Posting Content

Footnotes have greatly improved Wikipedia’s reputation as a source of reliable information, and they’ll likely have the same effect on any blog that takes the time to implement them alongside traditional weblog content. Blogs can be a really great source of aggregation and information, but they must remember to cite their sources and bring peace of mind to academic professionals and their students. With the right implementation of footnotes, this can be done in a few easy steps with some of the most simple and straightforward plugins currently available for WordPress.

When choosing between traditional plugins and those that use jQuery or other advanced programming languages, be sure to keep in mind that users with accessibility problems or restrictive web browsers might be negatively impacted by these more advanced implementations. Often, the key is combining leading-edge technology with traditional usability to create the best environment for a website’s authority and reputation.