[Resolved] Customizing entry meta

Home Forums Support [Resolved] Customizing entry meta

Home Forums Support Customizing entry meta

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1024708
    LoGP

    Hey guys,

    I customized my entry meta using this article:
    https://docs.generatepress.com/article/entry-meta-style/

    However, I’m actually trying to get something like this:

    View post on imgur.com

    So the date on the left, gravatar centered and the author name to the right.

    Can’t get it to work by myself πŸ™

    Anyone who can help me out?

    Cheers!

    #1024730
    David
    Staff
    Customer Support

    Hi there,

    do you have a link to the site with the meta already setup using the document you linked to?

    #1024911
    LoGP

    Hi David,

    Yes how do I send you a private message? I don’t want to publicize the url yet.

    Thank you

    #1025031
    David
    Staff
    Customer Support

    You can edit the original topic and use the Site URL field to share the link privately.

    #1025114
    LoGP

    Hi David,

    Yes found it and added the page/website! πŸ™‚

    -Lo

    #1025161
    David
    Staff
    Customer Support

    Try this instead.
    PHP:

    // Generate author image and link in separate containers
    add_filter( 'generate_post_author_output', function() {
        return sprintf( ' <div class="author vcard">%4$s</div><div class="author-wrap"><span class="label">Written by</span><a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a></div>',
                esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
                esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
                esc_html( get_the_author() ),
                get_avatar( get_the_author_meta( 'ID' ) )
        );
    } );
    
    // Filter meta items to display date and author
    add_filter( 'generate_header_entry_meta_items', function() {
        return array(
            'date',
            'author',
        );
    } );
    
    // Filter post date to display latest date
    add_filter( 'generate_post_date_output', function( $output, $time_string ) {
        $time_string = '<span class="label">Last updated: </span><time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
    
        if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
            $time_string = '<span class="label">Last updated</span><time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">%4$s</time>';
        }
    
        $time_string = sprintf( $time_string,
            esc_attr( get_the_date( 'c' ) ),
            esc_html( get_the_date() ),
            esc_attr( get_the_modified_date( 'c' ) ),
            esc_html( get_the_modified_date() )
        );
    
        return sprintf( '<div class="posted-on">%s</div> ',
            $time_string
        );
    }, 10, 2 );

    CSS:

    .entry-meta:not(footer),
    .entry-meta .posted-on,
    .entry-meta .author-wrap {
        display: flex;
    }
    
    .entry-meta {
        align-items: center;
        justify-content: center;
    }
    
    .entry-meta .posted-on,
    .entry-meta .author-wrap {
        flex-direction: column;
        font-size: 16px;
        padding: 0 25px;
        flex: 1;
    }
    
    .entry-meta .posted-on {
        text-align: right;
    }
    
    .entry-meta .label {
        font-size: 14px;
        color: #aaa;
        margin-bottom: 0.25em;
    }
    
    .author img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        vertical-align: middle;
    }
    #1025393
    LoGP

    Dude, you’re the man!! πŸ™‚

    It works!

    #1025551
    David
    Staff
    Customer Support

    Awesome – first go as well πŸ™‚

    #1118012
    LoGP

    Hey guys,

    So the code provided by David works perfectly fine.

    But is it also possible to add this to an element header?

    #1118038
    Leo
    Staff
    Customer Support
    #1118107
    LoGP

    Hi Leo,

    I already know how to add custom PHP/CSS. The code provided by David works.

    What I would like to know is if (and how) I can add the output of the author meta – as provided by David – into an element header in order to have more control.

    #1118217
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Customizing entry meta’ is closed to new replies.