Category Archive Images in Oxygen using ACF

Updated on October 24, 2020

In the past, I wrote a tutorial on how to set up category archive hero/header images using WP Term Images here.

This members-only tutorial provides the steps to do the same using Advanced Custom Fields.

We shall

• add a custom fields group having an image field set to appear on categories
• set images for the categories
• register a custom image size for the category header background image
• create a custom function that returns the URL of the category image field in the above size
• use this with Oxygen's dynamic data feature in the Template applies to category archives

Step 1

Install and activate ACF.

Go to Custom Fields > Add New and add your field group.

Set the Return Format as Image Array.

Step 2

Edit your categories and select/upload an image for each.

You need to regenerate the thumbnails if you are selecting images that were uploaded before implementing this tutorial.

Step 3

Install and activate Code Snippets plugin.

Add a new Snippet named say, "Custom image sizes" having the following code:

add_image_size( 'category-image', 1600, 400, true );

Save changes and activate.

Step 4

Add another Code Snippet.

Title: Get Category Image URL

Code: