Adding a widget to a string of HTML

Following my my previous question, I was able to make my skin override the function I wanted to modify from the parent.

what the function does is basically build the header images for the website and I’m trying to add a widget area just bellow the header image section.

Something like this:

<div id="header-text-nav-container" class="clearfix">
    //...
    <div id="wp-custom-header" class="wp-custom-header">
        <div class="header-image-wrap"> header image is displayed here </div>
        <div id="header-image-widget-area"> my widget should be displayed here</div>
    </div>
</div>

so, I created the widget (which works fine if I plug it to any available hook on the page) and then I modified the function to add the section to display my widget. Here is the code for reference:

/**************************/
/*  Register My Widget
/**************************/
add_action( 'widgets_init', 'my_register_widget' );
function my_register_widget() {
    register_sidebar(
        array(
            'id' => 'header_image_widget',
            'name' => __( '(my) Widget over Header Image' ),
            'description' => __( 'My widget to be displayed over the header image.' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>'
        )
    );
    /* Repeat register_sidebar() code for additional widgets. */
}

/**********************************************/
/* Header image function replacement
/**********************************************/
// this makes wp run my function after the parent one, because my priority is 20 and the parent priority is defined to 10
add_filter( 'get_header_image_tag', 'my_colormag_header_image_markup', 20, 3 );

// Filter the get_header_image_tag() for option of adding the link back to home page option
function my_colormag_header_image_markup( $html, $header, $attr ) {
    $output="";
    $header_image = get_header_image();

    if( ! empty( $header_image ) ) {           
        $output .= '<div class="header-image-wrap"> <img src="https://wordpress.stackexchange.com/questions/258659/..."> </div>';

        /* adding my widget to the header image */
        if ( is_active_sidebar( 'header_image_widget' ) ) { 
            //-- my widget area starts here --
            $output .= '<div id="header-image-widget-area">' . dynamic_sidebar( 'header_image_widget' ) . '</div>';
            //-- my widget area ends here --
        }
    }

    return $output;
}

So, as you can see, what I did (and am trying to do) is to add the widget in a section just after the header image div. So I appended the code of my section to the $output and also added the dynamic_sidebar( 'header_image_widget' ) to the string so that the widget could be rendered inside thatdiv (… I thought…).

Once I tested, I realized it doesn’t work (at least as I expected). the div section got a 1 inside (correspondts to TRUE which ist he optput of the dynamic_sidebar because the widget was executed correctly) and the widget,instead of being added inside the section I defined, was actually added before the header sectionand and outside the section where the header image and the sectionI defined are. I got something like this:

<div id="header-text-nav-container" class="clearfix">
    //...
    <div id="widget-name-9"> this is the widget code defined by my widget </div>
    <div id="wp-custom-header" class="wp-custom-header">
        <div class="header-image-wrap"> header image is displayed here </div>
        <div id="header-image-widget-area"> 1 </div>
    </div>
</div>

So, my question to anyone how may know what isthe problem is
– how do I add the widget to the $output string in order to make it display inside the header-image-widget-area section (instead of 1/true)?

Thank you very much in advance for any help you can provide

• Miguel

If you want to add the widget area as part of the output var you need to use the ob functions because it is echoed and not returned.

Like this:

$output .= '<div id="header-image-widget-area">';
    ob_start();
        dynamic_sidebar( 'header_image_widget' );
    $output .= ob_get_clean();
$output .='</div>';