Displaying a Home and Away Sports Team Event Grid
Displaying a season’s upcoming and past events in an *ahem* athletic way is a crucial step in setting up your sports team’s WordPress website.
SportsPress Pro has a number of calendar, list, and table modules available and version 2.6 added a brand new way to showcase matches: a sports team event grid called the Results Matrix.
Today, I’m going to show you how to set up the Results Matrix using SportsPress Pro so that you can share your future events and results with fans in an engaging and professional sports team event grid format.
Kick Things up a Notch
SportsPress is the leading WordPress sports and league management software designed to help sports teams have a sharp online presence without too much unnecessary effort or hassle.
SportsPress doesn’t require any coding and is data-driven, with statistical automation, and impressive graphic displays.
SportsPress Pro has all the fabulous functionality of the free SportsPress plugin, but also kicks it up another notch with tournament modules, sponsor galleries, and features like an animated scoreboard as well as the Results Matrix to display home and away sports events in a grid.
For details, check out Does Your Sports WordPress Website Really Need SportsPress Pro?
To properly enable and customize the Results Matrix, you’ll need to have a few things set up first.
Welcome to the (Results) Matrix
As previously mentioned, version 2.6 of SportPress Pro has introduced the Results Matrix as a way to display home and away events in a dynamic, interactive sports team event grid.
Sometimes space on a webpage is limited and this matrix is a fantastic way to condense all the data into a power-packed module.
Setting up the Matrix
To insert a matrix into your website, you need to go through the Calendar module. The Result Matrix is a calendar configured into a Matrix format so much of the creation is the same as if you were creating a calendar.
First, make sure you have enabled the functionality.
Go to the SportsPress tab in your admin menu (or your team name if you customized the WordPress admin with your sports branding) and under the Event section in the Modules tab, make sure both the Calendars and Results Matrix checkboxes are selected to enable calendar feature.
This ensures that options will appear for you to create and edit both Calendars and Results Matrixes. If they’re not checked, you’ll be unable to create anything.
Once that’s done, click Save Changes at the bottom of the page.
Creating Your Results Matrix
To create a sports team event grid, start by going to Events > Calendars in the admin menu. You’ll be redirected to the Calendars page where all previous calendars you have made are kept. Then, click Add New.
Create the calendar as you typically would, giving it a name and selecting teams that the Calendar will showcase as well as other information you want to display.
In the sidebar on the right-hand side, there’s a Layout module with the options Calendar, List, Blocks, Matrix and Scoreboard. Select Matrix to change how the calendar will be displayed.
Make sure to click Update at the top of the screen to save your changes.
Once you have done that, the shortcode on the Calendar page will change from [event_calendar ## ] to [event_matrix ##] and you can use that to display the Results Matrix wherever you like on your website. Widgets are great options for that.
Go to View Calendar at the top of your screen in the navigation bar to see your sports team event grid on its own page.
The Matrix is interactive. Clicking on the results will take you to a data-filled results page with stats and recaps that you have previously input on the individual Event page.
Formatting the Matrix
So by now you have created a basic Result Matrix—awesome! Now, let’s tailor this sports team event grid to a layout you love that also showcases team logos and colors.
Configuring the Layout
In order to determine the width and template your Results Matrix will display on, go to SportsPress > Settings and click on the Events tab in the navigation bar toward the top of the page.
There are two modules of note on this page: Calendars and Results Matrix.
In the Calendars section, there’s only one option that lets you determine the style of the calendar that will be displayed. This applies to the Results Matrix as well.
The options are:
- Default Template – Any calendars will fit into whatever page template you already have, leaving the sidebar if there is one.
- Full Width – All Calendars will be full-width across the screen and will override any sidebar layouts.
- Homepage – This option will let you display the calendar using your homepage template, but won’t put a calendar directly on the homepage.
Setting Date Options
Also in the Events tab is a Results Matrix section. This is where you format the date that appears in the Matrix as well as whether or not you want logos.
You’re able to control how you want to display the date on your Results Matrix.
For example, maybe shortening it if you have a sidebar or going all out with a full-width layout.
The way SportsPress displays the date is through WordPress and the date formatting functions in PHP’s built-in date formatting functions. It’s essentially a shorthand way to keep the format consistent.
The default format of the Results Matrix is M j, which means abbreviated month (Jan – Dec) and numeric day, without leading zeros (1-31). This outputs to dates such as “Jun 4” or “Sep 15.”
To change the format, input the corresponding characters for your desired format. Keep in mind that capitalization does matter.
Here are some common format combinations:
- M j – An abbreviated month and day without leading zeros. For example, “Jun 1.”
- M j, g:i A – The textual three letters and numeric day followed by a comma as well as the hour (1-12) without leading zeros, a colon, the minutes with leading zeros and a capitalized “AM” or “PM.” For example, “Jun 1, 3:00 PM.”
- F d, g:ia – The textual full month, numeric day with leading zeros, followed by a comma, the hour (12-hour format), a colon, the minutes with leading zeros and a lowercase “am” or “pm.” For example, “June 01, 3:00pm.”
- F j, ga – A name of the full month, the day without leading zeros, a comma, the hour (1-12) and either a lowercase “am” or “pm.” For example, “June 1, 3pm.”
For details, check out Formatting Date and Time.
To display logos on the Results Matrix, be sure you have enabled the option by going to SportsPress > Events > Results Matrix > Team and checking Display Logos.
If you don’t have logos for your teams yet, nothing will display.
Go to Teams in the admin menu and click on the team name to go to the Edit Team page.
Toward the bottom of the sidebar on the Edit Team page, there’s a Logo module and the option to Select Logo. Clicking this will take you to the Media Library, where you can upload team logos for various usage around the site.
Make sure you click Update on the page to save your changes.
Your team logo will now appear in the Results Matrix beside the team name on the x-axis as well as alone on the vertical grid y-axis.
Color-Coding the Matrix
It’s also possible to customize your Results Matrix even further with color, giving wins, losses, and draws a separate specific hue.
Go to SportsPress > Configure in the admin dashboard menu.
The Configure page is where you can set a number of different labels, equations, and data parameters depending on the needs of the specific sport and the specific team.
The uppermost section is Event Outcomes. To edit the color displayed in an outcome on the site, and more specifically in the Results Matrix, select Edit on any of the rows.
The Edit Outcome page lets you insert a hexadecimal code, such as from your team branding colors and you can select a color from the panel.
Once selected, click Update to save. Repeat as necessary for all the outcomes that are available in your sport and add as many as you want.
It’s Out of the Park
Having a fantastic on-brand sports team event grid to showcase matches is a great way to show fans where you’ve been and where you’re going.
With the steps above, you can achieve a similar grid as the example below. When it all comes together like this, who wouldn’t want to support the team?
It’s Game Time
Creating a compact yet engaging way to display a seasons worth of matches doesn’t have to be time-consuming and neither does customizing the layout, or adding pictures or pops of color.
Let SportsPress Pro handle all the data automation while you display your Result Matrix with pride and turn your focus back to the game.