WordPress Footnotes (CMF) - Use Case - How to Manage Footnotes on Articles Posted on Your Site


Use Case - How to manage footnotes on articles posted on your site

Back to User Guides

Note: This guide requires:


Video Use-Case

Introduction

WordPress Footnotes is a plugin that allows users to define some words/phrases in the post/page content by adding a small link near the given word/phrase and the description at the end of the document.

Footnotes are often found in books and papers which use rare/old/specialist terms. They are a useful way to further explain these concepts in a later moment or to cite sources.

Use Case Front-End

Front-end example - WordPress Citation Plugin
Front-end example

Use Case Assumptions

In this example we will consider how to manage footnotes on articles posted on your site.

We assume that you have already bought the plugin, but not installed it yet.

It follows:

Installing the Plugin

The process is the same for all CM plugins and add-ons.

CreativeMinds Customer Account Dashboard - Downloads tab
CreativeMinds Customer Account Dashboard
  • Download the plugin from your customer dashboard.
  • Log in to WordPress and navigate to the WordPress Admin → Plugins settings.
  • Click on Add New.
  • Activate it and add the license.

Learn more: Getting Started - Plugin Overview


Setting Up

After you installed the plugin, before creating footnotes it is recommended to configure the plugin according to your needs. You can configure the appearance and behavior of the footnote items.

Navigate to Admin Dashboard → CM Footnotes Pro → Settings.

Navigation to the plugin settings - Footnotes WordPress
Navigation to the plugin settings

There are a few sections with the options.

Footnotes Display Options

The following options define where and how the footnotes should be displayed.

Footnotes display options - Footnotes In WordPress
Footnotes display options
  • Display footnotes on - Check the boxes to display footnotes on custom post types as well as on regular posts.
  • Show each bottom footnote on separate line - Enable it if you want to display each bottom footnote on a separate line.

If the option is enabled:

Displaying footnotes in separate lines - WP Footnotes
Displaying footnotes in separate lines

If the option is disabled:

Displaying footnotes in columns - WordPress Reference Plugin
Displaying footnotes in columns

Footnotes Content Links Styling

The following options define the style of a footnote link symbol.

Footnotes content links styling settings - WordPress Citation Plugin
Footnotes content links styling settings
  • Footnote link symbol - Configure the style of a footnote link symbol with the following options:
    • Size
    • Color
    • Font Style (Bold or Italic)
  • Display style - Choose the style of a reference link. Available options are:
    • Square brackets (1)
    • Curly brackets (2)
    • Rectangle (3)
    • Message bubble (4)

Example:

Footnote link styles - Footnotes WordPress
Footnote link styles

Footnotes Bottom Styling

The following options define the style of the footnotes in the bottom part of the page.

Footnotes bottom styling settings - Footnotes In WordPress
Footnotes bottom styling settings
  • Footnote link anchor style - Set the style of the footnote link anchor:
    • Size
    • Color
  • Footnote description style - Set the style of the footnote description:
    • Size
    • Color
    • Weight (Normal, Bold, Lighter, Bolder)
    • Decoration (None, Border, Underline, Overline, Line-through, blink)
    • Style (Normal, Italic, Oblique)
    • Alignment (Left, Right, Justify)
  • Include a separator before the footnotes - Enable this option if you want to display a separator line between content and list of footnotes.
  • Separator style - Configure the title and the style of a separator line:
    • Title
    • Line width (defines how long the separator line is)
    • Line thickness (Thin, Medium, Thick)
    • Line style (Solid, Dotted, Dashed)

Tooltips Display Style

Tooltip display style settings - WP Footnotes
Tooltip display style settings
  • Display Footnotes as Tooltips - Enable it to display tooltips on the footnote link when hover on it.
  • Tooltip display style - Configure the style of a tooltip:
    • Background color
    • Description color
    • External link color

Save Changes

When you finished configuring the settings, don't forget to click the button Save Changes.

Saving the changes - WordPress Reference Plugin
Saving the changes

Creating a Definition

First you need to start editing some post or page. When the plugin is activated, a new metabox appears on the bottom of the page: CM Footnotes - Definitions. There are a few columns that you need to fill.

Metabox for managing footnotes - WordPress Citation Plugin
Metabox for managing footnotes
  1. ID - Here is defined the ID that will be used in the shortcode. You can either use IDs that are created automatically (1, 2, 3...), or you can write here any other ID - it can be for instance letters or special characters.
  2. Dashicon - You can define an icon for every definition using WordPress icon's set. It will be displayed in the bottom of the page in the footnote list.
  3. Delete Dashicon - Click the "X" button to delete dashicon from this definition.
  4. Definition - This field should contain the definition/explanation, which the link created by the shortcode will refer to.
  5. Tooltip External Link - This field is for adding an external link that will be included to the definition.
  6. Delete Definition - Click the "X" button to delete this definition.
  7. Add New Definition - Click the "+" button to add a new definition.

Placing a Shortcode With a Footnote

To add a footnote link to a word or phrase you just need to put the shortcode anywhere you want in the page content. Shortcode:  [cm_simple_footnote id="X"]

Adding footnotes to the content - Footnotes WordPress
Adding footnotes to the content

The shortcode takes just one parameter - id. As it's already been said before - the value of the parameter can contain numbers, letters or special characters.

The parameter has two purposes:

  1. It identifies the footnote - so you can easily match the link and the definition
  2. It's the label for the link - so it's up to the administrator how the link will appear on the front-end

You can add shortcodes like:

  • [cm_simple_footnote id="1"]
  • [cm_simple_footnote id="xx"]
  • [cm_simple_footnote id="$%]
  • [cm_simple_footnote id="j1"]
  • [cm_simple_footnote id="link"]

Disabling/Enabling Footnotes

There are two ways how you can disable or enable footnotes on the post/page.

1) Displaying the footnotes on some definite post types can be enabled in the plugin settings in the option Display footnotes on.

Choosing post types where to display footnotes - Footnotes In WordPress
Choosing post types where to display footnotes

While editing the post/page find the metabox CM Footnote - Disables on the right dashboard. Then check the option Disable Footnotes on this post/page. You can uncheck this option when you need the footnotes to be displayed again on that post/page. And you can see there a message that says this post type is ON in plugin settings.

Disabling footnotes for a specific post - WP Footnotes
Disabling footnotes for a specific post

2) And the opposite - in the plugin settings some post/page types can be disabled for displaying footnotes, but you can enable it on the definite post/pages.

Disabling specific post type for displaying footnotes - WordPress Reference Plugin
Disabling specific post type for displaying footnotes

While editing the post/page the metabox CM Footnote - Disables will have another option - Enable Footnotes on this post/page. Check this option to display the footnotes on that post/page. You can uncheck this option when you need the footnotes not to be displayed again on that post/page. And you can see there a message that says this post type is OFF in plugin settings.

Enabling footnotes for a specific post - WordPress Citation Plugin
Enabling footnotes for a specific post

Footnote Link and Backlink

Users can click on the footnote link and they will be automatically scrolled to the bottom of the page to the needed definition. For convenience, users can get back to the place where they were reading the post by clicking the symbol "↑" next to the ID of definition. They will be sent back to the footnote link that they clicked to see the definition.

End Result

Following instructions found in the plugin and guides, you should be able to manage footnotes on articles posted on your site.

Use Case Front-End

Front-end example - Footnotes WordPress
Front-end example

More information about the WordPress Footnotes Plugin

Other WordPress products can be found at CreativeMinds WordPress Store

Let us know how we can Improve this Product Documentation Page

To open a Support Ticket visit our support center
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.