How to style custom widget areas using CSS

Sometimes your WordPress theme just doesn’t have enough widget areas and you may need to add some additional custom widget areas to your WordPress theme and then style them using your stylesheet. This WordPress tip will show you how to style your newly added custom widget areas using CSS.

First, you will need to register or add your custom widget areas. If you are using a StudioPress Genesis Framework theme, you can click here to find out How to add more custom widget areas to StudioPress Genesis Framework themes.

After your widget areas have been registered, you can then style those new widget ares in your stylesheet using CSS. You will need the widget_area_id that you used when you registered the widget in your functions.php. For the example below, I am showing you how I styled the part of the Home Top area on the home page of WPSnacks. The id for my Home Top area is home-top. Keeping your widget area simple will come in handy later on.

#home-top {
	background-color: #fff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	overflow: hidden;
	font-family: 'Cuprum', arial, sans-serif;
	margin: 0 0 15px;
	-moz-box-shadow: 0 0 4px #fff;
	-webkit-box-shadow: 0 0 4px #fff;
	box-shadow: 0 0 4px #fff;

#home-top a {
	color: #FF6600;
	font-size: 18px;
	font-weight: normal;

#home-top a:hover {
	color: #28b5f0;

As you can see above, the first command sets up the Home Top area itself and the next two commands deal with links. This is just an example, there are endless customization possibilities using this method.

   Related Sponsored Links

Disclaimer: The information contained in this website is for general information purposes only and in no event will this site or its owners be liable for any losses or damages associated with your use of our site or content. Click here to see our full Disclaimer.

Leave a Comment