a Custom Archive With a Neat Fade Effect.

a Custom Archive With a Neat Fade Effect.

Custom Post Type Archive with a jQuery Fade Effect
click to enlarge
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.

Warning: that doesn’t mean this is a short post. It’s actually rather long. With lots of code. But if you like code and want to make this happen, it’s a good read.

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.

Today, I’m going to walk you through it! (You can also skip straight to the gist!)

This tutorial assumes you’re setting this up with a Genesis child theme using HTML5. It should be totally possible to use this with any theme, HTML5 or not, but would obviously require some revision.

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.

jQuery

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!

Reader Interactions

Comments

  1. Avinash D'Souza says

    Ok, I’m just gonna say that this post is INSANE!!! And by that, I mean, it’s incredibly detailed and helpful…

    Thanks for putting this out there Robin…as a relatively new user of Genesis(old hand of Thesis), the power of the framework still boggles me.

    If you don’t mind, how would I do this if I didn’t want to do a new CPT? Essentially, I wanna do this for my Authors Archive…ergo, I don’t need a new CPT because the Authors taxonomy already exists.

    Again, thanks for the tut! 🙂

    • Robin says

      Hmmm, that’s a great question–and a great use of this kind of page! I am not sure, but I think I’d start by trying to swap out the wp_parse_args with wp_list_authors, maybe, as they seem to accept the same kind of parameters?

      I will guess that you’ll have to explore the related references at the bottom–think get_the_title, etc. may not work. Probably things like get_the_author_link, etc. instead.

      If this approach works, please let me know! Would love to see it in action. Good luck!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.