Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery organisational chart plugin suitable for wordpress category loop
    primarykey
    data
    text
    <p>I am making family tree portion of the wordpress site I am building.</p> <p>On the admin side, administrator should be able to set child or parent entries and create a family tree structure. Each node should be able to have unlimited number of children and only one parent.</p> <p>On the category page for these posts they should appear in a organisation chart structure.</p> <p>Because of the integration of these posts with other content on the website I can't use ready-made plugins, like <a href="http://wordpress.org/plugins/wp-family-tree/" rel="nofollow">WP Family Tree plugin</a>. So my next step was to find a suitable jQuery plugin that will arrange the posts on the front-end. And next obstacle, I encountered was that plugins are usually requiring html structure that is very hard, or impossible, to reproduce dynamically within wordpress loop.</p> <p>I tried with <a href="http://www.visualjquery.net/plugin/Details/16/org-chart-plugin-using-jquery" rel="nofollow">jQuery Organisational Chart</a> but the structure needed is relaying on nested unordered lists. Here s an example:</p> <pre><code>&lt;ul&gt; &lt;li&gt; fruit &lt;ul&gt; &lt;li&gt;apple&lt;/li&gt; &lt;li&gt;berries &lt;ul&gt; &lt;li&gt;blueberries&lt;/li&gt; &lt;li&gt;cranberies&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>This code will produce the following structure:</p> <pre><code> fruit | | ------------------ | | apple berries | --------------- | | blueberries cranberies </code></pre> <p>I can't find the way to construct the loop that will put the needed posts in nested unordered lists. I am using <a href="http://www.advancedcustomfields.com" rel="nofollow">Advanced Custom Fields</a> plugin to create parent-child relationships between posts.</p> <p>So I have two questions: 1. Is it possible to create a loop with the above illustrated structure needed for jQuery Organisational chart to work? If yes, please share 2. If no, is there a solution that builds organisational chart based on ids and classes, where child elements have a class name same as id of the parent element, like so:</p> <pre><code>&lt;div id="title1"&gt; &lt;/div&gt; &lt;div id="title2" class="child-title1"&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COIs this a `human` [family tree](http://wordpress.stackexchange.com/search?q=%22family+tree%22)? If so, one parent will be problematic, no? As for creating the loop and building a custom HTML tree, maybe nested loops or array merges would do the job. Right now, although you presented the concept very clearly, I miss **actual code** and think that the Q is broad and should be split in smaller/workable parts. 1) How to set up the Custom Post Type and Taxonomies. 2) How to query and build the markup. 3) How to integrate jQuery.
      singulars
    2. CO@b__ yes it's human, but the line is tracked only by male members (patriarchate, what can I do), and yes the question is broad as I am looking for any of two possible outcomes, how to query and build the markup with nested lists, or crowdsource for jQuery solution that uses ids and classes. Could you maybe share some thoughts on how would nested loop look like to build nested lists markup?
      singulars
    3. COOh, it's not a 21th century kind of tree, pity ;) To be true, I'll vote to close this Q, I think it's broad **and** opinion based ([help/on-topic]). To offer (more) thoughts, I'd have to [research myself for how people deal with this](http://wordpress.stackexchange.com/search?q=nested+wp_query+is%3Aq). But, then, it's your project, your research ;)
      singulars
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload