Custom Post Display - noncasus/ultimate-utility-shortcodes GitHub Wiki
##Shortcode Summary
This shortcode will be used to display a listing of post items on any given page.
##Use cases
1. Oldest posts
User wishes to simply show posts from the beginning of time.
Example:
[posts order="asc" orderby="date"]
Note:
The orderby attribute is set to "date" by default.
2. Latest posts
User wants to display his custom post type of projects in a ladder type grid.
Example:
[posts gridtype="ladder" cptname="projects"]
##Elements Utilized
- Title
- Featured Image
- Excerpt
- View Project Link
##Attributes
- id
- numcols
- cptname
- showexcerpt
- gridtype
- type
- orderby
- order
- owlslider
###Attributes Explained
id(optional)
Used for adding an identification name to the element which will contain the posts.
Default: owl-slider-wrapper (deprecated, now it's uus-owl-slider-id and only for the owl slider)
Example:
[posts id="my-posts"]
numcols(optional)
With this attribute, the user can specify the number of columns to be used for displaying his posts.
Default: 4
Note: number of columns is based on the default 12 columns of twitter bootstrap.
Example:
[posts numcols="3"]
numposts(optional)
With this attribute, the user can specify the number of posts per page.
Default: 4
Example 1:
Grab 20 posts
[posts numposts="20"]
Example 2:
Grab all posts
[posts numposts=-1]
cptname(optional)
This attribute retrieves all posts from said Custom Post Type, hence the cpt abbreviation.
Default: post
Example:
[posts cptname="projects"]
showexcerpt (optional)
This attribute determines whether or not an excerpt will be displayed on a grid.
Default: true
gridtype(optional)
Allows the user to choose between four different grid types.
Default: default
Possible choices:
default
This grid displays posts in a normal grid with an image and title above the post excerpt.
ladder
This grid type displays the posts in a ladder type fashion where the post image is on the left or right and the text on the opposite side. Each consecutive post alters this display so for example you will have a post image on the left on the first post and on the second post the image will be displayed on the right.
flat
This grid type creates a gutterless grid of posts where the post text is displayed upon hovering over the post image.
portfolio
This fancy grid type displays the posts retrieved in varying sizes randomly by using Masonry (bundled with Isotope). The varying sizes are as follows:
470px x 470px
940px x 470px
470px x 940px
940px x 940px
The post information can be viewed by hovering over the image.
Please not that in order to use this grid type it is necessary to have a portfolio custom post type and it must be defined when using the shortcode
Example 1:
[posts gridtype="ladder"]
Example 2:
[posts numcols=3 numposts=-1 cptname=portfolio gridtype=portfolio buttontext="View Project" lazyload=true]
type(optional)
Grabs all posts by this type.
Possible values are:
mostviews
Uses the post_views_count meta key to select posts which have the most views.
featured
Uses the _featured meta key to select posts that are featured.
Default: empty
Example:
[posts type="featured"]
orderby(optional)
Orders posts by specific parameter.
Default: date
Note: All wordpress orderby parameters are accepted. A list of orderby parameters can be found here: Order and Orderby
Example:
[posts orderby="title"]
order(optional)
Orders posts in an ascending or descending manner.
Default: DESC
Note: More information can be found here: Order and Orderby
Example:
[posts order="ASC"]
owlslider(optional)
Determines whether or not an Owl Slider will be used to display posts
Default: false
_Note 1: The number of columns will affect the owl slider. As of this writing, Owl Slider has been assigned the following fixed values:
itemsDesktop : [1199,3]
itemsDesktopSmall : [979 ,3]
What this means is that we have two different sizes, each with a set amount of columns, in this case 3. For example if we have a device that has a screen width equal or less than 1199 then owl slider will change the number of columns to 3. The same idea goes for DesktopSmall.
Note 2: The number of seconds for autoplay is 3_
Example:
[posts orderby="title"]