creating footnotes in WordPress

Using footnotes when you write is a quick and easy way of giving credit to the source document that you have referenced. Unfortunately WordPress (and most other blogging platforms) do not seem to provide an built in method of adding footnotes although there are WordPress plugins that do the job.

One option is to just code the footnote yourself using html.

footnotes in html

this is what footnotes look like in the browser:

William Shakespeare was the son of John Shakespeare, an alderman and a successful glover originally from Snitterfield, and Mary Arden, the daughter of an affluent landowning farmer [1]. He was born in Stratford-upon-Avon and baptised there on 26 April 1564. His actual date of birth remains unknown, but is traditionally observed on 23 April, Saint George’s Day [2]. This date, which can be traced back to an 18th-century scholar’s mistake, has proved appealing to biographers, since Shakespeare died 23 April 1616[3]. He was the third child of eight and the eldest surviving son [4].


1. Text of footnote 1
2. Text of footnote 2
3. Text of footnote 3
4. Text of footnote 4

and this is what is looks like when coded in HTML:
William Shakespeare was the son of John Shakespeare, an alderman and a successful glover originally from Snitterfield, and Mary Arden, the daughter of an affluent landowning farmer <sup><a id="ref1" href="#fn1">[1]</a></sup>. He was born in Stratford-upon-Avon and baptised there on 26 April 1564. His actual date of birth remains unknown, but is traditionally observed on 23 April, Saint George's Day <sup><a id="ref2" href="#fn2">[2]</a></sup>. This date, which can be traced back to an 18th-century scholar's mistake, has proved appealing to biographers, since Shakespeare died 23 April 1616<sup><a id="ref3" href="#fn3">[3]</a></sup>. He was the third child of eight and the eldest surviving son <sup><a id="ref4" href="#fn4">[4].
1. Text of footnote 1<a title="Jump back to footnote 1 in the text." href="#ref1">&#8617;</a>
2. Text of footnote 2<a title="Jump back to footnote 2 in the text." href="#ref2">&#8617;</a>
3. Text of footnote 3<a title="Jump back to footnote 3 in the text." href="#ref3">&#8617;</a>
4. Text of footnote 4<a title="Jump back to footnote 4 in the text." href="#ref4">&#8617;</a>

footnotes best practice

For a proper footnote, the number (or letter) should be in superscript. For it to scroll to the bottom, where the note is, it needs to be a link. The note at the bottom should also have a link back to the noted text in the body of the work. Here are the tags used, and their purpose (Remember to close the tags by using “/” in the same tag you open with.):

<sup> makes text in superscript.
<a href=”fn1″> creates a link to wherever you put id=”fn1″.
<a href=”#ref1″>↩</a> makes a link back to the reference number, in this case, the first footnote. Wherever id=”ref1″ is, this will create a link to it.
title=”Jump back to footnote 4 in the text.” creates a tip that says the text in the quotes when the user’s mouse hovers over the link.
[The icon ↩ is witten as &#8617; in html.]

footnote plugins

Another option is to use a WordPress plugin and I will cover that in another post.

seo worst practice

The search engine optimization industry is a fascinating world. Here is my (ongoing) list of things you should avoid when building a website:

  • keyword stuffing
  • broken links
  • badly configured robots.txt
  • meta keywords
  • duplicate content
  • copied content
  • no content
  • no sitemap
  • no 301 redirects
  • slow page load
  • Flash
  • lots of javascript
  • automated title tags
  • no images
  • stolen images

Of course there are many more, some obvious and some not so obvious. Be careful out there! Sometimes it feels like the wild west.

always be testing

I recently came across the book Always Be Testing: The Complete Guide to Google Website Optimizer written by Bryan Eisenberg, John Quarto-Vontivadar and Lisa T. Davis 1.

One of the key takeaways from the book for me was understanding the difference between testing, measuring and optimizing:

testing

When you test, the purpose is to compare elements on your website, or elements of your campaigns, to see which variation is best in persuading your visitors to take the action you want them to take. That action could be anything including clicking a link, making a purchase, signing up for a newsletter, or even going from one page to another in your selling process. Testing involves configuring your site in either an A/B split testing format, or having different pages and making use of multivariate testing methods.

measuring

When you measure, you monitor what visitors do as they navigate your site. By using a web analytics program you can determine the key performance indicators such as site traffic, overall conversion rate, page rejections, length of time spent on a page, and so forth. These analytics (or measurements) help you evaluate where you have problems, which in turn helps you prioritize your testing.

optimizing

When you optimize, you put your test results in place to improve your conversion rate. The output of an A/B split test or multivariate test is a determination of what works best (a so-called “winner”), but optimizing is more than just implementing the “winners” on your site. As you test and measure, you reinforce and refine the plans you developed to create your site or campaign. You grow more familiar with the nature and needs of your audience, which makes it possible for you to create more meaningful options to test so you can continue improving. Optimization requires a human element to access and interpret the “facts” from testing and measuring in order to lead it in more efficient directions.

Although the book was published in 2008 (which seems like decades in internet time) the concepts still survive and I’ll be sharing more insights in the future posts. I’ll also be sharing how these insights can be implemented in WordPress to help you test, measure and optimize your WordPress site.