This tutorial will show you how to add custom slots to your WordPress theme so that you can drag and drop widgets to a location that is not yet defined by your theme.
Custom slots… what?
By custom slots I mean the pre-defined locations on your theme where you can drag and drop widgets to make widgets appears on your website. As you can see in the screenshot below, the custom slots are the elements wrapped in the red square.
The official term for custom slots in WordPress is sidebar. In the early days of WordPress, we can only drag widgets to the side columns of the website, hence the term sidebar. Then, as WordPress grows, the original so-called sidebar can be used everywhere on the website: on the top, in the footer, in between posts, etc. However, the name stays unchanged and the WordPress developers still use that term to refer to the custom slots.
In this tutorial, just to clear the confusion, I will use the term custom slots.
And to make this tutorial more understandable, I will use the Hemingway theme.
After this tutorial, I will have an extra slot as below:
The widgets dragged to that new slot will appear on top of the post column of my Hemingway theme.
Step by step tutorial
Open your theme editor
Do add the extra slot to your theme, first you have to open your theme editor.
On your wp-admin side menu, click on Appearance > Editor. Your theme editor will open.
Select the theme you want to edit.
Register your widget slot
Find the code where your theme already register its slots. Normally it would be in the function.php file.
After the you found the code, copy and insert another block of code for your new custom slot.
As you can see in the screenshot, the theme registers its default slots by adding an action to widgets_init.
add_action( 'widgets_init', 'hemingway_sidebar_reg' );
You can also see that I have added my new custom slot to the hemingway_sidebar_reg function (the block of code in red square).
register_sidebar(array(
'name' => __( 'Content Column Top', 'hemingway' ),
'id' => 'content-column-top',
'description' => __( 'Widgets in this area will be shown on top of content column.', 'hemingway' ),
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
'before_widget' => '<div class="widget %2$s"><div class="widget-content">',
'after_widget' => '</div><div class="clear"></div></div>'
));
The rest of the code in the hemingway_sidebar_reg function is default code that the theme use to register its original slots, which are Footer A, Footer B, Footer C, Sidebar.
Now if you go to your widgets drag and drop screen, the new extra slot should appear there for you to insert widgets.
For the demo purpose, I dragged a Search widget there.
Make the new slot appear on front end
Now that you can config your new slot, let’s move on to displaying it on the front end.
To do this, open the file that render the html where you want the new slot to appear, and make WordPress render whatever dragged to the new slot there using the function:
<?php dynamic_sidebar( 'content-column-top' ); ?>
To better understand this, look at the screenshot from my website
As you can see, I have inserted some code in the red square, telling WordPress to render the new slot content in between two layers of div.
Now if we go to our front end, the new slot content should appear there. However the styling may be a little bit messed up since we have added new elements to the website.
Adding new CSS to your theme
To make the website beautiful again, I added new CSS to the theme’s CSS file to format the new slot.
You can add custom CSS by editing your theme’s CSS file or by using a plugin.
In my case, I edited my theme’s CSS file as below:
Now the new custom slots appears correctly on my front page.
Final words
Adding a new custom slots (sidebars) to your theme may be a little bit different but you get the idea.
Hope this tutorial can help you customize your theme more conveniently.
Have better ideas? Share with me in the comment!
