How to Create a Gallery Menu using a Custom Post Type and Featured Images in WordPress

Programmers

How to Create a Gallery Menu using a Custom Post Type and Featured Images in WordPressIf you’re like most people, you probably have a page or two of galleries on your site – maybe more. For those who have more than one project page, it can be nice to add a gallery menu to a parent page. Here’s an example:

Each image above is pulled from the featured image of a post within a custom post type. When it’s pulled dynamically, we’re adding the title of the post and a hover effect so that when you click on, say, Supernatural, they go to the Supernatural post page (which has it’s own gallery).

This is far more engaging for the user than a drop-down menu listing your projects!

Step 1: Create the custom post type

First, we’ll need to create a custom post type. If you’ve never done this, it’s fantastically easy. Check out this post for the instructions: Creating a Custom Post Type in WordPress in Under 5 Minutes.

Step 2: Add a few projects and featured images

Just so we can see what we’re doing, you’ll want to add at least two to three projects to the custom post type. Make sure you set up Featured images for each (bottom right of your post).

Step 3: Create a new Template in your Theme

To create the coding we’ll add below, you’ll need to create a new template in your WordPress Theme.

Remember: if you’re using a Theme that will be upgraded, don’t forget to create a child Theme first: Creating a Child Theme in WordPress

There are a few ways of creating templates, but we’ll use the way that will be easiest to update in the future.

Create a new file under your theme folder (or child theme folder). You can name that file anything, just remember to include the “.php” at the end.

Add this coding to the very top of the file (make sure it’s within PHP tags):

/* Template Name: Gallery Navigation */

You can also name the template anything you want – above I named it “Gallery Navigation”.

Copy the page.php template file coding into this new template, directly underneath the coding we just added. Be careful with the PHP tags.

Step 4: Add the coding

Now we’re ready to actually do some coding!

We’ll start with the dynamic portion. Find the portion of the page that has the loop, something like this:

if (have_posts()) : while (have_posts()) : the_post();

Erase everything within that loop, including that line and the ending “endif” line. In it’s place, we’ll start with this:

$args = array( 'post_type' => 'customPostType', 'posts_per_page' => -1 );
$loop = new WP_Query( $args ); 

Next, we’ll call the loop a little differently:

while ( $loop->have_posts() ) : $loop->the_post();
endwhile;

Here’s what’s going on: In the first one, we reset the query that PHP is sending, choosing our custom post type (the name of that custom post type you created earlier), and adding that we want all the posts (-1 = no limit).

The new loop we added was from the query variable ($loop) we defined in the second line of the first coding section above.

Within that loop (before the “endwhile” line), we’re going to create our gallery image template:

<div class="projectThumbnail"> <a href="link goes here">
image goes here
<div class="projectC" ></div>
<h3>title goes here</h3>
</a>
</div>

It’s a fairly simple little template, which basically says that for every item in our loop, we’ll create this coding. Obviously the information above doesn’t include anything specific for the item, so add in the follow dynamic coding:

For the “link codes here” (remember to add the PHP tags around each of these):

echo get_permalink();

For the “image goes here”:

the_post_thumbnail();

For the “title goes here”

the_title(); 

And your template is ready to rock!

Step 5: Adding CSS

The CSS is easily read within the jsFiddle above, so I’m only going to mention how it’s created here. The basic layout is the image on the bottom, with a “projectC” div overtop (white background), and the H3 title overtop everything.

Note that the “projectThumbnail” class that wraps everything has a position:relative so that we can align both the H3 title and the “projectC” div absolutely and assign z-indexes to each.

Also, in the jquery below we’re going to be adding padding to the H3 title, which means we’ll need a “box-sizing:border-box” tag on the H3 title so that the padding is included in the height, not added extra.

Lastly, the only thing that might look a little weird is the “font-size:1.2em; font-size: 4vw;” on the H3 title. This is actually a new font-size setup to me; the vw stands for viewport size, which means that as the view window increases, our font gets bigger and vice versa. Basically, it’s my new favorite thing. Unfortunately, there are browsers that don’t quite like it yet. If you want the whole scoop on the situation, CSS-Tricks has an awesome blog post on it. Just remember to add a back-up font-size just in case.

Step 6: Figuring out the jQuery

The final portion of this project is figuring out the jquery to make the sweet hover-over effect. Here’s the whole thing (also can be found in the jsFiddle):

$( document ).ready(function() {
$('h3').hover(function(){
$(this).stop().animate({
opacity: 1
});
$(this).siblings('.projectC').stop().animate({
opacity: .7
});
}, function(){
$(this).stop().animate({
opacity: 0
});
$(this).siblings('.projectC').stop().animate({
opacity: 0
});
});

//DYNAMIC CENTER THE TEXT
var size = parseInt($("h3").css('font-size'));
$('.projectThumbnail').each(function() {
heightB = $(this).height();
$(this).children().children('h3').css('padding-top', (heightB/2)-size);
});

});

The first entire section is just the hover on and hover off functions. The $(this) refers to the H3 title which is overtop of everything, and the $(this).siblings refers to the white background div that is also spread over the image, but under the H3 title.

The last portion is to dynamically center the text vertically, which is pretty cool. Since the CSS is using the “vw” idea, the text size changes. So the first line there gets the size of the font.

Next we cycle through each projectThumbnail and get the height of the image (just in case they’re different heights) and set the “H3” padding on the top to equal the correct amount (half the size of the image minus the size of the text).

Congratulations!

You’ve just created a gallery navigation template! Don’t forget to create a new page in WordPress and assign it this template to make sure you get to view your beautiful work.

How to Create a Gallery Menu using a Custom Post Type and Featured Images in WordPress

 

Comments