12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Sep 9, 2020

Category Archive Images in Oxygen using ACF

Sridhar Katakam

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.

Creating/editing a category and setting an image using ACF
ACF image as Category Header Background Image

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.

Category Fields custom fields 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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right