WordPress and Sports websites are the perfect match. I have seen a lot pop up over the past few years ranging from kids soccer clubs to membership based gyms. It would appear that WordPress is a great platform for a sports club big or small to keep members and fans updated on the latest events at their favourite club. In this tutorial I will go through the process of how you can Build a Sports Club Website with WordPress and one of the most popular sports themes.
At this point I will assume that you have your domain and WordPress environment in place. If you don’t then follow this article to get you started.
Install a theme
I am sure you have all your great content and images related to your club ready to go but first we need to find a good theme that this content will fit into. You will want a design that has the look and feel suited to your club so have a look around the popular marketplaces and theme shops for your desired design. For this example we are going to use Sporty which is a free WordPress Sports Theme available at WordPress.org. Have a look at the Sporty demo to get a an idea of what your finished website will look like.
Because the theme is already in the WordPress theme repository we can easily install it within our admin area. From your dashboard go to Appearance > Themes > Add New and you will be presented with some featured themes. In the Search Themes box type in Sporty and the Sporty screenshot will appear. Hover over the screenshot, click install then activate and we are ready to go.
After you have activated Sporty you will be met with a welcome screen telling you more about the theme. From this page you can pick from a selection of options that will help you with your set up. I would recommend having a look at the theme demo and the documentation before you move any further.
Let’s start by adding a couple of pages that will allow us to start adding some cool features. Go to Pages > Add new and make a page called “Home”. We won’t be adding any content at this point but from the Page Attributes Panel > Template > select “Custom Home Page” from the drop down and hit publish.
Create another page called “Blog” or “News” or anything that you feel is appropriate for your news feed. This page will show your posts. Leave the template as default and publish the page.
Next we will go to Settings > Reading and select a static page. The Home page you just created should be your Front Page and the Blog or News page you made can be set as your Posts Page. Your website will now have the custom template as your homepage and we will begin to populate that in a minute. Firstly though let’s add your club colors and logo.
Go to Appearance > Customize to open the customizer options and live preview of your website. Then open Global Settings > Color Scheme. By default Sporty will be blue, black and white so we will change this to your team colors. I am going to choose red and white to give me a white header area and red feature areas.
We will now add your club logo. Go back to your main customize options and select Header Settings > Site Logo. The recommended logo size is about 300px wide by 100px high but it can be pretty much any size within reason. For my example I am using a logo that is 340px by 110px. Upload your logo and hit save.
While we are in the customize area I am going to change one more thing before we move on. You will see a nice big call to action area that currently says “DEFAULT FEATURED TEXT”. I am going add some text in here along with a button.
Back to the main customize options open up Homepage Settings > Featured Text Area. Start changing the text and you will see it changing in your live preview. If you would prefer some text with a button then check the “Use these options below” check-box and enter your title text, button text and url in the appropriate fields. This allows you to have a button that links to a page within your site or to an external website. Hit save and your website should now look something like this:
It’s time to move onto adding some content into the site. We will make a couple of posts first. Head back to your admin dashboard then select Posts > Add New. I want my important posts to be featured on the homepage in a slider and Sporty allows me to do that easily. To do this we need to create the post as normal and add it to a category. Then we need to add a Featured Image for this news story. The recommended size is 960px wide and 400px high. Once you hit publish a slider will automatically appear on your homepage.
By default the slider will show all of your posts with a featured image. However, Sporty has further slider options in Appearance > Customize > Homepage Settings >Slider Settings. Here you can pick which of your categories to appear in the slider, the amount of slides to show and if you want to hide the slider header or text. We will look at some more customizer options shortly.
Add a Sports Plugin
At this point we can continue to create pages, posts, galleries and pretty much everything else a normal website needs. But to take it a step further we are going to give the website extra sports club features by adding a plugin called SportsPress. This plugin will allow us to add widgets and pages with club information such as schedules, player information, league tables and much more. Sporty Theme has been developed to add these plugin features seamlessly.
From your WordPress dashboard go to Plugins > Add new and search for “SportsPress”. Install and activate the plugin.
Once installed go to the plugin settings and click the “General” tab. One of the first options allows you to Install demo content. I would suggest doing this to give you an understanding of what the plugin has to offer. It will install demo clubs, players and stats. Once you are comfortable with the plugin you can easily delete the demo content and begin to add your clubs information. Check the install demo content box and click save at the bottom of that page.
Go through all of the other settings and set up to suit your needs. Follow the plugin documentation if you have any issues. One of the settings also gives you the choice of various color schemes but Sporty Theme has already been designed to use the color scheme you selected earlier so there is no need to select anything here.
The Sporty Theme custom homepage we set up earlier has a widget area that can be populated with your SportsPress content. For my homepage I am going to add information on my clubs next fixture, all other fixtures and a league table.
From your dashboard go to Appearance > Widgets. You will see that since you have installed the SportsPress plugin it has added lots of its own widgets. You can add any of these to any available widget area. The widget area we are going to concentrate on first is the “Right Home Column” one which populates the right hand area of the custom homepage.
Drag the “Countdown” widget over to the Right Home Column widget area. Give the widget a title, select a team, select a fixture and save. (Note: for team logos to appear you will have to upload these to the team pages and make sure logos are selected to appear in the settings.)
Add in another couple of widgets to fill up the Homepage widget area. You can also add in some more to Primary sidebar and footer areas. Your homepage should now look something like this:
You can also add pages for league tables, player galleries, staff members and much more. These are done by grabbing the shortcode for whatever you want to appear and then placing it into a page. Follow the plugin shortcode guide for more information.
We will just quickly go back to the Appearance > Customize area to add a few more things. Firstly we will add a nice background image to the website. Open the Global Settings > Background Image option and add your background image. The recommended size is 1920px by 1200px and set as it as the top center position with no repeat image and no scroll with page.
Head back to the main customize area and select Header Settings > Social Media Settings. Here you can add the url for any of your social media accounts. When saved, a link to your account will appear in the top right of the website header as that social icon.
Another option recently added to the theme is the ability to increase the width of your website. From the main Customize area go to Global Settings > Site Layout. You can increase the width from the default 960px. remember if you do change this you need to change your header or slider images to be the same width.
Your website should now be at the stage where you can add all of your remaining content to pages, posts and widget areas. The finished product should look something like the Sporty demo. If you need any help setting up your Sports website please refer to the Further Reading links below or go to the Sporty Welcome Page: Appearance > Sporty Theme.