Source Citation Trick for WordPress.com – HTML Code

About three-quarter of the way through Amy Johnson Crow’s Challenge: 52 Ancestors in 52 Weeks I wrote How I write my 52 Ancestors posts in 4 easy lessons. It was my first year blogging and I didn’t cite my sources at the end of the articles.

I’ve learned so much since then. Some of my favorite Facebook groups have pushed me to slowly revamp my research habits and improve the articles I write for this blog:

• Amy Johnson Crow’s 31 Days to Better Genealogy
• Janice Webster Brown’s Genealogy Bloggers
• Janine Adams’ Genealogy Research Loggers
• Michael John Neill’s Genealogy Tip of the Day
• Thomas MacEntee’s Genealogy Do-Over

I also have wonderful readers and followers who leave comments like these:

How do you do your citations? Do you have a plug-in? ~ Amberly Petersen Beck of The Genealogy Girl

Does your blog provider give you the great footnote functionality? You’ve got a very polished citation game in place, and I’m envious! ~ Michael Dyer of Family Sleuther

Their questions couldn’t be ignored. I do my citations manually without a plug-in. Why no plug-in? Because I use the free WordPress.com which doesn’t come with all the bells and whistles.

Adding Citations to the Rough Draft

A lot of preparation goes into the citations even before they make it to the rough draft stages. I research the family and add all sources to each individual and event in my genealogy software Ancestral Quest 15. Only when this is done do I begin to write on the WordPress Dashboard in Visual mode.

Update (23 October 2020):
If you use WordPress Block editor
please see my latest post
Adding Footnotes to your WordPress Posts Using Block Editor

When I’ve finished the rough draft of my post, I go back and add the numbers in brackets for the footnotes. Sometimes I will place [#] where a source will be added while I’m writing. Adding the numbers gives me an opportunity to read the piece slowly as I add them.

Once all of the bracketed numbers are in place it’s time to add the HTML code so that my readers can click on the source number, go to the source list, and come back up to the post.

In the body of the post, the HTML code is:

with the 3 numbers in red being replaced by the number in the bracket in the text.

Update (20 May 2017): The HTML code is now an image. You will have to type it in. In my original draft, the quote marks showed correctly as straight double-quotes. However, when it was published, they became curly quotes (also known as smart quotes) and messed up the code (I guess they aren’t so smart in this case). I want to thank Lois Willis – Genealogy and Family History for bringing this to my attention. If you want to know more about how she fixed the problem, please refer to her post Fixing source citations in WordPress.

My list of HTML code in Evernote for the bracketed numbers in the body and at the end of the post.

I keep the code in a note in Evernote. Presently, I have a list which goes to 86 because I actually did a post with that many sources in 2015: 52 Ancestors: #47 The SCHLOESSER-CONSBRÜCK Family.

Let’s say you have a post with nine footnotes. I copy the HTML code in Evernote for nine footnotes.

On the WP dashboard, I click on the Text tab to switch to HTML mode. Don’t worry. You won’t be messing up any of your formattings. Click in a free space, usually between the first and second paragraphs, and paste the code you copied.

Switch back to the Visual mode where you will now see the footnotes with hyperlinks.

Highlight and copy the [1] with the hyperlink and paste it in place of the [1] in the body. DO NOT delete a hyperlinked number (in the list) until after you’ve pasted it into the body of your post. I find that deleting before pasting strips the code.

Continue copying the blue number and pasting them over the footnote number. If you have a very long post, use Ctrl+F to find the footnote numbers in your post.

Not Afraid of Working in HTML mode?

For more advanced users: If you are not afraid of going in and working in HTML mode, you can use Ctrl+F to find a footnote number, then copy/paste the HTML code in place of the number.

When I do it this way, I copy a few lines of the code in the area I’m working (above) and copy/paste each line to the place it should go.

Adding Footnote Numbers to the End of your Post

Now that all footnote numbers in the body of your post are hyperlinked, you need to add the HTML code to the end of your post where you will be adding your citations. The HTML code is:

and, again, the 3 numbers in red are replaced by the source number. In Evernote, I’ve added a space and the word link to each line of code. The space is important as it keeps the HTML code from being attached to the citation you will be pasting in later.

In Visual mode, scroll down to where you want to add your list of citations and add a title. Mine are titled Sources.

Switch to Text mode (HTML), scroll to the bottom or use Ctrl+F to find your citation list title.

Copy your list of HTML codes for as many citations as you have below the title you’ve chosen for your sources.

Switch back to Visual.

Now you have all your footnote numbers waiting for the citations to be added.

Let the fun begin.

I use Ancestral Quest 15 which has a Notes/Sources button that opens up a window with four tabs: Individual Notes, Individual Sources, Marriage Notes, and Marriage Sources. The tabs for sources give me a list of citations as they will look in a report. When I click on the text it highlights (seen in black above) the entire citation which I then copy. I don’t know if other genealogy software programs have the feature I use to retrieve my citations. 

I insert the citation text I retrieved from AQ15 in place of the highlighted word link next to the [1]. Some cleanup is needed as all citations copied from AQ15 have a number at the beginning which I delete. Also, any formatting included in the citation will not carry over (see example above).

This is done for each citation. I have a preview of the post open in another tab on my browser so that I can see which event each citation is for. If the post is short, I will scroll up and down to check.

I usually wait until all citations have been copied over before I do the cleanup work. The citations may not be perfect or up to EE standards since I’m learning by doing instead of learning and then doing.

There is no need to format the URLs in the citations. Take a look at the preview to be sure the WP template you are using makes the links clickable.

One last thing I do with the list of sources at the end of my post is to change the text color to gray and bold the word Sources. With the template I used prior to this one, I had the option to use a smaller sized font. I opt to not leave a blank line between citations.

The trick to doing source citations on your WordPress.com blog is HTML code. It may seem like a lot of work but once you get used to the routine it becomes easier and quicker to do. Getting compliments from your readers, like I did from mine, will also help.

I’d love to hear from you if you try this out. If you have any problems or see possibilities for improvement, please let me know.

UPDATE (3 August 2020): I am amazed at the amount of traffic this post brings to my blog. I would like to share with you a simpler way to do footnotes in WordPress. My friend Amberly Peterson Beck aka thegenealogygirl wrote the following comment in January 2018 as a follow-up to a conversation we had:

Cathy, I learned a new trick you might like. It’s a little bit faster than how you have been doing it. Here are two links to look at:
https://en.support.wordpress.com/markdown/
https://en.support.wordpress.com/markdown-quick-reference/
I used it for my most recent blog post. 🙂

Note: Since Amberly posted the comment, WordPress has moved on to using Block Editor. The first link no longer has the same information as in 2018. It will take you to instructions for the Markdown block in the block editor. The second link has instructions to the Classic Editor only. To enable Markdown on your blog for the Classic Editor go to Settings on your dashboard > Writing > ✅ Use Markdown for posts and pages.

UPDATE (23 October 2020): If you have moved from using the Classic Editor to the Block Editor, please see my latest post
Adding Footnotes to your WordPress Posts Using Block Editor.
This removes the need to use HTML code to add footnotes.

© 2017, copyright Cathy Meder-Dempsey. All rights reserved.