In addition to managing contacts, you might also want to feature your staff or team members on your website – luckily, you can do this with Groundhogg.
Showcasing your team can help build trust with your audience and give a personal touch to your business. This tutorial will walk you through the easy steps to set up a staff showcase using Groundhogg.
Requirements:
- Groundhogg Core Plugin: Ensure Groundhogg is installed and activated on your WordPress site.
- Company Records Extension: This extension is required to manage company-related data.
Step 1: Set Up Custom Fields for Staff or Team Members
- Create a Custom Fields Tab:
- Go to Groundhogg > Contacts > any contact.
- Create a new tab and name it “Staff” or “Team” based on your preference.
- Click [ Add Custom Properties ] and add a Group for example “Details”.
- Add Custom Fields:
- Within the “Staff” or “Team” tab, create the following custom fields:
- Photo: Upload the team member’s profile picture via the Media Library and paste the link into this field.
- About: Add a brief bio or description of the team member.
- Facebook: URL to Facebook Account.
- Twitter/X: URL to X account.
- LinkedIn: URL to LinkedIn.
- Within the “Staff” or “Team” tab, create the following custom fields:
Step 2: Create a Tag for Staff or Team Members
- Create a Tag:
- Go to Groundhogg > Tags
- Create a new tag named “Staff” (or “Team”).
- Get the Tag ID: Hover over the newly created tag to reveal its ID. You’ll need this ID for the code in the next step.
Step 3: Populate Contacts with Staff Information
- Create New Contacts:
- Add a few contacts in Groundhogg, one for each staff or team member.
- Fill in the job title, company name, company website and the custom fields you created earlier, profile picture, about, Facebook, Twitter/X and LinkedIn.
- Upload the profile picture via the Media Library and copy the image link into the “Profile Picture” custom field.
Step 4: Display Your Staff on Your Website
- Add the Code:
- Copy the following code snippet and paste it into your theme’s functions.php file or use a code snippets plugin:
function display_groundhogg_staff_shortcode() {
// Create a new query to fetch contacts with the tag "staff"
$query = new \Groundhogg\Contact_Query( [
'tags_include' => [2] // Filter tag ID
] );
// Get the contacts from the query
$contacts = $query->get_objects();
// Start building the output
$output = '
<style>
.staff-container {
display: flex;
flex-wrap: wrap;
gap: 20px; /* Space between staff members */
}
.staff {
flex: 1 1 calc(33.333% - 20px); /* 3 columns, accounting for gap */
box-sizing: border-box;
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
background: #f9f9f9;
display: flex;
flex-direction: column; /* Stack items vertically */
margin-bottom: 20px;
}
.staff-profile-picture {
width: 100%;
height: 250px;
object-fit: cover;
background-color: #d3d3d3; /* Light gray background */
border-radius: 8px; /* Match the border-radius of the .staff block */
}
.staff-profile-picture.empty {
background-color: #d3d3d3; /* Light gray color when no image is present */
}
.staff-content {
margin-top: 10px; /* Space between profile picture and content */
}
.staff-author {
font-size: 1.2em;
margin: 0;
}
.staff-title {
font-size: 1em;
margin: 5px 0;
}
.staff-company {
font-style: italic;
margin: 5px 0;
}
.staff-social-links {
margin-top: 10px; /* Space above social links */
}
.staff-social-links a {
color: #000; /* Default color for icons */
font-size: 1.2em;
margin-right: 10px; /* Space between icons */
text-decoration: none;
}
.staff-social-links a:hover {
color: #007bff; /* Change color on hover */
}
.fa {
margin-right: 5px; /* Space between icon and link text */
}
.staff-about {
margin-top: 10px; /* Space between content and About section */
font-style: italic;
}
</style>';
// Add Font Awesome CDN for icons
$output .= '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">';
$output .= '<div class="staff-container">';
// Loop through each contact and display contact information
foreach ( $contacts as $contact ) {
$first_name = $contact->first_name;
$last_name = $contact->last_name;
// Fetch specific metadata
$profile_picture = $contact->get_meta('profile_picture'); // Retrieve the profile_picture
$company_name = $contact->get_meta('company_name'); // Retrieve company_name
$company_website = $contact->get_meta('company_website'); // Retrieve company_website
$job_title = $contact->get_meta('job_title'); // Retrieve job_title
$about = $contact->get_meta('about'); // Retrieve about
$facebook = $contact->get_meta('facebook'); // Retrieve Facebook URL
$twitter = $contact->get_meta('twitter'); // Retrieve Twitter URL
$linkedin = $contact->get_meta('linkedin'); // Retrieve LinkedIn URL
// Check if the profile picture exists and add it to the output
if ( $profile_picture ) {
$profile_picture_output = '<img src="' . esc_url( $profile_picture ) . '" alt="Profile Picture" class="staff-profile-picture">';
} else {
$profile_picture_output = '<div class="staff-profile-picture empty"></div>'; // Placeholder for empty profile picture
}
// Create the staff block
$output .= '<div class="staff">';
$output .= $profile_picture_output;
$output .= '<div class="staff-content">';
$output .= '<p class="staff-author">' . esc_html( $first_name ) . ' ' . esc_html( $last_name ) . '</p>';
if ( $job_title ) {
$output .= '<p class="staff-title">' . esc_html( $job_title ) . '</p>'; // Add job title
}
if ( $company_name ) {
$output .= '<p class="staff-company"><a href="' . esc_url( $company_website ) . '" target="_blank" rel="noopener noreferrer">' . esc_html( $company_name ) . '</a></p>'; // Add company name
}
if ( $about ) {
$output .= '<p class="staff-about">' . esc_html( $about ) . '</p>'; // Add About section
}
// Add social media links if available
if ( $facebook || $twitter || $linkedin ) {
$output .= '<div class="staff-social-links">';
if ( $facebook ) {
$output .= '<a href="' . esc_url( $facebook ) . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a>';
}
if ( $twitter ) {
$output .= '<a href="' . esc_url( $twitter ) . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>';
}
if ( $linkedin ) {
$output .= '<a href="' . esc_url( $linkedin ) . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin-in"></i></a>';
}
$output .= '</div>'; // .staff-social-links
}
$output .= '</div>'; // .staff-content
$output .= '</div>'; // .staff
}
// Close the container div
$output .= '</div>'; // .staff-container
// Return the output to be displayed in the shortcode
return $output;
}
// Register the shortcode
add_shortcode( 'display_groundhogg_staff', 'display_groundhogg_staff_shortcode' );
This code will pull in contacts with the “Staff” tag and display their information on a page or post using the shortcode [display_groundhogg_staff].
Step 5: Add the Shortcode to a Page
- Create a New Page:
- In your WordPress dashboard, create a new page (e.g., “Our Team” or “Meet the Staff”).
- Add a Shortcode block and insert [display_groundhogg_staff].
- Publish the page, and your staff showcase will be live on your site.
Conclusion
By following these steps, you can easily set up a staff or team showcase on your website using Groundhogg.
This not only adds a personal touch to your business but also makes it easier for clients and customers to connect with your team. Start highlighting your team members today!
Get started with Groundhogg!
To get started with Groundhogg, you can:
- Start a 14-day demo.
- Purchase a plan.
- Take the free quickstart course.
- Keep reading!
Have questions? Don’t hesitate to shoot us a message!
