CM 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
- CM Footnotes – This document uses version 2.0.0.
CM Footnotes is a WordPress 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.
- Installing the plugin
- Setting up
- Creating a definition
- Placing a shortcode with a footnote
- End Result
Installing The plugin
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
After you installed the plugin, before creating the 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 should be displayed footnotes.
- 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:
- 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)
Footnotes Bottom Styling
The following options define the style of footnotes in the bottom part of the page.
- Footnote link anchor style - Set the style of footnote link anchor:
- Footnote description style - Set the style of footnote description:
- 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:
- 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
When you finish 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.
- 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, as you can see on the screenshot above.
- 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.
- Delete Dashicon - Click the "X" button to delete dashicon from this definition.
- Definition - This field should contain the definition/explanation, which the link created by the shortcode will link to.
- Tooltip External Link - This field is for adding an external link that will be included to the definition.
- Delete Definition - Click the "X" button to delete this definition.
- Add New Definition - Click the "+" button to add new definition.
Placing a Shortcode With a Footnote
To add a footnote link you just need to put the shortcode anywhere you want in the page content. Shortcode:
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:
- It identifies the footnote - so you can easily match the link and the definition
- It's the label for the link - so it's up to administrator how the link will appear on the front-end
You can add shortcodes like:
There are two ways how you can disable or enable footnotes on the post/page.
1) If in plugin settings in the option Display footnotes on are chosen some post types, you can can disable footnotes on some definite post/page of that type.
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 - some post/page types can be disabled in plugin options for displaying footnotes, but you can enable it on the definite post/pages.
While editing the post/page find the metabox CM Footnote - Disables will have another option - Enable Footnotes on this 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.
Following instructions found in the plugin and guides, you should be able to manage footnotes on articles posted on your site.