How to customize a divs background dynamically using Advanced Custom Fields Plugin?

1 Views

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.

Read More

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.

Thanks.

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; ?>
Post Views: 1

Related posts

2 comments

  1. 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 ); 
}

    Reference

    Codex pages for:

  2. @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:

    <?php

$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.

Comments are closed.