Logo
Logo

Term Loop Builder

The Term Loop Builder is a versatile element designed to display loops of WordPress terms, enabling you to showcase categories, tags, or any custom taxonomy in your designs. Each item in the loop is displayed through a Global Block designed using Breakdance’s dynamic data features to display relevant term information.

Implementing the Term Loop Builder

Before adding the Term Loop Builder element, first create a Global Block to serve as the template for each term.

Adding the Term Loop Builder Element

  1. Open the page where you want to display the Term Loop Builder in Breakdance.
  2. Add the Term Loop Builder element to the page.
  3. Select the Global Block created earlier to use as the template for each term in the loop.

Configuring the Term Loop Query

The Term Loop Builder uses either a custom query specified through settings available in the Query section. When the “Load Terms By Query” setting is enabled, this allows you to use an Array Query that will accept WP_Term_Query arguments.

When adding code within the Term Query, you can use the global variable $breakdance_current_term to get the current Term within the query. This is useful when you would like to use a Post Loop Builder inside of a Term Loop Builder.

Some example queries may be found below:

Show Terms Related to the Current Post

return [
  'taxonomy'   => 'post_tag',
  'object_ids' => get_queried_object_id(),
];

Show 4 Products Related to the Current Term in the Loop

This query example was used inside a Post Loop Builder’s Array Query, and the Post Loop Builer was placed within a Term Loop Builder. 
global $breakdance_current_term;
$term_id = $breakdance_current_term->term_id;

return [
    'post_type' => 'product',
    'posts_per_page' => '4',
    'tax_query' => array(
        array(
            'taxonomy' => 'product_cat',
            'terms' => $term_id,
        )
    )
];

Customizing the Display Layout

Once you’ve set the Global Block and defined the query, you can customize the layout for displaying terms on the page.

Choosing the Layout

In the List section of the Design Tab, select the layout for the Term Loop Builder from these options:
  • List: Display terms in a single-column list.
  • Grid: Display terms in a grid with one or more terms per row.
  • Slider: Use a slider to display the terms.
  • Accordion: Use an Accordion layout to display the posts.
  • Tabs: Use a Tabs layout to display the posts.
Each layout offers additional settings for further customization.

Styling the Term Loop Builder

The Post Section allows you to choose background color, borders, and paddings for each term. To modify the layout of each term, edit the selected Global Block.

The Container Section provides options for setting the overall styles for the container that holds all the terms.

Using Pagination

The Term Loop Builder includes several pagination options. Learn more about pagination here.

Repeated Block

The ‘Repeated Block’ section allows you to choose a global block, define the HTML tag for the block, and access advanced settings like alternate block settings, static items, and their respective configurations.

  • Global Block – Select a pre-defined global block to be repeated in this section.
  • Tag – Choose the HTML tag that best represents your block (e.g., div, section).
  • Advanced – Access advanced settings for further customization.
    • Alternates – Define alternate blocks to be used under specific conditions.
      • Global Block – Select a global block to be used as an alternate.
      • Position – Specify the position of the alternate block in the sequence.
      • Repeat – Toggle the repetition of the alternate block.
      • Frequency – Define how frequently the alternate block should repeat. (Available only when ‘Repeat’ is enabled)
    • Static Items – Set up static items that can be interspersed in the loop.
      • Global Block – Choose a global block for static items.
      • Position – Determine the position of static items in the layout.
      • Repeat – Decide if static items should be repeated.
      • Frequency – Set the frequency of repetition for static items. (Available only when ‘Repeat’ is enabled)

Query

In the ‘Query’ section, you can define the criteria for selecting the terms that will be displayed in your block.

  • Load Terms By Query – Enables the Term Query option.
  • Term Query – Allows custom PHP to be used for the Term Query. (Available when ‘Load Terms By Query’ is enabled)
  • Taxonomy – Select the Taxonomy to use for the Term Query. (Available when ‘Load Terms By Query’ is disabled)
  • Limit – Set the maximum number of terms to be returned. (Available when ‘Load Terms By Query’ is disabled)
  • Hide Empty – Only show terms if they have posts. (Available when ‘Load Terms By Query’ is disabled)

Pagination

The ‘Pagination’ section allows you to add and customize pagination for your content, including style, text for previous/next buttons, and options for ‘Load More’ functionality. Learn more about Pagination.

Design Controls

List

The ‘List’ section focuses on customizing the appearance of lists in your layout. Adjust the width, layout type, and delve into specific settings for sliders, including effects, autoplay, and navigation options.

  • Width – Set the width of your list, allowing for flexible design options.
  • Layout – Choose your preferred layout style, such as grid, slider, or list.
  • Slider – Modify the settings for the Slider layout. More information may be found via the Slider Controls documentation (Available when ‘Layout’ is set to ‘slider’)
  • Items Per Row – Define the number of items per row in the list. (Available when ‘Layout’ is set to ‘grid’)
  • One Item At – Set breakpoints for displaying only one item per row. (Available when ‘Layout’ is set to ‘grid’)
  • Space Between Items – Adjust the space between items in the list. (Available when ‘Layout’ is not set to ‘slider’)

Post

The ‘Post’ section is dedicated to styling individual terms. Customize their background, borders, and padding to match your site’s design aesthetic.

  • Background – Choose a background color for your terms.
  • Borders – Tailor the borders of your terms with options for radius, style, and shadow.
    • Radius – Adjust the border radius for rounded corners.
    • Styling – Customize the border style, width, and color.
    • Shadow – Add a shadow effect to your terms.
  • Padding – Define the padding inside your terms for better content spacing.
    • Padding – Set specific padding values for top, bottom, left, and right sides.

Container

In the ‘Container’ section, you can customize the overall container of your element, including its background, borders, and padding, to create a distinct look and feel.

  • Background – Select a background color for the container.
  • Borders – Adjust the border settings of the container, including radius, style, and shadow.
    • Radius – Modify the border radius for rounded corners.
    • Styling – Customize the border style, width, and color.
    • Shadow – Apply a shadow effect to the container.
  • Padding – Set the padding within the container for better layout and spacing.
    • Padding – Define specific padding values for all sides of the container.

Spacing

The ‘Spacing’ section provides controls to adjust the margin at the top and bottom of the element, allowing for precise spacing and alignment within your page layout.

  • Margin Top – Set the top margin to create space above the element.
  • Margin Bottom – Adjust the bottom margin to control spacing below the element.