Move Elements in .inside-article Blog Archive Container

[Michael]

Hey there

Can you please give me a hint in the right direction?

At the moment the inside-article structure on the blog index page is:
Featured Image
Title
Post Date
Summary
Read More
Category
Comment

Where can I reorder the elements within <article> on the blog index page?
(I will use it on blog index, archives etc, so it doesn´t only have to be for the blog index page).

I want to achieve something like this:
Featured Image – Post Date (on top right of featured image)
Title
Comment – Category
Summary
Read More

I´m not sure which templates/files I have to tweak.
I´m not even sure if it is possible without plugins but I guess so.

The html and css part isn´t a problem for me, but the php part.
Can you please share some of your ideas and nice hints how to achieve this?

Thanks in advance
Michael

(I rebuild the website I posted with GeneratePress. I want to achieve a blog index layout similar to this)

[Tom]

Hi there,

You shouldn’t have to tweak any files I don’t think.

1. First, set your featured image to appear above the title: Customize > Layout > Blog
2. Set your post meta to show comments and categories:

add_filter( 'generate_header_entry_meta_items', function( $items ) {
    return array(
        'comments-link',
        'categories',
    );
} );

add_filter( 'generate_footer_entry_meta_items', '__return_null' );

3. Setting the post date with the featured image – are you wanting it to sit on top of the featured image?

add_filter( 'generate_inside_featured_image_output', function() {
    generate_do_post_meta_item( 'date' );
} );

Then you’ll likely need some CSS to position it absolutely on the image.

Let me know if this helps or not 🙂

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

[Michael]

Thanks a lot Tom!

Works like a charm. Very nice.

Best regards
Michael

[Tom]

Glad I could help 🙂

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

[Author]

Posts