WordPress.org

Ready to get started?Download WordPress

Plugin Directory

WP Tiles

WP Tiles shortcode adds fully customizable dynamic tiles to your WordPress posts and pages.

How can I style the tiles?

You can style WP Tiles by adding a file called 'wp-tiles.css' in your (child) themes 'inc', 'css' or 'inc/css' folder. It will automatically be loaded.

Can I use WP Tiles as the menu for my website?

You certainly can! For example, you filter the Tiles data to add certain pages on fixed places. For an example on how to code this, see this gist.

Can I change the size of the image used for the tiles?

Yes, use the wp-tiles-image-size filter to return the desired image size. For example:

add_filter('wp-tiles-image-size', 'change_tile_image_size');
function change_tile_image_size( $image_size ) {
    return 'large';
}

Can I show tiles in my templates, for example on in the category archives?

To show WP Tiles in your templates, three template tags are available:

the_wp_tiles( $atts )

This works the same as the shortcode. Pass the same arguments to the function as you would to the shortcode as an array. (The settings page shows you hints on how to do this)

the_category_wp_tiles( $atts )

Works the same as the_wp_tiles(), but shows posts from the current categories (for use on single posts and category pages).

the_loop_wp_tiles()

Can be used instead of the loop. Shows all posts that would be shown when normally using the loop.

N.B.: you can't pass any post_query attributes to the_loop_wp_tiles(). Set up the number of posts in your WP settings ( WP-admin -> Settings -> Reading -> "Blog pages show at most" ).

With the_loop_wp_tiles(), pagination works the same as it would in your other theme files. For help see Pagination in the WordPress Codex. (Tip: use your current category.php and just replace while ( have_posts() ) : the_post(); [...] endwhile; by the_loop_wp_tiles())

Example basic template:

<?php get_header(); ?>

    <section id="primary" class="site-content">
        <div id="content" role="main">

            <?php if ( function_exists ( 'the_loop_wp_tiles' ) ) the_loop_wp_tiles(); ?>

        </div><!-- #content -->
    </section><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Example category.php for Twenty Twelve:

<?php
/**
 * The template for displaying Category pages.
 *
 * Used to display archive-type pages for posts in a category.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

    <section id="primary" class="site-content">
        <div id="content" role="main">

        <?php if ( have_posts() ) : ?>
            <header class="archive-header">
                <h1 class="archive-title"><?php printf( __( 'Category Archives: %s', 'twentytwelve' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1>

            <?php if ( category_description() ) : // Show an optional category description ?>
                <div class="archive-meta"><?php echo category_description(); ?></div>
            <?php endif; ?>
            </header><!-- .archive-header -->

            <?php
            if ( function_exists ( 'the_loop_wp_tiles' ) ) :
                the_loop_wp_tiles();
            else :
                while ( have_posts() ) : the_post();

                    /* Include the post format-specific template for the content. If you want to
                     * this in a child theme then include a file called called content-___.php
                     * (where ___ is the post format) and that will be used instead.
                     */
                    get_template_part( 'content', get_post_format() );

                endwhile;
            endif;

            twentytwelve_content_nav( 'nav-below' );
            ?>

        <?php else : ?>
            <?php get_template_part( 'content', 'none' ); ?>
        <?php endif; ?>

        </div><!-- #content -->
    </section><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

How can I change what image is used for the tiles?

There's a filter for that! Changing how the first image is loaded works like this:

add_filter( 'pre_wp_tiles_image', 'my_tiles_first_image_function', 10, 2 );
function my_tiles_first_image_function( $src, $post ) {
    // Your own code that handles which image is returned
    return $src;
}

For example, to enforce that only the featured image is loaded (and never an image from inside a post):

add_filter( 'pre_wp_tiles_image', 'my_tiles_first_image_function', 10, 2 );
function my_tiles_first_image_function( $src, $post ) {
    $tile_image_size = apply_filters( 'wp-tiles-image-size', 'post-thumbnail', $post );

    $images = get_children( array(
        'post_parent'    => $post->ID,
        'numberposts'    => 1,
        'post_mime_type' =>'image'
    ) );

    if( !empty( $images ) ) {
        $images = current( $images );
        $src = wp_get_attachment_image_src( $images->ID, $size = $tile_image_size );
        return $src[0];
    }

    return '';
}

How can I use custom taxonomy queries in the shortcode?

Custom tax queries are supported in the shortcode (but they aren't pretty) using curly braces to create arrays. Use it like this:

[wp-tiles posts_query="tax_query{0}{taxonomy}=my_custom_tax&tax_query{0}{field}=slug&tax_query{0}{terms}=taxonomy-cat-1"]

The plugin does not work in Internet Explorer, help!

The plugin should work in IE, but if it does not, try adding the following to your theme's header:

<meta http-equiv="x-ua-compatible" content="IE=edge">

This will force IE to display the site as valid as possible and similiar to the competitors like Firefox and Chrome.

(thanks to 48fps for this tip!)

Can I show images attached to the current post using WP Tiles?

Yes! Since version 0.5.6 this is possible by using the appropriate query, which will look like this:

[wp-tiles posts_query='post_parent={POST_ID}&post_type=attachment&posts_per_page=-1&post_mime_type=image']

How can I style my tiles per category?

WP Tiles automatically adds the class slug to your tiles, so you can add your own CSS rules for each category independently.

Requires: 3.4.2 or higher
Compatible up to: 3.5.2
Last Updated: 2013-11-19
Downloads: 11,019

Ratings

4 stars
4.8 out of 5 stars

Support

9 of 14 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

0,2,0 100,1,1 100,1,1
100,1,1
83,6,5 100,1,1
100,1,1
100,1,1