Wordpress automatically adds and between widgets areas, how to avoid it?

So I have had to edit some code of the template I am using because I need two widget areas in the header, I have managed to achieve it, but the problem comes when WordPress adds <div> and <p> between them and I do not want that because I need them in the same line, not in two lines.

This is what I have done so far:

Inside the file functions.php I have added a new sidebar in the function envo_ecommerce_widgets_init() just after the default sidebar for the header:

function envo_ecommerce_widgets_init() {
    register_sidebar(
        array(
            'name' => esc_html__('Sidebar', 'envo-ecommerce'),
            'id' => 'envo-ecommerce-right-sidebar',
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<div class="widget-title"><h3>',
            'after_title' => '</h3></div>',
        )
    );
    register_sidebar(
        array(
            'name' => esc_html__('Top Bar Section', 'envo-ecommerce'),
            'id' => 'envo-ecommerce-top-bar-area',
            'before_widget' => '<div id="%1$s" class="widget %2$s col-sm-4">',
            'after_widget' => '</div>',
            'before_title' => '<div class="widget-title"><h3>',
            'after_title' => '</h3></div>',
        )
    );
    register_sidebar( //this is the default sidebar for the header
        array(
            'name' => esc_html__('Header Section', 'envo-ecommerce'),
            'id' => 'envo-ecommerce-header-area',
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<div class="widget-title"><h3>',
            'after_title' => '</h3></div>',
        )
    );
    register_sidebar( //this is the sidebar I have added
        array(
            'name' => esc_html__('Centro cabecera', 'envo-ecommerce'),
            'id' => 'envo-ecommerce-center-header-area',
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<div class="widget-title"><h3>',
            'after_title' => '</h3></div>',
        )
    );
    register_sidebar(
        array(
            'name' => esc_html__('Footer Section', 'envo-ecommerce'),
            'id' => 'envo-ecommerce-footer-area',
            'before_widget' => '<div id="%1$s" class="widget %2$s col-md-3">',
            'after_widget' => '</div>',
            'before_title' => '<div class="widget-title"><h3>',
            'after_title' => '</h3></div>',
        )
    );
}

Then I have added that new sidebar in the file template-part-topnav.php which contains the whole structure for the header.

<?php if ( is_active_sidebar( 'envo-ecommerce-header-area' ) ) { ?>
  <div class="site-heading-sidebar" >
    <?php dynamic_sidebar( 'envo-ecommerce-center-header-area' ); ?> //this is the new sidebar I have just created
    <?php dynamic_sidebar( 'envo-ecommerce-header-area' ); ?> //this is the default sidebar
  </div>
<?php } ?>

The new widget area has been created sucessfully:

But when I add something to both widget areas, this is the result:

bbb is inside the new widget area and aaa is inside the default widget area.

If I inspect the website, this is the result:

As you can see, there are <div> and <p> between both widget areas and that prevents from placing both widget areas in the same line.

Is there a way to avoid this?

This is the template I am using in case you need it. Thank you in advance!

Note: When I say “default widget area” I mean, it is the widget area that came with the template by default.

Edit: The answer of @Manish Negi has fixed the issue but it only works when I add text. However, I want to place a slider and a login form in them and it is adding another space between them again…

I am using two plugins for that, MetaSlider and WordPress Login Form

I add the metaslider shortcode in the first widget area:

I add the WP login form in the second widget area:

And this is the result:

As you can see, it is adding again a space between the slider and the login form and I want them in the same line.

Answer

The WordPress text widget automatically converts text into paragraphs. Some CSS can help to get your result.

Replace your code into template-part-topnav.php file

<?php if ( is_active_sidebar( 'envo-ecommerce-header-area' ) ) { ?>
<div class="site-heading-sidebar">
    <div class="header-widget-1">
        <?php dynamic_sidebar( 'envo-ecommerce-center-header-area' ); ?> //this is the new sidebar I have just created
    </div>
    <div class="header-widget-2">
        <?php dynamic_sidebar( 'envo-ecommerce-header-area' ); ?> //this is the default sidebar
    </div>
</div>
<?php } ?>

And add little CSS styling for this section

<style>
.header-widget-1, .header-widget-2{float:left;}
.site-heading-sidebar{clear:both;}
</style>

That’s it.

WordPress automatically adds and between widgets areas, how to avoid it?

Advertisement

Answer