[Resolved] Using custom fields as dynamic parameter in Elements

[Magnus]

Hello,

I started to create a customized post template with Elements. The actual first result: https://ride-with-love.bike/neue-trail-detailseite/

I’m using Page Hero in Elements with dynamic content. Now I want to use some of my custom fields as dynamic parameters. Concrete I want to have the progress bar completely dynamic.

Actual the progress bar is implemented as a html code in Elements:

<div class="progress-bar-fill-text">Fahrtechnik - sehr leicht (2.5)</div>
<div class="progress-bar"><div class="progress-bar-fill" style="width: 25%;"></div></div>

But I want the values “Fahrtechnik – sehr leicht (2.5)” and “25%” to be dynamic and delivered by custom fields from each Post. So it should be something like this

<div class="progress-bar-fill-text">$fahrtechnik-text</div>
<div class="progress-bar"><div class="progress-bar-fill" style="width: $fahrtechnik_value;"></div></div>

Is it possible to get the values from customized fields, implemented dynamic in my Elements Page Hero? If yes (what I guess), how?

Thank you very much,

Magnus

[Ying]

Hi Magnus,

The $fahrtechnik-text can be achieved using a headline block, and enable the dynamic data, choose post meta as Content source, and enter the custom field name to the Post meta field.

For the width value, you can create a shortcode using the below code, then add this shortcode to your HTML.

add_shortcode( 'fahrtechnik_value', function() {
    ob_start();
   $fahrtechnik_value = get_post_meta( get_the_ID(), 'fahrtechnik_value', true );
   
    echo $fahrtechnik_value;
  
    // End your PHP above
    return ob_get_clean();
} );

The HTML would be something like this:
<div class="progress-bar"><div class="progress-bar-fill" style="width:[fahrtechnik_value];"></div></div>

[Magnus]

Hi Ying,

simple & works perfect. I like! Thank you very much

Best, Magnus

[Ying]

You are welcome 🙂

[Author]

Posts