WP Custom fields – Add class to button element

I have looked into similar discussions in the forum. Most circle around my issue but non gave a definitive answer.

Working on an Intranet site running on WP (v. 4.8.14). I have been trying to style banners appearing on the home page. The intent is, each banner would appear in different colour combination. Each banner leads to a post type: Page. It is also intended once the code works to integrate it in the The Loop for those banners.

Banners on home page

I have been trying to get my head around WP custom fields and found the resource below, that seemed easy enough:

Style Individual Posts Using Custom Fields

Have added a Custom Field Key: cssclass with Value: bnr-yellow. This is a CSS class with some basic (for now) colour styling.

.bnr-yellow {
background: rgba(250, 240, 72, 1)!important; 
color: rgba(57, 185, 186, 1);}

The class itself works as I tested it manually from the Inspector.

Custom Field with value bnr-yellow

Updated (saved) the Page.

The issue

However I have been unable to make it work.
Although the code below returns all (possible) custom fields as a class, it does not return mine.

Image demonstrates missing class

The Image above demonstrates the returning output of the code below. Note the button requires .col-sm and .hmBanner which are passing through alright, (as evident).

Basic Loop…

<?php $custom_values = get_post_meta($post->ID, 'cssclass'); ?>

…and the button.

<button onClick="window.location.href='<?php the_permalink() ?>'" type="button" <?php post_class('col-sm hmBanner ' . $custom_values); ?> >
    <span>
        <i class="hmBannerImg animate__animated animate__backInDown " style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); ?>)"></i>
<div class="hvr-wobble-vertical brTtlDiv">
    <h3><?php the_title(); ?></h3>
</div>
        </span>

Have tried various iterations of the PHP, for example alter the code, as per a web resource, but same issue…

<?php $customField = get_post_custom_values("cssclass"); ?>

Regarding the post ID, I am not interested in it… So I have not been using it. Though if it proves it is needed for the function then I will add it.

What possibly am I missing here?

Any point to the right direction would be greatly appreciated.

Please help!…
Thank you for your time in advance.

P.S. I am not a novice nor am I clever.

Go to Source
Author: Jason