WordPress for Genealogy: Adding a Lineage Snapshot Box to Blog Posts About Ancestors, Part I

Recently someone asked on my family history blog (Colleen and Jeff’s Roots) what program I use to add the Genealogy Snapshot box to the blog posts I write about each ancestor or relative. Anytime I write a blog post profiling an ancestor or relative, I add a box to the bottom of the post that notes the person’s name, parents’ names, spouse’s name, relationship to me or my husband, and the generation trail between that featured person and my husband or me (using a numbered list instead of a bullet list so that one can easily identify the number of generations between the featured ancestor and my husband or me).

Why a Genealogy Snapshot?

I do this because:

• It can be confusing for readers (even for me!) to figure out or remember exactly how and through whom this featured person is related to me or my husband.
• I want others who may be researching this same name or same surnames to be able to quickly determine if we have a common ancestor or relative.

When I simply referenced relationships such as a 7th great grandfather and a great grand uncle, it got a little confusing for readers. My Snapshot box keeps the relationship trail a bit more easy to follow. I started this practice in fall 2014, so I am slowly implementing it into my older blog posts as well, which is why you won’t see it on all posts or even for all people yet.

General Approach

To answer that commenter’s question… I don’t use a program. Just basic custom code.

This Snapshot approach is quite similar to what I have done for years on my hiking and outdoors blog, where I include a Hike-At-A-Glance box that provides readers with a quick immediate summary of key trail details. Unlike my Genealogy Snapshot box, the Hike-At-A-Glance box almost always contains mostly unique content though, since no two hiking trails contain all of the same details such as trail name, distance, elevation gain, parking info, etc. If I only ever blogged once about each ancestor, this would also be the case with my Genealogy Snapshot box. Hardly. I blog multiple times about the same person, highlighting new discoveries about them, or simply telling another story. So with the Genealogy Snapshot boxes, I maintain a master library of each ancestor’s Snapshot and push it out to every post about that ancestor. How I do that though is the subject of the upcoming Part II post for this topic.

I should state right off the bat that I am a web developer who designs and hosts my own WordPress site (the open source self-hosted .org version of WordPress) for my family history blog. I have been developing on WordPress for over a decade and am very comfortable coding on WordPress and working on child themes. However, since I frequently teach and present on blogging, I also maintain customized sites using the free hosted Blogger and WordPress.com platforms. These Part I steps CAN be implemented into Blogger and the freemium-model hosted WordPress.com themes as well… it just requires a bit of familiarity with HTML and CSS, no real programming experience or knowledge required. That being said, the steps that I outline in this post specifically apply to self-hosted WordPress sites.

The Code

I have included each block of code below, or grab the whole file on my GitHub channel.

Building & Populating the Box

First off, I created a specific div class titled “snapshot-box” that allows me to apply custom styles to the box code. Then it’s just a little bit of very basic HTML markup and text to create each box field and populate each field with content. This whole block of HTML code can be entered directly into your blog post body via the Text or HTML view of your WYSIWYG editor. Self-hosted Worpress, hosted WordPress.com (even the free version), and Blogger all allow this type of simple HTML code block to be entered in the WYSIWYG.

[sourcecode language=”plain”]
<!– ***** Genealogy Snapshot Box template code, added to ancestor blog posts ***** –>
<!– Start copying into raw HTML editor –>
<div class="snapshot-box">
<h2>Genealogy Snapshot</h2>
<em><strong>Name:</em> [Insert Ancestor Name & Link]</strong><br />
<em><strong>Parents:</strong></em> [Insert Father Name & Link] and [Insert Mother Name & Link]<br />
<strong><em>Spouse:</em></strong> [Insert Spouse Name & Link]<br />
<strong><em>Surnames:</em></strong> [Insert Surname & Link], [Insert Surname & Link], [Insert Surname & Link]<br />
<em><strong>Relationship to CJRoots:</strong></em> [Insert Relationship to You]
<ol>
<li>[Same person from Name field]</li>
<li>[Insert Ancestor Name & Link]</li>
<li>[Insert Ancestor Name & Link]</li>
<li><a title="Colleen" href="/people/robledo-colleen/">Colleen (or Jeff)</a></li>
</ol>
</div>
<!– End copying into raw HTML editor –>
[/sourcecode]

