{"id":1692,"date":"2019-03-22T09:51:45","date_gmt":"2019-03-22T14:51:45","guid":{"rendered":"http:\/\/subnivean.com\/blog\/?p=1692"},"modified":"2025-01-05T14:04:24","modified_gmt":"2025-01-05T20:04:24","slug":"footnotes-in-wordpress","status":"publish","type":"post","link":"https:\/\/subnivean.com\/blog\/footnotes-in-wordpress\/","title":{"rendered":"Footnotes in WordPress"},"content":{"rendered":"<p>I&#8217;m working on preparing the complete text of my great-great grandmother&#8217;s <a href=\"http:\/\/subnivean.com\/blog\/category\/diary-1862\/?order=asc\">1862 diary<\/a>. I wanted readers to be able to see notes on the text by hovering over it &#8211; in tech-speak, I wanted to display notes as tooltips &#8211;&nbsp; and I wanted to be able to include a link to the source within the tooltip as well. I thought I&#8217;d share some of the things I learned in the process of making this happen.<!--more--><\/p>\n<p>If you want to display a reference to a source in every possible academic style, <em>and <\/em>you have a modern version of PHP, the <a href=\"https:\/\/wordpress.org\/plugins\/academic-bloggers-toolkit\/\">Academic Blogger&#8217;s Toolkit plugin<\/a> seems to be the solution of choice. But I wanted to display both the source reference and remarks about the text. And &lt;cough&gt;PHP issues&lt;\/cough&gt;.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/easy-footnotes\/\">Easy Footnotes<\/a> lets you add freehand remarks about the text. But I also wanted to be able to link to source material in the bibliography.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/zotpress\/\">Zotpress<\/a> offers shortcodes to display sources you collect in <a href=\"https:\/\/www.zotero.org\">Zotero<\/a>. I thought I might be able to get the result I wanted by putting a Zotpress shortcode within an Easy Footnotes shortcode, but by and large, shortcodes from different plugins do not nest. I tried the <a href=\"https:\/\/wordpress.org\/plugins\/nested-shortcodes\/#description\">Outerbridge Nested Shortcodes<\/a> plugin, but it interferes with the way that Zotpress matches the inline citations to the bibliography.<\/p>\n<p>Easy Footnotes uses <a href=\"https:\/\/github.com\/qTip2\/qTip2\">jquery.qTip2<\/a> to display text on hover. I spent some time with <a href=\"https:\/\/wordpress.org\/plugins\/insert-headers-and-footers\/\">Insert Headers and Footers<\/a> trying to add qTip2 functionality, but never quite got there.<\/p>\n<p>In the end, I bracketed the notes with &lt;span&gt;s, and placed the Zotpress shortcodes within the spans. I controlled the way the spans displayed with CSS, starting from <a href=\"https:\/\/codepen.io\/cbracco\/pen\/nXEQLw\">Chris Bracco&#8217;s CSS Simple Tooltip examples.<\/a>.<\/p>\n<p>Would love to hear about more elegant methods if you have them!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I wanted to display notes on the text as tooltips, and I wanted to include links to sources within the tooltip. It took some doing.<\/p>\n","protected":false},"author":1,"featured_media":1797,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8],"tags":[18],"class_list":["post-1692","post","type-post","status-publish","format-aside","has-post-thumbnail","hentry","category-code","tag-wordpress","post_format-post-format-aside"],"jetpack_featured_media_url":"https:\/\/subnivean.com\/blog\/wp-content\/uploads\/footnotes.jpg","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/subnivean.com\/blog\/wp-json\/wp\/v2\/posts\/1692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/subnivean.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/subnivean.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/subnivean.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/subnivean.com\/blog\/wp-json\/wp\/v2\/comments?post=1692"}],"version-history":[{"count":12,"href":"https:\/\/subnivean.com\/blog\/wp-json\/wp\/v2\/posts\/1692\/revisions"}],"predecessor-version":[{"id":3512,"href":"https:\/\/subnivean.com\/blog\/wp-json\/wp\/v2\/posts\/1692\/revisions\/3512"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/subnivean.com\/blog\/wp-json\/wp\/v2\/media\/1797"}],"wp:attachment":[{"href":"https:\/\/subnivean.com\/blog\/wp-json\/wp\/v2\/media?parent=1692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/subnivean.com\/blog\/wp-json\/wp\/v2\/categories?post=1692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/subnivean.com\/blog\/wp-json\/wp\/v2\/tags?post=1692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}