Setting Up the Player Page Template

Level

Beginner
Intermediate

Section

Players
Plugin

Okay, so you’re almost complete getting everything going with your website and Sports Bench. But now we’re getting into the challenging part. However, there’s good news. With Sports Bench 1.3, you can add a player page template with a simple shortcode. Or you can learn and dig into the code and do it that way. Both ways will be shown here.

Using the Player 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 “Player 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 Player 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 player page is ready to go. And you didn’t even need to write a single line of code.

Using a Player Page Template

Introducing the Player Class

Before we get going too far, let’s introduce a simple concept that you’ll use here and elsewhere if you want to customize your site even further. Sports Bench comes with three classes: Sports_Bench_Game, Sports_Bench_Player and Sports_Bench_Teams. Here we’ll just look at the player class.

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

<?php $player = new Sports_Bench_Player( (int){{player_id}} ); ?>

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

From here, you can get the player’s first name, last name 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.

  • $player->player_id
  • $player->player_first_name
  • $player->player_last_name
  • $player->player_photo
  • $player->player_position
  • $player->player_home_city
  • $player->player_home_state
  • $player->player_date_of_birth
  • $player->team_id
  • $player->player_weight
  • $player->player_height
  • $player->player_slug
  • $player->get_player_photo()

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 Player Page

So creating the player 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-player.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: Player
  4. Look at the body of your new page template’s contents. First find the Loop. If you’re unfamiliar with the loop, look for a section that looks like if ( have_posts() ) : while( have_posts() ) : the_post();. Inside of that, look for a <main> or <article> tag and delete everything inside of that.
  5. Replace the now-deleted code with the following:
    				<?php if ( class_exists( 'Sports_Bench_Player' ) ) { ?>
    					<?php if ( get_query_var( 'player_slug' ) ) { ?>
    					<?php } else { ?>
    					<?php } ?>
    				<?php } ?>
    
  6. From here, let’s get the simple part out of the way first. Inside the else statement, place the following line of code:
    <?php echo sports_bench_show_team_player_select(); ?>
    This will show a dropdown of teams to pick players from if there’s no player slug in the url. For a live look at what this does, click here.
  7. With that out of the way, let’s get to the fun part. Inside of the if ( get_query_var( 'player_slug' ) ) statement, first add the following:
    				<? if ( get_query_var( 'player_slug' ) ) {
    				$player = new Sports_Bench_Player(get_query_var('player_slug'));
    				$team = new Sports_Bench_Team((int)$player->team_id);
    				} ?>
    
    				<div class="player-info">
    					<?php echo sports_bench_show_player_info( $player->player_id ); ?>
    				</div>
    

    This will display the player’s photo and his/her name, height, weight, position, age and hometown if those are entered. You might have to do some styling to get the section to match your theme’s style.

  8. Finally, below the code you just pasted, place the following lines of code:
    				<div id="player-stats" class="widget" style="border-top: 2px solid <?php echo $team->team_primary_color; ?>">
    					<h4 class="widgettitle"><?php echo __( 'Career Stats', 'sports-bench' ); ?></h4>
    					<?php echo sports_bench_get_season_stats( $player ); ?>
    				</div>
    

    This will show a table of the player’s career stats by season. And if you click on a season, you’ll see the game-by-game stats. And the best part, that functionality requires no code from you.

  9. Now, go create a new page. Title it “Players”. Then go down on the right side of the editor to the “Page Attributes” section and select “Player” from the page template dropdown.
  10. Next, go to the Sports Bench Settings page inside the Customizer. Then find the Player Page option and select the page you’ve just created. Then hit publish.
  11. 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.
  12. Then navigate to that page. You should now see the dropdown. Pick a team and then click on a player. And now you should see his/her player page.

And that’s it! You’ve survived some intermediate coding and you’ve created a really cool player page that you can show off. You’re harnessing the power of Sports Bench. Confidence going up? Good. We’re going to take another step higher in the next section. But for now, admire your work.