How to Insert WordPress Photo Galleries Anywhere Into Your Theme

Last December WordPress dramatically stepped up the way media was handled. It improved the Media Library, the Media Manager, and even default WordPress photo galleries. (Check out that link if you want a tutorial on creating galleries.)

Those efforts at the end of last year really made working with galleries much easier and more pleasurable. And so if you’ve been enjoying the new galleries as I have, you may like this little trick that will allow you to put galleries pretty much anywhere you like in your site.

You do this by creating a gallery in a Page and then inserting some code into your theme’s template.

Besides being able to put a gallery pretty much anywhere, another nice feature of this trick is that you can easily go back into your gallery page and change it as you like  – adding photos, deleting photos, rearranging photos, etc. And of course all those changes will immediate take place on your site as well.

You’ll need to dig into the code once to set it up, but after that, changing things up is as easy as working with galleries through the media manager.

3 Steps to Inserting Galleries in Your Theme

Here’s a quick overview of the steps involved. We’ll go into details below.

1. Create a gallery in a Page
2. Find the Page ID
3. Insert a little bit of code into your theme’s template

1. Create a Gallery in a Page

As mentioned earlier, there’s a complete tutorial for inserting a WordPress gallery if you need it. In this post, we’ll assume you already know how to build one.

When you create your gallery, you will need to take into consideration where your gallery will go.

For example, let’s say you’d like to put your gallery into your sidebar. When you set your gallery up, one choice you’ll need to make is how many columns the gallery will have. If it’s going in your sidebar, for example, then you’ll probably want to keep the columns at one.

(Note: there is no option for rows, but we’ll talk about this later.)

If you set the columns for three, then you may get something that looks like this:

If you set your columns to one – which your sidebar has space for – then it will look like this.

The same is true for putting your gallery other places, of course. For example, say you want to put a gallery across the top all your pages by putting it in the header.

More than likely the best look will be stringing the thumbnails side-by-side all the way across the top in one row. (Of course you can do more than one row too, but you’ll probably want the thumbnails to be as close together as possible.)

For example, take a look at this page with thumbnails in three columns. The columns will spread themselves out to fit the width of the page. That leaves a lot of wasted space and takes up a lot of room (especially in a spot like the top of every page).

Now look at an arrangement that has all the thumbnails in one row.

(As mentioned, there is no “row” function in the gallery. You control the look by columns. And so in order to get one row, you just need to set the columns to be the same number as the number of thumbnails in your gallery. In this example, because I had six images, I set my gallery to have six columns.)

Again, you can have more than one row if you like. But in order to maximize space, it’s probably better in a case like this if you have more than one row only if there are too many images to fit on one row.

In the example below, I left the columns set to six, but I added six more images to my gallery.

2. Find the Page ID

The next thing you will need to do is to find the Page ID for the page with your gallery. You can see full instructions for doing that in this post.

3. Insert Code

The final step is to insert the following code in your theme’s template files where  you want your gallery to appear. (Appearance > Editor)

{code type=php}
<?php
$id = ID#;
$p = get_page($id);
echo apply_filters(‘the_content’, $p->post_content);
?>

You will need to insert your actual Page ID into the spot that says ID#. For example, if my page ID is 2428, my code in that section will look like this:

{code type=php}
$id = 2428;

Or the complete bit of code again with the ID in place:

{code type=php}
<?php
$id = 2428;
$p = get_page($id);
echo apply_filters(‘the_content’, $p->post_content);
?>

And so that’s it. Just add that bit of code, and you’re ready to go.

Where to Put Your Galleries

As mentioned, you can put your galleries practically anywhere, you’ll just need to think about things such as layout and columns, etc.

Here are a few places you may think about putting different galleries:

1. All Category Pages – Put a gallery on all category pages by placing the code in category.php (or archive.php if category.php doesn’t exist)
2. Different Categories – You can put different galleries in different category pages (e.g. a “fruit gallery” on your fruit category page and a “vegetable gallery” on your vegetable category page, etc.) In order to do this, you’ll need to create individual category templates.
3. Header — Put galleries at the top of every page by placing the code in your header.php file
4. Footer – Put galleries at the bottom of every page by placing the code in your footer.php file
5. Pages – Put galleries only on Pages (not posts). You’ll need to put the code in your page.php file.
6. Posts – Put galleries only on the post pages where your full posts appear (i.e. not on the homepage, category pages, etc.). You’ll need to put the code in your single.php file.

Get Your Wheels Spinning

Don’t forget that you can link a gallery thumbnail to any page you like. Your thumbnails don’t need to simply link to a larger version of the image. They can link anywhere. … This may get some wheels spinning.

Also, while we’re talking specifically about photo galleries here, this little trick works for any content you put into the Page you created – text, single images, videos, etc. So let your imagination run free.

Tags:

• galleries