• Skip to primary navigation
  • Skip to main content

alansari.io

by OMAR AL-ANSARI

  • Home
  • About
  • Portfolio
  • Blog
  • Code
  • Contact

Create Meet the Team Page Using Custom Post Types in Genesis

December 15, 2016 by Omar Al-Ansari 2 Comments

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.

Meet the Team page - Archive page

Here is how it looks in the single page view.

Meet the Team page - single

First: Create Custom Post Type

Add the following code to your functions.php file

functions.php
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
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)

Team Members Advanced Custom Fields

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

page-team-members.php
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

style.css
CSS
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.

Sources:
  • Sridhar Katakam
  • CSS Tricks

Filed Under: Code Snippets Tagged With: Genesis, Snippets, tutorial

Reader Interactions

Comments

  1. Tobi says

    October 29, 2018 at 5:36 PM

    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

    Reply
  2. Tobias says

    October 29, 2018 at 8:21 PM

    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 :)!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Twitter
  • Facebook
  • YouTube
  • GitHub

Copyrights © 2016–2021 · alansari.io · Proudly powered by WordPress and Genesis Framework