Theme Installation

As you've downloaded theme archive, you'll be able to find 4 archives inside:

1. Archive with the Manual
2. Archive with the Theme
3. Archive with the Slider Revolution Demo Files
4. Archive with the Child theme

You need the one with the Theme files.

Installation via Dashboard

In the Dashboard go to Appearance → Themes → Add New → Upload Theme

1. Choose archive with the theme
2. Upload zip file
3. Click Install Now
4. Go to Appearance → Themes and activate it

Installation via FTP

1. Open your FTP Client and get access to the host of your website.
2. Open following directory: Wordpress Folder → WP-content → Themes
3. Extract theme's zip inside this folder
4. Go to Dashboard → Appearance → Theme
5. Activate the theme

Plugins Installation

A list of required plugins will appear in the Dashboard.

You should install all of them.

Next steps

Navigate to WordPress Customizer -> Static Front Page, in 'Front Page Displays' check 'Your latest posts'.

It is also recommended to set the 'Post Name' permalink structure in WordPress Dashboard -> Settings -> Permalinks -> Common Settings.

Now you should create some pages.

In the Dashboard go to: Pages → Add New

Then create two pages with the following urls: login and passwordreset (you can give them your own title but the url must be login and passwordreset). Leave the text editor empty.

Demo Content

To install demo content you should do the following steps:

1. Install all required plugins
2. In the Dashboard go to: Appearance → Import Demo Data
3. Click Import Demo Data and wait until installation is over
4. Demo content is installed

You can also install demo for Slider Revolution using headerslider.zip in the theme's archive.

Know issue: some content like fixtures might not appear. If it happened, just go to Dashboard → Fixtures/Results → Fixtures/Results and update already existing posts.

Theme Translation

The theme is translation ready. So you can easily use Poedit or similar software to translate it.

You can find some information about it here

Theme Customization

All theme customization options are available in the default Wordpress Customizer.

Child Theme

The child theme is available in topclub-child.zip archive.

Building Homepage

You can build your homepage using default Wordpress Customizer.

First of all, create a navigation menu inside Wordpress Dashboard and assign it to the 'Head Menu' location.

You can also add your Font Awesome or Bootstrap Glyphicons icons to the menu links: Go to Appearance -> Menus then press Screen Options in the upper right corner -> Check Title Attributes. When you adding your link just type the icon class in Title Attribute field. E.g. for Font Awesome: fa-home.

Then, open the Wordpress Customizer and go to Homepage Sections.

A Homepage is divided into different section. E.g. Header Section, Slider Section, Content Section etc.

For each section in Customizer there are several customization options available. An example for Content Section:

On the picture above you can see:

1. Input field for the section title. Using this option you can set your own title for the section.
2. Content Layout select. Here you can choose where is sidebar should be placed.
3. Post Meta options. Here you can choose meta that should be shown in the short view of post.
4. Background Image. Here you can set your own background image for the theme.

Options for another sections are almost similar so you can easily figure this out.

Building Pages

Open the Wordpress Customizer and go to Pages Settings.

Here you can see tabs with options for different types of pages: custom archives pages, single posts pages etc.

All options inside these tabs are work the same way as in Homepage Sections.

Creating Menu

After the theme installation there will be a default menu available. You can use it but its options are quite limited and this menu has only one level of nesting.

As another option you can choose QuadMenu instead of default one. It has much more customization options and can be used for creating mega menus. Follow the instruction below to activate this menu:

Setting QuadMenu

