[Support request] How i can achieve article design like wisepick.org

[Lisa]

Hello GP Support!
I want ot design my article similar to this one:
https://wisepick.org/best-acoustic-electric-guitar-under-500/

I think i can achieve it via page hero. But how i can add following things
1) Last updated date
2) This visual data that is at the bottom of featured image: 27 Models Considered 61 Hours of Research 4 Experts Interviewed 268 Reviews Analyzed

[David]

Hi there,

1. The last updated requires a snippet to always output the updated date:

https://docs.generatepress.com/article/generate_post_date_output/#only-show-updated-date

and a filter to use the updated date in the header element:

https://docs.generatepress.com/article/show-the-updated-post-date/#show-the-“updated”-post-date-in-header-element

Now you can add Last Updated: {{post_date}} to your header element.

2. The ‘custom meta’ bar would first require some custom fields.
Then we would need to write a Custom Short Code to output that data inside the Header Element. Do you have any Custom fields ?

[Lisa]

I dont have now, I have plugin names as advanced custom fields. I would appreciate if you guide me in depth detail of point 2.

[David]

It would require Custom development but this should get you started.
This ACF article provides the shortcode method for displaying a field name:

https://www.advancedcustomfields.com/resources/shortcode/

Then in your Header Element you could add some custom HTML to create the container and the labels – this would be for 4 fields:

<div class="custom-field-container">
    <div class="custom-field-inner grid-container">
        <div class="field-container">
            <div class="field-inner">
                <span class="field-label">Your 1st Field Label</span>[acf field="your-field-1"]
            </div>
        </div>
        <div class="field-container">
            <div class="field-inner">
                <span class="field-label">Your 2nd Field Label</span>[acf field="your-field-2"]
            </div>
        </div>
        <div class="field-container">
            <div class="field-inner">
                <span class="field-label">Your 3rd Field Label</span>[acf field="your-field-3"]
            </div>
        </div>
        <div class="field-container">
            <div class="field-inner">
                <span class="field-label">Your 4th Field Label</span>[acf field="your-field-4"]
            </div>
        </div>
    </div>
</div>

Then some CSS to style & position them within a responsive row:

.page-hero {
    position: relative;
}

.custom-field-container {
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.custom-field-inner {
    display: flex;
    flex-wrap: wrap;
}

.field-container {
    flex: 1 0 25%;
}

.field-inner {
    padding: 10px;
}

@media (max-width: 768px) {
    .field-container {
        flex: 1 0 50%;
    }
}

In the header element settings you would need to add enough bottom padding ( desktop and mobile ) to create a safe space or this custom meta container to sit.

[Lisa]

Thats great, I will give it a try.
Is it necessary to use ACF or it can be done without that plugin using only GP?

[David]

Its possible without ACF.
But it will mean using the built in Custom Fields.

https://wordpress.org/support/article/custom-fields

And then you would have to create your own shortcodes.
This article here provides the code for that.

https://www.isitwp.com/get-custom-field-value-with-shortcode/

[Author]

Posts