I get a lot of questions on it being possible to apply the effect site wide easily with Social Image Hover for WordPress. This is not as easy as you think, if you were to simply enable it on all images you would run into major issues with logo images, button images, and other images on your site that you would not want the effect applied to. And because every theme uses different CSS and DOM structure, there is no easy way even with jQuery.
In version 2.0 of Social Image Hover full site wide support has been added that lets you apply Social Image Hover to images automatically on your site. To do this we will be using the power of jQuery’s selectors. Keep in mind these features are for more advanced users who are familiar with using jQuery.
After you are running v2.0 you will have a new settings page called Site Wide. Enable site wide support and then select which buttons you want to appear in your hovers by checking the box for each button you want to appear. If you just upgraded you will notice 3 new buttons including a close button.
Next you will need to pick out your selector. This is going to be different for every single theme most likely, and your site may require a more advanced selector. The default is the selector I used for the WordPress twenty ten theme: “.post img” What this does is tell Social Image Hover to look inside all of our post content divs with the class “post” and all images inside those divs.
Other Selector Examples
- “img.customClass” – This would look for all images with the class customClass and apply the effect.
- “div.post img.alignleft” – This will look in post content divs for only image with the alignleft class to apply social hover to.
From there just enter your URLs, Tweet info, etc. and click save. Changes will take affect right away. Alignleft, alignright, and aligncenter are all supported by Social Image Hover and you can also use custom images and site wide images together without them effecting one another!