Search

Integrate Our Team with your theme for full archive / single page support

Our team is an intentionally lightweight plugin. It’s designed to satisfy the need to display short team member bios in any page via shortcode or widget. For that reason we’ve not included a template engine or any other ‘advanced’ functionality so as to stay true to the original purpose of the plugin.

But that’s not to say it can’t do more with a little customisation. This tutorial will guide you through the process of adding more comprehensive integration with your theme, enabling you to display team member archives and single pages that include full team member details.

Preparation ↑ Back to Top

As with the majority of customisations you should be using a child theme. This one is no exception. Using a child theme keeps your customisations in one place and means you can safely update the parent theme / plugin without fear of losing your work. We wont go into detail about creating child themes here, you can read about that in the WordPress Codex.

If you’re not already, now is a good time to familiarise yourself with the WordPress Template Hierarchy.

It goes without saying that you should also use the latest version of your theme, the Our Team plugin and WordPress itself.

Creating the Team Member content template ↑ Back to Top

First of all let’s create a template that will display the team member details (Their name, bio and any other applicable data such as role, url etc). It will be pulled into archives, single pages and is the core of this tutorial.

In this example we’ll use generic markup focusing rather on the code that pulls the details in. You can of course tweak the markup to your preference later.

In your child theme create content-team-member.php and populate it with the following code:

Here you can see how we pull in data such as the team member role and email address. This is then processed and displayed in the template.

Team Member Archives ↑ Back to Top

Now that we’ve created the file that will display team member content, we need to actually tell WordPress to use it in the appropriate situations. First we’ll tackle archives. This step can be tricky as all WordPress themes are slightly different and the method may vary slightly, but this will cover the vast majority.

The WordPress Template Hierarchy dictates that when viewing a custom post type archive, it will look for an archive-$posttype.php template file before falling back to the default archive.php.

A new template

In your child theme create archive-team-member.php. Now open the parent themes archive.php (or, if it doesn’t exist index.php), copy the content and paste it into your newly created archive-team-member.php file.

Examine this code carefully as the tutorial will fork slightly at this point depending on the method the theme uses to display posts. There are 3 likely ways this template displays post content. You will find one of the following:

  1. get_template_part( 'content', get_post_format() );
  2. get_template_part( 'loop' );
  3. Neither – hard coded content display

There are three courses of action depending on what you find.

get_template_part( ‘content’, get_post_format() );

If you found this, the template is already calling the content template file and the integration will be simpler. In this case, all you need to do is replace

get_template_part( 'content', get_post_format() );

With:

get_template_part( 'content', 'team-member' );

This will tell the archive page to load our content-team-member.php template file.

get_template_part( ‘loop’ );

If you found this the process is still simple, but involves an extra step. First of all replace

get_template_part( 'loop' );

With

get_template_part( 'loop', 'team-members' );

Next, in your child theme create a new file named loop-team-members.php. Open the parent themes loop.php, copy the contents and paste them into your newly created loop-team-members.php. This file should now contain:

get_template_part( 'content', get_post_format() );

that we were looking for originally. You can now simply replace this with:

get_template_part( 'content', 'team-member' );

Hard coded template

If you found neither of the above it is likely the code that displays the post content is already present. Look for things like post_class();, the_title(); or the_content();. This will likely be wrapped in an article tag. If this code is present, remove it (including the wrapping article tag and replace it with:

get_template_part( 'content', 'team-member' );
Important: Remember to make these changes in your new archive-team-member.php template file, not the parent themes archive.php.

Tidy up

That’s actually it for the archives! If you visit http://yoursite.com/team-members you should see an archive of team members including all their data / imagery. You may want to style these archives but that is beyond the scope of this tutorial. The last thing you might want to do (for the archives) is tidy your archive-team-member.php template file. By tidy I mean amend anything that was pasted in from the origin that is no longer appropriate or makes sense. Look at the comment at the top of the file describing what it does, for example – this will very likely need to be edited.

Single Team Member Pages ↑ Back to Top

Having completed the steps necessary to prepare team member archives you’ll be pleased to know that preparing the single pages follows an almost identical process.

A(nother) new template file

Just as we created a new archive template, we now need to create a new single post template. In your child theme create single-team-member.php. Following the archive process open the parent themes single.php file, copy the content and paste it into your new template file.

Find and replace

Again, this process is virtually the same as the archive, you are however only likely to find two results here instead of three.

  1. get_template_part( 'content', get_post_format() );
  2. Hard coded content display

The procedure is the same again. Replace the code used to display the post content with:

get_template_part( 'content', 'team-member' );

You may also want to remove things like comments. Find and remove comments_template() to do so.

Finishing Touches ↑ Back to Top

That should be it! Team member archives and single pages will now display all appropriate content and data. The only thing left to do is tidy up / tweak the markup in content-team-member.php and apply any styling.

FAQ ↑ Back to Top

My parent themes archive.php and single.php don’t include post content in any way listed in this tutorial, help!

This tutorial will cover the majority of themes, but some do things differently. Unfortunately we cannot cover every single eventuality. The principle however remains the same and the process should work if applied relevantly. You still need to create the new template files, you should still paste the code from the parent theme in and replace whatever is being used to output post content with the call to execute the content-team-member.php template file.

I’ve done all this but it looks rubbish!

It is not the intention of Our Team to conflict with themes by including design. Nor the purpose of this tutorial to teach design and CSS. You will need to apply layout and style yourself, in the theme (or child theme), where it is intended to be.

Back to the top