Adding classes to certain posts in a queue on the front page

[Henrik Blomgren]

Hi all,

I am back. Working on redesigning my site and wanted to try out grid and make some nice looking stuff with that.

As far as css goes it´s well away going smoothly. But the php is something I can´t get my head around.

To make things easier I want to add a extra class to the article class list. For me I want to add "latest-left" to the first post and "latest-right" to the eight post.

I have gotten as far as getting it to show up on every post but I can´t get it to only appear on the first post. I know I can use this:

// Add extra class to content
function wpstudio_add_class( $attributes ) {
  $attributes['class'] = $attributes['class']. 'your_extra_class';
    return $attributes;
}
add_filter( 'genesis_attr_entry', 'wpstudio_add_class' );

Together with a "if ($i ==1) {} enclosement. This work and adds the extra class to every single article.

So my question is this. Does anyone know if there is a easy way to check if the post number is 1 or 8 and then add two different classes to these posts only (for post 1 I want to add latest-left and for post 8 I want to add latest-right). Or is this too advanced and is considered a customization?

Thank you for your time.

Best Regards

-Henrik Blomgren

http://Local development and not live sorry :(

[Brad Dalton]

Hello Henrik

Use the post_class filter and wp_query with current_post to count the posts.

---

Tutorials for StudioPress Themes.

[Henrik Blomgren]

Hi Brad,

Thank you! Will look into using current_post. You never stop to learn and this is awesome.

[Henrik Blomgren]

So I am guessing using something along the lines of Bill Erickssons code

**
 * Add class to first post
 * 
 * @author Bill Erickson
 * @link http://www.billerickson.net/code/use-the-built-in-post-counter/
 * 
 * @param array $classes
 * @return array
 */
function be_class_on_first_post( $classes ) {
  global $wp_query;
  if( 0 == $wp_query->current_post )
    $classes[] = 'first-post';
    
  return $classes;
}
add_filter( 'post_class', 'be_class_on_first_post' );

