Add Field Values to WordPress post_class

• MichaelMeisner

• October 11, 2019 at 4:51 am

I am having issues adding a field value to post_class on my site. The original code looks like this and is from the elegantthemes’ divi template in the blog.php (includes/builder/module/Blog.php):

<article id="post-<?php the_ID(); ?>" <?php post_class('et_pb_post clearfix' . $no_thumb_class . $overlay_class ); ?>>

I’d like to add the value of a field into that post_class, but can’t seem to get it done. There was an old topic here on the forum too but that solution didn’t seem to work for me either.

Hope someone can help, thanks in advance!

• RemSEO

• October 11, 2019 at 11:59 pm

Hi there,

Looks like you’ll need to use a child theme here.

If you modify directly your theme, your modifications will be suppressed when you’ll update your theme.

You’re lucky! The Divi Elegant Theme documentation is well done for that :
https://www.elegantthemes.com/blog/divi-resources/divi-child-theme

Just follow the instructions to overwrite properly your blog.php template.

Then you could add your custom field value to post_class() with acf function “the_field()”.
Your modified blog.php template will probably look like this :

<article id=”post-<?php the_ID(); ?>” <?php post_class(‘et_pb_post clearfix’ . $no_thumb_class . $overlay_class . the_field(‘your_field_name’) ); ?>>

You can also check the WordPress documentation about the post_class() function: https://developer.wordpress.org/reference/functions/post_class/

Hope it helps.

• MichaelMeisner

• October 12, 2019 at 12:11 am

Hey RemSEO, thanks for helping!

Incredibly that is what I end up getting to on my own as well, so I’m glad that I’m not totally lost. However I can’t get it to work fully. If I do as you mentioned it’ll look like this:
<article id="post-<?php the_ID(); ?>" <?php post_class('et_pb_post clearfix' . $no_thumb_class . $overlay_class . the_field('myfieldhere')); ?>>

It ends up putting the value infront of the class attribute on the site like this:

myfieldvalueclass="et_pb_post clearfix post-3326"

I cut out some of all the other classes in there, following post-3326, to keep the snippet short.

I can’t seem to get the value to be moved inside the class attribute, keeps ending up in front like that 🙁

::: EDIT :::
And yes, thanks for the headsup as well by the way! I am working in a childtheme to avoid issues in the future 🙂

• RemSEO

• October 12, 2019 at 12:46 am

Hey Michael,

I think i indicated a wrong syntax in my first reply (my bad!)

Please, try with this snippet :

<?php $field = get_field(‘field_name’); ?>
<article id=”post-<?php the_ID(); ?>” <?php post_class(‘et_pb_post clearfix’ . $no_thumb_class . $overlay_class . $field) ?>>

To keep it simple, the post_class() function could take two optional parameters : $class and $post_id.
(you don’t need the $post_id as you want to add a class in all blog posts).

To add multiple $variables to the $class parameter, Divi simply use the php concatenation.
(see php documentation about concatenation, it’s useful : https://www.php.net/manual/en/language.operators.string.php).

So with the snippet above, you stock the value of your field.
Then you use it as a $variable like the other divi $variable.

Let me know if it helps.

• MichaelMeisner

• October 12, 2019 at 1:03 am

Awesome, thank you so much! Think that finally did it. I ended up using concatenation to add more classes.

It ended up looking like this:

<?php $bgcolor = get_field('baggrundsfarve'); ?>
<?php $customclasses = $bgcolor . " " . get_field('justering'); ?>
<article id=”post-<?php the_ID(); ?>” <?php post_class('et_pb_post clearfix ' . $no_thumb_class . $overlay_class . $customclasses) ?>>

Out of curiousity, is that the proper way to add a space between the two classes? I mean it works just fine, but I feel like it’s a bit of a MacGyver solution.

• RemSEO

• October 12, 2019 at 1:40 am

No problem Michael 😉

I think your white space is optional here.

<?php $customclasses = $bgcolor . get_field('justering'); ?>

It will output: class1 class2

But if you don’t add space in your concatenation operator:
<?php $customclasses = $bgcolor.get_field('justering'); ?>

It will output: class1class2

• MichaelMeisner

• October 12, 2019 at 1:45 am

That’s what would have made sense to me too, but it just smacks them together without the added whitespace. Oh well, it’s not a big deal was just curious. It works as intended now, so that’s awesome!

Thanks again, and have a good weekend 🙂