For my custom self-hosted WordPress family history site, I use this same exact code block, but I don’t actually insert this whole block of HTML markup into my post body. I use a different method, which will be discussed in Part II, and can only be implemented in a self-hosted WordPress site.

You are welcome to copy and paste my code into your own blog to try it out and keep using it if you want. Replace all of the sample content in brackets (“[sample content]”) with your ancestor’s information, as well as the final item in the numbered Relationship list with your own home person.

Notice how many of the names and surnames are hyperlinks in my sample screenshots. I use WordPress’s taxonomies to create a Category for each ancestor whom I profile in my blog, as well as each applicable Surname. Both the self-hosted WordPress and the free/freemium WordPress.com platforms use Categories (as well as Tags, but I save those for another purpose). In Blogger, these are called Labels, which are the only type of taxonomy available in Blogger. When populating my Snapshot content, I simply visit the public-facing view of my blog, click on the hyperlink for the particular Category I want (a name or surname), then copy and paste that link into my Snapshot content. If you aren’t comfortable with hard-coding hyperlinks in HTML, save the raw code block after pasting it into your blog post body, and then flip back into the Visual Editor view of your WYSIWYG and insert the name and surname Category hyperlinks that way. You can do the same for replacing all of the “[sample content]”.

Styling the Box

While the above HTML code will create and encapsulate a fully functional Snapshot box in your blog post, I added a bit of styling to mine to pretty it up. This is the reason for the custom “snapshot-box” div class in that code block.

If you are running a self-hosted WordPress site, simply copy and paste this CSS block to your theme’s style sheet. Hopefully you are using a child theme, and aren’t ever making your customizations to the core PHP and CSS files in your WordPress theme! And hopefully you back-up your child theme files prior to making any changes to them. In my case, I add this CSS block to my child theme stylesheet titled style.css.

[sourcecode language=”plain”]
/* ***** Genealogy Snapshot Box styling, added to child theme custom style sheet style.css ***** */
.snapshot-box {
background:#f5f5f5;
border:1px solid #999999;
position:relative;
margin:2px 0px 10px 0px;
overflow:hidden; padding:1em;
}
/* ***** End Genealogy Snapshot Box styling ***** */
[/sourcecode]

If you are running your blog on the free/freemium version of WordPress.com, you must upgrade to the annual premium Custom Design package to be able to edit the CSS files (still always back up your CSS file prior to modifying!). Blogger makes it much trickier to add new CSS in their templates, and I don’t really remember how anymore, so you will have to figure that out on your own if you use Blogger.

That is it! Save all changes (always always after each step), then preview your blog post.

Other Examples

Often I have not yet blogged about all of the ancestors and relatives I include in the Snapshot for a featured ancestor, in which case, I do not yet have a live hyperlink generating an archive of all posts pertaining to that person or surname. Those non-linked names simply get displayed as plain text. You can see examples of this in both of the screenshots below.

If a particular blog post profiles multiple ancestors, I include a Snapshot for each of those featured ancestors. This does not mean I include a Snapshot for every single person referenced in a blog post; that would get too unwieldy, long, and visually distracting. If I merely mention the names of my grandfather’s parents or siblings, I don’t include a Snapshot for his parents or siblings. But in a blog post that talks about how my grandparents met, fell in love, and married, I most certainly include a Snapshot for each grandparent.

The following screenshot shows how I handle multiple spouses. I note each spouse’s name in the order of marriage, but include a special notation “(*)” next to the spouse to which my husband or I am related.

 Additional Tips & Tricks

Watch for my upcoming posts in this series on WordPress for Genealogy. Part II will explain how I build my master Genealogy Snapshot library, update each snapshot from one central spot, and then populate each post about a specific ancestor with a new or updated Snapshot. Subsequent posts will explain how I create and manage all of those hyperlinks for ancestor names and surnames.

If you’re attending the upcoming RootsTech conference, I encourage you to attend my Intro to APIs session, or at the very least, hit me up and say hello!