Vonwelzen
Vonwelzen

Reputation: 57

Adding widget area to top header

I am trying to add a widget area in my current storefront theme. I used the code below but it puts the widget below my current top-header which is called secondary navigation. I used these hooks to make the code.

When applied it makes a widget area below the secondary navigation but i need it to be inside the secondary navigation. Any help would be greatly appreciated.

// Adding the widget area.
if (function_exists('register_sidebar')) {
    register_sidebar(array(
    'name' => 'Extra Header Widget Area',
    'id' => 'extra-widget-area',
    'description' => 'Extra widget area after the header',
    'before_widget' => '<div class="widget my-extra-widget">',
    'after_widget' => '</div>',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
    ));
}


// placing the widget
add_action ('storefront_header', 'add_my_widget_area', 10);
function add_my_widget_area() {
  if (function_exists('dynamic_sidebar')) {
    dynamic_sidebar('Extra Header Widget Area');
  }
}

Upvotes: 1

Views: 1972

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253784

You will need to change priority between 51 and 59 like this for example:

add_action ('storefront_header', 'add_my_widget_area', 55);

Because in storefront_header hook, these are the current priorities:

for 'storefront_header' hook:
@hooked ‘storefront_skip_links’, 0
@hooked ‘storefront_social_icons’, 10
@hooked ‘storefront_site_branding’, 20
@hooked ‘storefront_secondary_navigation’, 30
@hooked ‘storefront_product_search’, 40
@hooked ‘storefront_primary_navigation’, 50
@hooked ‘storefront_header_cart’, 60

Then you will need to refine display with custom css rules enforcing with !important in some rules.

Upvotes: 1

Related Questions