FIFA World Cup 2022 tables created with wpDataTables

FIFA World Cup 2022 tables created with wpDataTables

The 2022 FIFA World Cup is an international and very popular event in the world and this year is taking place in Qatar from November 20 through December 18, 2022. Almost every website having any relation to sports, news, and more will try to get a larger audience by using information from the World Cup such as scores, statistics, etc.

With wpDataTables you are able to show and track different kinds of information related to the World Cup (Live scores, Groups, Elimination phase, History and Qualifiers as well). All these examples of World Cup tables are really easy to make, and we wanted to show you the various options you can use.

Live score tables

In the Live score tables below, you are able to track results live from the 2022 FIFA World Cup day by day. Scores from every match will be shown by day, as well as more details about the match.

There are several options to create those tables. In the first example, Live API data, we used this free API which has a lot of useful information about the World Cup of 2022. You can create tables using Nested JSON for JSON APIs, and all the data will be automatically updated. This API does not contain flags, so we’ve made them using Conditional formatting by replacing content with our images. The API has a deeper structure, so we also need to use a hook for getting data. Here is the hook:


// return false by default
function filterWCAPI($deep, $url, $tableID){
// for specific url
if ($url == 'https://worldcupjson.net/matches/today'){
$deep = true;
}
return $deep;
}
add_filter(
'wpdatatables_get_one_level_deep_json_data_from_array_as_string',
'filterWCAPI',
10, 3);

For the Match details button, we used our Master-detail add-on.

In the second example, Live DB data, we created a manual table with seven columns (Team 1, Flag 1, Team 2, Flag 2, Score 1, Score 2, and Date). Then, this table from the database was used to create a new table using an SQL query. We used CONCAT to merge the Flag and Team columns, and the %CURRENT_DATE% placeholder to filter only the matches being played on the present day.

Colors and other custom CSS can be changed in the Customize settings tab for each table.

Group phase tables

In the group phase, you will see tables showcasing the World Cup groups in the tournament, alongside their statistics.

There are a lot of different options for creating these World Cup tables. In this example, we’ve created a manual table by importing a CSV file with seven columns (Team, Flag, Match played, Win, Deal, Lose, Goals for and Goals against). Then, this table from the database was used to create a new table with an SQL query. We used CONCAT to merge Flag and Team columns. Finally, we’ve created two formula columns that calculate Goal difference and Points.

Colors and other custom CSS can be changed in the Customize settings tab for each table.

Elimination phase tables

In the elimination phase, you can see two different views of the schedule after the group phase – a vertical and a horizontal view.

Round of 16
Saturday 3 Dec Sunday 4 Dec Monday 5 Dec Tuesday 6 Dec
Country flag 0 : 0 Country flag
Country flag 0 : 0 Country flag
G1 0 : 0 H2 H1 0 : 0 G2
Country flag 0 : 0 Country flag
Country flag 0 : 0 Country flag
E1 0 : 0 F2 F1 0 : 0 E2
Quarter - Finals
Friday 9 Dec
W53 0 : 0 W54
Saturday 10 Dec
W49 0 : 0 W50
Semi - Finals
Tuesday 13 Dec
W57 0 : 0 W58
Wednesday 14 Dec
W59 0 : 0 W60
3rd Place
Saturday 17 Dec
L61 0 : 0 L62
F i n a l
Sunday 18 Dec
W61 0 : 0 W62
Round of 16 Quarter - Finals Semi - Finals 3rd Place F i n a l
Saturday 3 Dec
Country flag 0 : 0 Country flag
Friday 9 Dec
Country flag 0 : 0 Country flag
W53 0 : 0 W54
Tuesday 13 Dec
Sunday 4 Dec W49 0 : 0 W50 W57 0 : 0 W58
Country flag 0 : 0 Country flag
Country flag 0 : 0 Country flag
Saturday 17 Dec Sunday 18 Dec
L61 0 : 0 L62 W61 0 : 0 W62
Monday 5 Dec
G1 0 : 0 H2 Saturday 10 Dec Wednesday 14 Dec
E1 0 : 0 F2 W55 0 : 0 W56 W59 0 : 0 W60
Tuesday 6 Dec W51 0 : 0 W52
H1 0 : 0 G2
F1 0 : 0 E2

For creating these World Cup tables, we’ve used the Simple table option in wpDataTables. Utilizing a few easy modifications (remove borders, merge cells, change font, background, styles, etc.), you can make these two tables or even better ones for your own needs.

History and statistics tables

The history section shows table statistics from previous World Cup tournaments. You can view all of the winners and top scorers.

There are several options to create these tables. We used Nested JSON and API for this table, but we didn’t receive all the information we needed. So, we exported this table to an Excel file, created a new manual table, imported the Excel file, and added the missing columns that we wanted to show.

Colors and other custom CSS can be changed in the Customize settings tab for each table.

Qualification tables

In the qualifications, you’ll find a World Cup qualifiers table for each group, complete with statistics and qualified teams.

Europe qualifiers tables

Qualifiers tables for the rest of the world

There are several options to create these tables. In this example, we created an Excel file with all the data that we want to show. Then, we imported that file and created a manual table. This table from the database was used to create a new table with an SQL query. We used CONCAT to merge the flag and Team columns. Then, we created two formula columns to calculate Goal difference and Points.

Colors and other custom CSS can be changed in the Customize settings tab for each table.

Other examples include creating a manual table without importing a file, such as directly in wpDataTables, or creating a table with Nested JSON, where all the data changes automatically.

If you want to use the Nested JSON option, be aware that most API-s for the World Cup require payment.

And that’s it! Now you are able to create it on your own website as well. Isn’t that awesome?

If you find these examples useful, we can suggest that you check out our other examples from our showcases, where you can find a lot of practical and organized tables like:

Up Next:

What WPAmelia Alternative Is the Best WordPress Booking Plugin?

What WPAmelia Alternative Is the Best WordPress Booking Plugin?