1. Navigate to WP Dashboard -> Plugins -> Add New -> Type 'quadmenu' in the search field. Install 'WordPress Mega Menu – QuadMenu' plugin and activate it.
2. Navigate to WP Dashboard -> Appearance -> Menus and assign header menu to Head Menu location (Display Location -> Head Menu -> Save Menu).
3. Navigate to WP Dashboard -> QuadMenu -> Options -> Configuration -> Head Menu. Turn 'Integration' to 'on' and select 'Head Menu' as a theme. Click 'Save'.
4. Navigate to WP Dashboard -> QuadMenu -> Options -> Import/Export. Click 'Import from file' and paste the code below into the field (triple click to select all):

    {"last_tab":"quadmenu_theme_custom_theme_1","viewport":"1","styles":"1","styles_normalize":"1","styles_widgets":"1","styles_pscrollbar":"1","styles_owlcarousel":"1","styles_icons":"dashicons","head-menu_integration":"1","head-menu_unwrap":"0","head-menu_theme":"head-menu","gutter":"20","screen_sm_width":"768","screen_md_width":"992","screen_lg_width":"1200","head-menu_theme_title":"Head Menu","head-menu_layout":"collapse","head-menu_layout_offcanvas_float":"right","head-menu_layout_align":"center","head-menu_layout_breakpoint":"768","head-menu_layout_width":"0","head-menu_layout_width_inner":"0","head-menu_layout_width_inner_selector":"","head-menu_layout_lazyload":"","head-menu_layout_current":"","head-menu_layout_divider":"hide","head-menu_layout_caret":"show","head-menu_layout_classes":"","head-menu_layout_trigger":"hoverintent","head-menu_layout_dropdown_maxheight":"1","head-menu_navbar_background":"color","head-menu_navbar_background_color":"rgba(2,2,2,0)","head-menu_navbar_background_to":"#000000","head-menu_navbar_background_deg":"17","head-menu_navbar_text":"#ffffff","head-menu_navbar_height":"60","head-menu_navbar_width":"260","head-menu_navbar_logo_link":"http://topclub.com/","head-menu_navbar_logo":{"url":"","id":"","height":"","width":"","thumbnail":"","title":"","caption":"","alt":"","description":""},"head-menu_navbar_logo_height":"25","head-menu_navbar_logo_bg":"transparent","head-menu_navbar_link_margin":{"border-top":"0px","border-right":"0px","border-bottom":"0px","border-left":"0px","border-style":"","border-color":"#000000"},"head-menu_navbar_link_radius":{"border-top":"0px","border-right":"0px","border-bottom":"0px","border-left":"0px","border-style":"","border-color":""},"head-menu_navbar_link":"#ffffff","head-menu_navbar_link_bg":"transparent","head-menu_navbar_link_hover":"#000000","head-menu_navbar_link_bg_hover":"#ffffff","head-menu_navbar_divider":"rgba(255,255,255,0.5)","head-menu_navbar_link_hover_effect":"rgba(255,255,255,0.3)","head-menu_navbar_link_icon":"#eeeeee","head-menu_navbar_link_icon_hover":"#ffffff","head-menu_navbar_link_subtitle":"#eeeeee","head-menu_navbar_link_subtitle_hover":"#ffffff","head-menu_navbar_badge_color":"#ffffff","head-menu_navbar_badge":"#ffffff","head-menu_navbar_button":"#ffffff","head-menu_navbar_button_background":"#ffffff","head-menu_navbar_button_hover":"#383838","head-menu_navbar_button_hover_background":"#eeeeee","head-menu_navbar_button_radius":{"border-top":"2px","border-right":"2px","border-bottom":"2px","border-left":"2px","border-style":"","border-color":"#000000"},"head-menu_navbar_scrollbar":"#000000","head-menu_navbar_scrollbar_rail":"#ffffff","head-menu_layout_sticky":"0","head-menu_layout_sticky_offset":"0","head-menu_sticky_background":"rgba(0,0,0,0.95)","head-menu_sticky_height":"60","head-menu_sticky_logo_height":"25","head-menu_mobile_shadow":"show","head-menu_navbar_mobile_border":"rgba(255,255,255,0)","head-menu_navbar_toggle_open":"#ffffff","head-menu_navbar_toggle_close":"#ffffff","head-menu_mobile_link_padding":{"border-top":"15px","border-right":"30px","border-bottom":"15px","border-left":"30px","border-style":"","border-color":""},"head-menu_mobile_link_border":{"border-top":"0px","border-right":"","border-bottom":"","border-left":"","border-style":"none","border-color":"transparent"},"head-menu_dropdown_shadow":"show","head-menu_dropdown_margin":"0","head-menu_dropdown_radius":{"border-top":"0px","border-right":"0px","border-bottom":"0px","border-left":"0px","border-style":"","border-color":"#000000"},"head-menu_dropdown_border":{"border-top":"0px","border-right":"0px","border-bottom":"0px","border-left":"0px","border-style":"","border-color":"#000000"},"head-menu_dropdown_background":"#ffffff","head-menu_dropdown_link":"#444444","head-menu_dropdown_link_hover":"#333333","head-menu_dropdown_link_bg_hover":"#f4f4f4","head-menu_dropdown_link_border":{"border-top":"1px","border-right":"","border-bottom":"","border-left":"","border-style":"solid","border-color":"#f4f4f4"},"head-menu_dropdown_title":"#444444","head-menu_dropdown_title_border":{"border-top":"1px","border-right":"","border-bottom":"","border-left":"","border-style":"solid","border-color":"#fb88dd"},"head-menu_dropdown_link_icon":"#fb88dd","head-menu_dropdown_link_icon_hover":"#a9a9a9","head-menu_dropdown_link_subtitle":"#a0a0a0","head-menu_dropdown_link_subtitle_hover":"#cccccc","head-menu_dropdown_button":"#ffffff","head-menu_dropdown_button_bg":"#fb88dd","head-menu_dropdown_button_hover":"#ffffff","head-menu_dropdown_button_bg_hover":"#000000","head-menu_dropdown_tab_bg":"rgba(0,0,0,0.05)","head-menu_dropdown_tab_bg_hover":"rgba(0,0,0,0.1)","head-menu_dropdown_scrollbar":"#fb88dd","head-menu_dropdown_scrollbar_rail":"#ffffff","head-menu_font":{"font-family":"Montserrat","font-options":"","google":"true","font-weight":"700","font-style":"","subsets":"","font-size":"12px","letter-spacing":"inheritpx"},"head-menu_navbar_font":{"font-family":"Montserrat","font-options":"","google":"true","font-weight":"700","font-style":"","subsets":"","font-size":"12px","letter-spacing":"inheritpx"},"head-menu_navbar_link_transform":"uppercase","head-menu_dropdown_font":{"font-family":"Roboto","font-options":"","google":"true","font-weight":"400","font-style":"","subsets":"","font-size":"12px","letter-spacing":"inheritpx"},"head-menu_dropdown_link_transform":"none","head-menu_layout_hover_effect":"","head-menu_navbar_animation_text":{"options":"","action":"hover","speed":"t_1000"},"head-menu_navbar_animation_subtitle":{"options":"","action":"hover","speed":"t_1000"},"head-menu_navbar_animation_icon":{"options":"","action":"hover","speed":"t_1000"},"head-menu_navbar_animation_badge":{"options":"quadmenu_swing","action":"hover","speed":"t_1000"},"head-menu_navbar_animation_cart":{"options":"quadmenu_bounce","speed":"t_500"},"head-menu_layout_animation":{"options":"quadmenu_btt","speed":"t_300"},"head-menu_dropdown_animation_text":{"options":"","action":"hover","speed":"t_1000"},"head-menu_dropdown_animation_subtitle":{"options":"","action":"hover","speed":"t_1000"},"head-menu_dropdown_animation_icon":{"options":"","action":"hover","speed":"t_1000"},"head-menu_dropdown_animation_badge":{"options":"quadmenu_swing","action":"loop","speed":"t_1000"},"css":"","quadmenu_themes":{"custom_theme_1":"Head Menu"},"themes":"~\"head-menu\"","head-menu_information":"","head-menu_manual":"","head-menu_menu_divider":"","head-menu_dropdown_divider":"","head-menu_navbar":"","head-menu_logo":"","head-menu_navbar_layout":"","head-menu_link":"","head-menu_icon":"","head-menu_subtitle":"","head-menu_badge":"","head-menu_button":"","head-menu_scrollbar":"","head-menu_toggle":"","head-menu_mobile_link":"","head-menu_dropdown_link_section":"","head-menu_title":"","head-menu_tab":"","head-menu_dropdown_scrollbar_section":"","head-menu_dropdown":"","redux_import_export":"","redux-backup":1}
   

   Click 'Save'.

