dynamic-staff-directory

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

One of my favorite web design podcasts is the ShopTalk show. A question that often comes up is, “What’s the best way to learn about web design?” The answer is always to pick a subject you’re interested and start building something. There’s no substitute for hands-on learning. In this post, Hashim walks through the process of building a staff directory using Beaver Themer and Page Builder. It’s a great starter project for anyone wanting to learn about using Beaver Themer!

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. See instructions here.

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. See instructions here.

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?

It would be totally gnaw-some if you could share this post with your friends.

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.

8 Comments

  1. Mark on March 28, 2018 at 3:45 am

    A video or demo site would really make this a great tutorial – thanks for the amazing work though



  2. Tom Nguyen on May 1, 2018 at 8:35 pm

    I agree with Mark’s suggestion.



  3. April Wier on May 17, 2018 at 5:09 pm

    I agree with Tom’s comment.



  4. Cindy Wyckoff on June 30, 2018 at 9:34 pm

    I also agree. I would like to see how the finished project should look.



  5. Gerry King on November 12, 2018 at 4:11 am

    Hi Hashim, Great tutorial thanks. Could this process be used to build a business directory that visitors could search business on a zip/postcode criteria? And how difficult would it be to include a map showing location of all businesses in the directory?



  6. Jeff Brown on January 13, 2019 at 11:12 am

    I am interested in creating a Geo Directory for businesses in my area for a local arts organization…do you have advice, or tutorials that with help that?



    • Robby McCullough on January 13, 2019 at 5:44 pm

      Good question. Themer will certainly be able to help style your site. I am not familiar with any geo directory plugins, though, sorry! You could explore using Pods to create a custom post type. That might be a good starting point…



  7. Ryan on May 8, 2019 at 7:46 pm

    Thanks Hashim, I’m really inspired. I’ve been using Ultimate Member for a while and it’s giving me a lot of issues. I’m looking forward to expanding my BB skills and this is a good project for me.



Our Newsletter

Our newsletter is personally written and sent out about once a month. It's not the least bit annoying or spammy.
We promise.

Try Beaver Builder Today

It would be totally gnaw-some if you could share this post with your friends.

Related articles

How to customize WordPress Website Header

How to Customize WordPress Website Header

Many elements make up a well-designed website. Your WordPress website header is particularly important because it’s the first thing visitors…

Read More...
How to use Header Templates in WordPress

How to Use a Header Template in WordPress

Customizing a WordPress header isn’t often an easy process. If you’re not comfortable editing theme files, there aren’t many ways…

Read More...
How to create a WordPress Author Page with Beaver Themer

How to Create a WordPress Author Page with Beaver Themer (In 5 Steps)

If you have multiple contributors to your blog, readers might want to find a full list of posts by a…

Read More...

Join the community

We're here for you

There's a thriving community of builders and we'd love for you to join us. Come by and show off a project, network, or ask a question.

Since 2014

Build Your Website in Minutes, Not Months

Join Over 1 Million+ Websites Powered By Beaver Builder.