Source Citation Trick for – 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:

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 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.

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 formatting. Click in a free space, usually between the first and second paragraph, 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 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 code 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 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 of improvement, please let me know.


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


Author: Cathy Meder-Dempsey

As a military brat I've lived in Georgia, France, Idaho, West Virginia, Spain, South Carolina, Texas, and Luxembourg. Married 36 years with two grown children. When I’m not doing genealogy, I spend time riding my racing bike with my husband through the wonderful countryside in Luxembourg and surrounding countries.

15 thoughts on “Source Citation Trick for – HTML Code”

  1. I need to come back and revisit how you complete your sources. I am an English major, and I incorporate a Works Cited Page; however, I cannot format properly…..I will be back to look things over once school is over for the summer. Thank you!

    Liked by 1 person

  2. I admit that you lost me at HTML code. I know I am not very formal in my citations on the blog, but to be honest, it would take me so long to do what you do that I would probably stop blogging! At some point I need to go back to my early posts, but for now I am going to have to settle for the more casual method I’ve been using. I admire your diligence (and your computer skills)!

    Liked by 1 person

    1. Thank you, Amy, but it isn’t diligence on my part. I’m trying to make up for all the things I did not know all these years I’ve been doing genealogy. So each week I am getting a bit of the sources added to my database. (I hate even thinking about getting to the American families with all their census, BMD, etc.) By including the sources in the post I’m forcing myself to get it done! I’ve gotten emails asking where I found this or that. It is very embarrassing when I have to say I can’t find the site it came from. The most important part of all of this is that we are getting the stories told and we have it all in a database with some kind of note or link or whatever reminding us where it came from.

      Liked by 1 person

      1. Since most of what I have are sources either from Ancestry or FamilySearch and are identified on my tree, I don’t worry too much about remembering where I found information. But I admit that there are times I look at my tree and say, “How did I know that??” Especially when it is from when I first started. So I know it’s important to have sources identified—I just am too lazy to incorporate it all into my blog posts!

        Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s