How to change the background color of my header dynamically based on a Custom Posts types color value?

Question

Because my neighborhoods were the only pages that required custom header colors i decided to just include its custom header within the single-neighborhood.php page so that the top header container, that was wrapping the navigation, logo, etc., would reflect the custom color chosen from the custom fields in the admin. It was the only way for the header calling the custom field to acknowledge which post was being called within the loop and render the accurate color for the background.

Here was my code to accomplish that. Note that i didn’t call this page a template since it’s working off of the neighborhood custom post type.

<!DOCTYPE html>

  <html>

    <head>

      <title>

        <?php

          wp_title( '_', true, 'right' );

          bloginfo( 'name' );

        ?>

      </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, nofollow" />
      <?php wp_head(); ?>
    </head>

    <body>

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

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

        <header class="col-hdr-internal">

          <a class="logo" href="https://wordpress.stackexchange.com/questions/115810/<?php ("home' ) ?>" alt="Return Home" title="Return Home"></a>

          <nav role="navigation">

            <?php

              $args = array(
                'menu' => 'main-menu'
                );

              wp_nav_menu( $args );

            ?>

          </nav>

          <h1><?php wp_title($echo); ?></h1>

          <nav role="navigation">

            <?php

              $args = array(
                'menu' => 'neighborhood-menu'
                );

              wp_nav_menu( $args );

            ?>

        <?php endwhile; else: ?>

        <?php endif; ?>

        <?php wp_reset_query(); ?>

          </nav>

  </header>

</div>
<!--/container-hdr-home-->

<!--END HEADER-->

    <?php

    $bg = get_field( 'bg_img' );

    ?>

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

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

    <div class="container-main">

      <!--COL 1-->

      <div class="col-block">

        <h2><span class="bold">latest</span> <span class="font-condensed">news</span></h2>

        <?php the_field( 'latest_news' ); ?>

      </div>

      <!--COL 2-->

      <div class="col-block">

        <h2><span class="bold">local</span> <span class="font-condensed">events</span></h2>

        <a><?php the_field( 'local_events' ); ?></a>

      </div>

      <!--COL 3-->

      <div class="col-block-last">

        <h2><span class="bold">listings</span></h2>

        <?php the_field( 'listings' ); ?>

        <a href="http://wordpress.stackexchange.com/search-listings/">Search Listings</a>

      </div>

  <?php endwhile; endif; ?>

  <?php get_template_part( 'content', 'slider' ); ?>

    </div>

<?php get_footer(); ?>

Related Posts: