Chris Takakura Art Direction & Design
web programming chris takakura

This article covers how to register new widget box with your own custom labeled widget box in the Wordpress admin area. Most of the time, the code to register sidebar area in Wordpress only enables numbered boxes that say “Sidebar 1, Sidebar 2, Sidebar 3, etc…” This can get quite confusing if you have many widget enabled area’s on your site such as your header, content sidebar, footer, and more. This article’s goal is to ease the confusion a little bit in your Wordpress widget admin area. This article also slightly covers how to apply custom CSS ID’s and Classes that wrap your widget area.

Difficulty: Intermediate

There are a few ways to register to new widget sidebars with sections labels in WordPress. If you are just starting out with creating custom themes for WordPress, or intermediate with customizing WordPress themes, registering or adding new sidebars are something we always come across based on the type of theme you are working on. Some themes only come with just one widget sidebar, while some themes have multiple widget sidebars that are included in the content area, header, footer, and more. This article will go over how to register sidebars that have labels for a more organized back-end. To be more detailed in regards to what I am talking about, please take a look at the screenshot below.

wordpress chris takakura

As you can see from the screenshot, there are two sidebars that are labeled Sidebar Main and Sidebar II. There are many ways to register widget enabled sidebars in WordPress, however not all codes are designed to create section labels in the admin area.

The code above is one of the most simplest ways to add a sidebar working in the functions.php file. The code above basically adds 5 new sidebars into your admin area through the code (5,array(. Although this is an effective way to add a sidebar in your admin area, the problem is, it just creates sidebars that are labeled Sidebar 1, Sidebar 2, Sidebar 3, etc… When you have so many different sidebars in the admin area, and they are just numbered all around, you tend to get confused which sidebar section belongs where.

Now open your functions.php and try implementing the code above. Although the structure of the code hasn’t changed much, the 2nd line of the code is where it changes.

This piece of code is where it creates the “section label” for the widget area. You can name this to anything you want but it would be a wise decision to label something that you will recognize. For instance, if you want to create 3 sidebar widget area’s in your footer, naming them (for example: footer 1, footer 2, footer 3) would be very organizational and should help you keep things in manageable order.

Assigning CSS ID’s & Classes

You can also assign different CSS ID’s or classes to each sidebar separately. The code above, if you choose, will allow you to input your own CSS ID’s and Classes. All you have to do with the above code is to assign the first section of the div ID or class in the ‘before_widget’ and then close that div in the ‘after_widget’.

My name is Chris Takakura, I am an art director and visual designer servicing businesses and studios around the world. I specialize in print design, brand/identity, with a strong concentration in web design & front-end development. I am always looking to connect and be involved in creative projects, so if you are interested in my creative services, please contact me here.

Leave a Comment

Your email address will not be published. Required fields are marked *

E-MAIL: chris[a]
PHONE: +1 626 782 5841
LOCATION: Los Angeles, CA
Chris Takakura