The Resources with Filter Bar Widget is a post grid widget for your resources that includes simple filtering. This widget does not require any additional plugins or widgets. It allows you to choose which resources you want to display and then filter them by resource type.
Content Tab Controls
Content Controls
Layout
- Columns – number of columns from 1-6 you can display your grid as.
Filter Heading
- Show Heading – toggle the filter heading on or off
- Heading Text – the text for the filter heading (default is “Filter: ”)
Image
- Show Image – toggle the resource featured image on or off
- Image Size – choose between the different media sizes that your WordPress installation uses. For best performance it is recommended to use the media size closest to the actual display size in the grid.
- Image Ratio – controls the height of the image
Excerpt
- Show Excerpt – toggle the resource excerpt on or off
- Excerpt Length – number of words to pull in from the content for the excerpt
Query Controls
The query controls allow the ability to change which resources are going to be pulled in. The Source control has a few options.
- Source: Resources – this will allow the pulling in of Resources on any page with some flexible options
- Include By – choose between term, post author, or resource author to filter the resources down by one of those options. Once selecting 1 of those, a new field will appear for you to specify the exact term(s), post author(s), or resource author(s).
- Exclude By – choose between Current Post, Manual Selection, Term, or Post Author to exclude based on those options. Depending on which is selected, a new field will appear for you to specify the exact options.
- Source: Manual Selection – here you can select specific resources you’d like to pull in. You can search by their title to add them here.
- Order By – choose to order the Resources by Date, Title, Menu Order, or Random.
- Order – choose between ASC (Ascending Order) or DESC (Descending Order)
- Total Results – the total number of results to return. Enter ‘-1’ to load all results (NOT recommended if you have a large amount of resources).
- Per Page – this is how many resources will display on one page.
Style Tab Controls
Filterbar Controls
Bar
- Padding – padding around the entire filter bar
- Background Color – background color for the entire filter bar
- Border – selecting any type other than ‘None’ will bring up controls to change the color and width
- Space Below – this controls the space below the filter bar
Heading
- Text Color
- Typography
- Alignment – if vertically aligned, the heading will be above the filter options; if horizontally aligned the heading will be in-line with the filter options
- Space Below – if vertically aligned, the space between the header and filter options
Filters
- Typography
- Padding – padding around each filter option
- Border – selecting any type other than ‘None’ will bring up controls to change the color and width
- Tag Tabs – set color options for Normal, Hover, Focus, and Active states
- Text Color
- Background Color
- Border Color
Layout Controls
- Columns Gap – gap in between each column of items in the grid
- Rows Gap – gap in between each row of items in the grid
Box Controls
- Padding – padding around each resource item
- Box Tabs – set background and border options for Normal and Hover states
- Background
- Border
- Border Radius
- Box Shadow
Content Controls
Image
If toggled on, this controls the resource featured image
- Space Below
Badge
If toggled on, this controls the badge on top of the featured image in the upper right corner
- Background Color
- Text Color
- Typography
- Border Radius
- Margin – adjust position of the badge within the featured image
Title
- Text Color
- Typography
- Space Below
Excerpt
If toggled on, this controls the resource excerpt
- Text Color
- Typography
- Space Below
Pagination Controls
When more resources are loaded than the selected “Per Page” amount, this controls the pagination that appears
- Space Above
- Text Color
- Hover Color
- Active Color
- Typography