How to create wordpress widgets easily

Widgets are the very useful feature provided in wordpress CMS . We can use widgets to add additional features in sidebar, footer and the bottom of the contents or can add anywhere in the website. Find the below mention codes tat mention how to create widgets in wordpress . We have added widget section for sidebar and footer area’s.

Add the below mention code in your theme’s functions.php file to show widget in your widget menu.

php

  1. function create_widget_init() {
  2.  
  3.     register_sidebar( array(
  4.         'name'          => esc_html__( 'Sidebar', 'theme' ),
  5.         'id'            => 'sidebar-1',
  6.         'description'   => esc_html__( 'Add widgets here.', 'revenue' ),
  7.         'before_widget' => '<div id="%1$s" class="widget %2$s">',
  8.         'after_widget'  => '</div>',
  9.         'before_title'  => '<h2 class="widget-title">',
  10.         'after_title'   => '</h2>',
  11.     ) );
  12.  
  13.     register_sidebar( array(
  14.         'name'          => esc_html__( 'Footer Column 1', 'theme' ),
  15.         'id'            => 'footer-1',
  16.         'description'   => esc_html__( 'Add widgets here.', 'theme' ),
  17.         'before_widget' => '<div id="%1$s" class="widget footer-widget %2$s">',
  18.         'after_widget'  => '</div>',
  19.         'before_title'  => '<h3 class="widget-title">',
  20.         'after_title'   => '</h3>',
  21.     ) );
  22.     register_sidebar( array(
  23.         'name'          => esc_html__( 'Footer Column 2', 'theme' ),
  24.         'id'            => 'footer-2',
  25.         'description'   => esc_html__( 'Add widgets here.', 'theme' ),
  26.         'before_widget' => '<div id="%1$s" class="widget footer-widget %2$s">',
  27.         'after_widget'  => '</div>',
  28.         'before_title'  => '<h3 class="widget-title">',
  29.         'after_title'   => '</h3>',
  30.     ) );
  31.     register_sidebar( array(
  32.         'name'          => esc_html__( 'Footer Column 3', 'theme' ),
  33.         'id'            => 'footer-3',
  34.         'description'   => esc_html__( 'Add widgets here.', 'theme' ),
  35.         'before_widget' => '<div id="%1$s" class="widget footer-widget %2$s">',
  36.         'after_widget'  => '</div>',
  37.         'before_title'  => '<h3 class="widget-title">',
  38.         'after_title'   => '</h3>',
  39.     ) );
  40.     register_sidebar( array(
  41.         'name'          => esc_html__( 'Footer Column 4', 'theme' ),
  42.         'id'            => 'footer-4',
  43.         'description'   => esc_html__( 'Add widgets here.', 'theme' ),
  44.         'before_widget' => '<div id="%1$s" class="widget footer-widget %2$s">',
  45.         'after_widget'  => '</div>',
  46.         'before_title'  => '<h3 class="widget-title">',
  47.         'after_title'   => '</h3>',
  48.     ) );
  49.  
  50. }
  51. add_action( 'widgets_init', 'create_widget_init' );

Add the following codes mention below where you want to display your widget.

EX : Add this code to display widget to website’s Sidebar area.

code

  1. <?php if ( is_active_sidebar( 'sidebar-1' )  ) : ?>
  2.     <aside id="secondary" class="sidebar widget-area" role="complementary">
  3.         <?php dynamic_sidebar( 'sidebar-1' ); ?>
  4.     </aside><!-- .sidebar .widget-area -->
  5. <?php endif; ?>

 

Sidebar widget
Sidebar widget area

EX : Add this code to display widget to website’s footer area.

code

  1. <?php if ( is_active_sidebar( 'footer-1' )  ) : ?>
  2.     <aside id="secondary" class="sidebar widget-area" role="complementary">
  3.         <?php dynamic_sidebar( 'sidebar-1' ); ?>
  4.     </aside><!-- .sidebar .widget-area -->
  5. <?php endif; ?>
  6.  
  7. <?php if ( is_active_sidebar( 'footer-2' )  ) : ?>
  8.     <aside id="secondary" class="sidebar widget-area" role="complementary">
  9.         <?php dynamic_sidebar( 'sidebar-1' ); ?>
  10.     </aside><!-- .sidebar .widget-area -->
  11. <?php endif; ?>
  12.  
  13. <?php if ( is_active_sidebar( 'footer-3' )  ) : ?>
  14.     <aside id="secondary" class="sidebar widget-area" role="complementary">
  15.         <?php dynamic_sidebar( 'sidebar-1' ); ?>
  16.     </aside><!-- .sidebar .widget-area -->
  17. <?php endif; ?>
  18.  
  19. <?php if ( is_active_sidebar( 'footer-4' )  ) : ?>
  20.     <aside id="secondary" class="sidebar widget-area" role="complementary">
  21.         <?php dynamic_sidebar( 'sidebar-1' ); ?>
  22.     </aside><!-- .sidebar .widget-area -->
  23. <?php endif; ?>

 

footer widget area
footer widget area

Leave a Reply

Your email address will not be published. Required fields are marked *