• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

How To Add OR Remove CSS Classes For Specific Widgets In WordPress

This PHP code enables you to add a CSS class to any WordPress or Genesis widget by way of your child themes functions file. This way, your class will not be removed when WordPress or Genesis is updated.

add CSS class to specific widget

You can also target the widget by widget_name or widget_id.

You can also use the code to remove and/or replace classes.

Demo Video #

In this case, we target the calendar widget in the primary sidebar of the Genesis Sample child theme by StudioPress. When inspecting the HTML output in the source code, you can see the custom class named your-custom-class-by-name has been added to the widgets existing classes widget_calendar.

Because the code also includes a conditional tag to target the front page, the class is only added to the widget on the front page.

Works in any WordPress themes functions.php file.

Installation Steps #

There’s only 1 step :

Copy & paste the PHP code to the end of your child themes functions.php file.

Download Folder

Use is_active_sidebar to target specific sidebar widget areas.

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems