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

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

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
• Setting up
• Creating a definition
• Placing a shortcode with a footnote
• End Result

Installing the Pplugin

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

• 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.

There are a few sections with the options.

Footnotes Display Options

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

• 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:

If the option is disabled:

Footnotes Content Links Styling

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

• 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:

Footnotes Bottom Styling

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

• 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

• 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.

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.

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"]

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

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.

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.

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.

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.

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

	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