Please note: if you attempt to import menu style but get: PHP Warning: Unknown: Input variables exceeded 1000. To increase the limit change max_input_vars in php.ini. in Unknown on line 0 - open the php configuration file on your server, find ;max_input_vars = 1000 and change it to max_input_vars = 5000. Then try to import again.

All Mega Menu options will be available in Appearance -> Menus now. More info: QuadMenu Documentation.

Creating Slider

There are two options available: You can use the default slider included with the theme or use Slider Revolution. You can choose it in WordPress Customizer -> Header Section.

If you want to create Slider Revolution:

1. Create new slider via Slider Revolution menu and copy its alias.
2. Then go to Wordpress Customizer → Homepage Sections → Header → Chose Slider Revolution in select menu, then paste the alias name into the proper field.
3. Save changes.

Creating Slider

To create a default slider: In Wordpress Dashboard go to Slider → Add New.

The following instruction is for default pre-included slider:

1. Give any title for the slide
2. Inside Slider Main Title type the title that will be shown on slide
3. Inside Slide Secondary Text (caption) type the text that will be shown on slide
4. Inside Slider Button Text type the text that will be shown inside the button
5. Inside Slider Button Link type the link that the button will refer to
6. Use Featured Image on the right to set the background image to the slide
7. You can leave some field empty and the element won't show at all

Creating Player

In Wordpress Dashboard go to Players → Add New.

Creating Player Item

1. Give a title to the player item (post)
2. Inside the text editor type some information about player, add some photos and etc
3. Fill the fields of additional info below the text editor. You can leave some of them empty if you dont want them to show
4. You should choose a category for player on the right
5. Set the featured image of the player

Note: your player items will be available by the link: yoursite.com/player
If you get a 404 error just go to Settings → Permalinks and press Save Changes button.

Creating Staff

In Wordpress Dashboard go to Staff → Add New.

Creating Staff Item

1. Give a title to the staff item (post)
2. Inside the text editor type some information about staff member, etc
3. Fill the additional fields
4. Choose a category for staff item
5. Set the featured image of the staff member

