WP Moo Tree Instructions

If you find this plugin useful, please donate

created by: Aryan Duntley

To use this plugin:

  • Create a new Branch Category.
  • Create some Branch posts.
  • Use the shortcode [moo_tree category="{ASSIGNED_CATEGORY_SLUG}"] wherever you want it to live. To use multiple trees, simply create multiple categories and make sure you assign each Branch post to the correct category.


In order to begin utilizing a tree, you must first create a category (if not you could always go back and assign any “Branch” posts you have created to a category). Until you have a category to reference you cannot use the shortcode because it has a required parameter that must be set to the category slug.

The plugin syntax is as follows: [moo_tree category="{ASSIGNED_CATEGORY_SLUG}"] , where {ASSIGNED_CATEGORY_SLUG} is replaced with a category slug name. This category slug can be found after you have created a category. It will be displayed in the “Tree Categories” page. That page will list 4 attributes of the category: Name, Description, Slug, Branches. The slug can also be edited when editing a category and created when creating a category. WordPress will automatically generate the slug based on the title of the category if one is not defined when creating the new category.

Inside of the category page, you will find a series of option that relate to the entire tree as opposed to a particular Branch post/element:

  • Name: The name of the category. This name WILL be displayed on the tree. It will be the very beginning of the tree, the first element.
  • Slug: The slug (what will be inside of the url bar), which you can leave alone and let wordpress do it’s thing. This will be used in your shortcode as well, to reference the tree branches associated with this category.
  • Display tree as initially open: Set to true if you want the tree itself to begin open, false if you want it closed to start.
  • Display lined grid: Decide whether or not you want the lines that connect the different elements of the tree.
  • Display… as folders, or ending… as files: You can choose to set a different, unique icon for branches that have no children. So, if you were using folders, you could set the files in the folders to have a file icon instead of a folder icon.
  • Place expand/contract buttons: You may place the two buttons at the top or bottom of your tree, place them top and bottom or don’t have them at all. As of this release, I will not include the option to change the image of the buttons. (I ran out of pizza).
  • Change icons/theme: This is the default folder icon set. The easiest way to change the theme of your tree is to save this image, open it in your photo editor and change the various icons to whatever you want. Then you can save the file, upload it into your wordpress media, copy the url and place that url in this section.
  • Customize javascript: Here you can customize how the tree reacts. Currently the default functionality is set to display the featured image in a lightbox (if it exists) with the caption and description below the image. For the javascripters out there, I have placed an editable textarea where javascript can be place to adjust the actions. The docs for the mootree.js are here. The whole of the javascript is as follows:

    var tree; window.onload = function() {tree = new MooTreeControl({div: "thetree", mode: "' . $treemode . '",theme: "' . $themewant . '", grid: ' . $wantgrid . ',' . $custscript . '},{text: "' . $taxonomy_term->name . '",open: ' . $beginopen . ' }); tree.adopt("thefam"); return false }


    The $custscript variable is where the javascript is placed. The node actions most relevant to this part of the code are here. The current code:

    onSelect: function(node, state) {if (state){if( typeof(node.data.url) == "string" && node.data.url != "" ) {milkbox.openWithFile({ href:node.data.url,title:node.linkcaption + " : " + node.linkdesc, size:"width:600,height:350"}, {overlayOpacity:1, resizeTransition:"bounce:out", centered:true});}}}

  • Name: The name of the element. A family member’s name, a folder name, a file name with an extension, whatever.
  • Category: Make sure you assign a category to each branch. It will not be displayed otherwise. The category was put there so you could have multiple trees. Simply assign a new category for every tree you wish to have, then use the category slug in your short code to differentiate.
  • Featured Image: If you wish the lightbox to display a featured image, set one here. When you set a featured image, the Caption and the Description are both fields that will effect your post. The Caption/Description will be displayed as below the image separated by a colon(my caption : my description).
  • The URL: Here you can assign a separate url to the branch post. This url will do nothing by default. In order to access this option, you would need to change the javascript in the javascript editor, located in the Tree Category page. Access the category you are editing, adjust the javascript to behave in whatever manner you wish and access the url with node.data.url.
  • Branch ID: This will specify a unique css identifier for that specific branch element. Use this to style the div containing that element. This option can be accessed in the javascript by way of node.id.
  • Branch Color: This is a quick way to control the color of the text for each node. Enter a six digit html hexadecimal number.
  • Branch Open: Decide whether you want this branch to be opened when the page first loads. The default is false (or no), meaning that it will be closed.
  • Branch Icon: Here you can choose a unique icon, separate from the chosen style. Create an 18 x 18 pixel image and specify the url here. It would be easiest to upload the image through the wordpress media post type, then copy and paste the url. Additionally, if you have an icon set as described in the category section/tab above, you may specify an icon within the set by placing the url followed by the pound the sign and the sequence number the icon is in. For example, say you had an icon set of 7 icons in a row and you wanted to use the fourth icon in the row. If the url was blablabla.com/img.gif, you would enter the url like so: http://blablabla.com/img.gif#4.
  • Branch OpenIcon: Follow the same rules as above for this field. It’s purpose is to display a different icon if the branch is selected and open, displaying children.
  • Branch Miscellaneous: This field will be of no use to most people. It will probably be best suited for developers who are using the plugin and want to customize it for their client. My suggestion on how to use this field is to assing a name value pair sequence, probably in the form of (foo=bar;foo2=baz;foo3=wtf). There is no need to use any quotation marks in this field. The information is located in an html comment block and accessed through the javascript. A good way of parsing this data is by first accessing it with node.misc and then using a split method to expand the string into an array specifying the delimeter used when creating the string. For the example above it was “;”, so: var x = node.misc.split(';'); var first_pair = x[0].split('='); var name = first_pair[0]; var val = first_pair[1];.

  • Attributes accessible via javascript and customizable via the post or category:
    node.data.url ____ node.id ____ node.misc ____ node.caption ____ node.description

    Please visit the plugin site, log in (or create an account), and rate me 5 stars if this plugin is just what you have been looking for. And if you think it works, give me a thumbs up click on the it works button so others who view will be able to better decide.

    Considering I have pizza, more to come. Of course, without donations, I have no pizza… Enjoy the plugin!

[moo_tree category=”my-family-tree”]