Problem:

I have a custom post type, and for each post I publish in this post type, I assign one category. I need each post I publish to change its featured image, according to the category assigned to it, with the image that has been added to the custom field.

Solution:

You could filter the the_post_thumbnail() function, which will dynamically show the assigned category image across all your custom post type, rather than using acf_save_post to save the category image in the post featured image meta field.

By filtering the the_post_thumbnail() for your specific post type, this means if you change the image on category in the future, it will automatically update all the custom post type featured images with the assigned category.

Here is rough example that might get you on the right track, read my comments in code carefully so you can update the relevant fields to suit you environment…

<span class="hljs-comment">/**
 * <span class="hljs-doctag">@param</span> $html
 * <span class="hljs-doctag">@param</span> $post_id
 * <span class="hljs-doctag">@param</span> $post_thumbnail_id
 * <span class="hljs-doctag">@param</span> $size
 * <span class="hljs-doctag">@param</span> array $attr
 * <span class="hljs-doctag">@return</span> string $html
 */</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">modify_cars_featured_img_html</span>(<span class="hljs-params"><span class="hljs-variable">$html</span>, <span class="hljs-variable">$post_id</span>, <span class="hljs-variable">$post_thumbnail_id</span>, <span class="hljs-variable">$size</span>, <span class="hljs-variable">$attr</span></span>) </span>{

    <span class="hljs-comment">// if post type is not 'cars' then return html now</span>
    <span class="hljs-keyword">if</span>(<span class="hljs-title function_ invoke__">get_post_type</span>(<span class="hljs-variable">$post_id</span>) <> <span class="hljs-string">'cars'</span>) <span class="hljs-keyword">return</span> <span class="hljs-variable">$html</span>;

    <span class="hljs-comment">// get the categories from cars post</span>
    <span class="hljs-variable">$cat</span> = <span class="hljs-title function_ invoke__">get_the_terms</span>(<span class="hljs-variable">$post_id</span>,<span class="hljs-string">'category'</span>);

    <span class="hljs-comment">// if categories var is array then return categories else false</span>
    <span class="hljs-variable">$cat</span> = <span class="hljs-title function_ invoke__">is_array</span>(<span class="hljs-variable">$cat</span>) ? <span class="hljs-variable">$cat</span> : <span class="hljs-literal">false</span>;

    <span class="hljs-comment">// if categories is false then return html now</span>
    <span class="hljs-keyword">if</span>(!<span class="hljs-keyword">isset</span>(<span class="hljs-variable">$cat</span>[<span class="hljs-number">0</span>])) <span class="hljs-keyword">return</span> <span class="hljs-variable">$html</span>;

    <span class="hljs-comment">// get categories image acf field using first existing category id in array objects</span>
    <span class="hljs-variable">$id</span> = <span class="hljs-title function_ invoke__">get_field</span>(<span class="hljs-string">'your_category_acf_img_field_name'</span>,<span class="hljs-string">'category_'</span>.<span class="hljs-variable">$cat</span>[<span class="hljs-number">0</span>]->term_id);
    
    <span class="hljs-comment">// get the attachment data based on passed size and category image id</span>
    <span class="hljs-variable">$src</span> = <span class="hljs-title function_ invoke__">wp_get_attachment_image_src</span>(<span class="hljs-variable">$id</span>, <span class="hljs-variable">$size</span>);

    <span class="hljs-comment">// get the media item image title from category image id</span>
    <span class="hljs-variable">$alt</span> = <span class="hljs-title function_ invoke__">get_the_title</span>(<span class="hljs-variable">$id</span>); 

    <span class="hljs-comment">// if class is passed in post thumbnail function in theme make sure we pass this to featured image html</span>
    <span class="hljs-variable">$class</span> = <span class="hljs-keyword">isset</span>(<span class="hljs-variable">$attr</span>[<span class="hljs-string">'class'</span>]) ? <span class="hljs-variable">$attr</span>[<span class="hljs-string">'class'</span>] : <span class="hljs-literal">false</span>;

    <span class="hljs-comment">// the new post thumbnail featured image html</span>
    <span class="hljs-variable">$html</span> = <span class="hljs-string">'<img src="'</span> . <span class="hljs-variable">$src</span>[<span class="hljs-number">0</span>] . <span class="hljs-string">'" alt="'</span> . <span class="hljs-variable">$alt</span> . <span class="hljs-string">'" '</span> . ( <span class="hljs-variable">$class</span> ? <span class="hljs-string">'class="'</span> . <span class="hljs-variable">$class</span> . <span class="hljs-string">'"'</span> : <span class="hljs-literal">null</span> ) . <span class="hljs-string">' />'</span>;
    
    <span class="hljs-comment">// return the image html</span>
    <span class="hljs-keyword">return</span> <span class="hljs-variable">$html</span>;
}

<span class="hljs-comment">// add the filter</span>
<span class="hljs-title function_ invoke__">add_filter</span>(<span class="hljs-string">'post_thumbnail_html'</span>, <span class="hljs-string">'modify_cars_featured_img_html'</span>, <span class="hljs-number">99</span>, <span class="hljs-number">5</span>);

Add all this updated code to your functions.php.


Updated code above to return $html early at two points in this function, as I was originally only returning which was causing your other post thumbnails to break.

Make sure you also set your categories image acf field to return image ID or this wont code wont work.

enter image description here

At Kyra Web Studio, we’re passionate about helping businesses build a strong brand identity that drives growth and success. Our team of experts specializes in website design, ecommerce solutions, real estate design, web overhaul, responsive design, custom development, UI/UX design, paid advertising, branding, SEO, social media, content marketing, email marketing, hosting, maintenance, security, CMS implementation, backup & recovery, domain management, performance optimization, and website accessibility. Let us help you create a brand that stands out in the crowd and resonates with your target audience. Contact us today to learn more about our services and how we can help you achieve your business goals.

Explore Our Services: Reach Out Today to Transform Your Vision into Reality!

Connect with our dedicated team for personalized assistance.