The Infinity Pro theme from Genesis Framework is a great theme for small business and startups. Among many great features it boasts, I quite like the team page.
In this post, we will learn how to replicate the team page in Infinity Pro and incorporate into Genesis Sample theme. Basically, we will create a custom page template
Here are the steps:
Step #1: Create a Custom Template for Team
Create a template in your active theme folder and name it page_team.php. Add the following code to the blank template file.
Step #2: Create a New Page and Apply the Team Template
Create a new page for your team, and name it whatever you like (My Team, Our Team etc). Apply the team template and save it.
Step #3: Create Four Separate Pages for Team Members and Attribute them to Parent Team Page
Create four separate pages for your team member, use name of your team member as the page title, add content to the body as necessary, and a featured image (500 x 500). You can also add the image above the body content if you like. Click on Screen Options atop the page, check “Custom Fields” option. In the Custom Fields under the text editor, click on “Enter New”, and inside the “Name”, enter “team_title” without quotes. Then, enter a position such as CEO or Supervisor inside the “Value” text box. Make sure you save it. Click on the dropdown menu under parent in the Page Attributes widget on your right, and choose team. So, essentially, your team member page is being assigned as a child page under parent page, i.e, Team. Repeat this for three more team member page, and then hit publish.
Note: Please, note that you needn’t create a custom field for the subsequent pages. You just need to choose form the dropdown menu in the Custom Fields, and enter a specific position inside the value text box.
Step #4: Add CSS and Go Live
Add the following CSS either your primary CSS file or custom CSS file such as the one under WordPress Customizer.
/* Team CSS *//* Team CSS */
.team-page .content .entry { padding: 0; background: transparent;}
.team-page .entry-header { text-align: center;}
.team-page h2.entry-title { font-size: 24px; font-size: 2.4rem; margin-bottom: 0; margin-top: 20px;}
That’s all there is to it. Please, let me know if you have any questions.