Adding a Sidebar to WordPress - Tutorial 18
To start, I'll say, that the sidebar determines where widgets will be displayed and in order for you to have the ability to display widgets in your template, you will need to enable sidebar support.
To enable, go to the functions.php file and add the code there.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Регистрируем сайдбар function start_sidebar() { $args = array( 'id' => 'sidebar-left', 'name' => __( 'Сайдбар', 'striped' ), 'description' => __( 'Левая колонка', 'striped' ), 'class' => 'striped-widget', 'before_title' => '<header><h2 class="widgettitle">', 'after_title' => '</h2></header>', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', ); register_sidebar( $args ); } // Хук для функции 'widgets_init' add_action( 'widgets_init', 'start_sidebar' ); |
Let's take a look at all the attributes, entered into the $args variable:
- id – unique sidebar id, when creating other sidebars this id must not be repeated;
- name – sidebar title;
- description – sidebar purpose description;
- class – a class that can be added to style the sidebar;
- before_title – text or tags that should be inserted before the title;
- after_widget – text or tags to be inserted after the title;
- before_widget – text or tags before the widget;
- after_widget – text or tags after the widget.
before_widget and after_widget – used to create a widget wrapper.
After adding the code, the Widgets item will appear in the admin panel (Widgets).
Let's look at the sidebar itself and analyze it point by point, what is on it:
- ‘name‘ => __( 'Sidebar', ‘striped’ ) – sidebar title;
- ‘description‘ => __( ‘Left column’, ‘striped’ ) – sidebar description;
Drag to our sidebar widget:
Until our sidebar displays an active widget, you can only work with it in the admin panel. For the widget to be displayed, you need to add a special code in the template sidebar-left.php.
Add code at the top of the sidebar-left.php template.
|
1 2 3 4 5 6 7 |
<section> <?php if ( is_active_sidebar( 'sidebar-left' ) ) : ?> <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-left' ); ?> </div><!-- #primary-sidebar --> <?php endif; ?> </section> |
After adding the code, a widget should appear on your site.
If we now remove the categories widget and leave the sidebar empty, then in place of the previously displayed widget, nothing will be displayed except for the sidebar wrapper.
This point can be fixed., slightly modifying the widget output code.
In the functions.php file, change the code to this one:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Регистрируем сайдбар function start_sidebar() { $args = array( 'id' => 'sidebar-left', 'name' => __( 'Сайдбар', 'striped' ), 'description' => __( 'Левая колонка', 'striped' ), 'class' => 'striped-widget', 'before_title' => '<header><h2 class="widgettitle">', 'after_title' => '</h2></header>', 'before_widget' => '<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"><div id="%1$s" class="widget %2$s">', 'after_widget' => '</div></div><!-- #sidebar-left -->', ); register_sidebar( $args ); } // Хук для функции 'widgets_init' add_action( 'widgets_init', 'start_sidebar' ); |
In the sidebar-left.php file, change the code to this:
|
1 2 3 4 5 |
<section> <?php if ( !dynamic_sidebar( 'sidebar-left' ) ) { ?> <div>Нет виджетов</div> <?php } ?> </section> |
Now consider, how to completely hide the sidebar and display only if it has widgets.
In the functions.php file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Регистрируем сайдбар function start_sidebar() { $args = array( 'id' => 'sidebar-left', 'name' => __( 'Сайдбар', 'striped' ), 'description' => __( 'Левая колонка', 'striped' ), 'class' => 'striped-widget', 'before_title' => '<header><h2 class="widgettitle">', 'after_title' => '</h2></header>', 'before_widget' => '<div id="%1$s" class="widget %2$s"><section><div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">', 'after_widget' => '</div></section><br /></div><!-- #sidebar-left -->', ); register_sidebar( $args ); } // Хук для функции 'widgets_init' add_action( 'widgets_init', 'start_sidebar' ); |
In the sidebar-left.php file
|
1 |
<?php dynamic_sidebar( 'sidebar-left' ) ?> |
All for today, further you independent work. You need to display the sidebar on the right, if it doesn't work, you can download my source files and peek, how did i do it.
- Basic web design course;
- Site layout;
- General course on CMS WordPress and continuation of the course on template development;
- Website development in PHP.
Very nice post, I surely love this site, keep it up.
Thank you, I will try to do everything in my power.