Skip to content

How to Build an Interactive Family Tree on WordPress: Step-by-Step Guide

Emnes

Family history is one of the most personal and meaningful things you can document. Whether you’re preserving your own ancestry for future generations or building a genealogical resource for a historical society, having a visual, interactive family tree on your website makes the experience infinitely more engaging.

In this step-by-step guide, we’ll show you exactly how to build a beautiful, interactive family tree on WordPress using the Genealogical Tree plugin. No coding required.

Why Build Your Family Tree on WordPress?

There are plenty of genealogy platforms out there — Ancestry, MyHeritage, FamilySearch — but they all have one thing in common: you don’t own the data. Your family tree lives on their servers, under their terms, behind their paywall.

With WordPress, you have full control. Your data stays on your server. Your design is fully customizable. And you can share it with anyone — no subscriptions required for your relatives to view it.

  • Full ownership — Your data, your server, your rules
  • Custom design — Match the tree to your site’s branding and style
  • Free access for viewers — Share with family without requiring sign-ups
  • GEDCOM compatible — Import from existing genealogy software
  • SEO benefits — Your family history can be found through search engines

Step 1: Install the Genealogical Tree Plugin

First, purchase and download the Genealogical Tree plugin from Emnes. Then install it on your WordPress site:

  1. Go to Plugins → Add New → Upload Plugin in your WordPress dashboard
  2. Select the downloaded ZIP file and click Install Now
  3. Activate the plugin
  4. Enter your license key under Genealogical Tree → Settings → License

The plugin creates a new “Family Trees” section in your WordPress dashboard where you’ll manage everything.

Step 2: Create Your First Family Tree

Navigate to Family Trees → Add New Tree. Give your tree a name — for example, “The Johnson Family” or “Smith-Williams Lineage.” You can create multiple trees for different family branches.

Choose a Layout

The plugin offers several layout options, each suited for different use cases:

  • Vertical Tree — The classic top-down family tree. Best for showing direct lineage from ancestors to descendants. Works well for up to 5-6 generations.
  • Horizontal Tree — Left-to-right layout. Great for wider screens and when you want to emphasize the breadth of a family rather than its depth.
  • Fan Chart — A semi-circular or full-circle layout that radiates outward from the root person. Visually stunning and great for showing ancestry (parents, grandparents, great-grandparents).
  • Timeline — Displays family members chronologically along a timeline. Perfect for historical societies that want to show when people lived.

You can always change the layout later, so don’t worry about picking the “wrong” one.

Step 3: Add Family Members

This is where your tree comes to life. For each family member, you can add:

  • Name — First name, middle name, last name, maiden name
  • Photo — Upload a portrait from your WordPress media library
  • Birth date and place — As specific or general as you know
  • Death date and place — For deceased family members
  • Biography — A rich text field for stories, achievements, and memories
  • Custom fields — Add any additional data like occupation, education, or military service

Defining Relationships

The most important part of building a family tree is defining who is related to whom. The plugin supports all standard relationship types:

  • Parent-Child — The fundamental building block of any tree
  • Spouse/Partner — Marriages and partnerships
  • Sibling — Brothers and sisters (automatically inferred from shared parents)

Start with yourself or a common ancestor, then work outward. The plugin automatically positions family members based on their relationships, so you don’t need to manually arrange anyone.

Step 4: Import Existing Data with GEDCOM

If you’ve already built a family tree in software like Ancestry, Gramps, or Legacy Family Tree, you can import it directly. GEDCOM (Genealogical Data Communication) is the universal file format for genealogy data.

  1. Export a GEDCOM file from your existing genealogy software
  2. Go to Family Trees → Import
  3. Upload your .ged file
  4. Map the fields and review the preview
  5. Click Import

The plugin will create all family members and their relationships automatically. For large families with hundreds of members, this saves weeks of manual data entry.

Step 5: Display the Tree on Your Site

Once your tree is built, displaying it is simple. The plugin provides a shortcode and a Gutenberg block:

Shortcode: Add [genealogical_tree id="1"] to any page or post, replacing “1” with your tree’s ID.

Gutenberg Block: In the block editor, search for “Genealogical Tree” and select your tree from the dropdown. You can configure the layout, starting person, and generation depth right in the editor.

Step 6: Customize the Appearance

The plugin comes with several built-in color schemes, but you can fully customize the appearance to match your site:

  • Card colors — Background, border, and text colors for member cards
  • Connector lines — Color, thickness, and style of the lines connecting family members
  • Typography — Font sizes for names, dates, and biographies
  • Spacing — Gaps between generations and siblings
  • Hover effects — What happens when visitors hover over a family member

For developers, the plugin provides CSS classes on every element, so you can override any style with custom CSS.

Tips for a Great Family Tree Website

  • Start with what you know — Don’t wait until your tree is “complete” to publish. Start with your immediate family and grow from there.
  • Add photos — Trees with photos are dramatically more engaging. Even old scanned photos add tremendous value.
  • Write biographies — A name and date are data. A story is a legacy. Even a few sentences about each person makes the tree come alive.
  • Back up regularly — Use our Backup Migrate Reset plugin to create regular backups of your site and family tree data.
  • Export GEDCOM — Periodically export your tree as a GEDCOM file as an additional backup that can be imported into any genealogy software.

Who Uses Genealogical Tree?

Our plugin is used by a diverse range of people and organizations:

  • Families building reunion websites where relatives can explore their shared history
  • Historical societies publishing genealogical records for local communities
  • Churches and religious organizations documenting congregation lineages
  • Hobbyist genealogists creating polished presentations of their research
  • Educators teaching family history and genealogy methods

Get Started Today

Preserving your family history is one of the most meaningful projects you can undertake. With the Genealogical Tree plugin, you can create a beautiful, interactive family tree that your relatives will love exploring — and that future generations will treasure.

Plans start at just $19/year. Every purchase includes a 30-day money-back guarantee, one year of updates, and priority support. Get started now.