How to customize the scoreboard

One of the most important parts of Sports Bench, no matter what sport you use it for, is the scoreboard. This is how you show what games are coming, what’s going on right now and what’s gone on in the past.

By default, Sports Bench games in the scoreboard bar, page and widget are table based and are fairly basic. But that might not suit everyone. Fortunately, it’s pretty easy to customize how those games look.

So here’s how to do just that.

Filters that you can use

Like many things in Sports Bench now, you can use filters to customize the output of the scoreboard areas to fit your needs. If you have learned about how to use filters, you’ll want to learn more about them in the WordPress documentation. They’re a really powerful tool.

But if you’re ready to start using the filters on your own, here are the available filters for the scoreboard along with the link to their page in the Sports Bench codex where you can learn the specifics. We’ll take a look at a few basic examples in the next section.

Examples

There are two main places where you’re probably going to want to change the output of scoreboard games: the scoreboard page and the scoreboard widget. So I’ll go over what filters you need for those and show you an example for each.

The first area we’ll show is the scoreboard page. We’ll be using the sports_bench_scoreboad_game filter for this. This accepts any previous HTML, the Sports Bench Game object for the game, the number of games being shown on the scoreboard and what number the game is on the page.

So the default for Sports Bench for a scoreboard page game is below. Feel free to use this to help shape what you want for scoreboard games.

function sports_bench_do_scoreboard_game( $html, $game, $count, $num_games ) {
 $theme = wp_get_theme();
 $parent_theme = $theme->parent();

 $game_id = $game->game_id;
 $away_team = new Sports_Bench_Team( (int) $game->game_away_id );
 $home_team = new Sports_Bench_Team( (int) $game->game_home_id );
 $status = $game->game_status;
 if ( $status == 'in_progress' ) {
 $away_score = $game->game_current_away_score;
 $home_score = $game->game_current_home_score;
 $datetime = '';
 if ( $game->game_current_period != null
 and $game->game_current_time != null
 ) {
 $sep = ' | ';
 } else {
 $sep = '';
 }
 $period = $game->game_current_period;
 $time = stripslashes( $game->game_current_time );
 $time_in_game = $time . $sep . $period;
 } elseif ( $status == 'final' ) {
 $away_score = $game->game_away_final;
 $home_score = $game->game_home_final;
 $datetime = '';
 $time_in_game = 'FINAL';
 $time = '';
 $period = '';
 } else {
 $away_score = '';
 $home_score = '';
 $time_in_game = '';
 $date = date_create( $game->game_day );
 if ( sports_bench_is_game_time_set( $date ) === true ) {
 $datetime = date_format( $date, 'g:i a, F j' );
 } else {
 $datetime = date_format( $date, 'F j' );
 }
 $time = '';
 $period = '';
 }
 $id = 'game-' . $game_id;

 if ( $count % 2 == 0 ) {
 $html .= '<div class="row sports-bench-row">';
 }

 $html .= apply_filters( 'sports_bench_before_scoreboard_game', '', $game_id, $away_team, $home_team );
 $html .= '<div class="large-6 medium-6 small-12 columns">';
 if ( $status == 'in_progress' && ( $theme->name != 'Sports Bench' || ( $parent_theme && $parent_theme->name != 'Sports Bench' ) ) ) {
 $html .= '<a data-open="game-modal-' . $id . '">';
 }
 $html .= '<div id="' . $id . '" class="scoreboard-page-game widget">';
 $html .= '<table class="scoreboard-table">';
 $away_row_style = apply_filters( 'sports_bench_scoreboard_row_styles', '', $away_team, 'scoreboard' );
 $html .= '<tr class="team" style="' . $away_row_style . '">';
 $html .= '<td>' . $away_team->get_team_photo( 'team-logo' ) . '</td>';
 $html .= '<td><a href="' . $away_team->get_permalink() . '">' . $away_team->team_location . '</a></td>';
 $html .= '<td id="away-score" class="right">' . $away_score . '</td>';
 $html .= '</tr>';
 $home_row_style = apply_filters( 'sports_bench_scoreboard_row_styles', '', $home_team, 'scoreboard' );
 $html .= '<tr class="team" style="' . $home_row_style . '">';
 $html .= '<td>' . $home_team->get_team_photo( 'team-logo' ) . '</td>';
 $html .= '<td><a href="' . $home_team->get_permalink() . '">' . $home_team->team_location . '</a></td>';
 $html .= '<td id="home-score" class="right">' . $home_score . '</td>';
 $html .= '</tr>';
 $html .= '<tr>';
 $html .= '<td></td>';
 $html .= '<td id="date" class="right">' . $datetime . '</td>';
 $html .= '<td id="time" class="right">' . $time_in_game . '</td>';
 $html .= '</tr>';
 $html .= '</table>';
 if ( $game->game_recap != null and $game->game_status == 'final' ) {
 $html .= '<h4 class="preview-recap-link"><a href="' . $game->game_recap . '">' . __( 'RECAP', 'sports-bench' ) . '</a></h4>';
 } elseif ( $game->game_preview != null and $game->game_status == 'scheduled' ) {
 $html .= '<h4 class="preview-recap-link"><a href="' . $game->game_preview . '">' . __( 'PREVIEW', 'sports-bench' ) . '</a></h4>';
 } else {}
 $html .= '</div>';
 if ( $status == 'in_progress' && ( $theme->name != 'Sports Bench' || ( $parent_theme && $parent_theme->name != 'Sports Bench' ) ) ) {
 $html .= '</a>';
 }

 $html .= apply_filters( 'sports_bench_scoreboard_modal', '', $game, $away_team, $home_team, $status, $time, $period );

 $html .= '</div>';
 $html .= apply_filters( 'sports_bench_after_scoreboard_game', '', $game_id, $away_team, $home_team );

 if ( $count % 2 == 1 || $num_games - 1 == $count ) {
 $html .= '</div>';
 }

 return $html;
}
add_filter( 'sports_bench_scoreboard_game', 'sports_bench_do_scoreboard_game', 10, 4 );