Should work right? Only thing is it doesn´t. If I replace wp_query with my own query name(named simply $query then it outputs first-post. On all posts in the query. So close but yet so far XD and I don´t understand why it outputs it at all posts.

[andytc]

Just throwing this out there , If this is just for styling and nothing else , have you considered trying CSS :nth-of-type selectors ?

An example of what could be used on a blog archive -

/*The 1st post*/
.blog .content .post:nth-of-type(1) {
 background: #1da1f2;
 width: 45%;
}

/*The 5th post*/
.blog .content .post:nth-of-type(5) {
 background: #f2b21d;
 width: 45%;
}

Using the PHP code you posted from Bill Erickson 'as is' will add the correct class on the first post only when on an archive page (excerpts) , but it will also add that class to all 'single' posts and 'pages'. Why ? because it's targeting the 1st post and by default on a single post view , that is the only post [0] , so it get's marked as 'first', same with pages which are essentially posts as well. You could add a conditional to stop that happening , but I don't know what the ultimate goal is here with adding the class.

[Henrik Blomgren]

This is for making post number 1 and 8 output different code. Doing a custom loop on the front page of the design, post 1 and 8 will be Header, Post excerpt and "continue reading" button. All other posts will only be featured image, post title and header entry-meta.

And yes, in basic performance and style I want to learn how they added extra classes to certain posts like in Copyblogger.com

Just that I want to add some personal flair to that base design.

Why would it add the post only on a archive page though? And why does it produce the same result when I do it in a roundabout way with

add_filter( 'genesis_attr_entry', 'hb8_class' ); ?

Even if I change the number above to 7 (to work on the 8th post) it doesn´t appear at all. So so far it´s either work on everything or none. Which is kinda frustrating since it shouldn´t have to be this hard.

Unless it is working this way because I´m working in a custom query and not the genesis base one.

I don´t know but I do want to learn.

And yes, for adding just styles using a CSS approach works splendid. Now it isn´t just CSS that is going to be changed and outputed differently though 🙁

[andytc]

...Doing a custom loop on the front page

Don't know what's in that custom loop or how you're coding that , so can't help

just for the classes though , play with this edit or incorporate it in your custom loop for 1st and 8th Post -

function be_class_on_first_post( $classes ) {
	global $wp_query;
	$numposts = $wp_query->current_post;

		if ($numposts == 0) {
		    $classes[] = 'latest-left';
		} elseif ($numposts == 7) {
		    $classes[] = 'latest-right';
		} 
	
	return $classes;
}

add_filter( 'post_class', 'be_class_on_first_post' );

[Henrik Blomgren]

Same result! doesn´t work at all XD unless I change @wp_query to @query and then it outputs latest-left on everything.

But alright. I will post everything I have to see where the crap I am doing it wrong.

frontpage.php gets these lines of code

//* Remove the default Genesis loop
remove_action( 'genesis_loop', 'genesis_do_loop' );

//* Add custom genesis loop
add_action( 'genesis_loop', 'hb8_loop' );

function hb8_loop() {
	//* Grab template part for displaying the posts
  get_template_part( '/lib/templates/front-grid', 'section' );

}

Since I have a very bad irritation with posting queries and what not in any base level files since it has gotten so bad when I had tried doing it in the past now I make a separate file.

My current front-grid.php is

<?php

// if we are not on front page, abort.
	if ( ! is_front_page() ) {
		return;
	}

	// WP_Query arguments
	$args = array (
		'post_type'          => array('recension','post' ),
		'posts_per_page'         => '12',
	);

	// Yay we´re counting up to do special stuff with certain numbers.
	$i = 1;

	
	// The Query
	$query = new WP_Query( $args );

	// The Loop
	if ( $query->have_posts() ) {

    echo '<div class="hb-grid clearfix">';

		while ( $query->have_posts() ) {
			$query->the_post();

			if( 0 == $query->current_post ) {

				printf( '<article %s>', genesis_attr( 'entry' ) );
				do_action( 'genesis_entry_header' );
				printf( '<div %s>', genesis_attr( 'entry-content' ) );
				do_action( 'genesis_entry_content' );
				echo '</div>';

				echo '</article>';
				$i++;
			}

			elseif (7 == $query->current_post ) {

				printf( '<article %s>', genesis_attr( 'entry' ) );
				do_action( 'genesis_entry_header' );
				printf( '<div %s>', genesis_attr( 'entry-content' ) );
				do_action( 'genesis_entry_content' );
				echo '</div>';

				echo '</article>';
				$i++;
			}
			
			else {

				printf( '<article %s>', genesis_attr( 'entry' ) );
				do_action( 'genesis_entry_header' );
				echo '</article>';
			$i++;
			}
		}

		echo '</div><!-- end hb-grid-posts -->';
		
	} else {
		// no posts found
	}
	// Restore original Post Data
	wp_reset_postdata();

Where should I put the above code that you wrote? If I place it after
if ( $query->have_posts() ) {

then it doesn´t output anything. If I change wp_query to query it outputs on every post.

So that is why I am so confused. It should work but somehow it doesn´t? So thank you for the help so far. Hoping this all makes sense.

[Brad Dalton]

Add this code in your child themes functions file :

add_filter( 'post_class', 'filter_post_classes' );
function filter_post_classes( $classes ) {

if ( ! is_front_page() )
    return;

	global $wp_query;

	$page = is_paged() ? get_query_var('paged') : 1;

	$post_number = $wp_query->current_post;

	if ( 0 == $post_number && 1 == $page ) {
		$classes[] = 'one';
	}

	if ( 7 == $post_number && 1 == $page ) {
		$classes[] = 'eight';
	}

	return $classes;

}

Source

---

Tutorials for StudioPress Themes.

[Brad Dalton]

I don't think that code will help you as you seem to want to remove hooks from specific entries not add classes to specific posts.

Unless you use CSS to hide the elements you don't want displayed.

What you need is a custom loop.

I would close this and start a new topic with a different title.

---

Tutorials for StudioPress Themes.

[Henrik Blomgren]

Absolutely right it doesn´t work. On a custom loop it doesn´t work at all. On the normal loop when it´s the standard genesis loop? it works.

On a custom loop it doesn´t work at all. Same issue as it has been.

And yes the topic is what I want to do at this point. Doing whatever else I intend to do with the posts after I´ve learned this? A different topic yes.

Right now I want to learn how to add a custom class to certain posts in a custom loop.

Which none of what you have typed so far has managed to do. For what weird reason I do not understand but since it seems to not work for anyone it´s something to discuss with SP as well XD

[Brad Dalton]

Works perfectly, see the video demo https://www.youtube.com/watch?v=Ejrvcb7WwT8

You must have a problem with your custom code.

---

Tutorials for StudioPress Themes.

[Henrik Blomgren]

I´ve tried adding body classes, post classes and just about everything. When it is applied to the normal loop it works. When applied to a custom loop that is copy the base loop from genesis library and adding an array of post types as posted above and using that loop to make things happen?

This code does not work. Why it doesn´t I have no idea about but it does not work on a custom loop. Only on the standard loop.

[andytc]

I tried Brads code and it works on the frontpage , which is set to show 'Your latest posts' in settings >> reading , the problem is if you view any other single post or category archive it throws an error as below -

Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'be_class_on_first_post' not found or invalid function name in C:\Local Develpment\www.genesis-sample.dev.cc\wp-includes\class-wp-hook.php on line 288

Fatal error: Uncaught TypeError: Argument 1 passed to genesis_custom_post_class() must be of the type array, null given, called in C:\Local Develpment\www.genesis-sample.dev.cc\wp-includes\class-wp-hook.php on line 288 and defined in C:\Local Develpment\www.genesis-sample.dev.cc\wp-content\themes\genesis\lib\structure\post.php on line 112

why i do not know , but if i remove -

if ( ! is_front_page() )
    return;

it works , but then we have the code showing on all pages and posts, so back to square one on that.

[andytc]

This should work for you with some simple JS added -

<?php

//* Remove the default Genesis loop
remove_action( 'genesis_loop', 'genesis_do_loop' );

//* Add custom genesis loop
add_action( 'genesis_loop', 'hb8_loop' );

function hb8_loop() {

    // WP_Query arguments
    $args = array (
      'post_type'          => array('recension','post' ),
      'posts_per_page'     => '12',
    );

        
    // The Query
    $query = new WP_Query( $args );
        
    // The Loop
    if ( $query->have_posts() ) {

    echo '<div class="hb-grid clearfix">';

        while ( $query->have_posts() ) { $query->the_post();

            if ( in_array($query->current_post, array(0,7), true ) ) {
                
                printf( '<article %s>', genesis_attr( 'entry' ) );
                do_action( 'genesis_entry_header' );
                printf( '<div %s>', genesis_attr( 'entry-content' ) );
                do_action( 'genesis_entry_content' );
                echo '</div>';
                echo '</article>';
            
            }

           else {

                printf( '<article %s>', genesis_attr( 'entry' ) );
                do_action( 'genesis_entry_header' );
                echo '</article>';
            } 
          
        
            }

            echo '</div><!-- end hb-grid-posts -->';
            
    
    } else {
        
        // no posts found
    
    } ?>

 
<script>
// change the number in items [0] ,[7] to match your required post number
jQuery(document).ready(function($) { 
var items = document.getElementsByClassName('entry');
items[0].className += " latest-left";
items[7].className += " latest-right";
}); 
</script> 

<?php } // end hb8_loop

// Restore original Post Data
wp_reset_postdata();

// call genesis
genesis();

Assuming this is not going to be paginated , but as it's the front-page i doubt it will. But if you did want it paginated , i can give you that as well.

This is the front-page.php complete , not including it as a partial , you can edit and adjust for that.

[Henrik Blomgren]

This reply has been marked as private.

[andytc]

Let us know if that worked for you.

[Brad Dalton]

This code should be edited return $classes; not return;

---

Tutorials for StudioPress Themes.

[Henrik Blomgren]

Yes, I tried it and it works splendid. Thank you for the help!

[Author]

Posts