How to Use Custom CSS in Your WordPress Image Galleries

Last updated on Oct 13, 2016 by Waseem Abbas

Do you want to add custom styles to your image galleries? Sometimes you may want to go beyond turnkey designs to create your own unique and fully customized galleries. In this article, we will share how to use custom CSS in your WordPress image galleries.

By default, WordPress doesn’t have the option to apply custom styles to your image galleries. You’ll need to use the Envira Gallery plugin.

Envira Gallery has multiple templates to start from, however, you can always use your own custom CSS using Envira’s Custom Addon.

Follow these 4 steps to use custom CSS in your WordPress image galleries:

• Step 1: Install Envira Gallery
• Step 2: Install Envira’s CSS Addon
• Step 3: Create or edit an image gallery and find the Custom Gallery CSS field
• Step 4: Enter your custom CSS

Once you’re done, you’ll have a custom image gallery that could look like this, or like anything you want!

Ready to get started creating your customized image gallery? Let’s go!

Step 1: Install Envira Gallery

First thing you need to do is install and activate the Envira Gallery plugin.

Simply go to your WordPress admin, go to Plugins, and search for “Envira Gallery”. Then click on the Install button to install it, and then activate it.

Now go to Envira Gallery » Add New from your WordPress backend to create an image gallery in WordPress. For more details, check out how to create an image gallery in WordPress.

You are now ready to customize your image gallery!

Step 2: Install the CSS Addon

You need Envira’s CSS Addon to use custom CSS in your WordPress image galleries. To access this addon, you must have an Envira license.

You can go to Envira Gallery » Addons to install and activate the CSS Addon.

Step 3: Edit Your Image Gallery

Upon activation, you can edit an image gallery where you want to add the custom styles in WordPress. Go to the Misc tab and scroll down to find the Custom Gallery CSS field.

Step 4: Add Your Custom CSS

You can add your CSS script in this field and make sure to hit the Update button.

That’s it! You can check out this demo to see some use cases of custom CSS image galleries in WordPress…

We hope this article has helped you to learn how to use custom CSS in your WordPress image galleries. You may also want to check out our guide on how to add a polaroid gallery in WordPress.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.