Support » Theme: Twenty Twenty-One » Extra block above logo

  • Resolved ariextreme

    (@ariextreme)


    Hi everyone,

    I hope someone is able to provide some tips since I need to make a row above the logo in twentytwenty one. In this I would like to add the link to the login screen and language flags. This must be visible on all screens (desktop, tablet and mobile).

    I believe I need to put code in the ‘site-branding.php’ file but failing to get it work. Any this would be much appreciated.

    Thanks,

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 23 total)
  • Hello,

    We’ve been asked before to inject a Widget Area in the header as an option in the Options for Twenty Twenty-One plugin.

    Perhaps there is call for it?

    We wouldn’t edit the site-branding.php (child theme or otherwise), instead we would inject the widget area using a hook then move it to the right location (in your case at the top of the header) using JavaScript.

    Then you would be able to add an HTML or Menu Navigation widget to the desired location.

    If you’d like us to add this as an option to the plugin, let me know.

    Oliver

    Thread Starter ariextreme

    (@ariextreme)

    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

    Thread Starter ariextreme

    (@ariextreme)

    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

    Thread Starter ariextreme

    (@ariextreme)

    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 1 month, 1 week 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
    }
    ?>
    Thread Starter ariextreme

    (@ariextreme)

    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

    Thread Starter ariextreme

    (@ariextreme)

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

    Thread Starter ariextreme

    (@ariextreme)

    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,

    Oliver Campion

    (@domainsupport)

    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

    Thread Starter ariextreme

    (@ariextreme)

    That would be much appreciated Oliver. Thank you,

    Oliver Campion

    (@domainsupport)

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

    Thread Starter ariextreme

    (@ariextreme)

    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.

Viewing 15 replies - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.