UX & Product Designer

Chi Wai Li



Work I've done

Reminder for creating custom WordPress sidebars



This is one I keep on forgetting and have to Google on numerous occasions, so I’m adding it to my blog as a reminder.  I like to refer to the Sidebar in WordPress blog by Justin Tadlock, it’s old, written in 2010, but as far as I can see it still work.
There’s 3 parts to creating a custom Sidebar:

  1. Creating the Sidebar PHP file
  2. Registering the Sidebar in functions.php
  3. Adding the sidebar in the page template

1.Creating the Sidebar PHP file

Assuming you want to create a new sidebar called “Special” Duplicate the sidebar.php from your theme and rename it to sidebar-special.php

2.Registering the Sidebar in functions.php

Open the theme’s function.php file and search for my_register_sidebars it should look similar to the following:

<?php
add_action( 'widgets_init', 'my_register_sidebars' );
function my_register_sidebars() {
	/* Register the 'primary' sidebar. */
	register_sidebar(
		array(
			'id' => 'primary',
			'name' => __( 'Primary' ),
			'description' => __( 'A short description of the sidebar.' ),
			'before_widget' => '<div id="%1$s" class="widget %2$s">',
			'after_widget' => '</div>',
			'before_title' => '<h3 class="widget-title">',
			'after_title' => '</h3>'
		)
	);
	/* Repeat register_sidebar() code for additional sidebars. */
}
?>

Paste the following lines after /* Repeat register_sidebar() code for additional sidebars. */


	array(
		'id' => 'special',
		'name' => __( 'Special' ),
		'description' => __( 'My custom made special sidebar.' ),
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>'
	)

3.Adding the sidebar in the page template

In your custom page template, replace get_sidebar(); with get_sidebar('special')
And that should do the trick, But remember to add items in your widgets page.