Skip to main content
Grammar, added more explanation and documentation
Source Link
Remzi Cavdar
  • 1.2k
  • 1
  • 13
  • 19

In Wordpress, widgets are shown in a sidebar. You should register a sidebar first, a footer and/or header widget area areis also registered with a sidebar.

function themename_widgets_init() {
register_sidebar( array(
    'name'          => __( 'Primary Sidebar', 'theme_name' ),
    'id'            => 'sidebar'primary-1'sidebar',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h1 class="widget-title">',
    'after_title'   => '</h1>',
) );

register_sidebar( array(
    'name'          => __( 'Secondary Sidebar', 'theme_name' ),
    'id'            => 'sidebar-2',
    'before_widget' => '<ul><li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li></ul>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
) );

register_sidebar( array(
    'name'          => __( 'Footer', 'theme_name' ),
    'id'            => 'sidebar-1''footer',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h1 class="widget-title">',
    'after_title'   => '</h1>',
) );

}
add_action( 'widgets_init', 'themename_widgets_init' );

See documantation: https://developer.wordpress.org/themes/functionality/sidebars/
To display these sidebars you need to put <?php get_sidebar(); ?> somewhere and create the sidebar.php template file and display the sidebar using the dynamic_sidebar function like so:
<?php dynamic_sidebar( 'primary-sidebar' ); ?>

In Wordpress, widgets are shown in a sidebar. You should register a sidebar first, a footer and/or header widget area are also registered with a sidebar.

function themename_widgets_init() {
register_sidebar( array(
    'name'          => __( 'Primary Sidebar', 'theme_name' ),
    'id'            => 'sidebar-1',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h1 class="widget-title">',
    'after_title'   => '</h1>',
) );

register_sidebar( array(
    'name'          => __( 'Secondary Sidebar', 'theme_name' ),
    'id'            => 'sidebar-2',
    'before_widget' => '<ul><li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li></ul>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
) );

register_sidebar( array(
    'name'          => __( 'Footer', 'theme_name' ),
    'id'            => 'sidebar-1',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h1 class="widget-title">',
    'after_title'   => '</h1>',
) );

}
add_action( 'widgets_init', 'themename_widgets_init' );

In Wordpress, widgets are shown in a sidebar. You should register a sidebar first, a footer and/or header widget area is also registered with a sidebar.

function themename_widgets_init() {
register_sidebar( array(
    'name'          => __( 'Primary Sidebar', 'theme_name' ),
    'id'            => 'primary-sidebar',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h1 class="widget-title">',
    'after_title'   => '</h1>',
) );

register_sidebar( array(
    'name'          => __( 'Footer', 'theme_name' ),
    'id'            => 'footer',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h1 class="widget-title">',
    'after_title'   => '</h1>',
) );

}
add_action( 'widgets_init', 'themename_widgets_init' );

See documantation: https://developer.wordpress.org/themes/functionality/sidebars/
To display these sidebars you need to put <?php get_sidebar(); ?> somewhere and create the sidebar.php template file and display the sidebar using the dynamic_sidebar function like so:
<?php dynamic_sidebar( 'primary-sidebar' ); ?>

Source Link
Remzi Cavdar
  • 1.2k
  • 1
  • 13
  • 19

In Wordpress, widgets are shown in a sidebar. You should register a sidebar first, a footer and/or header widget area are also registered with a sidebar.

I don't know if you're developing a plugin or theme. If you're developing a theme you should do this in functions.php and for the plugin, it doesn't matter where you register a widget.

See documantation: https://codex.wordpress.org/Function_Reference/register_sidebar
First of all, let's register a sidebar:

function themename_widgets_init() {
register_sidebar( array(
    'name'          => __( 'Primary Sidebar', 'theme_name' ),
    'id'            => 'sidebar-1',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h1 class="widget-title">',
    'after_title'   => '</h1>',
) );

register_sidebar( array(
    'name'          => __( 'Secondary Sidebar', 'theme_name' ),
    'id'            => 'sidebar-2',
    'before_widget' => '<ul><li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li></ul>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
) );

register_sidebar( array(
    'name'          => __( 'Footer', 'theme_name' ),
    'id'            => 'sidebar-1',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h1 class="widget-title">',
    'after_title'   => '</h1>',
) );

}
add_action( 'widgets_init', 'themename_widgets_init' );

See documentation: https://codex.wordpress.org/Widgets_API
Then we create our widget:

/**
 * Adds Foo_Widget widget.
 */
class Foo_Widget extends WP_Widget {

/**
 * Register widget with WordPress.
 */
function __construct() {
    parent::__construct(
        'foo_widget', // Base ID
        esc_html__( 'Widget Title', 'text_domain' ), // Name
        array( 'description' => esc_html__( 'A Foo Widget', 'text_domain' ), ) // Args
    );
}

/**
 * Front-end display of widget.
 *
 * @see WP_Widget::widget()
 *
 * @param array $args     Widget arguments.
 * @param array $instance Saved values from database.
 */
public function widget( $args, $instance ) {
    echo $args['before_widget'];
    if ( ! empty( $instance['title'] ) ) {
        echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
    }
    echo esc_html__( 'Hello, World!', 'text_domain' );
    echo $args['after_widget'];
}

/**
 * Back-end widget form.
 *
 * @see WP_Widget::form()
 *
 * @param array $instance Previously saved values from database.
 */
public function form( $instance ) {
    $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'New title', 'text_domain' );
    ?>
    <p>
    <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_attr_e( 'Title:', 'text_domain' ); ?></label> 
    <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
    </p>
    <?php 
}

/**
 * Sanitize widget form values as they are saved.
 *
 * @see WP_Widget::update()
 *
 * @param array $new_instance Values just sent to be saved.
 * @param array $old_instance Previously saved values from database.
 *
 * @return array Updated safe values to be saved.
 */
public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';

    return $instance;
}

} // class Foo_Widget

And finally you need to register this widget:

// register Foo_Widget widget
function register_foo_widget() {
   register_widget( 'Foo_Widget' );
}
add_action( 'widgets_init', 'register_foo_widget' );