Shortcode

The basic WP Tiles shortcode is [wp-tiles] and uses whatever defaults you have set up on the admin screens. To override any settings, you can either use the shortcode builder in the editor or pass all options manually to the shortcode.

For example, to display pages with AJAX pagination, ordered by date, the shortcode looks something like this:

[wp-tiles grids="News" small_screen_grid="Mobile" breakpoint="640" padding="5" pagination="ajax" post_type="page"order="DESC" orderby="date" exclude_current_post="true"]

 

Below are all options you can pass to the shortcode:

Grids and Colors

grids
Titles of grids to use, separated by comma’s. If multiple grids are used, grid selector will be shown. Set to all to use all grids.

Examples:

• [wp-tiles grids='News,Mobile']
• [wp-tiles grids='all']

grid
Use a custom defined grid. Separate lines by a pipe (|) character.

Example:

• [wp-tiles grid="ABB.|A.CC.|DDE|FF.E"]

colors
Text-only tiles background colors, separated by comma’s. Accepts hex (eg. #FFFFFF) or rgb (eg. rgb(255,255,255)).

Example:

• [wp-tiles colors='#ff00cc,#ccccff,#00ffcc']

background_opacity
Sets the background opacity for text-only tiles. 0 is transparent, 1 fully opaque.

grid_selector_color
If multiple grids are selected, this controls the color of the grid selector displayed above the tiles.

breakpoint
Width of parent element (in px) below which the tiles should switch to the small screen grid. Set to 0 to disable mobile grid altogether.

small_screen_grid
The title of the grid to switch to when parent element is narrower than breakpoint. See breakpoint.

padding
The padding between tiles in px.

animated
Set to false to disable all tile animations.

animate_init
Animate tiles when the page is first loaded.

animate_resize
Animate tiles when the page is resized.

animate_template
Animate tiles when the grid selector is used to change tile template.

pagination
If your query allows multiple pages, use this value to enable and set the type of pagination you want to use. Possible values:

• none – No pagination
• ajax – Use AJAX based pagination (without page refresh)
• prev_next – Set to enable previous page / next page links
• paging – Adds page numbers under tiles

Byline

byline_template
The content shown on image tiles. See byline templates.

byline_template_textonly
The content shown on text-only tiles.

byline_opacity
Opacity for byline background on image tiles. 0 is transparent, 1 is opaque.

byline_color
Background color for the byline. Accepts hex (eg. #ffffff) or rgb (eg. rgb(255,255,255).

byline_height
Height of the byline relative to the tile in %. 100% means the byline completely covers the tile, 0% means the byline is invisible. Also see byline_height_auto

byline_height_auto
If set, the byline_height is a maximum height. If the byline is smaller than byline height, the whole pane will be smaller.

byline_align
Attach the byline to the top or bottom of the tile.

byline_effect
Effect for the byline when visitor hovers over the tile. Possible values:
slide-up, slide-down, slide-left, slide-right, fade-in

Note: slide effect direction is movement direction. Ie. slide-up will slide from bottom to top, and slide-left will slide from right to left.

image_effect
Effect for the tile background image when visitor hovers over tile. Possible values:
scale-up, scale-down, saturate, desaturate

text_color
Font color for text-only tiles.

image_text_color
Byline font color (image tiles).

Other options

link
What the tile should link to. Possible values:

• post – Link to post displayed on tile
• file – Link to image file on image tile
• thickbox – Open image in WordPress default Thickbox
• carousel – Open image in JetPack Carousel slider (or Carousel Without JetPack)

link_new_window
Set to yes to make tile clicks open in new window.

text_only
Set to yes to never display image tiles.

images_only
Set to yes to only display tiles with images. Note that this option is incompatible with pagination.

hide_title
Set to yes to hide the title in the byline. Use this option if you want to display the title yourself in the byline template.

image_size
Set to any available image size to use images of that size.

image_source
Sets where WP Tiles is allowed to look for tile images. Possible values:

• attachment_only – Only display image for media posts
• featured_only – Only display featured image
• attached_only – Only use images that have been uploaded to the current post
• any – Also look in post content for tile image

Experimental

full_width
This only works in some themes. Break out of the content pane and make the tiles show up as wide as the nearest position: relative container. (Potentially the full browser width!)