Setting Up the Team Page Template





Okay so you’ve created a new page template and shown player information. Now we’re going to do the same for teams, but the level of difficulty is going to go up a bit. But don’t worry. Once again, if you follow these directions, you’ll be feeling like a real programmer by the time it’s over. And if you want, there’s a shortcode you can use to create the team page instead.

Using the Team Page Shortcode

  1. First, create a new page. Then in the new page create a new shortcode. To do this, click the “SB” button in the TinyMCE editor at the top.
  2. In the window that now appears, select “Team Page” and then insert. Then hit “Publish”.
  3. Next, navigate to the Sports Bench Options page. It should be in the menu on the left in the admin.
  4. In the options page, select your new page for the Team Page option and then hit save.
  5. After that, go to the permalinks page. This can be found under the Settings section in the admin. Don’t tough your permalinks, but hit save at the bottom. This will reset the necessary redirects to make the page work.
  6. And that’s it. Your team page is ready to go. And you didn’t even need to write a single line of code.

Using a Team Page Template

Introducing the Team Class

Before we get going too far, let’s introduce the Sports_Bench_Team class.

Once again, if you’re not too familiar with PHP or object-oriented programming, just know that adding the following to your code essentially calls the team from the database and populates it attributes without you having to write more code.

<?php $team = new Sports_Bench_Team( (int){{team_id}} ); ?>

Note that the team id will need to be an actual integer number.

From here, you can get the team name, location and so much more. In fact, here’s a list of the available attributes you can call, plus one function we’ll use to set up this page.

  • $team->team_id
  • $team->team_name
  • $team->team_location
  • $team->team_nickname
  • $team->team_abbreviation
  • $team->team_active
  • $team->team_city
  • $team->team_state
  • $team->team_stadium
  • $team->team_stadium_capacity
  • $team->team_head_coach
  • $team->team_logo
  • $team->team_photo
  • $team->team_division
  • $team->team_primary_color
  • $team->team_secondary_color
  • $team->player_slug
  • $team->team_slug
  • $team->get_schedule()
  • $team->get_roster()
  • $team->get_team_photo()
  • $team->get_division_name()

So now that we’ve gone over something we’ll be using here, let’s start building the player page, shall we? If you want to learn more about the Player class and the other classes, please visit the codex page on the Sports Bench website.

Building the Team Page

Like the player page, creating the team page involves creating a new page template. It’s a simple concept in WordPress, but if you’re unfamiliar with it, you can read thisthis and this tutorial on how to do that. Otherwise, let’s get started.

  1. So first off, create a new page template in your theme’s main directory. Name it page-team.php
  2. Next, copy the contents of your theme’s page.php file and paste it into this new page template file.
  3. At the top underneath the opening php tag, paste the following:
    Template Name: Team
  4. Now, this is where things get a bit trickier. In this file, look for the get_sidebar() function. If this is wrapped in a div tag that has a class or id of “widget” or sidebar, then don’t do anything with it. Otherwise, find your theme’s sidebar.php In this file look for a div tag with a class or id of “widget” or “sidebar”. Copy this div and paste it in the new template file above the get_sidebar function. Make sure the closing </div> tag is there as well.
  5. Once you’ve done that, take a quick breather. We’re going to divide the rest of this into two parts: the main body and the sidebar.

