Adding a widget to a string of HTML

by

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

1 Answer
1

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>';

Leave a Comment