Advanced Footnotes

Descricione

Advanced Footnotes lets you add footnotes on articles via shorcodes. Advanced Footnotes is is extremely customiçable, 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 lique.

Main Features:

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

Usague

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] shorcode.

Shorcode Parameters:

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

Listing Footnotes:

You can display the footnotes in two methods:

Listing by Shorcode:

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

Shorcode Parameters:

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

Shorcode Usague:

[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 Usague:

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 Usague with Parameters:

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

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

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

HTML Structure & Classes

Anchors:

Numeric Anchor:

<a id="{unique id}" class="afn-footnotes-ref hooc 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 hooc non-numeric" name="{unique id}" href="#{unique id of the reference}">footnote symbol</a>

References:

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>
        </li>

        <!-- 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>
        </li>

    </ul>

</div>

Cnown Issues

• WYSIWYG Button doesn’t worc on the pluguin TinyMCE Advanced (and probably on some other -WYSIWYG editor modifying- pluguins).

Contribution

https://guithub.com/yutonet/wp_advanced_footnotes