Create The Team page like the demo

This will require some careful setup because you will need to use the “Text” tab of the content editor when you do this page. The reason is because you need to be careful not to delete any of the HTML code that this layout uses. The good news is that once you create your page, you won’t have to worry about it later. I’m also going to show you how you can create this page with two methods, one using just a page and the other is using a page, but using text widgets to create each team member’s box of info.

NOTE:This year, I plan on creating shortcode plugins to make this process much easier…no more playing around with HTML code.

The Team page is made up of HTML code snippets that comes with your original downloaded theme package. You will find all the snippets in a folder called “snippets“. So the page we will be making looks like this:

the team page screenshot

Method 1 – Create a Team Page

  1. Go to Pages >> Add New
  2. Title your page, and then start off with some written content.
  3. Click “Publish” or save it as a draft.
  4. With your page still open in the editor, switch to the “Text” tab view. This will let you work in HTML code and allow you to see the code. Paste the code you see below into the page below your text content.

CODE SNIPPET

When you copy this code, make sure you paste it into your content editor’s “Text” view. The part you see Your Content Here. is the part we will replace with the next step. Each one will get a Team box snippet of code. This is where things might feel a bit scary, but take it one step at a time and you will be fine. As you add this and make changes to the sample content by replacing it with your own, I recommend you keep your page saved constantly.

<div class="row">
<div class="col-md-4">Your content here.</div>
<div class="col-md-4">Your content here.</div>
<div class="col-md-4">Your content here.</div>
</div>

Method 1 – Setup Your Team Member Boxes

 This next step has a lot of code for each member box, so once again, take it slow and copy the code and paste it into the first part of the code you see above…replace the Your content here. with the team code.

The Team code will be found in the snippet folder from your original theme downloaded package. The file you want is named: team-box.txt

The code looks like this:

<div class="image-box"> <p><img src="http://www.yourwebsite.com/photo.jpg" alt="Photo" /></p> <div class="image-box-text"> <div class="team-header"> <h3>Sarah Lorem</h3> <p class="team-position">Creative Director</p> </div> <p class="team-info">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore velit esta magna aliquam erat volutpat.</p> <div class="team-social"><a href="#" target="_blank">[fa icon="fa-facebook"]</a><a href="#" target="_blank">[fa icon="fa-twitter"]</a><a href="#" target="_blank">[fa icon="fa-google-plus"]</a></div> </div> </div> </div>

Update the Content

When you paste that code into your page (while in the text code view), start replacing the sample content with your own:

  • IMG SRC: This ia a link to your photo – Replacing this: http://www.yourwebsite.com/photo.jpg
  • H3 Heading: Sarah Lorem
  • Team Position: Creative Director
  • Team Info: Lorem ipsum….volutpat.
  • Team Social: Change the # to actual links to the profiles relating to each of the social links of Facebook, Twitter, Google+, etc. You can remove any that you don’t want, or even add new ones (see further below)

You will be doing this for each Team box you paste in. Once done, make sure your page is saved, and then you can check the preview of your page.

 

How to Do this without the Page

This method might be easier for you, because even though you will make a page and have some content in it, the actual Team Boxes will be in Widgets (sidebars). This helps prevent any chance of code being messed up because this code will be in a “Text Widget“.

Method 2 – Create a Team Page

  1. Go to Pages >> Add New
  2. Title your page, and then start off with some written content.
  3. Click “Publish” 

Method 2 – Add Team Boxes to a Text Widget

This is where things get a bit easier compared to Method 1. 

  1. Go to Appearance >> Widgets
  2. Drag a text widget into the sidebar position called “Featured Bottom 1
  3. Title your Widget (more on this in a moment)
  4. The  “Team Box” code snippet you see above, copy that and paste it directly into the text field of the text widget.
  5. Now you can update the content just like it’s listed above. You will add the photo link, change the H3 heading, Team position, etc.
  6. Publish the widget to the page you want this to show (more on this in a moment).
  7. Click Save
  8. Repeat for the second Team Box, but drag the widget into the sidebar called “Featured Bottom 2“, then for “Featured Bottom 3“, and “Featured Bottom 4” …if you want 4 team members on one row.

Title Your Widget but Hide the Title

This is where you need a plugin called Hide Widget Titles by Stephen Cronin. Install it, and then put an exclamation mark ! just before the title: !Hide Your Title

Publish Your Widget to the Team Page Only

This is where you can use the Widget Visibility from Jetpack or a plugin called Display Widgets.