Đến bài thứ 8 xem như bạn đã xây dựng nên bộ khung gần như hoàn chỉnh. Hôm nay mình sẽ hướng dẫn bạn thêm widget sidebar và footer trong WordPress để hoàn thiện hơn bộ Theme.

Sidebar nếu chưa thêm function cho nó thì khi bạn vào Widget sẽ không có. Vì thế công việc cần làm đó là dùng đoạn code dưới đây cho vào functions.php

add_action( 'widgets_init', 'mytheme_sidebars' );
function mytheme_sidebars() {
$args = array(
'name' => 'Main Sidebar %d',
'id' => 'main-sidebar',
'description' => 'Main sidebar for mytheme',
'class' => '',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>'
);

register_sidebar( 3, $args );

}

Lưu ý:

• Mỗi widget là một id khác nhau. Nếu bạn muốn thêm một widget thứ 2 thì phải thay đổi ‘id’ => ‘widget-thu-hai’,
• register_sidebar( 3, $args ); Số 3 là số lượng widget cần đăng ký

Sau khi thêm vào bạn vào Apperance => Widget sẽ thấy một khu vực cho phép thêm các Widget trong sidebar

Khi muốn tái sử dụng sidebar ở các trang khác như index.php, single.php thì bạn chỉ cần đặt đoạn mã này gọi ra là được.

<?php get_sidebar();?>

Tạo nhiều Footer widget cho theme WordPress

function mytheme_widgets_init() {
register_sidebar( array(
'name' => esc_html__( 'Sidebar', 'mytheme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'mytheme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );

register_sidebar( array(
'name' => esc_html__( 'Footer 1', 'mytheme' ),
'id' => 'footer-1',
'description' => esc_html__( 'Add widgets here.', 'mytheme' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>',
) );

register_sidebar( array(
'name' => esc_html__( 'Footer 2', 'mytheme' ),
'id' => 'footer-2',
'description' => esc_html__( 'Add widgets here.', 'mytheme' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>',
) );

register_sidebar( array(
'name' => esc_html__( 'Footer 3', 'mytheme' ),
'id' => 'footer-3',
'description' => esc_html__( 'Add widgets here.', 'mytheme' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

Tiếp theo xoá toàn bộ code trong footer.php và thay thế bằng đoạn mã này

</div><!-- #content -->

<footer id="colophon" class="site-footer" role="contentinfo">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<?php dynamic_sidebar('footer-1'); ?>
</div><!-- .col-md-4 -->
<div class="col-md-4">
<?php dynamic_sidebar('footer-2'); ?>
</div><!-- .col-md-4 -->
<div class="col-md-4">
<?php dynamic_sidebar('footer-3'); ?>
</div><!-- .col-md-4 -->
</div><!-- .row -->
<div class="site-info">
&copy; <?php bloginfo( 'name' );
echo ' - ';
echo date("Y"); ?>
</div><!-- .site-info -->
</div><!-- .container -->
</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>

Khá đơn giản phải không nào. Với bài viết thêm chức năng sidebar và footer cho WordPress bạn đã gần như tạo xong một Theme cho riêng mình rồi đấy.