WordPress Integration

Creating a family tree on your WordPress website does not have to be complicated. With Family Tree JS 2 and a lightweight WordPress plugin, you can add an interactive family tree to your site without building a custom backend.

This setup is ideal for personal websites, genealogy projects, and family reunion pages.

What You Will Do

Install a plugin that lets you add custom scripts to your site.
Load Family Tree JS 2 from the CDN.
Insert a tree container into the page.
Initialize the family tree with sample data.

Step 1: Install the Plugin

Log in to your WordPress dashboard.
Go to Plugins > Add Plugin.
Search for Insert Headers and Footers
Click Install Now, then Activate.

This plugin gives you a simple way to inject code into the <head> and <body> sections of your site.

Step 2: Add Family Tree JS 2 to Your Site

After activating the plugin, open the plugin settings page.

In Scripts in Header, add this markup:

html

<script src="https://cdn.balkan.app/familytree2.js"></script>
<div id="tree"></div>
<style>
  html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family: Helvetica, Arial, sans-serif;
  }

  #tree {
    width: 100%;
    height: 100%;
  }
</style>

This loads the Family Tree JS 2 library, creates the container for the tree, and adds the basic full-page styles.

In Scripts in Body, add this script:

html

<script>
  const familyTree = new FamilyTree2(document.getElementById('tree'));

  familyTree.addFamilyMembers([
    {
      id: 1,
      fatherId: 2,
      motherId: 3,
      spouseIds: [4],
      siblingIds: [5, 6],
      childIds: [7],
      name: 'Me'
    },
    { id: 2, name: 'Father' },
    { id: 3, name: 'Mother' },
    { id: 4, childIds: [7], name: 'Spouse' },
    { id: 5, name: 'Sibling 1' },
    { id: 6, name: 'Sibling 2' },
    { id: 7, name: 'Child' }
  ]).draw(1);
</script>

This initializes the tree and renders a small sample family with seven members.

Step 3: Save and View

Click Save at the bottom of the plugin settings page. Then open your website to see the interactive family tree live.

Result

With just a few steps, you can add a polished interactive family tree to your WordPress website. It works well for genealogy blogs, family history pages, and personal sites that need a visual way to present relationships.

Learn more in the Family Tree JS 2 documentation.

WordPress Integration ​

What You Will Do ​

Step 1: Install the Plugin ​

Step 2: Add Family Tree JS 2 to Your Site ​