Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Changing the Styling for Latest Post via Child Theme

Home Forums Support Changing the Styling for Latest Post via Child Theme

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #51274
    Michael

    Hello again,

    I’m attempting to style the latest post appearing on the home page of my website. However most solutions I’ve found on WordPress support have you trying to alter code in the index.php file, where the Loop is controlled. Another purely CSS solution, where you specify the first instance of the article tag–.container article:first-child–didn’t work when I tried it. Instead it changed the class style all of the elements I was targeting, instead of a subclass.

    What I want to do is detect if the current post is the latest post, and apply either alternate CSS styles or a different HTML block altogether. I would like to do this from functions.php of my child theme. Is this feasible?

    I’ve sent a link to the website to support@generatepress.com.

    #51302
    Tom
    Lead Developer
    Lead Developer

    Hi Michael,

    How about adding a class to the first post in the loop using a function?

    add_filter( 'post_class', 'generate_first_post_class' );
    function generate_first_post_class( $classes ) {
        global $wp_query;
        if( 0 == $wp_query->current_post ) :
            $classes[] = 'first';
        endif;
    	
    	return $classes;
    }

    Then you can target that first post easily.

    Let me know 🙂

    #51642
    Michael

    Hi Tom,

    Thanks for the help. So far I’ve tried to implement this code by inserting it at the end of functions.php, then creating these classes in styles.css for targeting the specific object:

    .first {}
    
    .first > ... > .meta-date { ... }

    However in spite of the css styles, I end up with a 500 Internal Server Error. I’ll continue to work on this to see what the issue is, but I’d appreciate any insights on what the issue might be.

    #51765
    Tom
    Lead Developer
    Lead Developer

    That’s weird – I just adjusted the code, give it a try and let me know if you still encounter an error.

    #52551
    Michael

    The code looks the same to me. In either case, same error. Maybe there is something odd I’m doing in my functions.php file that’s generating the error.

    #52680
    Tom
    Lead Developer
    Lead Developer

    I played with this a little bit more, tested it and have it working.

    add_filter( 'post_class', 'generate_first_post_class' );
    function generate_first_post_class( $classes ) {
        global $wp_query;
        if( 0 == $wp_query->current_post ) :
            $classes[] = 'first';
        endif;
    	
    	return $classes;
    }

    If that still doesn’t work, it may be the code snippets plugin, and we’ll have to add it in a different way.

    Let me know 🙂

    #52734
    Michael

    A-ha, that did it! So WordPress didn’t like having the return statement before exiting the conditional block. Perfect. Thank you very much Tom, once again.

    #52805
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.