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?

Getting Started

To properly enable and customize the Results Matrix, you’ll need to have a few things set up first.

Be sure you have set up your WordPress website and chosen a theme as well as downloaded the SportsPress Pro plugin.

Check out How to Create a Sports WordPress Website for Any Sport, SportsPress Pro Installation and How to Integrate SportsPress into Any WordPress Theme for details.

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.

SportsPress Settings page
Make sure to enable Results Matrix functionality by checking these two boxes.

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.

Layout module
Select Matrix in the Layout module of your Calendar page to display a Results Matrix grid.

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.

Results Matrix settings
You get full control over how you want to display a date of a game in the Results Matrix.

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.

Adding Logos

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.

Logo being uploaded to SportsPress Pro-enabled site
Upload a logo on the Edit Team page to display it in your Results Matrix.

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.

SportsPress' Configure page
The Configure page lets you style and customize how results are displayed and more.

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.

Event Outcome page
Select the color to be displayed on the Win scores and do the same for Draws and Losses.

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?

Example of a finished results matrix grid
There you have it: a beautiful grid chock-full of vibrancy and statistics.

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.

Are you pumped to dive in and create a sports team event grid with the Results Matrix? What other new SportsPress Pro features are you excited to test out? Let us know over on Twitter or Facebook.

Stay in the loop

Enjoy this article? Get more content like this directly in your inbox.

Take your club to the next level

Already have a theme? SportsPress Pro adds advanced sports features to any WordPress site, and works perfectly together with any of our themes.