Showcasing the people behind your website is a great way to earn customer trust. Previously, we showed you how to create a
simple staff list in WordPress. Some of our users wanted to extend their staff lists by adding links next to individual staff member leading to their profile pages. In this article, we will show you how to add staff member profile pages in WordPress.
Note: This tutorial requires some basic knowledge of WordPress themes, and HTML / CSS. Also note that since we will be editing theme files, it is highly recommended that you at least
backup your theme files before making any changes to them.
First thing you need to do is install and activate the
Simple Staff Lists plugin. Add your staff members by visiting
Staff Members » Add New. For more instructions on how to add staff members see
this tutorial.
Once you have added your staff members, you can display them by creating a new WordPress page and adding this shortcode:
[simple-staff-list]
So far we have created a simple staff list page, listing all the staff members.
The next part is to create a single page for each staff member to display their complete profiles.
The simple staff lists plugin creates a
custom post type called
staff-member to store staff member profiles. By placing the shortcode on a page, we have turned that page into a
custom post type archive page for the staff-member post type.
In WordPress each post gets its own single page no matter which post type it is stored in. By default the plugin does not show that single page. In the next steps, we will modify our WordPress theme to display the single staff member page.
First you need to go to Staff Members » Templates. Replace the template you see under the Staff Loop Template with this code:
03 | <img class="staff-member-photo" src="[staff-photo-url]" alt="[staff-name] : [staff-position]"></a> |
04 | <div class="staff-member-info-wrap"> |
06 | [staff-name-formatted]</a> |
07 | [staff-position-formatted] |
Don’t forget to replace example.com with your own domain name.
Now open your staff list page, and you will see that the staff profiles and photos will be linked to their individual profile pages. However clicking on these pages will only show you a page with the Staff Member’s name on it.
Adding a Staff Member Profile Template in Your WordPress Theme
In order to display your single staff member, you need to create a template in your WordPress theme to handle the staff member post type. Start by creating a new file in your WordPress theme directory (wp-content/themes/yourthemename/).
Name this file single-staff-member.php. Using custom post type name with the word single, we have created a single post template for staff member custom post type.
This staff member template is still empty, so lets fill it. Open your theme’ssingle.php file and copy paste its content into single-staff-member.php template.
One issue that you will come across when copying contents of your single.php file is that some themes may be using content template in the single.php file. For example, the default Twenty Thirteen theme uses content templates in single.php file like this:
1 | <?php get_template_part( 'content', get_post_format() ); ?> |
If your theme is using template parts, then you would need to open the template file (content.php) and copy paste its content in you single-staff-member.php file, replacing the get_template_part line.
At this point your single-staff-member.php file will be exactly the same as your single.php file. Now we need to prepare it, so that it can display the fields from staff members.
Here is our single-staff-member.php file, it is based on Twenty Thirteen’s single.php file. First take a look at the code.
12 | $custom = get_post_custom(); |
13 | $t_name = get_the_title(); |
14 | $name_slug = basename(get_permalink()); |
15 | $title = $custom["_staff_member_title"][0]; |
16 | $email = $custom["_staff_member_email"][0]; |
17 | $phone = $custom["_staff_member_phone"][0]; |
18 | $fax = $custom["_staff_member_fax"][0]; |
19 | $bio = $custom["_staff_member_bio"][0]; |
20 | $prof = $custom["_staff_member_prof"][0]; |
21 | $fb_url = $custom["_staff_member_fb"][0]; |
23 | $li_url = $custom["_staff_member_li"][0]; |
24 | if(has_post_thumbnail()){ |
26 | $t_photo_url = wp_get_attachment_url( get_post_thumbnail_id() ); |
27 | $t_photo = '<img class="staff-member-page-photo" src="'.$t_photo_url.'" alt = "'.$title.'">'; |
32 | $email_mailto = '<a class="staff-member-email" href="mailto:'.antispambot( $email ).'" title="Email '.$name.'">'.antispambot( $email ).'</a>'; |
34 | <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> |
35 | <header class="entry-header"> |
39 | <?php while ( have_posts() ) : the_post(); ?> |
41 | <h1><?php the_title(); ?></h1> <!-- This is the Standard page title --> |
43 | <h3><?=$title?></h3> <!-- This is the Staff Memeber Title --> |
45 | <?=$t_photo?> <!-- This is the Staff Memeber Photo --> |
47 | <p class="staff-member-bio"><?=$bio?></p> <!-- This is the Staff Memeber Bio --> |
49 | <p><a href="<?=$fb_url?>">Facebook</a> | <a href="<?=$tw_url?>">Twitter</a></p> |
56 | <?php get_sidebar(); ?> |
In the first part of the code right after loading the header, we have gathered data from our custom post into variables. Then inside the loop we have used those variables to display fields from the custom post type.
That’s all. You may have to adjust the appearance of your profile pages using CSS. We have used this CSS to fit the staff member bio around the photo.
1 | img.staff-member-page-photo { |
We hope this article helped you add staff member profile pages in WordPress. Feel free to play around with the templates to get your desired result.
If you liked this article, then subscribe to our
YouTube Channel for more WordPress video tutorials.
