Displaying second and other older posts in two columns

evetslefurax
(@evetslefurax)

9 years, 7 months ago
Hi there,

I am trying to make the posts on my home page display like this:

A (most recent post, one column, full width)

B C (following posts, two columns, ideally with reduced font size accordingly, without affecting posts’ page neither the first post A)

D E (idem)

F G (idem)

H I (idem, older posts here)

and so on

I found this useful code below, helping me partly. It puts everything on two columns (including the first post A, and without reducing the font size accordingly)

in functions.php:
```
add_filter('post_class','category_two_column_classes');
 
function category_two_column_classes( $classes ) {
global $wp_query;
if( is_home() ) :
$classes[] = 'two-column-post';
if( $wp_query->current_post%2 == 1 ) $classes[] = 'two-column-post-left';
endif;
return $classes;
}
```
CSS:
```
/* TWO COLUMNS POSTS */
.two-column-post {
	width: 46%;
	float: left;
	margin-left: 4%;
	background-color: none;
}

.two-column-post-left {
	clear: left;
	margin-left: 1%;
	background-color: none;
}
```
Other infos: It’s a 2014 child theme (but the original one now looks pretty much alike, since I accidentally made changes in it). Jetpack plugin is on. “Styles” and “Styles: TwentyFourteen” plugins are on too – have not used them for a while since I learned to code. The blog is this

Any help or other ways of doing appreciated, thanks a lot!
- This topic was modified 9 years, 7 months ago by evetslefurax.

Viewing 1 replies (of 1 total)

Thread Starter

evetslefurax

(@evetslefurax)

9 years, 7 months ago

Someone provided me with a code already (asked on the more generic support forum before here, link)

Code is, in functions.php:

add_filter('post_class','index_posts_layout_classes');
 
function index_posts_layout_classes( $classes ) {
global $wp_query;
if( is_home() ) :
$classes[] = $wp_query->current_post == 0 ? 'one-column-post' : 'two-column-post'; 
if( $wp_query->current_post%2 == 1 ) 
$classes[] = 'two-column-post-left';
endif;
return $classes;
}

CSS:

/* TWO COLUMNS POSTS */
.two-column-post {
	width: 46%;
	float: left;
	margin-left: 4%;
	background-color: none;
}

.two-column-post-left {
	clear: left;
	margin-left: 1%;
	background-color: none;
}

.one-column-post {
	width: 100%;
	margin-left: 1%;
	background-color: none;
}

Only things left is to reduce the font sizes of posts B-I accordingly to the posts’ newly reduced space, this without reducing it in the post page (not sure how though).

Viewing 1 replies (of 1 total)

The topic ‘Displaying second and other older posts in two columns’ is closed to new replies.