[Resolved] Custom Blog Archive Layout

[Patrick]

Hi :), I would like to achieve this Layout ->> http://prntscr.com/nbhbeh
That means:
– Author + Date Inline above the Title
– Category inbetween Title and Excerpt
– Read more + Comments Inline under the Excerpt

The CSS is no problem but I don’t know how to achieve this with PHP yet.

GeneratePress 2.2.2

GP Premium 1.7.8

[Tom]

Hi there,

First, let’s move the author + date above the title:

add_action( 'after_setup_theme', function() { 
    remove_action( 'generate_after_entry_title', 'generate_post_meta' );
    add_action( 'generate_before_entry_title', 'generate_post_meta' );
} );

Next, we’ll move the categories after the title:

add_filter( 'generate_show_categories', '__return_false' );

add_action( 'generate_after_entry_title', function() {
    $categories_list = get_the_category_list( ', ' );

    if ( $categories_list ) {
        printf( '<span class="cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
            esc_html_x( 'Categories', 'Used before category names.', 'generatepress' ),
            $categories_list
        );
    }
} );

Lastly, the comments and read more should be at the bottom by default.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Patrick]

Thank you so much! Just one more thing:
Now the Comments are under Read More, is it possible to move them to the same height. So the comments are on the right side?
Currently the Comments are in the Footer Meta, so moving them into entry-summary I guess?

I tried it with css and position absolute but I have problems getting it responsive

[Patrick]

Ok one more problem. I have now Date and Author above and under the title so twice. I thought I can just deactivate one in the customizer, but it removes both. So how can I keep only the one above the title? 🙂

[Tom]

Any chance you can link me to your site so I can take a look?

I updated the function above which should fix the second issue.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Patrick]

Thanks first issue solved.
Im working local on my site but I made a screenshot for better understanding
http://prntscr.com/nbxxwh

[Tom]

Hard to know for sure without being able to inspect the code.

I think absolute positioning is your best bet.

Something like this:

.home footer.entry-meta, 
.archive footer.entry-meta {
    position: absolute;
    bottom: 40px;
    right: 40px;
}

Then you can stack them using a media query if it stops working as a specific width:

@media (max-width: 800px) {
    .home footer.entry-meta, 
    .archive footer.entry-meta {
        position: relative;
        bottom: auto;
        right: auto;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Patrick]

Thanks for all the support, the code helped to figure it out 🙂

.blog .inside-article{
    position: relative;
}
.blog footer.entry-meta {
    position: absolute;
    right: 20px;
    bottom: 60px;
}

@media (max-width: 800px) {
    .blog footer.entry-meta {
        position: relative;
        bottom: auto;
        right: auto;
    }
}

[Tom]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts