A few years ago I had a project for a company with about twenty staff, all of whom needed to be on the site’s staff page, each with a photo and bio. It was going to be a long page no matter what I did, but I did some looking around and discovered a neat trick I could use to shorten it up quite a lot.
The thumbnails run down the left side of the page and only one bio shows at a time. When you click on a new thumbnail, a little animation magic happens to fade out one bio and bring in another. It’s quite pretty and surprisingly easy to do.
At that time, the only way I knew how to do it was by hand. It worked, and it looked great, but involved so. much. work; was a nightmare to update; and involved custom styling for each and every background image, which had to be created by hand. It was a project that I often thought of and wished I could revisit so I could figure out an easier way to set it up.
Over the past year, I’ve worked a lot more with custom post types and custom loops, and the wheels began turning. Finally, I knew how to tackle this. It still takes a bit of setup, but it’s brilliantly simple to maintain once you hand it over to the person who will be handling the content itself. I just put it into action on the Signal Mountain Student Ministry website.
You May Also Like:
Today, I’m going to walk you through it! (You can also skip straight to the gist!)
Set up your Custom Post Type
The first step is to get your custom post type set up. I created one for Staff and tucked it in the mu-plugins folder for two reasons: 1) I don’t want it to be tied to the theme, and 2) I don’t want someone who isn’t paying attention to accidentally turn it off.
[gist id=”6613842″ file=”rgc_cpt.php”]
It’s pretty straightforward. Notice that it supports the featured image as well as the
'genesis-cpt-archives-settings', both of which are important. You could get by without the custom archive settings but if you want to have an intro or custom SEO settings on the staff page, you’ll need it. And I love having them. Supporting the page attributes is also key for this situation, where you want to have total control over the order of your thumbnails.
My super awesome brother helped me with this script when I needed it originally, and it needed only a minor adjustment for this go ronud. Save it in your child theme’s /lib/js/ folder, or someplace similar (I’d create a js folder if you don’t have one).
[gist id=”6613842″ file=”avenger.js”]
Call It In Your Functions
You’ve got two of your big keys in place, so now you need to call them into action through your theme’s functions file. We’re enqueueing the script and (optionally) adding a widget area which will display after the content on the staff archive page. You could use it for a contact form, for example.
[gist id=”6613842″ file=”functions.php”]
The Staff Archive Page Itself
Obviously, we also need to set up a custom archive page (called archive-staff.php … if your custom post type is called something else, you’ll need to change this). This involves removing the standard loop and setting up a custom one to run not once, but twice.
The first part is setting up the arguments. All staff must show, even if there are more than allowed by your site settings. Additionally, we want to sort them by
menu_order, which we set up in the Page Attributes (0 is first, etc. I usually go by fives so it’s super easy to add someone new if they are coming in above others).
The first loop is inside the thumbs div (which isn’t styled yet). It displays only the featured image from each post with the title. There is an if/else statement here because the first staff member is “active”, while the others are not–only the one that is clicked is “active”. Notice the different class on the if, as opposed to the else. Also, notice the
id="' . get_the_ID() . '" in each part, which gives us something tangible to tie the thumbnails to their respective bios.
It’s really important to include the
rewind_posts(); line so that the second loop starts at the beginning as well.
The second loop contains the title and the actual bio (or content). The setup is very similar to the thumbs, including that id–since both are using the actual post ID, it guarantees that each div will have a unique id which matches its respective thumb/bio.
[gist id=”6613842″ file=”archive-staff.php”]
Give It Some Style
The final step is the easiest, right? We want to make sure that our new divs all behave as intended, and that our thumbs have some nifty opacity, etc. Additionally, we’re going to add some rules to our media queries to make sure that everything resizes as intended on smaller browser windows and that the thumbs rearrange altogether on mobile devices.
[gist id=”6613842″ file=”style.css”]
If you’re still with me, congratulations! Now go out and do something with this. I’d love to see your version!