Social Gallery WordPress Plugin

Guide: Social Gallery Plugin and CSS Selectors

Using the Social Gallery WordPress plugin with different CSS selectors is an easy way to specify what images you want to apply Social Gallery too. If you are familiar with CSS selectors then you will probably be able to understand this functionality as it is. This post is designed as a quick guide to using your own CSS Selectors with Social Gallery, this feature can be used in many ways – further information can be found in the help documentation packaged with the plugin.

Follow these 3 steps to set up your custom CSS selectors and Social Gallery for WordPress (alternatively read about the default way the plugin selects images or see some examples below.)

1. Decide which images you want to use with Social Gallery.

This will be easy if you post in a regular way, perhaps you always put a major image at the top of a blog post, or you have a gallery you sometimes show at the bottom of a post. Either way the first step is to work out which of these images it makes sense to highlight with Social Gallery. Remember: every image you include will be part of a gallery from which users can share your blogposts and like your content.

2. Work out the most direct way of selecting just these images.

This is a bit of a developer job, but if you know a bit of html you will probably be able to work it out. First up load a webpage of your blog, perhaps a blogpost with images you would want to include. If you have Google Chrome or Firefox you can simply right click one of the specific images and then click “Inspect Element” – this will bring up the developers console from which you should be able to discern one of the following (if you don’t use one of those browsers I would recommend you update your browser, or alternatively view the source of the webpage and find the image in question.)

  • Are all the linked images within a container? (likely) if so use this containers ID or Class with the third example at the bottom of this post to construct your selector.
  • Do all the linked images have the same class? (possible) if so use this Class with the first example below.
  • Is it a specific image or few images you want to use? (least likely) if so you can find the ID of this linked image (the link’s ID attribute) and use it as in the second example below.

3. Set the CSS selector in Social Gallery configuration

Once you have your CSS selector (from 2.) you can go to the menu option for Social Gallery and change the first drop down box to be “Specific CSS Selector (class or ID)”. This will show a text box, into which you can put your new selector.
Thats it! Go and check your new Social Gallery out!

Social Gallery WordPress Defaults


By default Social Gallery works with all linked images within your wordpress posts, that is any image which is linked somewhere. This can be useful out of the box but also won’t suit every wordpress user. The following are a few examples of other CSS Selectors we have used with the plugin. From these you should be able to understand the way Social Gallery uses them and write your own.

A specific link class: “.socialGalleryThis”

A single image (by ID): “#socialGalleryThis”

All linked images within a classed object:  “.yourClass a:has(img)”

As always if you have purchased the plugin and are unsure about how best to use these CSS selectors please do let us know via the email contact form here. The full documentation on CSS selectors is available from W3 here, if you are doing anything with HTML and CSS, CSS selectors are an important learning point.

©2012 Social Gallery Plugin - Please note: Social Gallery Plugin is in no way related to Facebook, Social Gallery is a Gallery Share Plugin for WordPress.