Genesis Tutorials

3 Ways To Style Specific Images in WordPress

Sometimes you don’t need to add any CSS code to your child theme in order to style a specific HTML element like an image in a post.

No need to dig into your source code or themes style.css file to find the class or image i.d in order to add styling to an image.

1. Advanced Image Settings – Styles

Simply use the Advanced Image Properties you’ve probably seen hundreds of times already when adding images in WordPress.

Advanced Image Settings

You’ll still need to create the CSS code but that’s a walk in the park when using a CSS3 generator.

Drum Roll!

Adding CSS to Image Classes


This image actually uses the code below in the Styles field to create the shadow effect.

So that’s the first way.

Simply add some generated CSS code to the Styles field using your Advanced Image Settings.

This method uses CSS code to style the image using the wp-image tag inline.

2. Advanced Image Settings – CSS Class

The second way to target a specific image with CSS is to use the unique CSS Class for your specific image.

CSS Class for images in WordPress

Again, you’ll find the CSS Class in the Advanced Image Settings.

aligncenter size-medium wp-image-65

We only need the class (wp-image) with the image i.d which in this case is wp-image-65

Add the same CSS code we generated using the online CSS Tool, and the code looks like this:

.wp-image-65 {
box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
-moz-box-shadow: 0px 0px 20px #000000;

Paste this code into your child themes style.css file.

Note: This is the preferable way to add styles in web design as you can use the existing code to style other HTML elements simply by adding the unique CSS Class for each image to the code in your style.css file.

3. Use a Tool Like Snagit

Using a tool like Snagit, you can add effects to your images and screenshots before you insert them into posts and pages.

Can you tell the difference?

Snagit Image Effects

Image properties

You can style the image properties for your images border using CSS code or the Image Properties field in the Advanced Image Settings.

Learn how to Remove Add & Change Image Border Properties in WordPress.

One reply on “3 Ways To Style Specific Images in WordPress”

Hello Team!

I have a question about WordPress. I am currently running version 3.9.1, and something weird happened. In the image editor window, the tabs have disappeared, so I can no longer toggle between Edit Image and Advanced Settings. I was wondering if you know how I can restore the tabs.

Thank you in advance.


Leave a Reply

Your email address will not be published. Required fields are marked *