Widget inside header on top of logo image

I need to put a customizable area for text inside the header, in a way that it appears on top of an image. However, I do not want the image to be a background image. So I am thinking I need to have a widget area in the header. But then I also need to move it up into the image area, and make it narrower among other css-type things.

I have succeeded in adding a widget area, but of course it is in the "wrong" place. Also, I am thinking the text needs to get smaller just as the banner gets smaller on mobile devices.

So I am stumped on how to accomplish those two goals. Here is my code:

add_action( 'widgets_init', 'header_widgets_init' );

function header_widgets_init() {
    beans_register_widget_area( array(
        'name' => 'Header Blurb',
        'id' => 'headerblurb',
        'description' => 'This widget text appears in the header.',
        'beans_type' => 'stack'
    ) );
}

add_action( 'beans_header_prepend_markup', 'header_blurb_widget_area' );

function header_blurb_widget_area() {
  echo beans_widget_area( 'headerblurb' );    
}

And here is the url:

http://www.wyntest.wholepersoncare.com/

And possibly there is a better approach than the one I took. I look forward to replies. Thanks!

Hey Wyn,

I am not sure I invision 100% what you are after, could you perhaps share a mockup of what you are after and I will gladly help.

Thanks,

Hi Thierry, This is development server for the same website where I got the 500 error on updating Beans. (So I am not updating the Beans theme here on the development server! Although, oddly enough, Wordpress is not asking me to update the Beans theme here. So perhaps it is up to date?)

Anyway, here is url of development site:

http://www.wyntest.wholepersoncare.com/

The top banner is an image. It includes the words "Evidence-based, medical and whole health information on the top 300 most searched conditions." My client wants to be able to change this text. She is starting with only 50 most searched. So I will make a new banner image without the "Evidence..." words, and am looking for a way she can use the Wordperss interface to type whatever text she wants there. So as described above, I made a widget and typed the "Evidence... 50 ..." text, which currently appears below the green line.

Now, I can probably figure out how to move that widget text up, remove the border, and make a narrower width. (I've done that a lot on non-Beans sites. Have not yet tackled that on a Beans site, but it should be pretty much the same thing.)

On the other hand, it might be a better approach to have the header banner consist of two divs (using various position tricks) that are on top of one another, with z-indexing the "Evidence..." text so it appears above the image. As said above, I don't want to make the image as a background image since that does not print on most printers. I believe this approach would require removing the current header and replacing it with the code that creates a specific html structure (namely using the bans_open_markup and beans_close_markup ). Although I would still, I believe, need a widget in there for the Wordpress interface.

And in yet another possiblity, I could split that image into several sections and add them into the header, but that would get kinda messy since the doctor-jacket and pocket of veggies would have to be split into at least two separate images. Also, splitting the image would create an issue with mobile-responsive resizing of images -- which I am struggling with in another straight php website.

And speaking of image-resizing responsive web design. as things stand now, the entire banner resizes for mobile devices, including the "Evidence..." text (since it is part of the image). However, the widget text does not resize. So . . . possibly I should just bite the bullet and redo the image every time my client wants something different.

Hey Wyn,

Personally I think the best approach would be to have the logo set using the logo option in the customizer and the image using the header image option and modify the output so that it isn't set as a background but rather as a cover image. Here is an example snippet:

add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );
/**
 * Enqueue UIkit assets.
 */
function example_enqueue_uikit_assets() {
  beans_uikit_enqueue_components( array( 'cover' ) );
}

add_action( 'beans_header', 'example_custom_header', 5 );
/**
 * Custom header.
 */
function example_custom_header() {
  // Remove all the header fragments since we add our own.
  remove_all_actions( 'beans_header' );

 $header_image = get_header_image();

 ?>
  <div class="uk-cover-background uk-position-relative">
    <?php if ( current_theme_supports( 'custom-header' ) && ! empty( $header_image ) ) : ?>
     <img src="<?php echo esc_url( $header_image ); ?>" alt="<?php esc_html( get_bloginfo( 'description' ) ); ?>">
   <?php endif; ?>
   <div class="uk-position-cover uk-grid-margin uk-margin-left">
     <?php beans_site_branding(); ?>
     <div class="uk-position-cover uk-margin-top">
       <?php echo beans_widget_area( 'headerblurb' ); // WPCS: XSS ok. ?>
      </div>
    </div>
  </div>
  <?php
}

// Remove default header background image, title tag and block styling.
beans_remove_action( 'beans_header_image' );
beans_remove_action( 'beans_site_title_tag' );
beans_remove_attribute( 'beans_header', 'class', 'uk-block' );

The snippets above lets you add the site logo and header image (with not logo and no text) via the customizer and the text via the widget 😉

Happy coding,