Support » Developing with WordPress » Custom Widget Area in the header

  • Resolved bbbelleville

    (@bbbelleville)


    Hello!
    I’m new with php and I need some help. I’ve created a new widget in the header of my pure-simple child theme. To do this I’ve inserted in the header this:

    <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(“My Widget”) ) : ?>
    <?php endif;?>

    And in the function:

    if ( function_exists(‘register_sidebar’) )
    register_sidebar(array(
    ‘name’ => ‘My Widget’,
    ‘before_widget’ => ‘<div class = “My Widget”>’,
    ‘after_widget’ => ‘</div>’,
    ‘before_title’ => ‘<h3>’,
    ‘after_title’ => ‘</h3>’,
    )
    );
    ?>
    The new widget is created and I can find it in the back-end of my website.
    In this widget I have put my polylang’s flags, but it has created an empty section in the header (I would like to have it at the right side with vertical alignment), in this empty section all flags work correctly, but if I try to move it through CSS only italian language is available, the other flags collapse their link… What can I do? Please and Thanks!
    Paola

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • I think the problem is within:

    
    <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(“My Widget”) ) : ?>
    <?php endif;?>
    

    See this for tips on how this is best done:

    https://codex.wordpress.org/Function_Reference/dynamic_sidebar

    Try this:

    in your header replace your code by this:

    <?php if ( is_active_sidebar( 'sidebar-my-widget' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar-my-widget' ); ?>
    <?php endif; ?>
    
    and in your function replace your code by this:
    
    add_action( 'widgets_init', 'theme_slug_widgets_init' );
    function theme_slug_widgets_init() {
        register_sidebar( array(
            'name' => __( 'My Widget', 'theme-slug' ),
            'id' => 'sidebar-my-widget',
            'before_widget' => '<div class = "My Widget">',
    	'after_widget'  => '</div>',
    	'before_title'  => '<h3>',
    	'after_title'   => '</h3>',
        ) );
    }

    good luck!

    • This reply was modified 4 years, 7 months ago by bcworkz. Reason: code fixed, otherwise syntax errors occur
    Thread Starter bbbelleville

    (@bbbelleville)

    Thank you Pioneer and Squiddot for your precious help and quick reply.
    Squiddot, I’ve tryed to put your code into my php files, and for the header it’s ok but for function it says:

    syntax error, unexpected ‘Widget’’ (T_STRING)

    so I’ve tried to write “Mine” instead of “My Widget”, but it still say:

    syntax error, unexpected ‘class’ (T_CLASS), expecting ‘)’

    Now I’m trying to understand something with the page that Pioneer has kindly linked, but not sure of the result!:)
    Thanks again!

    Moderator bcworkz

    (@bcworkz)

    The syntax errors might be due to the occurrence of ‘curly quotes’ in code. They all must be 'straight quotes' I’ve edited squiddot’s post so the code appears correctly. Please try re-copying it.

    When anyone posts code in these forums, they should use backticks to demarcate code, or use the “code” button. Otherwise their code is unusable.

    Thread Starter bbbelleville

    (@bbbelleville)

    Thanks bcworkz,
    the widget works! The problem is that it opens on an empty area of the header and if I try to move it inside the header and in particular over the background image on the right side, only italian language survives, but I have other 3 flags..maybe there’s a CSS rule that I don’t mind…this is the rule I have written:
    .My {
    float: right;
    margin-bottom: -5em;
    margin-left: -8em;
    }
    It seems that widget area is restricted to one flag…

    Moderator bcworkz

    (@bcworkz)

    The overall container’s width is restricted to 1180px. There’s no room for the French flag, so it wraps to the next menu line, making the entire menu bar grow taller.

    You could bump the width up a bit to make room, or adjust the menu item widths and spacing so there’s a bit more room within the 1180px. If you bump up the width, there’s a related media query that drops the width down on narrower windows. The break point where this occurs needs to also be bumped up the same amount to prevent other content from overflowing the window.

    Simply reducing the padding of the container might be enough. Try adding this to the Additional CSS panel of the customizer:

    .container, .container-fluid {
    	padding-left: 10px;
    	padding-right: 10px;
    }

    The original padding was 20px. There are many alternatives for gaining more space — item padding, font size, letter tracking, font weight, re-labeling items, etc.

    Thread Starter bbbelleville

    (@bbbelleville)

    Hello bcworkz,
    thanks for your help. I’ve added your code to the Additional panel, but the situation is the same. I can see that it moves right and left according to the measures I give, so I tried to give it also “padding-bottom” to see if it takes some room, and it takes in the empty area, but if I move it down rightside on the header’s background all flags’links collapse. So, I’ve tried to solve the problem cancelling the new custom widget I created and I’ve added these lines in the function:

    function polylanguage_shortcode() {
    ob_start();
    pll_the_languages(array(‘show_flags’=>1,’show_names’=>0));
    $flags = ob_get_clean();
    return $flags;
    }
    add_shortcode( ‘polylanguage’, ‘polylanguage_shortcode’ );

    And this in the header before the tag </head>:
    <?php echo polylanguage_shortcode(); ?>

    And to move it through CSS, and this time it cuts the header…I don’t know what else I can do…maybe I have to give up for some time and learn more about php!:)
    Thank you so much.
    Paola

    Moderator bcworkz

    (@bcworkz)

    Learning more about PHP is always a good idea IMO, but I don’t think it will help you in this case. It seems to be a CSS issue. It’s difficult to give specific advice on CSS sometimes because of browser and script variations due to responsiveness. It sounds like you have been blindly trying CSS variations without really understanding what you are trying to accomplish. This leads me to believe you are not making use of your browser’s Inspector tool.

    It will show you what regions are taken up by each element of the page, including what parts are padding or margins. You can try different values right in the tool and immediately see the results. You can disable or add new rules. Everything you need to know to find a solution. It will take some doing to really learn how to use the tool, but it’s possibly even more useful than learning PHP. All major modern browsers have this tool in some form. Look for developer tools in your browser’s menu.

    Thread Starter bbbelleville

    (@bbbelleville)

    Hello! I’ve finally done! bcworkz, you were right, developer tools has been really helpful! I wasn’t using it too much because I have a local installation of my website, but developer tool is faster and shows immediately your changes.
    Many many thanks to all of you!
    Paola

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Custom Widget Area in the header’ is closed to new replies.