If you’re using WordPress and Genesis to create a company website, you or the client will likely need a way for team members to be added, removed, and easily organized from the dashboard. Because Genesis sites are pretty minimalistic and independent artist centric, they do not typically have this functionality built in the way other premium wordpress themes do, so let’s add it to get our genesis theme up to snuff.
Step 1: Add Advanced Custom Fields Plugin
Upload the Advanced Custom Fields plugin and activate.
Activating the plugin adds “Custom Fields” to the sidebar in your wordpress dashboard.
Step 2: Create a field group and add your custom fields
You’ll need to add a new field group and then customize it with the fields you want outputted for your team members on your team page:
Step 3: Register Team Post Type and custom fields in functions.php
https://gist.github.com/abfdcba74ccb58a662b5
Step 4: Build your team profiles
Once you’ve created your field group you should be able to start building your team profiles just like you would with a standard wordpress post, by going to the “Team” sidebar menu item, and hitting the “Add New” button that we created by registering the custom field group.
Step 5: Create a page template for outputting your custom post fields
Now that we have our field group, custom fields and team data added, we’ll need to create a page template that outputs that data into a pretty page, ideally following the design structure and layout of our website. So I like to start with the landing page template that comes with the theme and delete any “remove_action” lines of code and build out from there. For most genesis themes, the landing page template is a basic post template relying on the genesis loop with a lot of actions (distractions) removed.
So we’re going remove the “remove_actions” and change any instance of the theme name and template name with “team”, add our custom fields for output, wrap them in divs and decide what actions to keep and remove from our default genesis loop by creating a custom loop:
https://gist.github.com/1536bfde93fbc82b2bfb
Step 6: Add our css customizations to the stylesheet.css
https://gist.github.com/ca9af2fcba0c73f1c5c4
Step 7: Make the team members re-order-able
By simply downloading, installing, and activating the Post Types Order plugin, you can drag-and-drop custom posts (team members) into the order you desire. That way the client will have more control over the order of team members in a given office from the wordpress dashboard.
I hope you found this helpful. If you have any trouble, drop a comment.
