Dylan Blankenship Dylan Blankenship - 9 months ago 32
Javascript Question

Adding CSS class to div with unique ID

So, I am really new to CSS. I am developing a site for the company I work for using WordPress. I know, WordPress "NOOB ALERT."
Anyway, I am using the massive dynamic theme and was hoping to get some help. I created three CSS classes that I want to apply to three different divs that have unique ID's.


  • widget-column-1

  • widget-column-2

  • widget-column-3



And I want to add the following CSS classes to those divs.


  • footer-widget-1

  • footer-widget-2

  • footer-widget-3



respectively to their corresponding number. However, when I tried any of the following methods using the themes built-in "custom JS" editor, the CSS classes failed to apply to the divs. And yes, the CSS works, I manually added the classes in developer mode on Chrome and it gave me the following.
Screenshot of result w/ css

But, whenever I input any of the following JS solutions, the CSS class is not applied.

$(".widget-column-1").addClass("footer-widget-1");

$("#widget-column-1").addClass("footer-widget-1");


Neither of these worked, I also tried a few other solutions but can't remember them off the top of my head. Please try to keep in mind that I just started CSS two days ago and am still learning, I don't want my poor little head to get bashed in by some coding giant with a club made of XSS attacks.
CSS classes I am trying to apply

Answer Source

Looking at your screenshot, what would work for the first widget would be:

$('[widgetid="footer-widget-1"]').addClass("footer-widget-1");

But, in order for this to work, you'd have to place it in a script that gets loaded on every page you want this to happen. And you probably want to wrap it into a

(function($){
    // your jQuery code here...
})(jQuery)

What I don't really understand is why are you trying to add this class, when you could use the existing class/id/attributes as selectors for the CSS you're trying to apply.

For example:

 [widgetid="footer-widget-1"] {
   /* CSS for #widget-column-1 here */
 }

...or...

 #widget-column-1 {
   /* CSS for #widget-column-1 here */
 }

If you add this to your active theme's style.css it's going to work.

As a side note, you'll probably find CSS Selectors and CSS Combinators useful. Also, in order to become efficient in CSS your code should apply. You'll need two things:

  • learn to inspect, using developer console of any major browser
  • learn CSS specificity. This will make you understand fast how strong (specific) your selectors need to be in order for a rule to apply, without breaking anything else.

You might also want to tour the Codex to make sure you understand how WordPress works.


Stop worrying about people questioning your choices and labeling you. WordPress wouldn't be so popular if it wouldn't be a useful tool. It brings a lot on the table and does it for free. And it's becoming a very powerful tool for fast development or REST API's which are fast becoming the backbone of web. wp and wp-cli are here to stay. If you plan on advancing in web development, learning it is going to help.

Happy coding! (... and welcome to SO!) :: }<(((*> ::