How to insert HTML between Title Area and Header Widget Area in Genesis

If you are looking to inject custom HTML markup, say a div in between .title-area and .header-widget-area in Genesis it can be done using the genesis_markup_<context-name>_<open/close> dynamic filter hook.

In a function hooked to genesis_markup_title-area_close filter, we can check for a closing tag of .title-area, append our custom HTML markup to it and return the modified closing HTML to add custom HTML code after or below the title area.

Add the following in child theme’s functions.php:

add_filter( 'genesis_markup_title-area_close', 'insert_html_after_title_area_markup', 10, 2 );
/**
 * Appends HTML to the closing markup for .title-area.
 *
 * @param string $close_html HTML tag being processed by the API.
 * @param array  $args       Array with markup arguments.
 *
 * @return string
 */
function insert_html_after_title_area_markup( $close_html, $args ) {
    if ( $close_html ) {
        $additional_html = '<div>New HTML</div>';

        $close_html = $close_html . $additional_html;
    }

    return $close_html;
}

Thanks to Tim Jensen.

Tim adds:

Also, if you want to do anything more complex inside that filter ( like create a do_action hook ), you’ll need to use output buffering, similar to what I did here: https://www.timjensen.us/add-hooks-before-genesis-structural-wraps/.

An example of this will be covered in my next tutorial.