How to add new Widget Area and display it in WordPress?

[admin]

Hi all our Customer,

In this topic we will have tutorial to help you create new Widget Area and display it in WordPress template!

Step 1: Create new Widget Area.

• Go to wp-content/themes/xxx/framework/includes/ and open file theme-sidebar.php (xxx is name of theme)
• Add new sidebar with this code like this:

register_sidebar(
array(
'name' => esc_html__( 'Footer News','formota' ),
'id' => 'news-sidebar',
'description' => esc_html__( 'Display Footer News widget','formota' ),
'before_widget' => '<section id="%1$s" class="widget-container %2$s">',
'after_widget' => '</section>',
'before_title' => '<div class="widget-title-wrapper"><a class="block-control" href="javascript:void(0)"></a><h3 class="widget-title heading-title">',
'after_title' => '</h3></div>',
)
);

Note: formota is text-domain (similar name of theme)

Step 2: Display Widget in template

In this example we’ll display it on the top of Blog page (Archive Blog). You need use child theme to customize template display follow this topic tutorial:

How to customize WordPress theme using Child theme

• In this case you need customize this file: wp-content/themes/xxx/templates/archive.php
• Add this code at area you want to display sidebar

<!-- Add new sidebar on top -->
<div class="row">
<?php if ( is_active_sidebar( 'news-sidebar' ) ) : ?>
<div class="archive-sidebar top-sidebar col-md-12 col-sm-12 col-xs-12">
<?php dynamic_sidebar( 'news-sidebar' ); ?>
</div>
<?php endif; ?>
</div>

Note: news-sidebar is name of widget area you already created on above

Step 3: Go to Appearance -> Widgets and set widget for this new Widget Area has been created above.

Step 4: Add custom CSS code to make it display fine follow this video tutorial:

Here is resource to help you learn about CSS:

https://www.w3schools.com/

Hope this help you all!

 

*******
Best regards,

HaruTheme

• This topic was modified 4 years, 10 months ago by admin.
• This topic was modified 4 years, 10 months ago by admin.
• This topic was modified 4 years, 10 months ago by admin.
• This topic was modified 4 years, 10 months ago by admin.
• This topic was modified 4 years, 10 months ago by admin.

[Author]

Posts