Home » Blog » Creating a WordPress Directory Page
Academy, Blog, Conductor

WordPress is a great solution for creating directory websites.

Contrary to popular belief, directory sites can be delivered in more flavors than just a Yelp knock-off. A lot of the agency work we produce is focused around displaying content across a website or intranet for content publishers. We often see this delivered in the form of a Geo site that requires a display of local businesses in their area, but it can also be for many types of content.

A variety of use cases for directory pages could be team pages, custom e-commerce inventory listings, membership listings, sponsorship pages, or even restaurant food menus! You have a common custom post type (CPT) and it has associated custom fields holding unique pieces of content that go beyond the standard editor text area.

In today’s lesson, we’re going to learn how we can build a simple directory page layout using Conductor and the Pods framework. Let’s get started!

Video: Using Pods & Conductor for Directory Pages

What’s covered in the video:

  • How to use Conductor & Pods to build directory pages.
  • How to use Note as a quick way to build landing pages.
  • Setting up your Team Custom Post Type w/ fields
  • Displaying your content in a grid or table
  • A brief overview of the Pods plugin

Step 1: Plan the Information Architecture

We won’t tackle a very complex example today though it is important to understand your WordPress Information Architecture as it relates to your project. This is especially important if you’re an agency delivering on client work. You don’t want to find out on launch day that there needs to be 10 more fields on individual team pages, do you?

Learn more about Information Architecture in Steven Slack’s WordCamp presentation.

That said, let’s setup a basic plan for our Team page content. An app like Trello or shared Google Doc will allow you to collaborate with others on planning the content types:

  • Post Type: Team
  • Featured image: Picture ID
  • Post Title: Name of teammate
  • Post Content: Bio of teammate
  • Custom field 1: Employee title
  • Custom field 2: Department
  • Custom field 3: Employee Twitter handle

As you can see this is a fairly simple and straight forward plan for your website’s team page content. When you’re working on larger projects, it’s important we get all of the stakeholders to agree on the architecture of our content. Pubishing content is today’s lifeblood and how many of us are actually finding customers who want to scale back on their that effort?

Not many, right?

Using this example, you and your team will have a solid foundation to scale WordPress as a content management system.

Why Custom Post Types?

Custom Post Types and custom fields are what really make WordPress shine as a Content Management System. CPT’s are easier to manage similair groups of content and display that content in an organized aggregated display.

There are many ways to approach creating CPT’s and in today’s example we’re looking at using the Pods plugin. If you want to learn how to do this under the hood (without a plugin), I suggest you start here.

What the Pods plugin will do for us:

  • Register a CPT
  • Create the custom fields associated with it
  • Allow us to add/remove and scale our content-rich site

Step 2: Create your custom post type & fields

Here’s what our Pods custom post type, Team, looks like. As you can see, we easily added each field to our CPT and we have plenty of room to scale this, if needed.

If you’re new to CPT’s you should now begin to see the benefit over standard pages or posts. Think about this example:

Say you’ve built this team page on a basic WordPress page and used tables. First off, it’s not very scalable or organized. With just a handful of members, there’s no real issue. However, once you get to a larger number of members, it’s far too cumbersome and dangerous to edit. You might accidently typo someone’s name or deal with malformed formatting. Nevermind the fact that you have dig through all of that content on one page.

Second, you have all of the extra WordPress “stuff” when you edit a page. If you have Yoast SEO installed, the user will see all of those extra SEO meta fields. It doesn’t sound like a big deal now, but what happens when content creation is delegated to someone new in the company? There’s a learning curve to WordPress and the more streamlined we can make the process of managing this content, the better.

When we add a new Team page, here’s what it looks like:

See? Nothing else to worry about other than creating the single team page content.

Step 3: Display your Team CPT content

Visit the page you would like to conduct, select a layout and simply drop-in a Conductor widget. Here’s what the setup of our widget looks like:

That outputs the following:

 

Wasn’t that easy? You can do this on any page, post, or archive page of your WordPress website. Stack other bits of content in or around your content layout — it’s that easy.

Bonus: Our free plugin Note, allows you to add text, live in the front-end customizer to help add more context to your aggregated content.

 Wrapping up

Custom post types and fields offer you limitless opportunity to publish groups of unique content for your client.

You’re not limited to just post title and content. You can better organize beyond tags and categories. Further, you’re creating a system of content management unique to your client’s needs. We’re beyond basic website building.

This is also an opportunity for the WordPress agency or consultant to take on different projects. Projects that are generally larger or have deeper scope and requirements. Most brochureware sites won’t have a need a for a lot of CPT’s or in-depth content strategy & architecture sessions. If this was your first introduction to the power of CPT’s and custom fields — matched with Conductor — I hope you can see the business opportunity here too.

Streamline your content layout and display with Conductor. Get it here.

One comment on “Creating a WordPress Directory Page

  1. Future topics ideas for Conductor Academy episodes as you requested:
    -I have been a user of Conductor since it became available but have not tried much with the list, grid or table display add-on. More use case examples of this add-on would be helpful
    -Knowing when the needs of your project will require a modifyication the Conductor templates
    -Using Conductor with functions like The Events Calendar, PMPro, BuddyPress
    -Rapidly replicating settings on multiple conductor widgets (might be more of a product wish list item)
    -How to leave visual clues for a person editing parts of the website indicating that Conductor has been enabled on a page

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.