I've gotten as far as creating custom post types, custom fields and linking those to templates on this first time WordPress project i'm working on, but i seem to have run into a problem i'm not easily able to solve (and i run into these types of problems all the time naturally:).

I have created a few different headers for different sections of my site and understand how to call on them from different templates. However i have this one header that will be used on 27 different neighborhood pages and the catch is that the background-color for each neighborhood needs to be customized.

Can this be accomplished with PHP? Or does anyone have any suggestions on how they might make this work? I realize i could go the jQuery route but i'm not sure how that would work on a site that's already generating dynamic content and to have to figure out which neighborhood it's on to be able to figure out which color to display.

I was thinking about actually creating 27 different header.php files but then thought that crazy when i couldn't figure out how to tell the neighborhood page template how to call on the right header based on the neighborhood and to even contemplate having 27 page templates just to display 27 different background colors for the header sounded like crazy talk, but hey when you're a noob those kinds of solutions start to sound pretty good when deadlines are around the corner.


UPDATED CODE 9/24/2013

<!--Updated Code 9/24-->

    $args = array(
        'post_type' => 'single_neighborhood'

    $the_query = new WP_Query( $args );


  <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

  <div class="container-hdr-neighborhood" style="background-color:<?php the_field( 'background_color' ); ?> ;">

  <?php endwhile; else: ?>

  <?php endif; ?>

2 Answers 2


You can apply a style to the header <div> (or the <header> element), and then add an inline style using wp_add_inline_style().

For example, let's say you've got something like this in your header.php file:

<header id="masthead" class="site-header" role="banner">

(Cribbed from the Twenty Twelve theme.)

Let's say you've set up the neighborhood's color as post meta-information using update_post_meta() or perhaps a custom metabox of some sort. Now we can pull it out of the meta table and throw it into the inline styles:

add_action(  'wp_enqueue_scripts', 'wpse115373_header_bg' );
function wpse115373_header_bg() {
    global $post;
    // set this to the handle of one of your stylesheets
    $handle = 'twentytwelve-style';
    // set this to the meta key you've used
    $meta_key = 'neighborhood_color';
    $bg_color = get_post_meta( $post->ID, $meta_key, $single = true );
    $css = "header { background-color: $bg_color; }";
    wp_add_inline_style( $handle, $css ); 


Codex pages for:

  • thanks for the answer i'm just not certain where to put the function would that be within the functions.php or the functions.wp-styles.php within the wp-includes folder. Also do you think this might work using the Advanced Custom Fields plugin where i can create a custom field for Color picker and use the description tag (in my case 'background_color') to add a the_field() template tag to this custom header file and then write some kind of a $args to the query that would pick the color based on the taxonomy is? That's the only kind of understanding i have at this point? Thanks.
    – MARS
    Sep 24, 2013 at 13:35
  • Can queries even be run at the header level or is that foolish talk? Ideally i would like a way that i could create several versions of this CPT and have the header call the color based on taxonomy, can it even work that way?
    – MARS
    Sep 24, 2013 at 13:36
  • To your first question: Put it in functions.php in your theme, or else put it in a plugin. Don't put it in the wp-includes directory; that's core code, and any changes you make may be overwritten when WordPress updates. (I've never used ACF so I can't speak to that).
    – Pat J
    Sep 24, 2013 at 13:41
  • To your second question: I'm not sure what you mean by 'can queries be run at the header level'. The wp_enqueue_scripts action hook will perform the action when the stylesheets & scripts are being enqueued. Also, you should be able to call the color based on taxonomy: you'll need to use something like wp_get_object_terms() if you're using (a) custom taxonom(y|ies) with your CPTs.
    – Pat J
    Sep 24, 2013 at 13:45
  • By query i meant running a loop in the header, which i just discovered is possible. I must say your knowledge is great on the subject, mine not so much so i'm still working from an angle i can grasp and while i'll try to grasp your solution it'll take me more time. However if you would be so kind as to see my updated code above do you think i could use the wp_get_object_terms() method, give it an argument and in that argument included an array with all the different taxonomies? This is the part that confuses, me i get how to assign taxonomies i don't get how to dynamically call on them?
    – MARS
    Sep 24, 2013 at 14:05

@Pat J thanks for your help.

I figured out the problem based on the solution i was already working with.

I was already using the Advanced Custom Fields plugin alongside the Custom Post Type UI plugin (for those not familiar with writing the code out, which is much better to do btw but this is a nice intro to CPT's and Custom fields, and you would need to use both in tandem; that's just my advice ) so i needed to figure out how to call a custom background image for my div based on the image the user would enter through the custom field on the backend admin.

I took the route of making a variable to make the background url easier to write out:


$bg = get_field( 'bg_img' );


Then started my loop and included the variable as the property value for background color.

NOTE: I found it best to add all the additional background properties through the external style sheet (just cleaner and more consistent imo) and only have the actual property value that i needed within the inline. However if you're going to target just one property do this - ex: "background-image:" vs. "background:" since it's more specific and won't apply the other values you're adding from the external style sheet, again you could add the other background properties inline ex: "background: url() no-repeat center cover;" i just didn't like that option.

Here was the inline reference:

<div class="bg-img-default" style="background-image: url(<?=$bg?>); "></div>

The "bg-img-default" was the class i created to include all the other background properties externally. If someone thinks this is wack and could be done in a better way please share, i've love to learn it.

Oh finally if you're using the ACF plugin you need to set the return value to "image URL" otherwise it won't display your image.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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