Note: your staff items will be available by the same link as players: yoursite.com/player
If you get a 404 error just go to Settings → Permalinks and press Save Changes button.

Creating Score Table

In Wordpress Dashboard go to Score Table → Add New.

Creating Score Table Item

1. Give a title to Score Table item
2. Fill the fields in Score Table Info section
3. Choose a category (table) for the item

Creating Fixtures/Results

In Wordpress Dashboard go to Fixtures/Results → Add New.

Creating Fixtures/Results Item

1. Give a title to Fixture/Result item
2. Type some information in the editor. It will be shown in Match Details if you switch on Provide Link To Details in the next step
3. Fill the fields in Fixture/Results Info section
4. Choose a category for the item (necessary)
5. Choose featured image

Creating Media

In Wordpress Dashboard go to Media → Add New.

Creating Media Item

1. Give a title to Media item
2. Select one of the media types on the right.
• If you want to add image: chose the image type and set your image in featured image
• If you want to add audio: chose the audio type, set featured image and in the editor click Add media choose your audio from library or by 'insert from url' then click Insert into post
• If you want to add video: chose the video type then, set featured image and provide the link to the video under 'Select Media Type' field
3. Choosing a category is optional

Creating Sponsors & Partners

Open Wordpress Customizer and go to: Homepage Sections → Sponsors/Partners Section.

Here are input fields for sponsors/partners logos and links.

You just need to insert link to the logo image. For example, you can upload images through the default Wordpress Media Uploader then copy the links and insert them into the fields. Then you can set the links available on click.

Adding Widgets

Open Wordress Dashboard and go to: Appearance → Widgets.

There you can find 4 pre-included widgets:

1. Table Widget that shows a table with scores. It takes them from Score Table (You can define which table to use when adding widget to the sidebar).
2. Next Match Widget that shows information about next match. You should type all necessary information manually.
3. Fixtures and Results widget that shows latest information about results and show next matches. It takes all information from Fixtures and Results posts. By default it shows 3 items from Fixture and 3 items from Results.
4. Follow Us Widget that shows social buttons. You can set your links through the default Wordpress Customizer.

Info: We highly recommend you to install a plugin like Custom Sidebars that will help you with managing widgets display locations.

In the Demo you can see 1 simple text widget, 1 custom widget 'Follow Us' for footer widget area that already included in theme and 2 custom widgets in footer. You can create them by your own. Just add a Text Widget to the footer. Switch off automatically add paragraphs and add the following code:

Newsletters Widget

<span class="newsletters-text">
    Your Text Here... This is just HTML markup example. 
    This form won't work unless you give it your functionality.
</span>
<input class="footer-email-form" type="email" placeholder="E-Mail">
<input class="footer-email-submit" type="submit" value="SUBSCRIBE">

Contacts Widget

<div class="contacts-line">
  <span class="glyphicon glyphicon-map-marker contacts-glyphicon"></span><span class="info-cont">Your Address</span>
</div>
<div class="contacts-line">
  <span class="glyphicon glyphicon-earphone contacts-glyphicon"></span><span class="info-cont">Your Phone Number</span>
</div>
<div class="contacts-line">
  <span class="glyphicon glyphicon-envelope cotacts-glyphicon"></span><span class="info-cont">
      <a class="info-cont-link" href="mailto:yourmail@yourmail.yourmail">Your E-Mail. Don't forget to change the link.</a>
  </span>
</div>

FAQ

Here are some frequently asked questions:

Latest FAQ can be found here: Top Club Theme FAQ

Updating Theme

To update the theme you should download the archive from the marketplace again.

After you have it downloaded you should extract it and find the another archive with the theme files.

Upload this archive using Wordpress and activate the theme.

Then go to Dashboard → Appearance → Menu choose menu location again and save changes.

Then go to Dashboard → Plugins and activate Top Club plugin again.

Copyrights Information

A list of items that are used in this theme:

1. Bootstrap
   Github
   License


2. Slider Pro
   Github
   License


3. Bootstrap-hover-dropdown
   Github
   License


4. Owl Carousel
   Github
   License


5. jQuery.TosRUs
   Github
   License


6. JQuery-viewport-checker
   Github
   License


7. Woocommerce
   Github
   License


8. Animate.css
   Github
   License


9. Wp-bootstrap-navwalker
   Github
   License


10. TGM-Plugin-Activation
    Github
    License


11. Font Awesome
    Github
    License


12. Kirki
    Github
    License


13. Images that are used in the theme or in the preview:
    Fotolia
    Fotolia
    Fotolia
    Fotolia
    Fotolia
    Designed by Freepik
    Designed by Freepik
    Designed by Freepik
    Designed by Freepik
    Designed by Freepik
    Designed by Freepik
    Designed by Freepik
    Designed by Freepik
    Designed by Freepik
    Designed by Freepik