Create soccer formations in WordPress

June 27, 2021 Posted by Editorial Staff

Your match review is ready with a detailed report of the events and your personal opinions. But how do you visually represent the lineup of the teams?

Using images generated from a Photoshop template is not a convenient solution. Firstly, generating images from Photoshop is a slow process. Secondly, raster images consume bandwidth and slow down the website. Thirdly, you can’t modify, reuse or keep organized the formations in a centralized way.

Plugins like Soccer Formation VE or Visual Football Formation VE solve this problem. These tools dynamically generate soccer formations based on lists of players added by the WordPress administrator in the back-end.

In this article, you will learn how to create soccer formations in WordPress with specialized WordPress plugins.

Add soccer formations in WordPress with Soccer Formation VE

The Soccer Formation VE plugin lets you easily add one or more high-resolution soccer formations in your posts.

Install the plugin from WordPress.org

Soccer Formation VE is free and distributed in WordPress.org. To install the plugin proceed to the Plugins menu of your WordPress administrative area and search “soccer formation” in the search box.

The plugin, when active, adds an administrative menu named SFVE in your WordPress back-end. Here you will find all the submenus with tools needed to set up your formations.

Set up the position of the players

The Layout menu includes a drag and drop editor that allows you to set the position of the players on the field with precision.

In this context, the plugin displays the coordinates of the positions of the players instead of the player names. This information helps the administrator in selecting the correct placement of the players.

The drag and drop editor in the Layouts menu of the Soccer Formation VE plugin for WordPress.
The drag and drop editor in the Layouts menu of Soccer Formation VE.

After installing the plugin, there is only a single layout available, specifically a 4-4-2 formation named “Default”. However, you can create an unlimited number of layouts.

Note that you can also set up layouts for soccer variants like 6 vs. 6 or 7 vs. 7. In this case, remove the unused player positions with the selectors available in the Advanced section.

The selectors to hide or display specific player positions in the "Advanced" section of the Soccer Formation VE plugin for WordPress.
The selectors to hide or display specific player positions in the Advanced section.

Create a formation

Let’s create our first formations in the Formations menu.

Start by assigning a name to the formation with the Description field. Then, for each player, enter a jersey number and name.

The Formations menu of the Soccer Formation VE plugin for WordPress with all the players of a team.
The Formations menu with all the players of the Italian national football team.

Pay attention in entering a short version of the player names because the box that contains the player name has limited space. For instance, if you are dealing with a long name like “Ronaldo Luís Nazário de Lima”, simply enter “Ronaldo”.

Add the formation in your article

This plugin associates each formation with a shortcode. You can find the shortcode of the formation in the second column of the Formations menu.

List of available soccer formations in the Formations menu of the Soccer Formation VE plugin.
The available formations with their related shortcodes listed in the Formations menu.

Once you have the shortcode, simply copy it in a post. Note that with the Gutenberg editor, you have to enter the shortcode in the “Shortcodes” block. Other visual builders might also have dedicated shortcode blocks, but for this, visit the documentation of your visual builder.

After you save the post with the “Update” button, the soccer formation will be available in the resulting article in the front-end.

An article with a soccer formation generated with the Soccer Formation VE plugin for WordPress.
An article with a soccer formation generated with the Soccer Formation VE plugin for WordPress.

As you may notice, the formation occupies all the horizontal space of the post. If this is not your desired result, you can rearrange the formation based on your needs using Gutenberg layout blocks or custom CSS rules.

It’s worth mentioning that you can organize the page layout with the Columns block to support multiple formations in a post. For example, you can create two columns to display the two teams of a match.

Customize the formations

With the plugin’s customization options, you can create formations that perfectly match the colors and style of your website.

Some of the things you can do with the options:

  • Customize the font size, font family, font family, and font-weight used to display the jersey numbers and the players’ names.
  • Change the background colors of the field, the color of the field lines, and the color of the boxes used to represent the player.
  • Set a vertical margin to better position the fields in the layout.

Add soccer formations in WordPress with Visual Football Formation VE

Another plugin similar to Soccer Formation VE is Visual Football Formation VE.

The first difference between the two plugins is that Soccer Formation VE displays images of the players instead of listing names. Another difference is that Visual Football Formation VE technically uses HTML and raster images and not dynamic SVG.

The Formations menu of the Visual Football Formation VE plugin for WordPress with the image of a player already uploaded.
The Formations menu of Visual Football Formation VE with the image of a player already uploaded.

Generate soccer formations with Soccer Engine

The Soccer Engine plugin is not a formations generator like the other two but a comprehensive solution to store and display soccer data on a WordPress website.

The Visual Lineup block of this plugin generates formations based on the match data available in its databases. These formations contain the players with the related match events. Specifically, below each player, you will find icons used to represent goals, yellow cards, red cards, substitutions, and more.

A soccer formation generated with the Visual Lineup block of Soccer Engine.
A soccer formation generated with the Visual Lineup block of Soccer Engine.