Generate shortcode next to post date (inline)

Hi there,

You can create a block element - post meta template, once the element type is chosen, you will see some pre-built templates for a quick start.

Then you can add a shortcode block in the block element.

Is there a way to achieve this without block elements.

Could it be done with a few lines of PHP? I know shortcode can be executed within PHP I just don't know how to "call" the star ratings to appear inline next to the published date.

Edit to clarify: When the time comes I want to be able to show the updated date based on what tag the post has with PHP like it is explained here: https://generatepress.com/forums/topic/trigger-last-updated-date-by-pasting-shortcode-in-the-body-of-an-article/

I tested it with the meta blocks you suggested and it does not work. If I select for the blocks to "replace existing post meta" then it overrides the 'generate_post_date_show_updated_only' PHP command. This means I can't have both the star ratings and the updated date based on tag displayed at the same time. It's why I'm asking for a PHP solution.

Thanks

Hello there,

Can you try this snippet:

add_action( 'generate_post_meta_items', function( $item ) {
    if ( is_single() ) {
        echo do_shortcode( '[YOUR-SHORTCODE]' );
    }
} );

Replace YOUR-SHORTCODE with your Shortcode.

Hello, Fernando,

This displays the star ratings below the date.

Can you re-add the code? We'll check what needs to be done to make it appear next to the date.

Did so.

Thanks

Try adding this through Appearance > Customize > Additional CSS:

.single-post .entry-meta {
    display: flex;
    align-items: center;
}

.single-post .entry-meta .wprm-recipe-rating {
    margin-left: 16px;
}

Works!

I tested with adding the 'generate_post_date_show_updated_only' PHP snippet and they work simultaneously too! Thanks!

One last question please - the "Jump to recipe" button is also generated through shortcode. Can I add it in there as well and also align it to appear on the same line with CSS?

Thanks so much for this Fernando!

Ah, I just found out it does not work quite right. Now star ratings also appear next to the category beneath the main content. Attached a screenshot.

Hi there,

see this doc here which explains how to add meta items:

https://docs.generatepress.com/article/generate_header_entry_meta_items/

Hi David,

I replaced generate_post_meta_items with generate_header_entry_meta_itemsin the PHP code above but all this did was to generate the star ratings above the top navigation menu.

I'm not a programmer but I can't understand why the code Fernando provided adds the star ratings below the title and below the end of the post simultaneously. Surely this shouldn't be treated as the same place on a page (post meta?)?

Also, how is it possible that the categories only appear under the post and the published date only appears below the title if it's treated the same place (since that's where the star ratings appear with the above code)?

Thanks

OK.
Remove the PHP you have so far.
The doc i provided is used like so:

1. register your own custom meta item, i will name it rating and have it display your shortcode:

add_action( 'generate_post_meta_items', function( $item ) {
    if ( 'rating' === $item ) {
        echo do_shortcode( '[YOUR-SHORTCODE]' );
    }
} );

Replace [YOUR-SHORTCODE] with your shortcode.

Now we have a custom meta item.

2. Tell GP to display the post meta items in the entry-header of the single post:

add_filter( 'generate_header_entry_meta_items', function($items) {
    if ( is_single() ) {
        $items = array(
            'date',
            'rating',
        );
    }
    return $items;
} );

Thanks so much, this removed the ratings from the bottom "entry-meta" and it's now starting to look as I want it.

Finally, is there a way for the categories and Next/Prev posts to not be displayed in the same line?

screenshot: https://prnt.sc/p_KjKlTqa7Sg

I figured it's the first part of the CSS code that Fernando provided that is doing that.

.single-post .entry-meta {
    display: flex;
    align-items: center;
}

However, when I remove it the ratings and date are also displayed one over the other...

screenshot (before removing the CSS): https://prnt.sc/dowNabIL8LH8
screenshot after removing the CSS: https://prnt.sc/rFhsmgKm--e5

p.s. - Sorry, I realize this may feel like torture...

Please - no apologies necessary. Replace that CSS with this:

.single-post .entry-header .entry-meta {
    display: flex;
    align-items: center;
}