[Resolved] Customizing entry meta

[Anas]

Hi 🙂

I have two questions:

1. Is there a way to 1) add the time (HH:HH AM/PM) to the entry meta, 2) use the abbreviation of the month (FEB instead of February for example), 3) add the comments count next to the date? so the entry meta would look like this: https://imgur.com/a/3P5Oqht

2. How can I change the width of the entry-header so it would be the same as the width of the featured image?
Here’s how my entry-header looks like: https://imgur.com/oZkQ7ly and here’s how I want it to look: https://imgur.com/hh54SoY

[Tom]

Hi there,

1. You can change the date and time format in “Settings > General”.

2. To add the comments count to the top entry meta, try this:

add_filter( 'generate_header_entry_meta_items', function( $items ) {
    $items[] = 'comments-link';

    return $items;
} );

add_filter( 'generate_footer_entry_meta_items', function( $items ) {
    return array_diff( $items, [ 'comments-link' ] );
} );

3. Try checking the “Display padding around images” option in Customize > Layout > Blog.

Let me know 🙂

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

[Anas]

Hey Tom,

It worked thanks! However, regarding your 3rd answer, I tried the “Display padding around images” option, but it didn’t perfectly work.
Here’s how the posts look like without the padding around images: https://imgur.com/a/LkwzJHn and here’s how they look with the padding: https://imgur.com/a/2revADf

After applying the “Display padding around images”, the image size got smaller. I want to keep the same image size but increase the entry-header’s width to fit the image width 🙂

[Tom]

Can you possible check the padding around images option and leave it saved so I can check out the CSS?

Have you tried decreasing “Separating space” option in Customize > Layout > Container?

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

[Anas]

Yes. I tried decreasing “separating space” option, but the image is still wider than the the entry-header even though the separating space is 0px. Here’s how the posts look like with 0px separating space: https://imgur.com/zFAcBVc

I set the separating space back to 40px and checked the padding around images option.

[Tom]

Try adding this CSS:

.generate-columns .inside-article {
    padding: 0;
}

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

[Anas]

I appreciate it Tom! Now, it works perfectly on desktop (using your last CSS code and checking the “display padding around images” option ): https://imgur.com/p6Bi0wG
However, here’s how it looks on mobile: https://imgur.com/XjqIhRy
Here’s how it looks on mobile without the CSS code but “display padding around images” is checked: https://imgur.com/MJlQbmP

[David]

Hi there,

not sure how you want it to look on mobile, but try this CSS instead:

@media (min-width: 768px) {
    .generate-columns .inside-article {
        padding: 0;
    }
}

This will only remove the padding on desktop

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

[Anas]

Hey David,

Thanks for the reply!
The desktop version is working perfectly (I used Tom’s CSS code and checked the “display padding around images” option). So I don’t want to edit the desktop version.
However, the mobile version looks strange (https://imgur.com/XjqIhRy). As you can see, the picture/title are as wide as the screen itself!
I want the post-image/entry-header to look like this: https://imgur.com/MJlQbmP (That’s the result I get for the mobile version by just checking the “display padding around images” option )

So using the CSS code and the padding option works just for the desktop version and using the padding option works just for the mobile version. Is there a way to apply style only for mobile device?

[David]

If you simply replace the code Tom provided with the code i gave you here then that will do exactly what you require.

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

[Anas]

Thanks! It finally worked!

[David]

Glad we could be of help

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

[Anas]

Hey Tom,

The PHP code you provided in post #1180255, to add the comments count to the top entry meta, works perfectly. However, I couldn’t change the default ‘Leave a comment’ text.

Here’s how it looks when a post has no comments: https://imgur.com/a/9Y8t7R8
Here’s how it looks when a post has X comments: https://imgur.com/a/DWISpQO

I tried the generate_leave_comment filter to get rid of the default text and show ‘0 comments’ when there aren’t any comments yet but David told me that the filter only works with the default WordPress Comments form. I hope you guys can find a solution in the future so the generate_leave_comment filter works with other comments’ plugins.

[Tom]

Hi there,

Does this work?:

add_filter( 'gettext', function( $text, $original, $domain ) {
    if ( 'Leave a comment' === $text && 'generatepress' === $domain ) {
        return '0 Comments';
    }

    return $text;
}, 10, 3 );

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

[Anas]

Hi Tom,

After I addeed this code my website crashed completely! I can’t even access the WP admin dashboard

[Author]

Posts