Extra block above logo

Hi Olvier,

I believe there is a call for this and at least I want to get this working. However, for me there would be one condition as I would not allow it to harm the site speed.

Any thoughts or pragmatic easy solution or code?

Best,

Everything you add to a theme affects site speed. Just using a child theme before you’ve done anything affects site speed! The question is how much this would affect site speed … and there’s only one way to find that out ??

I’ll let you know when I’ve got something for you to test. Are you running a child theme?

Oliver

Hi Oliver,

I understand completely that everything affects site speed and have been working so hard to get the site speed as best as possible. That is also the main reason why I do not use a child theme. Some help would be much appreciated.

Thanks,

Sorry for the delay.

First you need to create a new sidebar for the header so you’ll need to add this to functions.php (if you don’t want to use a plugin) …

function header_widgets_init() {
        register_sidebar(array(
                'name'          => esc_html('Header'),
                'id'            => 'sidebar-3',
                'description'   => esc_html('Add widgets here to appear above your header.'),
                'before_title'  => '<h2 class="widget-title">',
                'after_title'   => '</h2>',
                'before_widget' => '<section id="%1$s" class="widget %2$s">',
                'after_widget'  => '</section>'
        ));
}
add_action('widgets_init', 'header_widgets_init');

Then (if you really don’t want to use a plugin or a child theme which we really don’t recommend) in /template-parts/header/site-header.php you will need to add this on line 17 after the <header> element …

if (is_active_sidebar('sidebar-3')) {
?>
<aside id="header-sidebar" class="widget-area">
<?php dynamic_sidebar('sidebar-3'); ?>
</aside>
<?php
}

That will allow you to add widgets at the top of your header. Obviously you’ll need to style the widgets to look the way you want them to … will you need help with that?

If you would prefer it to be a menu then you can create another menu location instead. Let me know if you’d prefer that and I’ll give you the code although a widget area is more flexible and you can use a Navigation Menu widget to show a menu anyway.

Hope that helps?

Oliver

Hi Oliver,

Many thanks for your effort so far. I updated both files with the code. However it does not work yet. It gives an error that breaks the site.

See below the total site-header.php file. I have been playing around with the php opening and closing codes because that looked a bit strange to me. However that did not result in a solution. I hope you would be albe to give some more feedback.

<?php
/**
* Displays the site header.
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since Twenty Twenty-One 1.0
*/

$wrapper_classes = ‘site-header’;
$wrapper_classes .= has_custom_logo() ? ‘ has-logo’ : ”;
$wrapper_classes .= true === get_theme_mod( ‘display_title_and_tagline’, true ) ? ‘ has-title-and-tagline’ : ”;
$wrapper_classes .= has_nav_menu( ‘primary’ ) ? ‘ has-menu’ : ”;
?>

<header id=”masthead” class=”<?php echo esc_attr( $wrapper_classes ); ?>” role=”banner”>

if (is_active_sidebar(‘sidebar-3’)) {
?>
<aside id=”header-sidebar” class=”widget-area”>
<?php dynamic_sidebar(‘sidebar-3’); ?>
</aside>
<?php
}

<?php get_template_part( ‘template-parts/header/site-branding’ ); ?>
<?php get_template_part( ‘template-parts/header/site-nav’ ); ?>

</header><!– #masthead –>

• This reply was modified 3 years, 8 months ago by ariextreme.

Sorry, that should be wrapped in <?php ?> like this …

<?php
if (is_active_sidebar('sidebar-3')) {
?>
<aside id="header-sidebar" class="widget-area">
<?php dynamic_sidebar('sidebar-3'); ?>
</aside>
<?php
}
?>

Hi Oliver,

I have already thanked you a few times but again thank you very much!! It works. Surely, I need to style the elements before I will put it live but just checked and it works.

Thanks again

Brilliant. We’ll get that added to the Options for Twenty Twenty-One plugin.

Would you be kind enough to share the CSS you use to style the widget(s) as that may help others having the same issue.

Thanks,

Oliver

Super. Of course I want to share the CSS I will use. That will happen somewhere next days or coming weekend.

Hi Oliver,

I am sorry. I tried but I can’t get the CSS style right to enable these translation flags and a wordpress login button or text proper into this widget. Especially when I start to look at a mobile screen it is not okay.

Kind regards,

No problem, if you can explain exactly how you want the flags to be displayed (on mobile and on larger screens), I’ll get some CSS for you.

Oliver

That would be much appreciated Oliver. Thank you,

Can you please explain exactly how you want the flags to be displayed (on mobile and on larger screens)?

Hi Oliver,

I would like to have these in a horizontal row at the top of the screen at the right corner. At mobile screens it will then above the menu. At wider screens at the top right corner so above the menu as well.

Was just going to do this for you but it looks like you are now injecting the flags at the bottom of the page and using inline CSS to push them to the top right.

Oliver