Last year a group of friends and I took a much-needed getaway trip to the mountains of Colorado. Naturally, I had to design a website for this event we call Brocation. You can view the website here.
One of the things I wanted on the site was a section to showcase members of our trip—a way to display photos with a link to our Twitter accounts.
Here’s a screenshot of what I came up with:
I thought it might be helpful to show you how I did that. Implementing in your custom theme will vary depending on what you have.
Here are the steps I used to add a grid of photos to my homepage:
1. Register the Photo Grid widget area in the functions file:
2. Hook the Photo Grid widget area after the site header. This should be done by adding the code below into your theme’s functions file:
*Note: Feel free to place these snippets at the bottom of the functions file.
3. Add HTML for the member images into a text widget:
Note: The images used on my site are 800×800, but you can upload something smaller such as 400×400.
4. Add CSS for member images in theme style sheet:
If you’re looking to add your photo grid section in another location, here’s a comprehensive list of Genesis Hooks for you to use as reference.
We have published additional Genesis Quick Tips for you, so feel free to use what you see to build something awesome.