Whenever you quote content from others in your documents, it is a good practice to add citation with proper links. Applications like Microsoft Word offers a citation setup to add references to internal and external links in your documents. However, when it comes to online content management systems like WordPress, you do not have a proper way to show external references or notes. All you can do is to simply hyperlink external webpages or manually use superscript numbers or letters in content and add reference links at the bottom. This will be a hassle when you want to add references on multiple articles. Fortunately, WordPress introduced a new Footnotes block in version 6.3 and here is how you can effectively use it on your site.
Footer Notes Example
People use different names for citations like footer notes, references, additional info, etc. Wikipedia is one of the best examples of using footer notes. You can see the superscript numbers are used as citations in-between content and corresponding superscript numbers are explained under “References” section with proper hyperlinks.
You can easily create such setup in your WordPress posts without any third-party plugins.
Inserting Footer Notes in WordPress
First make sure you have updated WordPress to latest version and using Gutenberg block editor. Prepare your content and then follow the below steps to insert footer notes in your content.
- Select the text you want to cite.
- Click on the small arrow that show as “More” in block’s toolbar.
- Select “Footnote” option from the dropdown list.
- WordPress will automatically insert 1 as a superscript above the selected text and take you to the bottom of the article where you can type the note’s content.
- After typing, click on the return key symbol showing at the end of footer note to go back to the cited content.
You can add multiple footer notes in similar way to insert citations in content and references at the bottom.
Using Footer Notes Block
The bottom notes section is a block called “Footnotes” which will be automatically inserted and linked to corresponding citations. However, the appearance of this block depends on your theme and most themes will simply display the footer notes without any heading or separation from the main content. if you do not like the automatically inserted footnotes block, simply select and delete it. You can use “Document Overview” to select “Footnotes” block easily and delete it.
After that, insert a separator at the end of your content and add a heading for all your footer notes like “References”. Now, simply type /footer and select Footnotes block.
This will automatically display all your citations and insert another separator below Footnotes block. Now your footer notes section will look properly without mixing with the content.
Note that the superscript number and the return key symbol next to corresponding footer note are linked with each other. This means you can click on superscript to go to footer note and vice versa.
Decorating Footer Notes and Citations
If you want to add background to footer notes section, then you can use Groups block for that purpose. Hold shift key and select heading, footnotes and any other blocks that you want to show in footer notes section. Click on the first transform icon in the toolbar and select “Group” block from the list.
After grouping footer notes blocks, you can add background color, text color and change the typography settings for the text.
Another problem with footnote is the cited text will be in the same style as other content making it difficult to identify. What you can do is to select the cited text, click on “More” from toolbar and select “Highlight” option. this will show a color picker using which you can change the text and background colors of the cited text.
Below is how the highlighted cited text along with the decorated footer notes section will look like in the published site. You can use any text/background colors to suit your site’s appearance.
Final Words
Footnotes is a cool option for those who make formal documentation with citations and footer notes in WordPress. You can decorate the notes section as per your need or simply publish with the default setup. For deleting an inserted footer note, simply delete the superscript numbers. WordPress will automatically delete the corresponding notes from Footnotes block at the bottom. If you have deleted all the citations, then the empty Footnotes block will be shown which you need to delete manually. Also, note that WordPress will add “footnotes” custom field in the backend for all the posts where you have inserted Footnotes block.
