Create a WordPress Image Gallery: Code the Plugin

Final product image
What You’ll Be Creating

People like pictures. They like looking at them, they like clicking on them. So it makes sense to use them in the navigation for your site.

You may already use featured images in your archive pages, letting users get a greater insight into what a post is about and making your archive pages look better. The nice big clickable image also makes the process of navigating through to a page or post more intuitive.

But there are other places where you can use featured images to aid navigation to parts of your WordPress site. In this two-part tutorial, we’ll show you how to create a grid of images which link to the child pages of a given page in your site, or to the child pages of the current page.

In this first part, I’ll demonstrate how to write the PHP to fetch the pages and output their titles and featured images, inside links. And in the second part, Ian Yates will show you how to add CSS to turn your list into a great-looking grid.

What You’ll Need

To follow along with this tutorial, you’ll need the following:

  • A development installation of WordPress—don’t add this to your live site until you’ve tested it.
  • A theme which either has action hooks for you to add content or which you can edit. If it’s a third party theme without hooks, create a child theme and edit that.
  • A code editor.

Deciding On Your Approach

The first thing to do is decide which pages you want to output. In this tutorial, I’ll demonstrate two options:

  • A list of the child pages of the current page, with images
  • A list of the child pages of a specific page, with images. This can display anywhere in your site, not just on the parent page.

Getting Started

The starting point is the same for both approaches.

Start by creating a plugin in your wp-content/plugins folder. You’ll need to create a folder for your plugin, as in the second part of this tutorial, you’ll be adding a stylesheet as well as the main plugin file.

Once you have your folder, create a PHP file for your code. I’m calling mine tutsplus-child-pages.php.

Now set up your plugin file with the commented-out text at the top:

This tells WordPress what your plugin is and what it does. 

Now if you haven’t already, go ahead and create some pages. I’ll create some pages with child pages, including a Locations Page as the parent for my specific page list.

Here are my pages in the admin:

Hierarchical pages in the WordPress admin

Now it’s time to write the function to output the list.

Outputting a List of Children of the Current Page

Let’s start with this option. This will output a list of all of the children of the current page, with images, links and the title.

This is a useful approach if your site has a hierarchical page structure, and you want to encourage people visiting top-level pages (or middle-level pages, if you have them) to visit the pages beneath them in the structure.

Start by creating a function in your plugin file:

Now inside that function, check if we’re on a page. Everything else will go inside that conditional tag:

Next, set up the $post global variable and define the parent page:

After that, define the arguments for the get_pages() function:

You may want to change some of those arguments. I’ve used menu_order for sorting so I can manually adjust this, but you could use date, title, or any other sortable parameter.

The next task is to set up a foreach loop using the results of that get_pages() function:

Powered by WPeMatico

Leave a Comment

Scroll to Top