Home › Forums › Themes Support › General › How to add new Widget Area and display it in WordPress?
- This topic has 0 replies, 1 voice, and was last updated 4 years, 10 months ago by
admin.
-
AuthorPosts
-
November 28, 2018 at 12:40 am #2409
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:
- 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:
Hope this help you all!
*******
Best regards,HaruTheme
-
AuthorPosts
You must be logged in to reply to this topic.