How-to

How to Filter Email Messages

Tournamatch sends out dozens of email notifications for activities and events. Competitors receive an email notification when a match report needs to be confirmed, when a tournament starts, for team membership requests, and many more. In some cases, you may wish to limit the emails sent to users. This article demonstrates a short snippet of code to filter out email messages sent by Tournamatch.

Depending on your use case for Tournamatch, you may wish to prevent certain emails from hitting a users inbox. For example, suppose you want to run everything manually or you don’t want users to attempt to confirm matches. Or maybe you want to send out a different tournament announcement email when your event starts. By applying a filter to the hook trn_core_email_message, you may remove any message from the list of messages supported. Here’s a sample snippet below using the Code Snippets plugin we reviewed in our How to Extend a Plugin in WordPress with a Filter Hook blog:

Filter email messages to users.
Filter email messages to users.

Once this code is saved and activated, email messages for ‘tournament_started’ and ‘tournament_match_set’ will no longer go out to competitors. Check out our email messages filter documentation for a complete list of all email messages currently supported. Using this feature requires at least version 3.17 of Tournamatch.

Player Profile Social Icons

In the version 3.16 update, we introduced the ability to filter social icons in player profiles. Social icons are the linkable icons that appear in the screenshot below:

Steam icon available after snippet.

By default, Tournamatch supports Facebook, Homepage, Twitch, Twitter, and YouTube. These social icon fields appear as configurable options to your users when he or she edits their player profile:

You may modify the social icons available to your users by adding extending Tournamatch with custom code which filters the default list. Filtering this list is easy, and you should read how to extend a plugin in WordPress if you have never done so before.

A social icon in Tournamatch requires three fields: display_name, icon, and input_type. The display_name is the pretty name displayed to the user when editing his or her profile, the icon field is the name of the FontAwesome icon which will be displayed linkable in the public profile, and the input_type is text. You can look up any applicable social media icon on this page under the brand section.

In the screenshot below, the sample code adds the social media icons Instagram and Steam to the default list. Pay special attention to the function array_merge. Using this adds your icons to the list of defaults already given.

Custom Player Profile Social Icons Code

Add a filter for ‘trn_player_social_icon_fields’ to modify the social icons displayed to the user.

How to Extend a Plugin in WordPress with a Filter Hook

Extending a plugin in WordPress may seem foreign if you have never done so; however, it is actually a simple task for most filter hooks. What is a filter hook? A filter hook is just the technical way of saying, “Here is some content we will display to the user or save to the database.” The most important thing to consider when writing your own filter hook is where you add this code. If you add this code in the wrong place, an update to WordPress or the plugin you are extending may overwrite your edit. You should strive to keep your website as up-to-date as possible, and having an update overwrite your changes generally discourages updates. Three safe ways to extend a plugin in WordPress with a filter hook include using another plugin such as Code Snippets, by creating a custom plugin, or by creating a child theme. I recommend going the first route which is detailed below.

Using a Filter Hook Plugin

The easiest way to extend a plugin is by using another plugin such as Code Snippets. This is the easiest method because it doesn’t require you to modify any code on the back end, use file transfer, or code editors. Code Snippets provides a simple GUI interface in your WordPress admin for managing action hooks, filter hooks, and custom shortcodes.

Using the player social icons filter we introduced in the Version 3.16 update as an example, here is how you would add a Steam icon to the existing set using Code Snippets:

1. Download and activate Code Snippets.
2. Paste the code into the box as pictured in the screenshot below.
3. Click save.

How to Extend a Plugin with Code Snippets

How to Extend a Plugin with Code Snippets

With this complete, players will now also see a steam icon in their player profile and a future WordPress or Tournamatch update shouldn’t affect your change.

Steam icon available after snippet.

Steam icon available after snippet.

Click activate in the WordPress plugins section.

How to install Tournamatch via WordPress

One of the easiest ways to install Tournamatch is to use the WordPress dashboard. Using this feature requires that file uploads are enabled on your web host and also that the plugin you want to upload is less than the file upload limit. Tournamatch is only about 1.5 mb and the default for most hosts is 2 mb; so, you should be able to install Tournamatch from the dashboard. After downloading the plugin and logging in to your admin, follow the steps below to install:

Navigate to plugins and click Add New.

Click the Add New button to install a new plugin.

Click the Add New button to install a new plugin.

Click Upload Plugin.

Click the upload plugin button to install a new plugin.

Click the upload plugin button to install a new plugin.

Click Choose File to select the file you downloaded, and then click Install Now.

Browse for to select the file and then click Install Now.

Browse for to select the file and then click Install Now.

Once uploaded, you still need to activate the plugin. Navigate to the list of plugins, find Tournamatch in the list, and click the Activate link.
Click activate in the WordPress plugins section.

 

How to Update Tournamatch

