We will be creating meet the team page in a straight forward way using custom post types. A simple use for it can be a board of directors page for a corporate website. There are very few articles that show you how to handle this. So I’ve decided to write down a tutorial for myself to look at if I require in the future and everyone to benefit everyone as well.
So here is the final look that I am looking to achieve for the archive page.
Here is how it looks in the single page view.
First: Create Custom Post Type
Add the following code to your functions.php file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<?php // Only include the below code. // Team Members Custom Post Type if ( ! function_exists('io_team_members_post_type') ) { // Register Custom Post Type function io_team_members_post_type() { $labels = array( 'name' => _x( 'Team Members', 'Post Type General Name', 'genesis_sample' ), 'singular_name' => _x( 'Team Member', 'Post Type Singular Name', 'genesis_sample' ), 'menu_name' => __( 'Team Members', 'genesis_sample' ), 'name_admin_bar' => __( 'Team Member', 'genesis_sample' ), ); $args = array( 'label' => __( 'Team Member', 'genesis_sample' ), 'description' => __( 'Team Member Description', 'genesis_sample' ), 'labels' => $labels, 'supports' => array( 'title', 'editor', 'thumbnail', ), 'hierarchical' => false, 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'menu_position' => 20, 'menu_icon' => 'dashicons-businessman', 'show_in_admin_bar' => true, 'show_in_nav_menus' => true, 'can_export' => true, 'has_archive' => true, 'exclude_from_search' => false, 'publicly_queryable' => true, 'capability_type' => 'page', ); register_post_type( 'team_members', $args ); } add_action( 'init', 'io_team_members_post_type', 0 ); } //Add custom fields to team member post type add_action( 'genesis_entry_header', 'io_team_members_custom_fields' ); function io_team_members_custom_fields() { $position = get_field('position'); $twitter_url = get_field('twitter'); $facebook_url = get_field('facebook'); $linkedin_url = get_field('linkedin'); $email = get_field('email'); $image = genesis_get_image( 'format=url&size=team-members-thumbnails' ); if ( is_singular( 'team_members') || is_post_type_archive('team_members') ) { // Remove post info remove_action( 'genesis_entry_header', 'genesis_post_info', 12 ); // Remove entry meta from entry footer remove_action( 'genesis_entry_footer', 'genesis_post_meta' ); } if ( is_singular( 'team_members' ) ) { printf('<div class="team-members-fields"><div class="team-member-image"><a href="%s" rel="bookmark"><img src="%s" alt="%s" /></a></div> <div class="member-position-single">%s</div><div class="team-social-buttons"> <div class="member-twitter-single"><a href="%s" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></div> <div class="member-facebook-single"><a href="%s" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></div> <div class="member-linkedin-single"><a href="%s" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a></div></div> <div class="member-email-single"><a href="matilto:%s"><i class="fa fa-envelope-o" aria-hidden="true"></i> Contact Me!</a></div></div> ' , get_permalink(), $image, the_title_attribute( 'echo=0' ), $position, $twitter_url, $facebook_url, $linkedin_url, $email); } elseif ( is_post_type_archive('team_members') ) { // Remove the post content (requires HTML5 theme support) remove_action( 'genesis_entry_content', 'genesis_do_post_content' ); printf('<div class="team-members-fields-archive"><div class="team-member-image-archive"><a href="%s" rel="bookmark"><img src="%s" alt="%s" /></a></div> <div class="member-position-archive">%s</div><div class="team-social-buttons-archive"> <div class="member-twitter-archive"><a href="%s" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></div> <div class="member-facebook-archive"><a href="%s" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></div> <div class="member-linkedin-archive"><a href="%s" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a></div></div> <div class="member-email-archive"><a href="matilto:%s"><i class="fa fa-envelope-o" aria-hidden="true"></i> Contact Me!</a></div></div> ' , get_permalink(), $image, the_title_attribute( 'echo=0' ), $position, $twitter_url, $facebook_url, $linkedin_url, $email); } else { return; } } //* Enqueue Font Awesome add_action( 'wp_enqueue_scripts', 'io_enqueue_font_awesome' ); function io_enqueue_font_awesome() { wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' ); } |
So let us look at the code that we have created above. We began creating our CPT which will be used to create each team member in individual posts. We only needed to load three fields, the title, the content, and the featured image, so we only loaded those on the CPT.
We then created a new function to load the new custom fields and output them in two different ways for the archive and the singular page. We lastly loaded font awesome in the last function.
Second: Create Custom Fields using ACF
You will require to install and activate Advanced Custom Fields.
Create the custom fields you are going to display on the page. For an easy way to do this, you can import the following file into your installation. (Link)
Once you have finished creating the custom fields, you will need to ensure they are linked to the correct post type which we have created in the first step.
Third: Create Custom Page Template
You will need to create a new file in your child theme folder. I called it io-page-team-members.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<?php /* Template Name: Team Members */ // Force full width content add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); add_action( 'genesis_after_header', 'io_team_members_page_title' ); function io_team_members_page_title() { echo '<div class="team-members-title"><h1><span class="line-center">'; echo 'Meet Our Team'; echo '</span></h1></div>'; } add_filter( 'body_class', 'io_team_members_body_class' ); /** * Adds a css class to the body element * * @param array $classes the current body classes * @return array $classes modified classes */ function io_team_members_body_class( $classes ) { $classes[] = 'team-members'; return $classes; } remove_action( 'genesis_loop', 'genesis_do_loop' ); add_action( 'genesis_loop', 'io_team_members_do_loop' ); /** * Outputs a custom loop * * @global mixed $paged current page number if paginated * @return void */ function io_team_members_do_loop() { global $paged; // accepts any wp_query args $args = (array( 'post_type' => 'team_members', 'order' => 'DESC', 'orderby' => 'date', 'paged' => $paged, 'posts_per_page' => 9 )); genesis_custom_loop( $args ); } genesis(); |
Fourth: Add the following to your style.css file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 |
/* # Team Members Page ---------------------------------------------------------------------------------------------------- */ .team-members .entry { padding: 40px; } .team-members .entry-title { font-size: 30px; font-size: 3.0rem; text-align: center; } .team-members-title { display: block; padding-top: 60px; } .line-center{ margin: 0; padding: 0 10px; background: #eee; display: inline-block; } .team-members h1{ text-align: center; position: relative; z-index: 2; } .team-members h1:after{ content: ""; position: absolute; top: 50%; left: 10%; right: 10%; border-top: solid 1px #dadada; z-index: -1; } .team-members-fields { display: block; float: right; padding-left: 20px; } .team-member-image { display: block; margin: 0 auto; } .team-member-image img { border-radius: 50%; } .member-position-single { display: block; margin: 0 auto; text-align: center; } .team-social-buttons{ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-flex-flow: row wrap; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .member-twitter-single, .member-facebook-single, .member-linkedin-single { flex-basis: 20%; -webkit-flex-basis: 20%; text-align: center; } .member-email-single { display: block; text-align: center; font-size: 16px; font-size: 1.6rem; } .member-email-single a { text-decoration: none; } .team-members-fields-archive { display: block; } .team-member-image-archive { display: table; margin: 0 auto } .team-member-image-archive img { border-radius: 50%; } .team-member-image-archive img:hover { opacity: .9; } .member-position-archive { display: table; margin: 0 auto; } .team-social-buttons-archive { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-flex-flow: row wrap; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .member-email-archive { display: table; margin: 0 auto; font-size: 16px; font-size: 1.6rem; } .member-email-archive a { text-decoration: none; } .member-twitter-archive, .member-facebook-archive, .member-linkedin-archive { flex-basis: 10%; -webkit-flex-basis: 10%; text-align: center; } .fa-twitter { color: #1da1f2; } .fa-facebook { color: #3b5998; } .fa-linkedin { color: #0077b5; } .fa-twitter:hover, .fa-facebook:hover, .fa-linkedin:hover { opacity: .9; } /* Create grid using Flexbox */ .team-members .content { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-flex-flow: row wrap; margin-bottom: 60px; } .team-members .entry { flex-basis: 33.333333%; -webkit-flex-basis: 33.333333%; margin: 0; border: 10px solid #eee; } @media only screen and (max-width: 1023px) { .team-members .entry { flex-basis: 49%; -webkit-flex-basis: 49%; } } @media only screen and (max-width: 860px) { .team-members .entry { flex-basis: 100%; -webkit-flex-basis: 100%; } } |
In the above CSS code, we have used FlexBox to manage the grid and what’s really exciting about it is it handles equal heights for you. There is no more need for any Javascript to be used to handle that separately.
Fifth: Create the new Meet the Team page
Create a new page and use the page template we just created.
Lastly: Create the profiles
Create the profiles of the board members.
You just need to ensure that your images are squared for them to show in a perfect circle. Please feel free to leave your comment down below if you require any support.
If you found this tutorial useful, then please share it so others can also benefit from it.
hi there! Really nice article.
Is it possible that the custom page template “io-page-team-members.php” isn’t working anymore? I copied the file to my agency pro child theme and choose the template in one page. The members are loaded, but no styling or other things. Maybe it has something to do with Gutenberg?
Best,
Tobi
Hi again.
I found my mistake. All is working perfect.
What do you think about styling the archive page like the team template? So you won’t need an extra side any longer…
How can I add this code to the team members archive page:
add_filter( ‘body_class’, ‘io_team_members_body_class’ );
/**
* Adds a css class to the body element
*
* @param array $classes the current body classes
* @return array $classes modified classes
*/
function io_team_members_body_class( $classes ) {
$classes[] = ‘team-members’;
return $classes;
}
Thank you :)!