Build a family tree in your website with website builder Joomla CCK

Researching and making your own family tree has always been of interest to person. In the era of the virtual world, creating a family tree on your website has taken on a more significant role!

With the new features of the website builder Joomla CCK, you can easily build a family tree on your website! This article will help you step-by-step to create a genealogical tree on your website.

Joomla page builder allows you to make up your own data structure with unlimited nested and multiple categories for each content item. These features allow you, step by step, to make your own family tree with all your relatives! As an example, you can see a ready family tree on the website template Love story - Family tree website template. In family tree page builder - Joomla CCK, we created a full-fledged structure of the genealogical tree. And you can make your own family tree with OrdaSoft website builder!

For start builds a genealogical tree please install website builder on your Joomla website. Read on the link - How to start work with Joomla website builder.

Building the basic structure of feature family tree page

In order to properly form connections for your relatives and create a family tree with CCK Joomla page builder you need building the basic structure. First, you need to build the structure of the family tree.

Family tree on your website will consist of the:

• entity - it`s is the class that will merge all persons (relatives) to genealogical tree structure;
• layouts - for Add Person and Show Person;
• instances - it will be all your relatives.

Create entity of Family Tree

An Entity it`s the class that will merge genealogical tree structure of content in page builder Joomla CCK. For create entity, go to Admin Area -> Components -> OS CCK -> Entities and click on button Add, next you Select Entities type -> OS CCK Entity. In the window that appears, fill in the Name field (Family Tree) and click Save and Close.

Creating layouts for add and show person

Layout serves in order that you could show of your Instance (genealogical tree). Layout - is a form - which you use for add or show the instance (person) in you family tree. Layouts can be many, they are all different and designed for different options. For build a family tree we need to create layouts for add and show person.

Add person - layout

In order to build the whole basic structure of the genealogical tree, we need to create a layout of adding a person, with all the necessary fields, such as "name", "surname", "date of birth", "death" and "photo". It is also necessary to create fields with data about parents and children.

For create layout - Add person we need go to Layout builder to menu Layouts ->press button "Add new" -> choose entity, that you created before (family tree)-> and select "Layout type" -> "Add instance".

Next, enter the name of our layout -> Add person

In the middle you can see button New row. By clicking on it you can choose the number of columns for the fist row (from one to four). Select the number of columns in which you will arrange your fields. After you add field you simply take a mouse and Drag&Drop the field that you need from the left column into show area.

Create fields to "Add person layout"

The fields are created very easy. Press the button Add New -> and just enter the name of the field and select the necessary value for it. If it is a field for entering "data", such as "name", then select the "text value".

The very important: add new field you may only from "Add instance" layout. In other layouts you may use only the fields created in "Add instance" layout.

Show person - details

In order when you build a family tree that when you click on a person, detailed information about him or her will be revealed, we need to create a layout displaying the person with detailed information.. The scheme for creating Show Instance layout in Joomla page builder is exactly the same as in the previous section. So you can easily create a layout to show detailed information about a person. For create layout - Show person details we need go to Layout builder to menu Layouts ->press button "Add new" -> choose entity and select "Layout type" -> "Show instance".

For a visual example, we built the same structure - Show person - details, as in the family tree website template

Creating the connection between the main person and his relatives

For create a family tree with possibiliy to attach other persons (parents or children) to our main person, we create fields in Add person layout -> Attach Child Entities -> press button New and create new fields. Attach Child Entities helps you to make the connection between the main person and his parents or children. When we create a Attach Child Entities, we select the fields that will be displayed. The picture shows the creation of the link Mother and the selection of fields, her name and date of birth.

Family Tree page builder. Create layout all persons

In order to display your family tree on the the site, you need show all your persons.

For a visual example, we built the same structure - Show all persons like in Family tree website template.

All person layout - frontend view

In order to show a lot of people at once on a page, we need to create a layout for "show All person" with short main information about one person (for example field: "name", "photo", "date of birth"). For this go to - Layouts ->press button "Add new" -> choose entity, that you created before (family tree)-> and select "Layout type" -> "Show instance". Next, just drag & drop the necessary fields that will display on your family tree when showing the person. I remember: there we create some simply "show one person layout" where we will show only main info about person.

Important: every "text field" or "Image field" you may configure for open or redirect to another layout. So for "image" and "person name" - we choose as layout for redirect "Show person details layout" which we created in website builder, before.

For your understanding, you can see with what fields each person was shown in Family tree website template

All person layout - backend view

Next in OrdaSoft Website builder in Layout builder, you need to create layout with "layout type" -> "show all instance". And there you add in loop the simply layout for show one person created before. For this at left panel under "attachment layout" you need select "Add new" and select created before "show one person layout" and with help Drag & Drop - move it to layout view grids

Key moment at time create "show all persons" layout: You need at left panel select "Attachment layout"

Create menu item for family tree in your website

After creating a layout to show all our relatives, you can proceed to create a menu item on your website with a family tree! First step go to Joomla website Menu. Next step you need to enter a menu item name - its may be Family tree, how in our example. The next step is to choose a menu for your site that will display the family tree. This could be: main menu, footer menu or any else menu, that created on your website. Next -> "Add new menu" Item button, Next step you need to enter a menu item name - its may be "Family tree", how in our example. Following step will be press button select menu item type There you will need select "OS CCK" -> "Show All Instances Layout" (Please check attachment image).

After you need "choose layout" which you wish connect to this menu. -> open the tab Params -> and select your All Person Layout

Genealogy page builder. Creating and filling family tree

An Instance (Person) is the smallest piece of content in CCK Joomla website builder. Add Instance in OrdaSoft website builder very simply. You will add an instance(person) by filling all fields with help "Add Instance layout" (add person layout) that you created before. All you have to do: to fill all the fields about all your persons and make connections between your relatives. For this go to Admin -> Components -> OS CCK -> Instance manager -> New

Add content on your family tree web page

Now the structure of your genealogical tree is created and you can confidently fill in all the data about your relatives, add photos and establish connections between them. Also, the website builder gives you the opportunity to create the style of your family tree, as you want! Change colors, create frames, indentations - do whatever you want to make your family history web page play with the new colors!

In the same way, the Joomla page builder allows you to build a pedigree not only for people, but also for animals, You may create pedigree club website, and will be useful in professional kennels. By following this link: (Website builder) you may read about other possibilities of CCK Joomla website builder for building your websites.