Xidipity

Knowledge Base

list categories
Template: List Categories Links
List Pages
quick links

Quick Links

 

Relevant Links

Xidipity WordPress Theme Knowledge Base Template Content Header Image

Categories are core to WordPress and their intended use are to organize blog posts. Xidipity extends this functionality to include the contents of the media library. WordPress categories are hierarchical and they are assigned a role of parent or child. Assume the following category list.

 
  • Vacation Photos
    • Museum
      • Rodin Museum
      • Jeu de Paume
    • Art Gallery
      • The Louvre
    • Tour Bus
    • Fireworks
  • Nature Photos

 

The categories assigned to the role of parent are as follows.

 
  • Vacation Photos
  • Museum
  • Art Gallery
  • Nature Photos

 

Nature Photos is a parent without children.

 

The categories assigned to the role of child are as follows.

 
  • Museum
  • Rodin Museum
  • Jeu de Paume
  • Art Gallery
  • The Louvre
  • Tour Bus
  • Fireworks

 

Museum and Art Gallery share both parent and child roles. They are a child to Vacation Photos and a parent to their children. This understanding is important when categories are created and is important when a category is a parameter of a template. Multiple categories are acceptable but must be separated by a comma.

 

The purpose of this template is to display a filtered hierarchical list of category titles.

 

Appearance

Editor view
Category List
Media Library

 

Web view
Category List
Media Library
  • inventoryGallery Media
    • inventoryFrom The Kitchen
  • inventoryPage Media
    • inventoryEditor
    • inventoryFramework
    • inventoryFrontpage
    • inventoryGuides
    • inventoryLegal
    • inventoryReference
    • inventoryTemplate
    • inventoryTools
  • inventoryPost media
    • inventoryContent media
    • inventoryFeatured media
  • inventoryWebsite

 

Template

<!--  wpX:LIST/CATEGORIES -->
<div class="bdr:bas-2 bdr:lt-so-3x bkg:tint-bas-1 cnr:arch-sm fx:r fxa:1 fxc:3">
  <div class="pad:hrz+0.5">
    <span class="fnt:siz-lg-5x sm)fnt:siz-lg-6x"><i class="icon:tb_lst_unordered"></i></span>
  </div>
  <div class="pad:hrz+0.5">
    <h5>Category List</h5>
    <div>
      <span class="pad:rt+0.125"><i class="icon:paperclip"></i></span>
      <span class="fnt:wgt-500">#title#</span>
    </div>
  </div>
</div>
<div class="mce[dsp:none]">[clst css='#css#' bullet='#bullet#' depth=#depth# active='#active#']#category#[/clst]</div>
<!-- /wpX:LIST/CATEGORIES -->
 

​Template may scroll horizontally in some circumstances.

Markers

#title#

The goal of the title marker is to provide a reference as to the purpose of the template and is displayed in the editor as a component of the annotation.

#css#

Optional class rule to apply to list.

#bullet#

Optional Font Awesome / Google / Xidipity icon tag

#depth#

How many levels of the hierarchy to display (0=all)

#active#

Only display categories which have content assigned to them (y/n)

#category#

Limit list by identifying a parent category.

 

Installation

Steps
  1. highlight & copy template to clipboard
  2. click the line in your content where the list will be placed
  3. open the Xidipity Template Editor in a separate tab
  4. paste clipboard into the editor
  5. update the #title# marker as desired
  6. update the #css# marker as desired
  7. update the #bullet# marker as desired
  8. update the #depth# marker as desired
  9. update the #active# marker as desired
  10. update the #category# marker as desired
  11. highlight & copy updated template to clipboard
  12. click the toolbar insert template (  ) icon
  13. paste clipboard into the tool
  14. click OK to insert
​Notes

The icon tag used in this demo is from Google.

<span class="material-icons-outlined">inventory</span>

  • Since: v1.0.0

 

September 25, 2022
Print