Wordpress Web Development

Widget area class in wordpress

Rushik Shah User Icon By: Rushik Shah

You may have the need to change the pre-existing rigid styles of your widget or even add new ones. Making such changes is not really a walk in the park in the sense that it is not intuitive. It is in fact hard to perform this task without consulting some kind of guide. Those who do delve in to making the changes without proper knowledge on the matter end up overwriting several important class or styles in the process. Some even end up with a messy coding file. This article aims at helping you out with this process by providing specific instructions.

The steps to follow are laid out here:

Edit widget area class in wordpress

  • You first need to load the admin section of your WordPress website and login to it.
  • Then navigate to the Appearance >> Widgets section from the admin menu and locate your widget and its widget area. There are several widgets areas available like Primary Sidebar ,content sidebar, footer, etc. There could be more or different widgets available if you have a highly customized theme installed.

Now that you have selected the widget area of your choice, for example we choose ‘Primary Sidebar’ here it is possible search for the right file to download and edit.

Connect to you website server via FTP and traverse to the theme folder. Like go to wp-contents/themes/<your theme>/includes or simply wp-contents/themes/<your theme>/ and look for the appropriate file.

In our case since we are have selected the primary sidebar hence this is the sidebar that appears on the left side of the screen as mentioned in the image.

Here we need to download the file that contains the code which registers the sidebar. This is usually placed in the functions.php located in the theme directory however it may vary depending on the level of customization in your custom theme.

Once the file is downloaded edit it using your favourite editor.

Since we have opted for the primary sidebar we need to search for the section that registers that sidebar.

Something like the code below:

register_sidebar( array(
‘name’ => __( ‘Primary Sidebar’, ‘twentyfourteen’ ),
‘id’ => ‘sidebar-1’,
‘description’ => __( ‘Main sidebar that appears on the left.’, ‘twentyfourteen’ ),
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h1 class=”widget-title”>’,
‘after_title’ => ‘</h1>’,
) );

This is where you can change the name of the class or add a new class in order to change the widget styling parameters and even the widget title styling parameters.


It is possible to change the default styles of the sidebar. This is often left to professional WordPress Web Developers like Alakmalak. Alakmalak is involved in WordPress Web Development since a long time and are capable of handling any task big or small. But it is possible for people with little knowledge of programming or may be even people with no knowledge of programming at all to make modifications as well.

You will need to be a bit IT savvy though. On the other hand if you lack in technological skills altogether such task are best left to the professionals. Although if you do choose to delve it yourself you should follow these guidelines provided in this article.


  • How to add a custom widget area in WordPress
  • How to edit widget area class
  • widget area class in wordpress

What’s Next ?

I know after reading such an interesting article you will be waiting for more. Here are the best opportunities waiting for you.

Share via
Copy link
Powered by Social Snap