Create a new sidebar in WordPress

in Code Write a comment

In this tutorial, I’ll show how to register a new dynamic sidebar in WordPress.

What is WordPress sidebar

The sidebar is a vertical column displaying some sort of information other than the main content of the page.

How to register a sidebar

You can register one or more sidebars by using the register_sidebar() and register_sidebars() functions accordingly.

register_sidebar( $args );

Below is an example that shows how to register a “Main sidebar”.

add_action( 'after_setup_theme', 'sidebars_init' );

function sidebars_init() {
  register_sidebar( array(
    'name'          => __( 'Main sidebar', 'understrap' ),
    'id'            => 'main-sidebar',
    'description'   => 'Main sidebar widget',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
  ));
}

Display sidebar in WordPress templates

Once registered, WordPress sidebar can be displayed in the templates. You can place the code below to display the “Main sidebar”.


Hi, I'm Renat 👋

 


<?php if (is_active_sidebar( 'main-sidebar') ) : ?>
  <?php dynamic_sidebar( 'main-sidebar' ); ?>
<?php endif; ?>

You can now add your content to the “Main sidebar” via admin panel and it will be displayed in the templates.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/wordpress-create-sidebar

PS: make sure you check other WordPress tutorials, e.g. how to remove emoji CSS from WordPressload Google Fonts via functions.php in WordPress and download my plugin that improves your WordPress SEO & Performance.

A collection of UI components for
Bootstrap 4/5 and Vue.js

Get now

Write a Comment

Comment