The second area is the scoreboard widget game. For this, we use the sports_bench_scoreboard_widget_game filter. This accepts the previous HTML and the Sports Bench Game object for the game.

Again, here’s the default for Sports Bench for the scoreboard widget game. You can use it to shape what you want for this section.

function sports_bench_do_scoreboard_widget_game( $default, $game ) {

 $html = '';
 $theme = wp_get_theme();
 $parent_theme = $theme->parent();

 $game_id = $game->game_id;
 $away_team = new Sports_Bench_Team( (int) $game->game_away_id );
 $home_team = new Sports_Bench_Team( (int) $game->game_home_id );
 $status = $game->game_status;
 if ( $status == 'in_progress' ) {
 $away_score = $game->game_current_away_score;
 $home_score = $game->game_current_home_score;
 $datetime = '';
 if ( $game->game_current_period != null
 and $game->game_current_time != null
 ) {
 $sep = ' | ';
 } else {
 $sep = '';
 }
 $period = $game->game_current_period;
 $time = stripslashes( $game->game_current_time );
 $time_in_game = $time . $sep . $period;
 } elseif ( $status == 'final' ) {
 $away_score = $game->game_away_final;
 $home_score = $game->game_home_final;
 $datetime = '';
 $time_in_game = 'FINAL';
 $time = '';
 $period = '';
 } else {
 $away_score = '';
 $home_score = '';
 $time_in_game = '';
 $date = date_create( $game->game_day );
 $time = '';
 $period = '';
 if ( sports_bench_is_game_time_set( $date ) === true ) {
 $datetime = date_format( $date, 'g:i a, F j' );
 } else {
 $datetime = date_format( $date, 'F j' );
 }
 }
 $id = 'game-' . $game->game_id;

 $html .= apply_filters( 'sports_bench_before_scoreboard_widget_game', '', $game->game_id, $away_team, $home_team );
 $html .= '<div id="' . $id . '" class="scoreboard-widget-game">';
 $html .= '<table class="scoreboard-table">';
 $away_row_style = apply_filters( 'sports_bench_scoreboard_row_styles', '', $away_team, 'widget' );
 $html .= '<tr class="team" style="' . $away_row_style . '">';
 $html .= '<td class="logo">' . $away_team->get_team_photo( 'team-logo' ) . '</td>';
 $html .= '<td class="team-name"><a href="' . $away_team->get_permalink() . '">' . $away_team->team_location . '</a></td>';
 $html .= '<td id="away-score" class="right score"><span>' . $away_score . '</span></td>';
 $html .= '</tr>';
 $home_row_style = apply_filters( 'sports_bench_scoreboard_row_styles', '', $home_team, 'widget' );
 $html .= '<tr class="team" style="' . $home_row_style . '">';
 $html .= '<td class="logo">' . $home_team->get_team_photo( 'team-logo' ) . '</td>';
 $html .= '<td class="team-name"><a href="' . $home_team->get_permalink() . '">' . $home_team->team_location . '</a></td>';
 $html .= '<td id="home-score" class="right score"><span>' . $home_score . '</span></td>';
 $html .= '</tr>';
 $html .= '<tr class="time-row">';
 $html .= '<td colspan="3">' . $datetime . $time_in_game . '</td>';
 $html .= '<tr class="preview-recap-row">';
 $html .= '<td colspan="3">';
 if ( $game->game_preview != null && ( $game->game_status == 'scheduled' || $game->game_status == 'in_progress' ) ) {
 $html .= '<h4 class="preview-recap-link preview"><a href="' . $game->game_preview . '">' . __( 'PREVIEW', 'sports-bench' ) . '</a></h4>';
 }
 if ( $game->game_status == 'in_progress' && ( $theme->name != 'Sports Bench' || ( $parent_theme && $parent_theme->name != 'Sports Bench' ) ) ) {
 $html .= '<h4 class="preview-recap-link live"><a data-open="game-modal-' . $id . '">' . __( 'LIVE', 'sports-bench' ) . '</a></h4>';
 }
 if ( $game->game_recap != null && $game->game_status == 'final' ) {
 $html .= '<h4 class="preview-recap-link preview"><a href="' . $game->game_preview . '">' . __( 'PREVIEW', 'sports-bench' ) . '</a></h4>';
 $html .= '<h4 class="preview-recap-link recap"><a href="' . $game->game_recap . '">' . __( 'RECAP', 'sports-bench' ) . '</a></h4>';
 }
 $html .= '</td>';
 $html .= '</tr>';
 $html .= '</table>';
 $html .= '</div>';
 $html .= apply_filters( 'sports_bench_after_scoreboard_widget_game', '', $game->game_id, $away_team, $home_team );

 $html .= apply_filters( 'sports_bench_scoreboard_modal', '', $game, $away_team, $home_team, $status, $time, $period );

 return $html;

}
add_filter( 'sports_bench_scoreboard_widget_game', 'sports_bench_do_scoreboard_widget_game', 10, 2 );