Plugin / Advanced Footnotes

Yunus Tabakoğlu



Advanced Footnotes lets you add footnotes on articles via shortcodes. Advanced Footnotes is is extremely customizable, therefore it can be implemented on any theme.

With its internal functions, you can also implement Advanced Footnotes on your own theme in any form you like.

Main Features:

  • Easy & flexible implementation.
  • Implemented WYSIWYG editor button.
  • Footnotes can be implemented with shortcode or function.
  • Animated scroll effect (can be disabled)
  • Lightweight CSS (can be disabled)
  • Custom CSS styling
  • Dynamically changeable interface options (JS can be fully disabled)


Inserting a Footnote:

In order to insert a footnote, you can either use the “Insert Footnote” button added on your WYSIWYG editor, or use the [footnote]your-footnote-here[/footnote] shortcode.

Shortcode Parameters:

“type”: Determines the type of the reference. Options: numeric / non-numeric.

Listing Footnotes:

You can display the footnotes in two methods:

Listing by Shortcode:

By simply inserting the [footnotes] shortcode in your post content, you can display footnotes wherever you want in your posts.

Shortcode Parameters:

“title”: Determines the title for the footnotes list. Default value can be set through plugin settings.

Shortcode Usage:

[footnotes title="My Custom Footnotes Title"]
// or
[footnotes title="false"]

Listing by Theme Inclusion:

You can print the footnotes by calling print_refs function from the advanced_footnotes class.

Simple Function Usage:

call_user_func(array('advanced_footnotes', 'print_refs'));

Additional Parameters:

  • First parameter: “Print”, whether print or return the footnotes content. (Default: “true”)
  • Second parameter: “Title”, determines the title for the footnotes content. (Default: “false”)

Function Usage with Parameters:

$footnotes = call_user_func_array(array('advanced_footnotes', 'print_refs'), array(false, 'Custom Footnotes Title'));<h3>Plugin Options:</h3>

You can access the plugin options through “Options/Advanced Footnotes”.

  • Include Plugin CSS: Determines whether to include the default plugin css files. Disable this if you want to re-style the plugin within your theme.
  • Custom CSS: Provides a field for custom CSS styling.
  • Include Plugin JS: Determines whether to include the plugin javascript files on the theme output. Disable this if you want to customize plugin interactions or just to use native HTML anchors.
  • Default Title for Footnotes: Sets the default title used on the “[footnotes]” shortcode.
  • Footnote Symbol: Sets the symbol used for non-numeric footnotes.
  • Disable JS Options: Determines whether to apply options to the plugin JS files or not.
  • Footnotes Scroll Gap: This sets the scroll margin when clicked on a footnote. Set this when you have a fixed header or any other element blocking some part of the window area.
  • Footnote Scroll Speed: Sets the animation speed when a footnote is clicked. Set 0 for no animation.

HTML Structure & Classes


Numeric Anchor:

<a id="{unique id}" class="afn-footnotes-ref hook numeric" name="{unique id}" href="#{unique id of the reference}">{number - automatically incremented by the order}</a>

Non-numeric Anchor:

<a id="{unique id}" class="afn-footnotes-ref hook non-numeric" name="{unique id}" href="#{unique id of the reference}">footnote symbol</a>


Non-numbered references are listed before the numbered references on the list.

<!-- Main Container -->
<div class="afn-footnotes">

    <!-- Title -->
    <h3 class="afn-footnotes-title">{Title}</h3>

    <!-- List of references -->
    <ul class="afn-footnotes-list">

        <!-- Reference item - non-numeric -->
        <li class="footnote-item afn-textarea">
            <a id="{unique id}" class="afn-footnotes-ref reference non-numeric" name="{unique id}" href="#{unique id of the anchor}">{footnote symbol}</a>

        <!-- Reference item - numeric -->
        <li class="footnote-item afn-textarea">
            <a id="{unique id}" class="afn-footnotes-ref reference numeric" name="{unique id}" href="#{unique id of the anchor}">{number - automatically incremented by the order}</a>



Known Issues

  • WYSIWYG Button doesn’t work on the plugin TinyMCE Advanced (and probably on some other -WYSIWYG editor modifying- plugins).



2 reviews

Rating breakdown

Details Information



First Released

12 Mar, 2018

Total Downloads


Wordpress Version


Tested up to:


Require PHP Version:





The plugin hasn't been transalated in any language other than English.


The information provided in this THEME/PLUGIN DIRECTORY is made available for information purposes only, and intended to serve as a resource to enable visitors to select a relevant theme or plugin. wpSocket gives no warranty of any kind, express or implied with regard to the information, including without limitation any warranty that the particular theme or plugin that you select is qualified on your situation.

The information in the individual theme or plugin displayed in the Directory is provided by the owners and contributors themselves. wpSocket gives no warranty as to the accuracy of the information and will not be liable to you for any loss or damage suffered by you as a consequence of your reliance on the information.

Links to respective sites are offered to assist in accessing additional information. The links may be outdated or broken. Connect to outside sites at your own risk. The Theme/Plugin Directory does not endorse the content or accuracy of any listing or external website.

While information is made available, no guarantee is given that the details provided are correct, complete or up-to-date.

wpSocket is not related to the theme or plugin, and also not responsible and expressly disclaims all liability for, damages of any kind, arising out of the use, reference to, or reliance on, any information or business listed throughout our site.

Keep Leading Your Followers!
Share it for them.