Generate shortcode next to post date (inline)

This topic has 16 replies, 4 voices, and was last updated 2 years, 11 months ago by David.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Posts
March 22, 2023 at 9:29 am #2577177

registriran

Hello,

I really tried to find a solution to this but couldn’t. Is there a way to generate shortcode next to the post date, author, etc., inline?

There’s this plugin called WP Recipe Maker and they have a shortcode for displaying star ratings for the recipe on the current page. I just want to display that next to my post’s publish date on the same line.

Keep in mind that, for now, the website only displays published date there but in the future I would probably switch to the “display only update date” PHP filter so the solution shouldn’t interfere with that.

I’ll add an example webstie that does this in the private info field (not mine).

Thanks

March 22, 2023 at 10:35 am #2577320

Ying
Staff
Customer Support

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.

March 24, 2023 at 12:22 am #2579830

registriran

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

March 24, 2023 at 12:50 am #2579868
Fernando
Customer Support
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.
March 24, 2023 at 12:53 am #2579872

registriran

Hello, Fernando,

This displays the star ratings below the date.

March 24, 2023 at 1:11 am #2579891

Fernando
Customer Support

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

March 24, 2023 at 1:19 am #2579902

registriran

Did so.

Thanks

March 24, 2023 at 1:25 am #2579906
Fernando
Customer Support
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;
}
```
March 24, 2023 at 1:38 am #2579928

registriran

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!

March 24, 2023 at 1:59 am #2579952

registriran

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.

March 24, 2023 at 3:44 am #2580105

David
Staff
Customer Support

Hi there,

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

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

March 24, 2023 at 5:04 am #2580220

registriran

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

March 24, 2023 at 5:59 am #2580287
David
Staff
Customer Support
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;
} );
```
March 24, 2023 at 7:17 am #2580368
registriran
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…
March 24, 2023 at 7:38 am #2580400
David
Staff
Customer Support
Please – no apologies necessary. Replace that CSS with this:
```
.single-post .entry-header .entry-meta {
    display: flex;
    align-items: center;
}
```
Author

Posts