Change header, footer or sidebar for individual posts with custom fields

Usually, a WordPress website will have only one header, footer and a sidebar already defined by the theme you are using. Each one has their functions and design stored in separate files which are called by the theme and then displayed on the site where needed. Because each part of the theme is stored in a different file, you can easily modify them without worrying you will mess up the entire site, and you can change the way only a header, a footer or a sidebar behaves on your site.

But sometimes, one element won’t be enough and for example, you will want to change your header. If you want to change it for the entire site, you’re already ready to go – open header.php and modify it the way you want it. But what if you wanted to add an ad in a header only for your single posts? Or maybe modify the header only for one post in your entire collection without changing the rest?

Once again, custom fields will help you.

Prepare the file:

Before we use a custom field to change headers, footers or sidebars, you should have a file prepared. Let’s say you want to change a header for a post or two and you have created a new file called header-header2.php where you have changed the design or inserted a specific advertisement to the post. Before you can continue with creating a custom field, make sure that the file is coded properly and is working on your site. Once the file is up and ready, you may proceed.

Be careful about naming the file – if you are trying to change the header, your new header file should look like this: header-newname.php

Replace the code:

  1. Open single.php file
  2. Search for get_header(); part of the code which is usually on the very top of the single.php page
  3. Replace the function with the following:
  4. global $wp_query;
    $postid = $wp_query->post->ID;
    $header = get_post_meta($postid, "header", true);
    if (!empty($header)) {
      get_header($header);
    } else {
      get_header();
    }
    wp_reset_query();
    
  5. Save changes

With this code, you told WordPress to check for a “header” custom field in each single post. If a custom field with that name was found, WordPress will take its value and use the filename as a header for that post only.

Change a header via custom field:

If you have header-header2.php uploaded in your theme, you can now call it in a custom field:

  1. Open a post for which you want to change a header
  2. Scroll down and navigate to custom fields
  3. Enter a new field and name it “header”
  4. Type in “header2.php” in the field’s value
  5. Update or publish the post

If there aren’t any errors in your header-header2.php file, the new header should appear on top of the post for which you’ve made the change. Still, all the other posts will load your standard header file defined by the theme.

As you may have noticed, you are only required to type in the filename of your new header file after the “header-” part. Because of that, it is important to name your new header file correctly and add “header-“ part before the actual name you’re using in the custom field.

The same goes for sidebar or footer file, of course, by changing get_sidebar() and get_footer() part of the code.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

One thought on “Change header, footer or sidebar for individual posts with custom fields

  1. Thank you for posting this. What I would like to know is, how I can expand on this and add to my theme options page in ACF Pro? I’d like to be able to call different header files when building new client sites. For example, in my Options panel, I’d like to be able to ‘Choose site header layout’ and then pick from a dropdown list with options such as ‘Slim Full-Width Logo Left, Stacked w/Centered Logo, etc). I’m scratching my head wondering how to modify the normal call to make it work so that if no selection is made, it will run the normal get_header call and if a selection is made from the dropdown, it will run the equivalent of say get_header(‘slim’) or get_header(‘stacked’) or, put another way, call the header-slim.php or header-stacked.php files.
    So far, all I’ve got is a new field group consisting of the dropdown containing header names. I’ve set it to not be required, and null is ok so that if nothing is selected it would still run the normal get_header call.

    Anyhoo, back to scratching my head… HELP! Pretty please? 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *