How to Mark New or Featured Images in Your WordPress Image Gallery

by Waseem Abbas on Oct 9, 2017 Reader Disclosure

Do you want to make your new or featured images stand out in your gallery? You may need to display your new photos differently from the other images so that your visitors will notice your changes. In this tutorial, we will share how to mark new or featured images in your WordPress image gallery.

You may know about creating the galleries on WordPress pages and posts. However, these image galleries are limited in features and don’t support any custom requirements. For custom needs with image galleries, you need to edit the theme files and it will need development skills. It is also time consuming.

We recommend you to use Envira Gallery that is a multipurpose image gallery plugin. With some basic customization, you can mark new or featured images in your WordPress gallery. It has tons of other amazing features too.

To mark new or featured images in your WordPress image gallery, you’ll need to follow these 3 steps:

• Step 1. Install and activate Envira Gallery plugin
• Step 2. Create a new image gallery on your site
• Step 3. Go to customization panel and add your CSS

By the end of this tutorial, you’ll be able to mark new or featured images on your WordPress gallery that will look like as shown in this image below:

Ready to get started? Let’s go!

Step 1: Install and Activate Envira Gallery Plugin

The first thing you need to do is to install and activate Envira Gallery plugin on your WordPress admin backend.

For more details on installation process, you should simply follow this guide on how to install Envira Gallery.

Step 2: Create an Image Gallery on Your Site

Upon activating the plugin, you should go to Envira Gallery » Add New and give a title to your gallery. Now drop your photos in the Native Envira Gallery section.

Make sure to hit the Publish button and copy the shortcode from Envira Gallery Code widget.

Now go to Pages/Posts » Add New or edit an existing page/post. In the visual editor, you need to paste the shortcode.

You can learn more about the basic gallery settings on this complete guide to create an image gallery with thumbnails in WordPress.

Step 3: Go to Customization Panel and Add Your CSS

After creating your image gallery, simply go to Appearance » Customize and click on the Additional CSS option.

You need to add this code in the Additional CSS block:

#envira-gallery-wrap-241 div.envira-gallery-item:nth-child(1) img, #envira-gallery-wrap-241 div.envira-gallery-item:nth-child(2) img, #envira-gallery-wrap-241 div.envira-gallery-item:nth-child(3) img {

   border: 5px solid #900;

}

#envira-gallery-wrap-241 div.envira-gallery-item:nth-child(1) .envira-gallery-link:before {

   content: "I'm new";
   position: absolute;
   z-index: 99;
   color: white;
   background-color: black;
   top: 10px;
   right: 8px;
   padding: 8px;

}

Replace 241 with your Envira’s gallery code to which you need to mark new or featured images. You can find your gallery’s number in the shortcode you pasted above.

The “I’m new” text can be replaced with your text for the first image of the gallery, and you can also edit other general CSS for font color, border and more.

After editing your CSS, simply click on the Save & Publish button.

Go ahead and visit your site to see the image gallery where you mark new or featured images to make them identical that will look like as shown in this image below:

We hope this tutorial has helped you to learn how to mark new or featured images in your WordPress image gallery. You may also want to check out this guide on how to A/B test featured images in WordPress. In case, you want to rank your images in the search engines, we recommend you to check this ultimage WordPress SEO guide for beginners.

If you like this tutorial, then please follow us on Facebook and Twitter for more free WordPress guides and resources.