FC Greenfield – A Sports Club Theme for WordPress and Joomla
Kick off for FC Greenfield – our new theme package for Joomla and WordPress. It's the perfect starter kit for your next football, soccer or sports club website – covering everything from teams and players to matches and news. FC Greenfield is all about showing matches in a modern table filtered by date. There are also live countdowns, videos on hover, and stunning scroll-driven animations. Of course, FC Greenfield also comes with 12 content-rich page layouts, great-looking styles and many beautiful images. Game on. Let's go!
Make sure to subscribe to our YouTube channel, check out our other social media platforms, and join our Discord Chat Server for all news and discussions.
Key Features
FC Greenfield is built with the YOOtheme Pro page builder and uses all its features. With content types like teams, players, matches and posts — all connected with each other, FC Greenfield demonstrates the full power of dynamic content. Matches are shown in a sleek, modern table, filtered by date and grouped into past, current, and upcoming games. Player portraits come alive with videos on hover creating a truly engaging experience. A live countdown teases the upcoming match and automatically switches to the next one when time runs out. And scroll-driven animations bring powerful visual storytelling to your layouts.
Page Layouts
FC Greenfield comes with 12 new layouts for all kinds of page types. One of the highlights is the heavy use of cards even for advanced nested layouts to show the matches. Let's go through the layouts one by one.
Home
Post Index
Post
Post Match
Team Index
Team Post
Match Category
The Club
Facility
Contact
Membership
Error 404
| Page | Type | Description |
|---|---|---|
| Home | Page | The Home page starts with a truly unique animation. A bold text mask with a video background scales up on scrolling, revealing the full video beneath. Next is a grid with latest news followed by a beautifully arranged about section. It has refined typography with subtle parallax animations, and a fabric-inspired background used throughout the layouts to create a dynamic sports look. A prominent red section presents the teams, leading to the real highlight — the matches table. It shows match dates and times, leagues, locations, competing teams, and, of course, the results of completed games. The current match is highlighted in red, followed by upcoming fixtures. Next are the club's social media accounts and a call-to-action section with a video background. The page ends with a large footer, including the club's logo, contact details, partners and a detailed list of all pages. |
| Dropdown | Position | In the menu, we used a full-width mega menu dropbar, for the first time in the primary color. Under News, you will find a grid with latest articles with social media links perfectly aligned at the bottom thanks to the new auto margin. Teams shows a list of all teams grouped by category. And under Matches you can find our table with three most recent games and their results. |
| Post Index | Template | Let's start with news. The post index page starts with a prominent, viewport-high section showing a featured post with a large image. A gradient overlay adds to the dynamic sports look and is used throughout the layouts. All posts are shown in a four-column layout with cards, and there is a small subnav for the post categories at the top. |
| Post | Template | A post starts with the post title and image, followed by a two-column layout. The main content is on the left, and on the right, there is a sticky sidebar with a list of recent blog posts from the same category, a navigation to browse through news categories as well as links to social media profiles. The post ends with a grid with the latest news. |
| Post Match | Template | Some posts are match reviews with additional match information and have their own template. The meta text shows the match date, league and location. And under the post title you can find the match results, followed by a slideshow with match impressions. Here, the sticky sidebar on the right shows a list of goals, cards, the referee and a table with upcoming matches from the same team. |
| Team Index | Template | Next are teams. The team index page shows all teams in an image gallery, with two featured teams displayed more prominently at the top. Again, there is a nice colored gradient overlay. |
| Team Post | Template | The team page starts with a team title and a page navigation to quickly jump to different sections. What really stands out is a live countdown with the team's next upcoming match and all its details. When time runs out, the page will refresh and automatically jump to the next game. Then we have a sticky page navigation in the sidebar that will automatically show an active state depending on your scroll position. And in the main column, you can find information about the team, training times and its latest news. There is also a matches table with past, current and upcoming matches from the team. And of course, we have a nice image gallery for all the team players grouped by their position. To bring them to life, we use videos on hover, turning static images into an engaging, memorable experience. |
| Match Index | Template | Now to matches. The index displays a matches table for all teams, showing games from two weeks in the past and two weeks ahead, with the current match highlighted in red. Completed games even show a link to their match review, if they have one. There is also a subnav at the top that allows you to browse the matches of a single team. |
| The Club | Page | The Club page starts with a beautiful hero section. As you scroll, bold headlines on top of a background video animate subtly with a parallax effect, while the following section smoothly covers the hero. The club logo is perfectly positioned to visually connect both sections. Next is a short section about the club with key facts and the club's committee. The history section presents the club's milestones with eye-catching scroll-driven animations. A bold year headline, further information and layered images bring each milestone to life. As you scroll, everything scales up and blurs, showing the next milestone on the timeline. There is also a list of sponsors and the club's code of conduct shown in an accordion. |
| Facility | Page | The Facility page showcases the sports courts and their surroundings with informative popovers highlighting the office, parking spots, and more. It's followed by a grid of benefits and a section dedicated to the clubhouse restaurant, teasing its atmosphere and menu through an image slider. |
| Contact | Page | The contact page is designed entirely in red. It shows all the important information like the club logo and contact details and seamlessly blends into the footer. |
| Membership | Page | There is also a membership page featuring a pricing table and a download button for the application form, followed by a section that explains the application process step by step. Next comes a motivational video section with an engaging typographic animation. It's followed by a grid of benefits. |
| Error 404 | Template | Finally, there's a fun, colorful 404 error page featuring the club's logo prominently in the center, along with links to all main pages for easy navigation. |
As always, all layouts can easily be loaded from the layout library with just a click. That's it for the layouts, now let's take a look at the style.
Style
FC Greenfield has a bold material style with a red primary and a midnight blue secondary color. The heavy use of both colors throughout all UI components, headlines, dropdowns and dropbars and even modal and offcanvas backdrops, makes the style very colorful. While the default button is outlined, the primary and secondary buttons on hover show a striking gradient between both colors. The same prominent gradient in the navbar as well as subtle gradients in sections and tiles add a little playfulness to the style. Slightly colored box shadows add depth to cards and buttons, while soft, rounded corners provide a smoother, more polished finish. All this together with the striking typography with the bold, uppercase, italic sans-serif font, as well as chevron icons across breadcrumbs, button text, and headline bullets, gives your website a vibrant, dynamic look.
In addition to the default style, FC Greenfield comes with 5 other style variations, each with a different beautiful color scheme. There are two more white styles with a green and a midnight blue primary color, both with a black secondary color. The other two white styles are much more colorful. One combines light blue and red, and another one yellow and violet. Finally, there's a dark tone-on-tone style that uses different shades of blue for its background, primary, and secondary colors. As always, you can switch the whole look and feel of your website with just a click. Simply choose what fits your website best!
White Green
White Blue
White Lightblue
White Yellow
Dark Blue
Text Stroke
One of the highlights of the FC Greenfield style are its colorful headlines – sometimes even with gradients or outlined, all adding to the dynamic sports look. The outlined headlines are created using the new text stroke option in YOOtheme Pro.
Buttons
Buttons in FC Greenfield are also really unique. They use the new translate vertical option in the Button component, so on hover they appear to lift off the background. But that's not all for hover animations. The default outlined button fills with the primary color from bottom left to top right with a smooth diagonal transition. Primary and secondary buttons animate in the same direction but blend their colors with a gradient instead. Even the button text pushes its chevron icons to the right, making every hover feel interactive.
Accordion
FC Greenfield also makes use of the new item mode for the Accordion component. It shows the whole accordion item in a box with rounded corners and a soft box shadow, and with the signature chevron icons, it perfectly fits the style.
That's it for the style. Next up is the content structure.
Joomla and WordPress Websites
FC Greenfield comes with a fully functional Joomla and WordPress demo website. It has a well-thought-out content structure with custom fields for 4 different content types – matches, teams, players and posts. Each content type has its own template for index, category and post pages loading their content dynamically into the layouts. Let's start with matches – the main content type in FC Greenfield.
Match
The Match content type has 10 custom fields. This includes fields for the match date, location and result.
| Match Field | Type (J) | Type (WP) | Description |
|---|---|---|---|
| Date | calendar | calender | Match date |
| Type | list | select | Type of league or competition |
| Round | list | select | Number of round |
| Location | text | text | Sports field |
| Referee | text | text | Referee name |
| Result | text | text | Match result |
| Home Team | subform | repeater | Home team |
| - Club Crest | media | image | Home team crest |
| - Name | text | text | Home team name |
| Away Team | text | text | Away team |
| - Club Crest | media | image | Away team crest |
| - Name | text | text | Home team name |
| Goals | subform | repeater | Score |
| - Time | text | text | Minute of the goal |
| - Player | text | text | Goal scorer |
| - Club Crest | media | image | Scorer club crest |
| Cards | subform | repeater | Cards |
| - Time | text | text | Card time |
| - Card | list | repeater | Card type |
| - Player | text | text | Player name |
| - Club Crest | media | repeater | Player club crest |
Match Categories
Matches are grouped into 8 main categories, one for each team, with further subcategories for the seasons. There is one custom field in the main category for the related team.
| Category Field | Type (J) | Type (WP) | Description |
|---|---|---|---|
| Team | articles | post object | Related team |
Player
The Player content type has 3 custom fields like the player number and video on hover.
| Post Field | Type (J) | Type (WP) | Description |
|---|---|---|---|
| Number | text | text | Player's number |
| Video | media | image | Video on hover |
| Teams | articles | post object | A list of related teams |
Player Tags
Players use tags like Goalkeepers, Defenders or Forwards to group them by their position on the team page.
Teams
The Team content type has 3 custom fields for their league, training times and contact players.
| Post Field | Type (J) | Type (WP) | Description |
|---|---|---|---|
| League | text | text | Team league |
| Training Times | subform | repeater | Training times |
| - Day | text | text | Training day |
| - Time | text | text | Training time |
| - Location | text | text | Training location |
| Contact | subform | repeater | Contact players |
| - Image | media | image | Contact person image |
| - Name | text | text | Contact person name |
| - Position | text | text | Contact person position |
| text | text | Contact person email |
Team Categories
Teams are grouped into 3 categories: Men, Women and Youth, and have no further custom fields.
Post
Finally, the Post content type has 3 custom fields for the post images, related teams and related match.
| Post Field | Type (J) | Type (WP) | Description |
|---|---|---|---|
| Images | subform | repeater | Match impressions |
| - Image | media | image | Image |
| - Image Text Color | list | select | Image text color |
| Match | articles | relationship | Related match |
| Teams | articles | relationship | A list of related teams |
Posts are grouped into 4 categories: Club, Events, Matches and People, and they have no further custom fields.
Now let's see how everything is related to each other.
Relationships
In FC Greenfield, players have related teams so they can be shown on the team page grouped by their position.
Matches also have a related team, but here the relationship is set in the matches category. This way all matches from the category are related to the same team and can be shown on the respective team page. Here, we highlight the next upcoming match with a live countdown at the top, and below we show the matches table with past, current and upcoming matches from the category.
Posts in the Matches category are match reviews. They have a related match and a dedicated template. The match date and location are shown as meta information while the teams and match result are shown right below the title. And in the sidebar on the right, you can find a list of goals, cards and the referee. Next is a real technical highlight. We show a table of upcoming matches from the same team. Here, we get matches from the category of the related match, but only those scheduled for later dates than the related match. This really shows the power of YOOtheme Pro and the date filter.
Finally, posts also have related teams to display a grid with match reviews on the corresponding team page.
That's it for the content structure, next up are the image libraries.
Image Libraries
We created a set of handcrafted icons specifically for FC Greenfield. You can find them in the sidebar on match review pages. Of course, you can find all icons in the Pro image library and use them with any style.
Finally, FC Greenfield comes with more than 190 lovingly curated and free-to-use images. They can be found in the FC Greenfield collection in the Unsplash and Pexels library.
Next Steps
And that's FC-Greenfield – our new theme package for Joomla and WordPress. It's the perfect starter kit for your next sports club website powered by the YOOtheme Pro page builder and all its features. Now go ahead and explore it yourself! As always, let us know what you think in the comments below.
- Sports club website
- 12 page builder layouts
- 6 beautiful styles
- 4 content types and 20 custom fields
- 12 handcrafted icons
- 190+ lovingly curated and free-to-use images
- Powered by the YOOtheme Pro page builder
- Available as WordPress theme and Joomla template
