Using WP Tiles with the Loop

I essentially want to use WP Tiles in index.php instead of setting the front page to an actual page and inserting the shortcode.

Is there an easy way of achieving this… I just want to leave the homepage set to show latest posts.

I’m guessing template tags is probably what I’m after (https://wp-tiles.com/docs/template-tags/) but not quite sure how to implement, some examples would be great).

Hi @zigojacko,

Yes, the template tags are exactly what you need. If you want to let WP Tiles simply use the posts from the loop, add a call to the_loop_wp_tiles() in your index.php wherever you want the tiles to show up.

Alternatively, use the_wp_tiles and set up a custom query if you want. The first argument can be either a query or a WP_Query!

Cheers,
Mike

Thanks for your reply Mike.

I don’t think I’m doing it right… if ( function_exists ( ‘the_wp_tiles’ ) ) always returns false.

See https://wordpress.stackexchange.com/questions/181710/integrate-wp-tiles-into-existing-loop-index-php-and-theme

Getting nowhere with this.

I did manage to finally get posts to load using <?php if ( function_exists ( ‘the_loop_wp_tiles’ ) ) the_loop_wp_tiles( ); ?> in index.php but I have no idea where it is rendering the markup from those posts from.

Anyhow, no matter what I try, WP Tiles just seems to be loading it’s own thing. I need to retain a load of customisation to my loop, including post_classes etc. Whenever I load the_wp_tiles, it seems to override everything WordPress does by default. Take for example the article classes, none of the WordPress classes are used and it is completely overwritten with “wp-tiles-tile-with-image wp-tiles-tile-wrapper”.

I don’t want this, I want to integrate WP Tiles INTO WordPress, not replace what I already have :/

Hey Mike, I hope you can point me in the right direction. The point of what I am wanting to achieve is not to output what you have in WPTiles.php. I want to use WP Tiles on my own loop/my own markup.

Is that still possible via the way above?

No matter what I try, it’s just spewing out your plugins markup which is useless to me as you can’t even use standard WordPress functions in.

Thanks.

Hi @zigojacko,

if if ( function_exists ( 'the_wp_tiles' ) ) is always returning false, you should check if the plugin is activated! That code simply checks if the function exists (ie. if the plugin is installed and activated) before you call it. If it doesn’t exist, the plugin file isn’t loaded.

What mark up do you need outputted on the tiles? WP Tiles needs its own classes to render, well, the tiles. Without them, there would be no tiles. If you need to have custom content and markup show up as the byline, you can pass a custom byline template to the_loop_wp_tiles. If you need to call custom functions inside each byline, check out the wp_tiles_byline_template_post and wp_tiles_byline_tags filters, to change the whole byline template and the available tags respectively.

If you really don’t want WP Tiles to output any of its markup, then the plugin serves no purpose – all it does it output markup that can be loaded by the scripts that render the tiles. If you want your own markup to display in a tiled fashion, you can have a look at the script WP Tiles uses, tiles.js, and implementing it into your theme yourself. Though for most intents and purposes WP Tiles should be able to render desired effect!

Cheers,
Mike

“you can pass a custom byline template to the_loop_wp_tiles” how? I can’t find any documentation at all that explains any of this…

I think this could be of use if I knew how to implement it. Thanks.

I need to replace the whole of your render_tile_html function without doing so in your plugin files.

Hi again @zigojacko,

the_loop_wp_tiles accepts an array of options, which is effectively the same as the options available in the shortcode. You can give it a custom template like this:

the_loop_wp_tiles( array(
    'byline_template' => '<div class="my-custom-class">%title%</div><div>%content%</div>'
) );

However, if you really need to replace the whole render function, you may need to take a step back and think about why you need WP Tiles. In the end, WP Tiles is a way of getting content from the WP database with the correct markup on the page, so the JavaScript has something to turn into tiles. If you want to take out the rendering of mark up by WP Tiles, maybe you should have a look at creating your own tiles with JS? Also see my previous comment.

Cheers,
Mike

Hey Mike, I appreciate your replies, thank you.

We originally had our own tiles in js but what we’ve got it quite complex.

We have alternating sizes in list that goes big, small, small, big, big, small, small, big etc (your plugun lets us do this).

We also have filters that shuffles the posts at the top (but obviously, we need to keep the sizes etc when shuffled – not easy) (your plugin lets us do this as well).

We also have colour coded post types, extended functions and custom classes in our default wp query which allows us to uniquely style everything loaded in the loop (your plugin does not add the default wp post_classes nor lets us modify the query from functions.php so subsequently we’ve lost loads of styles and functionality).

Take for example, we use the events calendar plugin and had to modify the order in which events were included in the main loop using the below:-

add_action( ‘pre_get_posts’, ‘tribe_post_date_ordering’, 51 );
function tribe_post_date_ordering( $query ) {
if ( $query->tribe_is_multi_posttype) {
remove_filter( ‘posts_fields’, array( ‘TribeEventsQuery’, ‘multi_type_posts_fields’ ) );
$query->set( ‘order’, ‘DESC’ );
}
}

This no longer works when we’re using your plugin.

Bit by bit, I am getting there but I’ve spent about 10 hours on this now which isn’t my time well spent ??

We like your plugin because it is a finished article to the fancy jQuery we’re needing but we already had our own styled hover effects (byline template) and a modified query using multiple functions from our theme.

I’m determined to get this working with your plugin. I hope that all makes everything clearer now.

We’ve got your plugin working fine. We’ve managed to load the post_classes in your plugin (although post id’s etc are wrong but that’s not an issue). We only now need to make our existing functions in theme functions work with your plugin and we can finish this off. It’s just loads of things stopped working as soon as we’re loading your functions.

Oh bummer. I thought we had post_classes working but we don’t. Here is an example of the problem. If we try to use post_classes in your plugin (WPTiles.php) every single article element contains the same classes:-

post-1402 tribe_events type-tribe_events status-publish hentry cat_arts odd wp-tiles-tile-with-image wp-tiles-tile-wrapper item

Which is probably the latest post / first in the loop.

As you can imagine, this means we can’t style anything, the entire design of our blog home page is broken until we can get WordPress’s post_classes working on your plugin (hence the reason wanting to not use your render function).

Can you suggest a quick way of using post_classes on your article list in your plugin?

Try passing the post ID as the second argument into post_class. See the codex here. If you have the post as $post, for example:

post_class( '', $post->ID );

Mike

That passes the correct post ID into the class now (great). Now for the other 20 classes though… :/

Example from above:-

post-1402 tribe_events type-tribe_events status-publish hentry cat_arts odd wp-tiles-tile-with-image wp-tiles-tile-wrapper item

The post ID is correct.
None of the others are.

Thanks.

We ideally just need post_class to work in your plugin by default, without having to pass anything into it but take for example, we’re using this in our theme functions:-

// add category nicenames in body and post class
function category_id_class( $classes ) {
	global $post;
	foreach ( ( get_the_category( $post->ID ) ) as $category ) {
		$classes[] = 'cat-' . $category->category_nicename;
	}
	return $classes;
}

This inserts the class cat-[category name]. Even if I pass $post->category into post_class it spews out category-[category name].

This is giving me a headache ??