Pods is yet another glorious WordPress plugin that allows you to take this website platform to new heights. Pods is built to extend the functionality of post types and fields built into WordPress or add new ones entirely. This blog post will teach you how to use Pods to connect the internal information you need for users of your WordPress application to customer-facing information you can display on your site. By the time you’re done reading this, you’ll know exactly how to create a “team member” page with Pods.
Get Started with Pods
Begin by adding the Pods plugin to your WordPress site the same way you would add any other plugin. You’ll know that you’ve done this correctly when the Pods Admin option appears in the sidebar of your WordPress dashboard. From here, hover over the Pods Admin option and select Add New.
There are two different approaches to creating this page. One method involves “extending” data for Users that can log into your WordPress site. This method will work if all your team members are able to log into your website, or if you want to display a list of authors.
If you want to go that route, click Extend Existing. Use the dropdown menu to select Users and then click Next Step.
If you do not want your team members to be connected to your WordPress users, you would click Create New and select Custom Post Type and fill out the Singular Label and Pod Name fields as you see fit. That’s the route we’ll take in this article.
You now have the option to add fields to this page from the list Pods has available. Like oh so many things with WordPress, what you do from here is totally up to you, but you may want to include basic information for your users such as an address or phone number. Click Add Field and enter the information needed to describe the field you are creating. Use the Field Type dropdown to control what input is accepted as valid. This is helpful when you want to require a Zipcode or a properly formatted date. Here’s an example of how to add a birthday field:
Note that there are many different field types available to you depending on the exact information you want to collect.
If you need to require that a field contains predefined information, you can use Add Field and set Field Type to Relationship to access predefined variables such as US States.
Now let’s add the option for your team members to upload pictures of their smiling faces. Use the Add Field button to create a new field and change the Field Type type to Avatar. If you want to prevent users from being able to choose existing images from your library, go to Advanced Field Options and change the Avatar Uploader dropdown to Plupload. Definitely set a limit on the size of the image they can upload as their headshot. In the GIF below you can see I set the limit to 1MB, even this is probably excessive, but it allows some wiggle room if your users are not the most experienced with exporting photos for web. This limitation is super useful because oversized images slow your site down more than almost any other factor.
Repeat the steps above for the information you feel is important to require of your users. Note that the fields will appear on your page in the same order they appear in the editor so make sure they are in a logical order (i.e.make sure address fields follow conventional formatting).
You may want to restrict users from editing certain fields while still making them available as part of your team member page. You can achieve this by using the Advanced tab in the field editor. You can either select Restrict access to Admins to prevent basic users from being able to access the chosen field on their own.
Create the Team Member Page
Now that Pods is set up you should see the name of your team member Pod in the Admin side panel next to a thumbtack icon that looks exactly like the icon used beside Posts. Note: this only applies if you are working with the Custom Post Type (like we are), and not the Extend Existing option that I mentioned earlier. You will add your team members under this new icon and then use the information entered to create the team member page. Hover over your Pod Name next to the thumbtack and select add new.
You will be brought to a New Post page like the one above. First, scroll down below the textbox and fill in the new Pods fields that are available to you.
After that, use Pods shortcodes to display the information you wish to be a part of the team member’s info page. For the two fields that I have used the Pods shortcodes are as follows:
Note that Pods shortcodes do not use capitalization and any spaces are replaced with the underscore ( _ ). Be sure to title each page using the name of each of your team members. This will make the next step easier especially if you have a large team.
The final step to turning this Pods field into a functional team member page is to create the page itself. From your WordPress Dashboard hover over Pages and select Add New. Use the Pods Shortcode dropdown to select Display a field from a Single Pod item. Fill out the text boxes with the appropriate info for Pods to auto-generate a shortcode which will populate your desired fields. The ID/Slug field should match the name of the post for each of your team members. This is where it comes in handy to only use the person’s name for their team member page. Typing this in is much easier if you only have to remember their name, not a complex URL! I recommend populating this page with avatars. The shortcode for this will look like this:
The flow looks like this:
Preview it and then publish the page!
Pods is a WordPress plugin that allows you to create new fields and/or extend the fields already available in WordPress. This makes it a great tool for creating a team member page because it allows you to collect relevant information or media such as headshots from your users and automatically apply it to a team page. Like all things WordPress, you’re able to customize Pods to your liking and you can set limitations on your users to ensure a good experience for visitors to your site. And of course, you can have fun while you do it!
P.S. If you don’t recognize who I added to my Team Members Page, look up Ada Lovelace and Grace Hopper! You’ll be glad you did.