I have a page (currently not yet Wordpress) with 20 pages, categorized in 5 groups and every group has it own group image in the header of the page (outside of the content). Every page in a category has the same image.

Now I try to implement this behaviour in wordpress.

Can I somehow categorize my pages and add some conditions to my self written theme?

1 Answer 1


You can either:

A: Use Posts rather than Pages. WP enables Categories on Posts by default, so it's easy to select a Category for each Post (all categories are shown with checkboxes, or it's easy to add a new one).

B: Use Pages, and create a custom "Page Category" taxonomy to categorize them, which also then makes it easy to select a Page Category for each Page (you start typing a category and it autocompletes, or it's easy to add a new one).

Either way, the simplest way to then add an image for each category is to use Advanced Custom Fields. It will let you use the built-in Media Library to upload or select the image without you having to write a bunch of JavaScript or manually paste in image URLs.

You'll want to make sure you assign one and only one category to each post/page. Unless you build in a lot of extra logic WP can't tell what category they were last viewing, so if you have a post assigned to both category A and B, and the visitor has been perusing category B and then happens upon this post, they'll see the category A header which they won't necessarily be expecting. But, the code below doesn't "fail" when there's more than one category, it just gets the image for whichever category it finds first.

Finally, in your theme header, you'll check what type of content is being displayed to determine which image to show. Something like this (this version is for option A):

// If this is a single Post
if(is_single('post')) {
    // get its Category
    $category = get_the_category();
    // set required ACF $post_id to category_#
    $post_id = 'category_' . $category->term_id;
    // get the first Category's ACF image
    $header_image = get_field('header_image', $post_id);
// If this is one of the Categories
elseif(is_category) {
    // set required ACF $post_id to category_#
    $post_id = 'category_' . get_queried_object()->term_id;
    // get the first Category's ACF image
    $header_image = get_field('header_image', $post_id);
// Now that we have the image ID, we'll use it somehow
// You could output the actual image, or use it as a background like this
    header { background-image:url('<?php echo $header_image; ?>'); }

You may need to adjust, depending on your markup (perhaps you don't want the image to be the background-image on your header, or perhaps you have a class on the header so that other header tags aren't affected) but that's the basic logic.

  • Actually you have another option as well. If your "groups" all have a parent Page - i.e. you have a page called "Books" and then sub-pages that are individual books, and another page called "Magazines" and then sub-pages that are individual magazines, you could also use the Featured Image of the parent page. That wouldn't require any plugins like ACF.
    – WebElaine
    Feb 20, 2019 at 20:22
  • Thank you for your answer. I now use "Advanced Custom Fields" for my pages. Then I can set it for every page individually.
    – Sebus
    Feb 26, 2019 at 9:21
  • What do you mean by "Featured Image of the parent page"? I can't find anything like that
    – Sebus
    Feb 26, 2019 at 9:22
  • Some themes support Featured Images on Pages. You would assign an image to that top-level Page, and then in the Page template, you would check whether the post->post_parent is 0. If it's 0, it's a top-level page, so use the current Page's featured image. If not, it's a child page, so use the parent page's featured image. (If you go more than parent/child to parent/child/grandchild you would have to find the page's ancestor (top-level page) rather than just the parent in some cases.)
    – WebElaine
    Feb 26, 2019 at 15:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.