How do I add an attribute to a specific CSS class?

Tags: jquery,html,css,wordpress

Problem :

As a brief background, I'm a noob all around. I apologize in advance.

I have a specific CSS class that is only applied to thumbnail images on my Wordpress site. I'm running a script that applies a "Pin it" hover link on all images site-wide. I'd like to exclude this specific class (attachment-custom_thumb) from this script by adding a "nopin=nopin" attribute. I recognize that CSS doesn't do what I'm asking to do, so I'm wondering if there's an easy way to add that attribute to all photos in that particular class (since that seems to be the easiest, most automated way of identifying the images I want excluded).


Solution :

Your best bet would be to use jQuery. If you have a custom.js file in your theme you could add this code ... if not see here for details on adding js to wordpress.

You could try the following code using .attr() function:

jQuery(function($) {



The above code grabs any html element with the class 'attachment-custom_thumb' and appends the attribute 'nopin' with the value 'nopin' to it.

HTH :)

    CSS Howto..

    using css, how to position image so when resizing window, image will not move

    how to control div size when other divs are changing [duplicate]

    WebPack how to put all css files into one css file

    How to make content shareable from a static website

    How to make

    How to change header and footer to full width

    how to change style of a css element using jQuery

    How to separate settings and css in a less?

    How to create a floating div with jQuery

    How can I show part of an element, and toggle to all of the element on click?

    How to style one react component inside another?

    How to vertically and horizontally centre text with a variating font size in CSS

    How to position
    element absolute from browser window?

    How can I center vertically a div with position absolute and hight = 100px on another div with position relative but with not standard height

    Background hover showing in CSS

    How to remove the gap between each list-item in an unordered list?

    How to select an element that must have more than one css class?

    JavaScript: How to get a dynamically created element's width?

    How to create a horizontal navigation in HTML/CSS above an image?

    How do I get this list to be seperated by a tab? (HTML/CSS)

    Bootstrap: how to clear images in a gallery?

    How to download Jquery if link only shows source code and connect it to my html

    How Do I Code a Popover in Rails 4.2.5 Using gem bootstrap-sass (Bootstrap 2)?

    How to create square around glyphicon bootstrap?

    How to arrange subchild in the horizontal menu

    How to dim an image keeping transparency untouched with CSS or JS?

    How to have different transistions for background-image and text in a div using CSS

    GWT how to add css style on Image Resource

    How to make a smooth transition for css controlled by jQuery?

    How can you configure Rails to use blueprint-css instead of the default scaffolding css?