Styling the WP Instagram Widget

Recently we posted an article listing our favorite Instagram plugins. We mentioned WP Instagram Widget as being our go-to solution when we need to display a feed on our demos. We like the plugin due to its simplicity and easy of use. However these do come at a price. The widget does not look pretty from the get-go.

Let’s say we start by adding a widget in Twenty Sixteen‘s sidebar:

As an example we’ve added a feed from Lonely Planet’s Instagram. We’ve set the title, username and link text, that’s it. Here’s what you will see when you visit the site

Not what you’d call pretty, right? The plugin comes with no styling of its own, which is great if you are a theme developer because it allows you to style it yourself to match your theme’s layout. Not so great for users though. Don’t worry, we can fix this!

What we need is some custom CSS to help us get to a more visually pleasing layout. If you are using a child theme you can place the styles at the bottom of your child theme’s style.css. Alternatively you can use a plugin to help you add custom styles. Jetpack has a built in custom CSS editor. Don’t want to use Jetpack? No problem, the plugin directory offers plenty of choice when it comes to custom CSS plugins.

Now that we have a place to put our styles in it’s time to style things. The widget has two main CSS classes .null-instagram-feed which is the main widget’s class and .instagram-pics which is the class applied to the image list (ul element).

First we need to remove these annoying dots next to each image, that is the default list styling. To do that we need this style:

.instagram-pics {
  list-style: none;
}

Now that this is taken care of we can create a columned layout for our images. Shall we say three columns? Use the style below:

.instagram-pics li {
  float: left;
  width: 33.333%;
}
.null-instagram-feed p.clear {
  clear: both;
}

Save and have a look at the front page.

It has improved greatly, right? As you might have noticed, the images are a bit offset to the right, this is because Twenty Sixteen applies some margin to ul elements in widgets. We can remove that margin by modifying the .instagram-pics style above to this:

.instagram-pics {
  list-style: none;
  margin: 0;
}

These minor glitches are bound to happen due to default theme styling. Mostly they are pretty easy to deal with using your browser’s developer tools to find the proper style to apply.

Now that this is out of the way, let’s say you want to apply some sort of hover effect so the user can clearly see which image they’re hovering over. To do that we will change the opacity of the hovered element with this style:

.instagram-pics li:hover {
  opacity: 0.7;
}

Done, let’s check it out!

Greatly improved! The margin is gone and now when you hover over an image it becomes slightly lighter than the rest.

Perhaps you’d like to add a bit of padding between your images so they don’t touch each other. In this case modify the .instagram-pics li style above to:

.instagram-pics li {
  float: left;
  width: 33.333%;
  padding: 2px;
}

Et voila!

Don’t want padding but prefer a four column layout? Then use this style instead:

.instagram-pics li {
  float: left;
  width: 25%;
}

Easy right?

Almost there. The “follow” link looks a bit too close to the images, right? We can fix it. Just paste this in.

.null-instagram-feed p.clear {
    padding-top: 10px;
}

Much better!

Finally let’s say you want to modify the follow link’s main & hover colors. These styles are for you!

.null-instagram-feed p.clear a {
  color: #000;
}
.null-instagram-feed p.clear a:hover {
  color: #9c0e0e;
}

Final Words

Good job! With about 15 lines of CSS we have gone from an ugly list of images to a great columned layout with hover effects! Feel free to expand on the modifications above to get your desired layout. Happy styling!