How To Display Thumbnail Images In A Grid Style Gallery

WordPress already includes a reliable gallery function built in however styling it can be a challenge for some people.

In this tutorial, i’ll provide all the HTML & CSS code you can simply paste into a page and your child themes style.css file.

And i’ll also provide the very basic installation instructions.

You can easily change the border and border hover colors if needed.

Here’s the demo on CODEPEN.

See the Pen Thumbnail Image Gallery Grid by Brad Dalton (@braddalton) on CodePen

And here’s the screenshot of my local installation in a home page widget:

Installation Of Code

Note: The code works better in a text widget.

HTML Code:

1. Copy and paste the HTML code into your editor or text widget.
2. Upload your images to your media library and grab the full url to each image.
3. Replace the url’s in the HTML with your own.

CSS Code:

1. Simply copy the CSS to the end of your child themes style.css file.
2. Add either the page/post i.d or a custom body class to the start of each CSS rule.
3. You can add a custom body class to the Layout Settings below your editor.

Here’s as example of how the CSS code looks after adding the custom class. You can use this exact code in your own site.

* {
  margin: 0;
  padding: 0;
}
 
 
.sample-custom-class body {
  background: #333;
}
 
.sample-custom-class div {
  width: 900px;
  margin: 0 auto;
  overflow: auto;
}
.sample-custom-class ul {
  list-style-type: none;
}
 
.sample-custom-class li img {
  float: left;
  margin: 5px;
  border: 5px solid #333;
 -moz-transition: all 0.2s ease-in-out;
 -webkit-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
}

.sample-custom-class li img:hover {
border: 5px solid #F15123;
}