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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: