I created a clickable photo grid on my categories landing page a few weeks ago and got a few questions on how I did it so I thought I would do a quick post on how to create a clickable photo grid like this one.
To start, create your images that you are going to use. I used WordSwag, but you can use something like PicMonkey or Canva. If you create it online choose the dimensions of the image as 150 x 150px this will give you the thumbnail size I’ve used here. If you want it slightly bigger, choose a larger canvas size.
I like text overlaid on images but choose whatever kind of tile image you would like.
Next import these images into your blog (on WordPress go to ‘Media’ and then ‘upload’).
On the page/post you want the grid to appear add the images in the order you want.
For every image in your ‘grid’:
- Open the ‘edit’ options for the image
- Ensure that ‘none’ is selected in the alignment options
- Select ‘link to custom URL’ and enter the relevant link
Once you’ve done this for every image make sure the images are lining up next to each other with no gaps like this:
Save and publish your page/post. Your photo grid should now be live and clickable!!