Continuing from my first post on the Encyclopedia of mtDNA Origins… After learning the basics of using the Pods framework to create custom post types, custom fields, and templates to present them on webpages, I decided to create an mtDNA stories custom post type.

For those who don’t know WordPress, post types are different types of web pages. All pages of the same type share a common set of fields and features. Creating a type lets one add additional parts that only make sense for some pages.

Background and Summary

What would go in it? On my user story list were Background and Summary.

Encyclopedia of mtDNA Origins - Mockup 1b

Encyclopedia of mtDNA Origins – Mockup 1b

Background information can be anything from a single sentence to many paragraphs with charts and images. The interface needs to be an editor. On the other hand, the summary area will be made up of many fields.

  1. As a user I want a summary of facts about my mtDNA branch.
    1. Date
    2. Origin
    3. Defining Mutations
    4. Parent
    5. Children

The Date can be a plain text field. It simply has to allow enough space for an age with the citation. The same is true of the Origin.

The Parent and Children fields could be manually set as free text fields, but doing that would be time consuming and laborious to maintain. Instead they would be set by making the mtDNA stories post type hierarchical. In WordPress, hierarchical post types are pages that have another page set as their parent.

The Defining Mutations could in theory also be a plain text field, but after some experimenting, I have decided to make it a relationship with the information for the Phylotree section. I will talk about that in my next post.

Pods Admin and mtDNA Stories admin

In the Pods Admin part of WordPress, I add the Background, Branch Age, and Origin fields.

Encyclopedia of mtDNA Origins - Pods Admin 1

Encyclopedia of mtDNA Origins – Pods Admin 1

Moving to the Advanced Options tab of the Pods editor, I set the type to Hierarchical.

Encyclopedia of mtDNA Origins - Pods Admin 2

Encyclopedia of mtDNA Origins – Pods Admin 2

I am careful to save before moving to the mtDNA Stories admin section of WordPress.

Encyclopedia of mtDNA Origins - mtDNA Stories 1

Encyclopedia of mtDNA Origins – mtDNA Stories 1

I enter enough information to do testing.

Encyclopedia of mtDNA Origins - mtDNA Stories 2

Encyclopedia of mtDNA Origins – mtDNA Stories 2

Pods Templates

With data to test, I build an mtDNA Stories Template to output the page information. The first step is setting up the two content areas.

<div style="background:white; margin:.5em; padding:.5em; width:30%; float:right;">
     <h2>Summary</h2>
</div>
<div>
     <h2>Background</h2>
</div>

Next is adding the fields for the Summary area. The Pods framework uses magic tags. These are a left curly brace, the @, the name of the field, and a right curly brace. For example, the tag for the Origin field is {@origin} –note the lower case.

<div style="background:white; margin:.5em; padding:.5em; width:30%; float:right;">
     <h2>Summary</h2>
          <p><strong>Age:</strong> {@branch_age}<br />
          <strong>Origin:</strong> {@origin}<br />
          <strong>Mutations:</strong> <em>Coming Soon...</em><br /></p>
</div>
<div>
     <h2>Background</h2>
</div>

Because we are not adding the mutations just yet, I use some filler text. This is how the text in the template editor looks so far.

Encyclopedia of mtDNA Origins - mtDNA Template 1

Encyclopedia of mtDNA Origins – mtDNA Template 1

I save the template. For the next two fields, I need to create two more templates. They are going to fetch the name of the branch parent as a clickable link and fetch a list of child branches with each child a clickable link respectively.

The first is titled Get mtDNA Parent Name. It holds this code.

<a href="{@permalink}">{@post_title}</a>

The second is titled Get mtDNA Children Names. It holds this code.

<a href="{@permalink}">{@post_title} </a>

With those, I can add the Branch Parent and Branch Descendant(s) fields to the Summary area. To do it, I use Pods Shortcodes. The Pods shortcode follows this basic format:

&pods name="name" limit="x" where="rule" template="template"]

For the Parent Branch, the name is mtdna_story, the limit is -1 (no limit), the where is ID='{@post_parent}’, and the template is Get mtDNA Parent Name. Here is how that looks.

What this means is that for all cases where a post is the mtdna_story type return an unlimited number of results where the ID of the post is equal to the ID of the post parent in the current post. The results being what was set up in the Get mtDNA Parent Name template.

For the Descendant Branch(s), the name is mtdna_story, the limit is -1 (no limit), the where is post_parent='{@ID}’, and the template is Get mtDNA Children Names. Here is how that looks.

RSRS 

This is the template with them added.

<div style="background:white; margin:.5em; padding:.5em; width:30%; float:right;">
     <h2>Summary</h2>
          <p><strong>Age:</strong> {@branch_age}<br />
          <strong>Origin:</strong> {@origin}<br />
          <strong>Mutations:</strong> <em>Coming Soon...</em><br />
          <strong>Parent Branch:</strong> [ pods name="mtdna_story" 
          limit="-1" where="ID='{@post_parent}'" template="Get mtDNA Parent Name"]<br />
          <strong>Descendant branch(s):</strong> [ pods name="mtdna_story" 
          limit="-1" where="post_parent='{@ID}'" template="Get mtDNA Children Names"]</p>
</div>
<div>
     <h2>Background</h2>
</div>

Finally, I added the magic tag for the Background content, {@background}.

<div style="background:white; margin:.5em; padding:.5em; width:30%; float:right;">
     <h2>Summary</h2>
          <p><strong>Age:</strong> {@branch_age}<br />
          <strong>Origin:</strong> {@origin}<br />
          <strong>Mutations:</strong> <em>Coming Soon...</em><br />
          <strong>Parent Branch:</strong> [ pods name="mtdna_story" 
          limit="-1" where="ID='{@post_parent}'" template="Get mtDNA Parent Name"]<br />
          <strong>Descendant branch(s):</strong> RSRS </p>
</div>
<div>
     <h2>Background</h2>
          <p>{@background}</p>
</div>

The template now looks like this.

Encyclopedia of mtDNA Origins - mtDNA Template 2

Encyclopedia of mtDNA Origins – mtDNA Template 2

Before the template is output to the website, it needs to be linked in the Pods Admin. I do this by editing the settings under the Auto Templates Options tab to Enable Automatic Pods Templates for this Pod? and use the mtDNA Stories Template for the Single item view template with replacement.

Encyclopedia of mtDNA Origins - Pods Admin 3

Encyclopedia of mtDNA Origins – Pods Admin 3

Once I save this update, I check one of the mtDNA stories I created for testing. It looks like this.

Encyclopedia of mtDNA Origins - mtDNA Website 1

Encyclopedia of mtDNA Origins – mtDNA Website 1

Thus, several items are now satisfied. Due to the general website settings and the post type being hierarchical, breadcrumbs show the path from the current branch back to the RSRS. There is a right side sidebar. The name of the branch is displayed at the top of the page. Background information is at the top left of the page. There is a Summary section in a box on the left.

That Summary box is only missing mutations information for the branch. In the next installment, I add the mutations data and create the Phylotree area.

To be continued...