In this post, I’ll walk you through the process of updating Tournamatch to use the latest version. This assumes that you already have Tournamatch installed. If not, you should first head over to our how to install Tournamatch guide and come back when we have an update available (we push 1 – 2 of those per month).

For those already enjoying the benefits of running your own eSports league, follow along below and I’ll guide you through the epic quest titled “Updating a WordPress plugin”:

  1. Navigate to your Admin Dashboard and click Updates.
    Navigate to the Dashboard -> Update link in the WordPress Admin.

    Navigate to the Dashboard -> Update link in the WordPress Admin.

  2. Scroll down to the plugin section and click the “Update Now” button within the Tournamatch section.
    Click the Update Now link within the Tournamatch section.

    Click the Update Now link within the Tournamatch section.

You’re done. Seriously. If you don’t see the Tournamatch section and an option to upgrade, you’re either running the latest version already or you haven’t yet installed the best WordPress plugin for hosting ladders and tournaments.

How to install Tournamatch via FTP

One of the two main ways you can install Tournamatch in WordPress is via a File Transfer Protocol (FTP) program. FTP programs connect to the web server where your website is hosted and permit you to transfer files between your local computer and the server. In some scenarios, such as when file upload permissions or file size limitations restrict web uploads, it is necessary to upload Tournamatch via FTP. This article will walk you through using FTP to upload Tournamatch.

The first thing that you need is an FTP program. I highly recommend FileZilla. It’s a free program widely recognized as one of the best. You can use whichever FTP program you wish, but screenshots throughout this guide will reference FileZilla.

After installing your chosen FTP program, you need to acquire FTP credentials from your web host. These are typically found within the cPanel dashboard from your web host. The process can be slightly different for each web host depending on the presence of cPanel and which version, so the best way to retrieve these credentials is to hit up Google. Simply Google “how to find FTP credentials on ____” and replace “___” with the name of your web host.

Once you have these credentials, open FileZilla and go to File -> Site Manager.

Click File, then Site-Manager.

Click on New Site.

Click on New Site.

Enter the host name for your hosting account in the Host field.
Enter the host name for your hosting account.

Select Normal Login from the credentials drop down.
Select Normal Login from the drop down.

Enter your username in the User field and password in the Password field.

Enter your username and password in the appropriate fields.

For the majority of web hosting accounts, and if you entered your credentials correctly, you should now be able to connect to your web host. When the connection is established, you will see a directory listing on your right. These are the files in your web hosting account. You shouldn’t rename, move, or delete any folder unless instructed to do so as most of these will have been created by your hosting provider when they setup your hosting account.

If you don’t immediately see the folders wp-content, wp-admin, and wp-includes along with several other files ending in .php, you may need to navigate to another directory. Look for a directory titled “www”, “public_html”, “html”, or “html_root”. These are the most common names for the “root” directory, or the directory that actually loads when a user visits your-domain.com. If you still can’t find the root directory where WordPress resides, you may find opening a support ticket with your web host is the best place to start for help.

Once you have located the WordPress root directory, navigate to the wp-content/plugins/ directory. Here you will find folder names corresponding to every plugin you currently have installed. This is where you should upload the “tournamatch” directory.

The root WordPress directory contains the wp-admin, wp-content, and wp-includes folders.

Finally, after uploading Tournamatch, you are ready to install Tournamatch via the WordPress admin page. Login to your WordPress admin account and click on the Plugins menu option. In the list of plugins, you should now see the plugin “Tournamatch”. Click on the link “Activate” and Tournamatch will now install. If you have followed along this far, then congratulations! You’ve just uploaded and installed your first WordPress plugin via FTP. Stay tuned for our next article that will walk you through customizing Tournamatch and getting the most out of it.

Click activate in the WordPress plugins section.

Wireframing with balsamiq

I am not a web designer. I know what I like when I see it; but, I’m much more experienced working on the backend of systems or building desktop applications (I know). I was recently tasked with mocking up the appearance of a new product targeting our web customers. Knowing the way I would historically tackle this kind of problem is slow, and also that my target audience was most likely to get lost in minute details, I decided to take a step back and mock up the new solution with wireframes. Wireframes are great because the sketchy and simplistic style reproduces a whiteboard experience.

After a bit of searching, I went with balsamiq. I’m writing this blog post to acknowledge what a great product this is for rapid wireframing. I’m only using the Web App at the moment, although I foresee purchasing a personal license for my desktop in the near future. I doubt I’ve scratched the surface on what it can do, but I was able to have a product time using the tool with a minimal learning curve.

My one complaint about the software is that I couldn’t find how to bring my “demo” wireframe into the Web App. I created one mock with the online demo and decided this was the tool to use. There was no obvious way to take that mock and bring it into the Web App version. Users can import and export on both versions, but the file type used differs and is not compatible. Finally, icons are handled differently between the two versions. There is a standalone tab for icons in the demo, while there is only one (easily missed) item for icons in the Web App. You select the actual icon (facebook, envelope, etc) after dropping the icon item onto the canvas.