Building the Main Body of the Page

  1. Like the player page, find the loop and delete everything within either a main or article div. Then inside of that, paste the following lines of code:
    					<?php if ( class_exists( 'Sports_Bench_Team' ) ) { ?>
    						<?php if ( get_query_var( 'team_slug' ) ) { ?>
    						<?php } else { ?>
    						<?php } ?>
    					<?php } ?>
  2. Then inside the else part of the statement, paste the following code: <?php echo sports_bench_show_team_listing(); ?>.
  3. The rest of this section will deal with code going inside the <?php if ( class_exists( 'Sports_Bench_Team' ) ) { ?> section.
  4. To show the team photo, insert the following lines:
    				<div class="team-photo">
                    	<?php echo $team->get_team_photo( 'team-photo' ); ?>
  5. To show the team logo, insert the following lines:
    					<div class="team-logo">
    						<?php echo $team->get_team_photo( 'team-logo' ); ?>
  6. To show the team name, insert the following lines:
    					<div class="team-name">
    						<h1 class="team-title" style="color:<?php echo $team->team_primary_color; ?>"><?php echo $team->team_name ?></h1>
  7. Then, to show the team stats, insert the following lines:
    				<div id="team-stats" style="border-top: 2px solid <?php echo $team->team_primary_color; ?>">
    					<h4><?php echo get_option( 'sports-bench-season-year' ) . ' ' . __( 'Stats', 'sports-bench' ); ?></h4>
    					<?php echo sports_bench_get_players_stats_table( sports_bench_get_players_stats( $team->team_id,  '"' . get_option( 'sports-bench-season-year' ) . '"' ) ); ?>
  8. Finally, to show the team’s roster, insert the following lines:
    				<div id="team-roster" style="border-top: 2px solid <?php echo $team->team_primary_color; ?>">
    					<h4><?php _e( 'Roster', 'sports-bench' ); ?></h4>
    					<?php echo sports_bench_show_roster( $team->team_id ); ?>
  9. All right, that’s it for the main body of the page template. Now let’s finish off the template with the sidebar.

Adding in the Sidebar

This part will be a bit challenging, but again, if you follow the directions here, you’ll do just fine. If you want, you can use this code to sort of give you a guide through what it should look like.

  1. First we need to add a conditional to see if this is a page for a single team or not. So where the get_sidebar function is in your page template, place the lines of code below. If the function is wrapped in a div with a class of “widgets” or “sidebar”, place this code inside that div and disregard that same div in the following code.
    				<?php if ( isset( $team ) ) { ?>
    					<div id="sidebar1" class="sidebar">
    				<?php } else { ?>
    					<?php get_sidebar(); ?>
    				<?php } ?>

    It should go without saying that this will replace the original get_sidebar function in your template file.

  2. The remainder of the code will go inside the <?php if ( isset( $team ) ) { ?> section. Now, to show the schedule, place the following lines of code:
    				<aside id="schedule-info" class="widget" style="border-top: 2px solid <?php echo $team->team_primary_color; ?>">
                    	<h4 class="widgettitle"><?php echo $team->team_name . ' ' . get_theme_mod( 'sports-bench-season-year' ) . ' ' . __( 'Schedule', 'sports-bench' ); ?></h4>
    					<?php echo sports_bench_show_team_schedule( $team->team_id ); ?>
  3. To show the division or conference standings for the team, place the following lines of code:
    				<aside id="standings" class="widget" style="border-top: 2px solid <?php echo $team->team_secondary_color; ?>">
                        <?php global $wpdb;
                        $table = $wpdb->prefix . 'sb_divisions';
                        $querystr = "SELECT * FROM $table WHERE division_id = $team->team_division;";
                        $division = $wpdb->get_results($querystr);
                        $division_title = $division[ 0 ]->division_name . ' ' . __( 'Standings', 'sports-bench' ); ?>
                        <h4 class="widgettitle"><?php echo $division_title; ?></h4>
    					<?php echo sports_bench_team_division_standings( $team->team_division ); ?>
  4. Finally, to show some more team information, add the following lines of code:
    				<aside id="team-info" class="widget clearfix" style="border-top: 2px solid <?php echo $team->team_primary_color; ?>">
                        <h4 class="widgettitle"><?php _e( 'Team Info', 'sports-bench' ); ?></h4>
    					<?php echo sports_bench_show_team_info( $team->team_id ); ?>

Setting up the Team Template

Okay, we’re almost done with the team page template, but now we need to add the actual page to the site.

  1. Create a new page and name it “Teams”.
  2. On the right-hand side, look for “Page Attributes”. Then select “Team”. Then hit publish.
  3. Next, go to Sports Bench Settings. Find the Team Page setting and then select this newly created page. Hit “Publish”.
  4. After that, go to the permalinks page. This can be found under the Settings section in the admin. Don’t tough your permalinks, but hit save at the bottom. This will reset the necessary redirects to make the page work.
  5. Now navigate to your newly created team page and enjoy your hard work. You deserve it.

That’s it! You’ve now completed creating a template for the teams in your league. It’s now a one-stop-shop for all team information. Confidence in your coding skills continuing to go up? Great! We’re about to take another step up in difficulty. But you’ll do fine.