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: