[Support request] Post’s header design

Home Forums Support [Support request] Post’s header design

Home Forums Support Post’s header design

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1601979
    Pheonix

    How do I make my post’s header look like this: https://prnt.sc/wdxgqe

    Design sourced here: https://jamesclear.com/creative-thinking

    #1602107
    Leo
    Staff
    Customer Support

    Hi there,

    Can you link us to your site in question so I can see your current set up?

    Thanks ๐Ÿ™‚

    #1602129
    Pheonix

    Sure thing!

    #1602392
    David
    Staff
    Customer Support

    Hi there,

    is it just the alignment and the Meta Order that you want to change?

    #1602851
    Pheonix

    The title is good. I’d like to change the meta. So it’d look like this:

    written by AUTHOR | CATEGORY
    DATE

    #1603105
    Leo
    Staff
    Customer Support

    Would that be for archives and single posts?

    #1603142
    Pheonix

    Single posts

    #1603255
    Ying
    Staff
    Customer Support

    Hi Pheonix,

    – Use this PHP snippet to change the “by” to ” Written by”.

    add_filter( 'generate_inside_post_meta_item_output', function( $output, $item ) {
        if ( 'author' === $item ) {
            return ' Written by ';
        }
            return $output;
    }, 50, 2);

    – Use this PHP snippet to move category up from the bottom of a single post.

    add_filter( 'generate_post_author_output', function( $output ) {
        echo $output;
    
        $categories_list = get_the_category_list( ', ' );
        if ( $categories_list ) {
            echo '<span class="cat-links">' .  $categories_list . '</span>';
        }
    
    } );

    Adding PHP: https://docs.generatepress.com/article/adding-php/

    – Use this CSS to reposition the entry meta.

    .single-post .entry-meta .cat-links {
        margin-left: 10px;
    }
    
    .single-post .entry-meta {
        display: flex;
        flex-wrap: wrap;
        width: 40%;
    }
    
    .single-post .entry-meta .span.posted-on {
        order: 3;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know ๐Ÿ™‚

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