Adding a partner logos section can make your website more trustworthy, professional, and attractive to potential clients and collaborators. This tutorial will walk you through the easy steps to display your partner logos 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: Populate Contacts with Company Information
Create New Companies:
- Add a few companies in Groundhogg, one for each partner
- Fill in the company name, website URL and upload a logo
Step 2: Retrieve the company IDs you want to display
Hover over the Company Name or the Edit button for the company and a Link will be presented at the bottom of the browser with the ID. In the screenshot below it’s 7
Step 3: Display the Partner Logos 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:
use Groundhogg\DB\Query\Table_Query;
function display_logos_shortcode($atts) {
// Extract the 'id' attribute from the shortcode, if provided
$atts = shortcode_atts(
array(
'id' => '', // Default is an empty string
),
$atts
);
// Prepare the query arguments
$args = array();
if ( ! empty( $atts['id'] ) ) {
$ids = array_map('intval', explode( ',', $atts['id'] )); // Ensure IDs are integers
$args['ID'] = $ids;
}
// Query the companies
$query = new Table_Query( 'companies', $args );
$companies = $query->get_objects();
// Start building the output
$output = '
<style>
.logo-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.logo {
flex: 1 1 calc(20% - 20px); /* 5 columns, accounting for gap */
box-sizing: border-box;
padding: 10px;
background: #f9f9f9;
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.logo img {
width: 100%;
height: 150px;
object-fit: fill;
filter: grayscale(100%);
opacity: .3;
}
.logo.empty {
background-color: #d3d3d3; /* Remove or keep depending on your needs */
}
.logo-content {
margin-top: 10px;
text-align: center; /* Center align the link */
}
</style>';
$output .= '<div class="logo-container">';
// Loop through each company and display company details
foreach ( $companies as $company ) {
// Check if the company ID matches the provided IDs
if ( ! in_array( $company->ID, $ids ) ) {
continue; // Skip this company if it doesn't match the IDs
}
$website = esc_url( $company->domain );
$logo = $company->get_meta('logo');
// Prepare logo output
$logo_output = $logo ? '<img src="' . esc_url( $logo ) . '" alt="Company Logo">' : '<div class="logo empty" aria-label="No logo available"></div>';
// Build the HTML for each company
$output .= '<div class="logo">';
$output .= '<div class="logo-content">';
$output .= '<a href="' . $website . '" target="_blank" rel="noopener noreferrer">'. $logo_output .'</a>';
$output .= '</div>'; // .logo-content
$output .= '</div>'; // .logo
}
$output .= '</div>'; // Close the container div
return $output;
}
add_shortcode( 'display_logos', 'display_logos_shortcode' );
Step 4: Add the Shortcode to a Page
Add a Shortcode block on any page and insert [display_companies id=”7,8,9,10,11″]. Enter the IDs separated by a comma.
Conclusion
By using Groundhogg CRM to manage your contacts, you can unlock even more possibilities with the Company Records Extension and a little custom code- such as adding partner logos!
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!
