Logo
Logo

Post List

Overview of the Post List Element in Breakdance

This documentation discusses how to use the Post List element in Breakdance. When using the Post List element, you can quickly display any of the post types available on your site in several pre-defined layouts. Each section of the Post List can be customized or disabled. If you wish to use more advanced layouts for your Post Lists, we recommend checking out the Post Loop Builder element.

Setting Up the Post List Element

The first thing you’ll want to do is add the Post List element to Breakdance. Once added, the Post List will display all the current posts on your blog by default. From there, you can customize the Post List further with the design, query, and additional functionality.

Modifying the Post List Design

There are two areas where you can modify the Post List Layout.

The first is in the Content tab where you can disable areas of the Post List, such as the Image, Title, Meta, Taxonomy, Content, etc. Each of these sections also have some additional settings that you can edit. You can also choose to define if a clicked post opens in a new page, and what HTML tag each post has.

The second area is the Design tab. This is where you can choose various ways to style the various areas of the Post List.

Changing the Layout

Under the List section of the Design Tab is where you can change the Layout of the Post List. There are three layout options available:

  • List: Display the posts in a one-column list
  • Grid: Display the posts in a grid with 1 or more posts per row
  • Slider: Use a slider to display the posts.

Each of these layouts have different settings that you can adjust to fine-tune the layout.

Updating the Post List Query

The Query Controls allow you to change the query being used for the Post List. The Query Control accepts WP_Query arguments. There are three different ways you can modify the Query:

  • Custom: Use the Breakdance Query Builder dialogue to modify the query.
  • Text: Use text-based parameters to change the query.
  • Array: Use an Array-return option to modify the query. This is useful for more advanced queries.

When using the Custom Query, there are two different sources available to select:

  • Post Type: Select the Post Type(s) you want to use for the query
  • Related: Select similar posts based on a taxonomy.

You can customize the query further by specifying the amount of posts that show per page, the total posts loaded, and whether or not you’d like to offset (skip) a certain number of posts.

Using the Conditions and Meta Query options, you can limit and/or filter the posts that are shown in the Post List element.

The Order option is where you can adjust how the posts are ordered within the list.

Using Pagination

The Post List element allows you to choose several different pagination options. You may learn more about pagination here.

Setting the Filter Bar

With the Filter Bar, you can use Isotope filtering to filter the posts on the front end. You may learn more about filtering here.

It is important to note that the Filter Bar and Pagination options cannot be activated at the same time.