How to Create a Staff Directory on WordPress – Your First Beaver Themer Project

Are you getting your money’s worth from Beaver Themer?

I first purchased the plugin to control my headers and footers. Only later did I play around with “theme parts” and conditional settings. After that, I was blown away by the possibilities of building advanced sites with Beaver Themer. I became the weirdo in the Beaver Builders Facebook group arguing that the tool was underpriced and underrated.

So, how can you get a handle on Themer’s features for yourself? The best way to understand the full power of Beaver Themer is to create a small project that puts the plugin through its paces.

By experiencing most of Beaver Themer’s features in one test project you can begin to see how the tool can be incorporated into your workflow. After that, you’ll tackle more complicated websites with confidence because you know you can use a code-free tool like Beaver Themer.

Are you game? If yes, then fire up Wordpress, and follow the steps below.

#1. Choose a Compatible Theme

Many popular, well-coded themes work with Beaver Themer. You can find a list of some of them here.

Most of the features you rely on themes to provide – like customizable headers and footers – can be achieved using Beaver Themer. So don’t fret over choosing a theme. Choose the first one on the list that looks good to you, and you’ll be fine.

2. Choose a Custom Post Type/Fields Builder

Beaver Themer’s field connection feature is powerful when you use it on just the Post and Page fields that come with Wordpress out of the box. But things really get crazy when you use it with a custom post type plugin.

Custom post types transform Wordpress from a blogging tool to a CMS. They are the building blocks of advanced Wordpress projects that go beyond blogs and brochures sites.

The three plugin options that work best with Themer are Advanced Custom Fields, Toolset, and Pods. My personal favorite is Toolset, but honestly, all three tools get the job done.

3. Optional: Choose an Extension

If Beaver doesn’t have a module that you want out of the box, consider using a third-party extension.

Some of the extensions I use the most are free in the Wordpress plugin directory. For example, I’m a heavy user of the amazing Beaver Cards plugin.

Now that you’ve chosen your stack, let’s build your first project!

Your First Beaver Themer Project: a Dynamic Staff Directory

Staff directories are a common client request. By using Beaver Themer you can really impress a client by adding dynamic, contextual content and layouts to their staff directory.

A staff directory is also a great project to use to get familiar with all of Beaver Themer’s features. If you follow along with the steps below you’ll be a Beaver Themer pro in a single afternoon.

Create a Simple Staff Directory

1. Install Beaver Builder, Beaver Themer, a compatible theme, a custom post type plugin. Using a Beaver Builder extension is optional for completing this project.
2. Use create a custom post type for your Staff Profiles. If this is your first-time use one of the following tutorials ACF tutorial / Pods tutorial / Toolset tutorial
3. Create custom fields for:
   1. “bio”
   2. “name”
   3. “job title”
   4. Don’ create a field for “headshots. Use the built-in Featured Image field for that.
4. Create staff profiles for 7 people.
5. Tag 3 of the posts as “Executive Team” and two of the posts as “Sales Team”

You now have the bones of a simple directory. Any client will happily pay your agency’s fee to have this on their site.

Now let’s blow your client away and supercharge this directory with Beaver Themer.

Create a Dynamic Staff Directory

First, use Beaver Themer to create a template for the individual Staff Profiles, and the archive of the staff directory.  See instructions here.

Next, use field connections to pull in and layout content from your custom fields.

Now, pat yourself on the back – in the time it takes to design two individual pages you’ve created two theme templates that will be used across 8 existing pages – and any number of pages to come!

OK, now use Beaver Themer to create a template for the archive of the “leadership” category.

On this template, make the photos of the three executives appear different than what you designed on the main archive page. Perhaps the photos should be bigger, or the titles should be in a different font. Consider designing the main archive to only show a photo and link, while the executive archive shows a full bio. Go crazy – design it the way you see fit.

Lastly, use Beaver Themer to create a theme part of the “sales” category.

On pages for salespeople create a row under the header that announces the company is hiring more salespeople.

Voila! Your client now has a beautiful, dynamic, easy-to-update staff directory. You built it using Beaver Themer  – not a single line of custom code was needed.

And in the process, you learned how to create templates for individual posts and archives, and how to add a dynamic row to targeted pages.

The next time you receive a set of requirements from a client or dream up a website idea for yourself, consider how you can turn the plan into a set of custom post types and dynamic theme templates, powered by Beaver Themer.

Question – Your Beaver Themer Stack

If you’re experienced with Beaver Themer, please share – what do you use to build sites? What’s your preferred theme, custom post type plugin, and Beaver Builder add-on?

About Hashim Warren

Hashim Warren is a Marketing Strategist based in Greensboro, NC. He helps home builders land more jobs and bigger jobs at Hook & Target.