We use the Display Posts plugin to query and display our custom post types in WordPress. The plugin selects the posts by any combination of type, status, category, tag, meta key, or search query and sorts them by date, title, menu order, or meta value – to name just the most important ones. Open, close, and output filters allow full control over the output.
This shortcode displays all FAQs with the category ‘general’ ordered by the menu order in an accordion. The message “No FAQs at this time” is shown in case the selection has no results.
[display-posts post_type="faq" category="general" no_posts_message="No FAQs at this time" wrapper="accordion"]
General Display Posts Query and Display Parameters
The following parameters are common for all custom post types. In general, all parameters listed in the display-posts documentation can be used but our custom post types extend or override some of them. Only those differences are listed here.
post_type
Specify which post type to use. You can use a default one (post or page), or a custom post type you’ve created.
Default: post
Options include: alert, booking, contact, event, faq, fundraiser, news, testimonial
Example: [display-posts post_type="event"]
wrapper_id
Specify a unique ID to be used on the wrapper of this listing.
Default: empty
Note: The wrapper_id is ignored on accordion and carousel wrappers because the plugin must generate its own ID.
Example: [display-posts category="cars" wrapper_id="cars-listing"]
posts_per_page
How many posts to display.
Default: -1 (list all posts)
Example: [display-posts posts_per_page="5"]
order
Specify whether posts are ordered in descending order (DESC) or ascending order (ASC).
Default: ASC
Example: [display-posts order="DESC"]
orderby
Specify what the posts are ordered by.
Default: menu_order
Options include: date, modified, rand, comment_count, menu_order, ID, author, title, name, type, meta_value, meta_value_num, post__in
Example: [display-posts orderby="date"]
listing_class
Specify the class name used for each post.
Default: listing-item
Example: [display-posts include_content="true" listing_class="dps-listing-item"]
layout
Custom parameter to specify which template part layout should be used. See the template parts tutorial.
Default: empty
Example: [display-posts layout="dps-listing-item"]
interval
The amount of time to delay between automatically cycling to the next item for a carousel in milliseconds. If 0, the carousel will not automatically cycle.
Default: 5000
Example: [display-posts wrapper="carousel" interval="3000"]
arrow_color_class
Specify the class name used for the arrows and dots at a carousel. You can use “dark” or “light” depending on the background color.
Default: dark
Example: [display-posts arrow_color_class="light"]
left_arrow
Show the left arrow at a carousel.
Default: true
Example: [display-posts left_arrow="false"]
right_arrow
Show the right arrow at a carousel.
Default: true
Example: [display-posts right_arrow="false"]
carousel_width
The width of the carousel content in percent. The left and right arrows each use 15% and will be on top of the content if the percentage is greater than approximately 85%.
Default: 70
Example: [display-posts right_arrow="false" left_arrow="false" carousel_width="100"]
carousel_dots
Show the indicator dots below the slider.
Default: true
Example: [display-posts carousel_dots="false" right_arrow="false" left_arrow="false" carousel_width="100"]
transient_key
This should be a unique key you define to cache the output. Each key will be cached separately, so if you are using the same shortcode on multiple pages you can use the same key for each one (cache it once rather than separately). Internally, the name of the key is expanded with the word “dps”, the post type, and a checksum of the parameters. Whenever a new post is created or an existing one is modified, all caches for this post type are deleted to ensure accurate data.
Default: none
Example: [display-posts transient_key="all_posts" transient_expiration="2 * DAY_IN_SECONDS"]
transient_expiration
This is how long (in seconds) the data should be cached. You can specify a number (ex: 86400), or use one of the time constants to make it easier to read (ex: WEEK_IN_SECONDS). You can also multiply the constants (ex: 2 * DAY_IN_SECONDS ).
Default: none
Example: [display-posts transient_key="all_posts" transient_expiration="WEEK_IN_SECONDS"]
Featured Image
The featured image in our custom posts should always have a square thumbnail image defined. Otherwise, the round images will look like ovals. Follow these steps to define a square thumbnail image:
- Media Manager
- Click on the image
- Click on “Edit Image” under the image
- Select “Thumbnail” under “Apply changes to:”
- Click on “Crop”
- Select the thumbnail area on the image
- Make the width and height under the Image Crop Selection the same
- Click on “Crop” again
- Click on “Save”
Display Parameters for Alerts
There are no additional display parameters for the custom post type Alert.
Display Parameters for Generic Post
wrapper
What type of HTML should be used to display the listings. It can be an unordered list (ul), ordered list (ol), divs (div), accordion, or carousel (slider).
Default: ul
Example: [display-posts wrapper="accordion"]
icon_class
Specify the class name used for the icon.
Default: icon
Example: [display-posts post_type="news" icon_class="my-icons"]
title_class
Specify the class name used for the title. The title content depends on the post type. It could be the questions at a FAQ, the headline at an Event, or the name at a Contact or Testimonial.
Default: title
Example: [display-posts post_type="news" icon_class="my-titles"]
image_class
Specify the class name used for the featured image.
Default: image
Example: [display-posts post_type="news" image_class="my-images"]
icon_max_height
Specify the maximum optional icon height in px.
Default: 50
Example: [display-posts post_type="news" icon_max_height="75"]
image_size
Specify an image size for displaying the featured image, if the post has one. The image_size can be set to thumbnail, medium, large (all controlled from Settings > Media), or a custom image size.
Default: medium
Example: [display-posts post_type="news" image_size="large"]
include_title
Include the post’s title. The title content depends on the post type. It could be the questions at a FAQ, the headline at an Event, or the name at a Contact or Testimonial.
Default: true
Example: [display-posts post_type="news" include_title="false"]
include_icon
Include the post’s icon if there is a default icon for the post type.
Default: true
Example: [display-posts post_type="news" include_icon="false"]
include_content
Specify whether or not to include the post content, usually the text field. Note that [display-posts] will be stripped out of the content to prevent infinite loops
Default: true
Example: [display-posts post_type="news" include_content="false"]
include_image
Specify whether or not to include the featured image, if the post has one.
Default: true
Example: [display-posts post_type="news" include_content="false"]
read_more
Specify whether or not to show only the content which comes before the <!--more--> tag at a carousel. The user has to click a “read more” button to see the full text.
Default: true
Example: [display-posts post_type="news" read_more="false"]
include_date
Specify whether or not to include the date at an event.
Default: true
Example: [display-posts post_type="news" include_date="false"]
date_class
Specify the class name used for the date at an event.
Default: date
Example: [display-posts post_type="news" date_class="my_dates"]
date_format
Specify the display date format used for the date at an event.
Default: m/d/Y
Example: [display-posts post_type="news" date_format="(m/d/Y)"]
time_format
Specify the display time format used for the time at an event.
Default: g:i a
Example: [display-posts post_type="news" time_format="H:i"]
Display Parameters for Testimonials
wrapper
What type of HTML should be used to display the listings. It can be an accordion or a carousel (slider).
Default: carousel
Example: [display-posts wrapper="accordion"]
size
Specify the size of the testimonials. Options are “large” for the image to the left of the text or “small” for the image on top of the text.
Default: large
Example: [display-posts post_type="testimonial" size="small"]
image_max_height
Specify the maximum height of the image in pixels.
Default: 150
Example: [display-posts post_type="testimonial" image_max_height="200"]
read_more
Specify whether or not to show only the content which comes before the <!--more--> tag at a carousel. The user has to click a “read more” button to see the full text.
Default: true
Example: [display-posts post_type="testimonial" read_more="false"]
title_class
Specify the class name used for the name.
Default: title
Example: [display-posts posts_type="testimonial" title_class="my-titles"]
job_title_class
Specify the class name used for the job title(s).
Default: job-title
Example: [display-posts posts_type="testimonial" job-title_class="my-job-titles"]
image_class
Specify the class name used for the image.
Default: image
Example: [display-posts post_type="testimonial" image_class="my-images"]
text_class
Specify the class name used for the testimonial text.
Default: text
Example: [display-posts post_type="testimonial" text_class="my-text"]
include_title
Include the name.
Default: true
Example: [display-posts post_type="testimonial" include_title="false"]
include_job_title
Include the job title(s).
Default: true
Example: [display-posts post_type="testimonial" include_job_title="false"]
include_stars
Include the star rating.
Default: true
Example: [display-posts post_type="testimonial" include_stars="false"]
include_image
Include the featured image.
Default: true
Example: [display-posts post_type="testimonial" include_image="false"]
Display Parameters for Bookings
wrapper
What type of HTML should be used to display the listings. It can be an “accordion” or a “carousel” (slider).
Default: accordion
Example: [display-posts post_type="bookings" wrapper="carousel"]
title_class
Specify the class name used for the month and year title at the accordion.
Default: title
Example: [display-posts posts_type="booking" title_class="my-titles"]
legend_class
Specify the class name used for the legend under the calendar.
Default: legend
Example: [display-posts posts_type="booking" legend_class="my-legends"]
calendar_class
Specify the class name used for the calendar.
Default: calendar-table
Example: [display-posts posts_type="booking" legend_class="my-calendars"]
calendar_item_class
Specify the class name used for the calendar days.
Default: calendar-table-item
Example: [display-posts posts_type="booking" legend_class="my-calendar-items"]
include_legend
Include the legend under the calendar.
Default: true
Example: [display-posts post_type="testimonial" include_legend="false"]
Display Parameters for Contacts
wrapper
What type of HTML should be used to display the listings. It can be a card, a vertical card (vertical-card), a round-image (round-image), or a raised image (raised-image).
Default: card
Example: [display-posts post_type="contact" wrapper="accordion"]
image_max_height
Specify the maximum height of the image in pixels for wrappers “round-image” and “raised-image”.
Default: 150
Example: [display-posts post_type="contact" image_max_height="200" image_max_width="200"]
image_max_width
Specify the maximum width of the image in pixels for wrappers “round-image” and “raised-image”.
Default: 150
Example: [display-posts post_type="contact" image_max_height="200" image_max_width="200"]
max_width
Specify the maximum width in pixels of the cards for wrappers “card” and “vertical-card”. Both use an image of size “medium” which is usually 300 pixels wide.
Default: 300 for “card” and 540 for “vertical-card”
Example: [display-posts post_type="contact" wrapper="vertical-card" max_width="600"]
name_class
Specify the class name used for the name.
Default: name
Example: [display-posts post_type="contact" wrapper="card" name_class="my-names"]
position_class
Specify the class name used for the job position.
Default: position
Example: [display-posts post_type="contact" wrapper="card" position_class="my-positions"]
image_class
Specify the class name used for the image.
Default: image
Example: [display-posts post_type="contact" wrapper="card" image_class="my-images"]
text_class
Specify the class name used for the text.
Default: text
Example: [display-posts post_type="contact" wrapper="card" text_class="my-text"]
social_listing_class
Specify the class name used for the social listing.
Default: social_list
Example: [display-posts post_type="contact" wrapper="card" social_listing_class="my-social-list"]
social_item_class
Specify the class name used for the social items.
Default: social-item social
Example: [display-posts post_type="contact" wrapper="card" social_item_class="my-social-item"]
email_class
Specify the class name used for the social email item.
Default: social-item email
Example: [display-posts post_type="contact" wrapper="card" email_class="my-social-email-item"]
phone_class
Specify the class name used for the social phone item.
Default: social-item phone
Example: [display-posts post_type="contact" wrapper="card" phone_class="my-social-phone-item"]
include_name
Include the name.
Default: true
Example: [display-posts post_type="contact" wrapper="vertical=card" include_name="false"]
include_position
Include the position.
Default: true
Example: [display-posts post_type="contact" wrapper="vertical=card" include_position="false"]
include_text
Include the text.
Default: true
Example: [display-posts post_type="contact" wrapper="vertical=card" include_text="false"]
include_image
Include the image.
Default: true
Example: [display-posts post_type="contact" wrapper="vertical=card" include_image="false"]
include_email
Include the email.
Default: true
Example: [display-posts post_type="contact" wrapper="vertical=card" include_email="false"]
include_phone
Include the phone.
Default: true
Example: [display-posts post_type="contact" wrapper="vertical=card" include_phone="false"]
include_social
Include the social and business accounts.
Default: true
Example: [display-posts post_type="contact" wrapper="vertical=card" include_social="false"]
Custom Posts Field Names
The title (the_title()) depends on the post type:
- Alert => not used
- Booking => not used
- Contact => Name
- Event => Short Description
- FAQ => Question
- Fundraiser => Short Description
- News => Short Description
- Testimonial => Name
Alerts
- text (type wysiwyg)
- color (type select)
Booking
- start_date (type date_picker)
- end_date (type date_picker)
- status (type radio)
- comment (type wysiwyg)
Contacts
- position (type text)
- email (type email)
- phone (type text)
- text (type wysiwyg)
- twitter_url (type url)
- facebook_url (type url)
- instagram_url (type url)
Event
- image (type image)
- start_date (type date_time_picker)
- end_date (type date_time_picker)
- text (type wysiwyg)
- image_position (type radio)
FAQ
- text (type wysiwyg)
- image (type image)
- image_position (type radio)
Fundraiser
- text (type wysiwyg)
- image (type image)
- image_position (type radio)
News
- text (type wysiwyg)
- image (type image)
- image_position (type radio)
Testimonial
- picture (type image)
- gender (type radio)
- title (type wysiwyg)
- stars (type number)
- text (type wysiwyg)
