How to use custom field to add class to a post? - php

Question

I'm trying to add another class to <div class="postthumbnail">. I wanted to style one post different. Therefore, after researching, I found that the best method is to use custom field to add class to the post.
This tutorial, How to style WP posts different, especially this section at bottom, explained how I can add class to the post using the custom field. I did so by giving the custom field a name "en_proceso_class" and the value, "en_proceso" which is an css class. But I'm confused by the last two codes I need to add. The tutorial wasn't clear on where I need to add them.
My original code is:
<?php
// set the "paged" parameter (use 'page' if the query is on a static front page)
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
// the query
$the_query = new WP_Query( 'cat=9&posts_per_page=9&paged=' . $paged );
?>
<?php if ( $the_query->have_posts() ) : ?>
<?php
// the loop
while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<div class="proyectpost">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="innerpost">
<div class="postthumbnail">
<?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'full' );
echo '<img src="' . $image_src[0] . '" width="100%" />';
} ?>
</div>
<div class="posttitle">
<h2><?php the_title(); ?></h2>
<span><?php echo get_post_meta($post->ID, 'location', true); ?></span>
</div><!-- .entry-header -->
<div class="postsubtitle">
<div class="datepanel">
</div>
</div>
</div>
</article><!-- #post-## -->
</div>
<?php endwhile; ?>
<div class="paginationbar">
<?php
$big = 999999999; // need an unlikely integer
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $the_query->max_num_pages,
'show_all' => True,
'prev_next' => False
) );
?>
</div>
<?php
// clean up after the query and pagination
wp_reset_postdata();
?>
<?php else: ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
This is section of the code that I'm trying to add the new code to:
<div class="innerpost">
<?php $custom_values = get_post_meta($post->ID, 'en_proceso_class'); ?>
<div class="postthumbnail <?php en_proceso_class('class-1 class-2 ' . $custom_variable); ?>">
<?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'full' );
echo '<img src="' . $image_src[0] . '" width="100%" />';
} ?>
</div>
What do I need to do to get it working?

Answer 1

The last part isn't 100% clear but I'll try to answer as best I can.
This piece of code:
$custom_values = get_post_meta($post->ID, 'en_proceso_class');
Gets the value of a post meta field name: 'en_proceso_class'. You actually need to set that first in order for this to work. And you need to add 'true' as another parameter to that function. See here for more info: https://developer.wordpress.org/reference/functions/get_post_meta/
Then there's this:
div class="postthumbnail <?php en_proceso_class('class-1 class-2 ' . $custom_variable); ?>">
Which calls a function named 'en_proceso_class' -- I don't think this is what you want to do. Unless you declared that function beforehand you'll to do something like:
div class="postthumbnail <?php echo 'class-1 class-2 ' . $custom_variable; ?>">
So the whole code put together would look like this:
<div class="innerpost">
<?php
// Get post meta that is already set
$custom_values = get_post_meta($post->ID, 'en_proceso_class', true);
?>
<div class="postthumbnail <?php echo 'class-1 class-2 ' . $custom_values; ?>">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'full' );
echo '<img src="' . $image_src[0] . '" width="100%" />';
}
?>
</div>
Cheers