Custom classes (or WP Query) for reliable column layout

Hi @stl99,

Realizing a column layout with li items is tricky (…)

Why is it “tricky”? I wrote a tutorial a long time ago about this (which needs to be updated to use more modern practices, like CSS grids and/or flexbox): How to display a grid of popular posts in WordPress. If I remember correctly, the tutorial uses an UL list to achieve the grid layout.

Is there a way to add custom classes so that I can assign “first” to the corresponding item?

If you don’t want to mess around with PHP code, I’d have a look at this: How can I use my own HTML markup with WordPress Popular Posts?

BTW: I found this which looks promising: https://philkurth.com.au/articles/wordpress-popular-posts-plugin-raw-data-array/.

I found that tutorial some time ago as well. Now we have the WPP_Query class which IMO is a better (and native!) solution.

Do keep in mind that this is an undocumented class for internal use only that can change in the future (as it has happened already) so if you decide to use it on your project(s) and something breaks due to a change in the class or in the plugin itself (actually there is another change coming up) you’ll have to adjust your code and fix whatever might need some fixing.

Are you planning any major changes to WPP that could break this hack?

Nope, but I can’t promise that it’ll never happen. Software -as most things in life- is always in constant evolution.

Hi Hector,

Thanks for the speedy reply! li item column layouts can look weird in older browsers, unfortunately I have to support some of them. Also, I’d prefer to use the same CSS for all my column layouts.

I’m trying to find a PHP solution, currently I just don’t seem to be able to figure something out. I’m trying to implement this post_class filter for WPP queries/loops as well:

add_filter( 'post_class', 'genesis_sample_archive_column_layout_post_class' );
function genesis_sample_archive_column_layout_post_class( $classes ) {
	global $wp_query;
	
	if( ! $wp_query->is_main_query() )
		return $classes;

	$classes[] = 'one-half';
	if( 0 == $wp_query->current_post % 2 )
		$classes[] = 'first';
	return $classes;
}

Cheers,
Thomas

That’s not going to work. WPP doesn’t use that filter hook. If you show me the HTML output you’re looking for I can give you some guidance on how to achieve that better with WPP.

Thanks for looking into this!

Ideally, the WPP output would provide the following HTML with the “one-half” and “one-half first” classes depending on odd/even post items:

<main class="content">
<article class="post entry one-half first">
</article>
<article class="post entry one-half">
</article>
<article class="post entry one-half first">
</article>
<article class="post entry one-half">
</article>
<article class="post entry one-half first">
</article>
<article class="post entry one-half">
</article>
...
</main>

Achieving a column layout is really easy that way via using these CSS values:

.one-half {
	float: left;
	margin-left: 2.564102564102564%;
	width: 48.717948717948715%;
}

.first {
	clear: both;
	margin-left: 0;
}

Cheers,
Thomas

Thanks Thomas.

Alright, we’re going to build your custom grid using the wpp_get_mostpopular() function so you can insert it anywhere in your theme:

if ( function_exists('wpp_get_mostpopular') ) {
    $args = array(
        'limit'     => 10, /* Max. number of posts to display */
        'wpp_start' => '<main class="content">',
        'post_html' => '<article class="post entry one-half">{title} {stats}</article>',
        'wpp_end'   => '</main>'
    );

    wpp_get_mostpopular($args);
}

Notice how I used the wpp_start, post_html, and wpp_end parameters to completely modify the HTML markup of the popular posts list. The post_html parameter also makes use of some Content Tags: {title} and {stats} (see Settings > WordPress Popular Posts > Parameters for a complete list of available CTs.)

And the corresponding CSS, with a minor change:

.one-half {
    float: left;
    margin-left: 2.564102564102564%;
    width: 48.717948717948715%;
}

.first,
.one-half:nth-of-type(odd) {
    clear: both;
    margin-left: 0;
}

Notice how I added .one-half:nth-of-type(odd) to your .first class CSS rules. The :nth-of-type selector is supported by all major browsers (including IE9) so we can replicate the behavior from the .first class without having to count posts to add it to the popular articles. Here’s a quick demo: two-column grid using the :nth-of-type selector. And if you’re feeling curious: The :nth-of-type CSS pseudo-class.

If you have any questions don’t hesitate to ask.

Hi Hector,

Thanks, that’ll work!

Cheers,
Thomas