Adding a modal for playoff series

So you like the playoff brackets you have but maybe you want to take it to the next level. What is there to do?

Well, you could add a modal for the bracket. In fact, that’s what the Sports Bench theme does.

But how, you ask. That’s what this tutorial will help you accomplish.

Filters to use

So for this tutorial, we only need to worry about two filters: the sports_bench_playoff_series filter and the sports_bench_playoff_series_modal filter.

The first filter is run on every playoff series in the bracket, so it’s what we’ll use to add in the connection to the modal. This filter already has a function with it included in the plugin, sports_bench_do_playoff_series on line 531 of playoff-functions.php.

And the second is what we’ll use to add in the content for the modal. This one, however, does not have a function with it in the plugin, but it does in the theme.

Now let’s get rolling.

jQuery we’ll use

For this tutorial, we’ll the dialog plugin from jQuery. I know there are a lot of other ways to add a modal, but I figured this one would be the easiest one for a simple tutorial. Plus, it’s fairly accessible, which makes for a great tutorial.

That being said, if your theme uses Bootstrap or Foundation (the Sports Bench theme uses Foundation), you can use their way of adding modals in place of the jQuery shown here.

The purpose of this tutorial is just to show you the process of adding a modal for playoff series. The specifics aren’t terribly important.

Adding the modal

The first thing we need to do for the modal is to add the link to the modal. So copy the sports_bench_do_playoff_series function from the playoff-functions.php file, place it with the rest of your customizations and rename the function.

Then remove the check for the Sports Bench theme and in that table cell add a button with an id of playoff-modal-' . $series->series_id . ' and a class of playoff-modal-button.

Then copy this function into where your customizations are.

Next, we need the jQuery to go along with it. So we’ll need a few jQuery plugins loaded with the rest of the scripts. And if you don’t want to worry about styling, you can also load some default styling.

Then in our JavaScript, we’ll add the dialog for each of our modals. Then we’ll add a function that runs when the modal button is clicked, checks what button was pressed and loads the corresponding modal.

And there you have it. We have a working modal. The styling might need some work, but the basics are there. And now your site is taken to a whole new level.