“The League” Documentation by “MVP Themes” v1.02.0

“The League”

Created: February 18, 2017
By: MVP Themes
Support: Support Center

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to visit the MVP Themes Support Center here. Thanks so much!

Table of Contents

Disclaimer - top

Although support is not required of ThemeForest authors, I do offer support for the theme and its core features and functionality. I cannot guarantee that this theme will function with all third-party components and plugins. The League Theme is presented as is.

Installation/Homepage Setup - top

  1. Make sure that you have the latest version of Wordpress installed.
  2. You can upload The League to Wordpress in one of two different ways:
    • Extract the the-league.zip and upload the extracted the-league folder to the /wp-content/themes/ directory on your FTP server.
    • OR go to Appearance > Themes and click on the Add New link at the top. Then click Upload Theme and click Choose File, then select the-league.zip and click Install Now.
  3. After you upload the theme, activate it by going to Appearance > Themes and place your mouse over The League and click the Activate button underneath.

After installing the theme, you can import the XML data file (located in the XML Data folder of the original zip file), which will populate your theme with dummy posts, categories, tags, and menus. For more information about how to import Wordpress XML data, click here and scroll down to the Wordpress section.

NOTE: The XML data does not come with the images from the demo, which are not licensed to be included in the theme file.

In order to utilize the Featured Posts section like in the demo, you will have to set up a static homepage by doing the following:

  1. Go to Pages > Add New. Enter Home as the title and in the Page Attributes section, select Home from the Templates dropdown menu on the right. Click Publish.
  2. Go to Settings > Reading and select the A static page radio button and in the Front Page: dropdown menu, select Home. Click Save Changes
  3. Go to Appearance > The League Options and click Reset Options.
Theme Installation

Updating the Theme - top

From time to time, a theme update will be released that either fixes a bug and/or adds new features to the theme. You can update the theme in one of two ways:

  1. Remove the old version of the theme by going to Appearance > Themes and activating another theme (you may want to place your site in Maintenance mode via a plugin). Then, hover your mouse over the The League theme image and click Theme Details. Then click delete in the lower right corner of the window that appears. Then, follow the installation instructions above to install the new version of the theme.
  2. OR you can upload the new /the-league folder (located in the the-league.zip file) via FTP and overwrite the old files.

NOTE: Updating the theme will overwrite any changes you made to any of the core files (index.php, style.css, header.php, etc), however, you will not lose any changes you made to the Theme Options, menus, widgets, etc.

Also, make sure to go to your Theme Options and click "Save all changes" after each time you update the theme to make sure any new options are generated properly.

Theme Options - top

The League comes with custom Theme Options to allow you to set up many of the theme features without touching the code. To edit the Theme Options, go to Appearance > The League Options.

Theme Options
  1. General - Here, you will be able to upload your custom logo to replace the default logo, upload a custom favicon, enter any custom CSS you need, as well as toggle the responsiveness of the theme, and the Infinite Scroll feature. NOTE: Please click "Save All Changes" in the General Settings section once before you begin in order to register the default theme settings.
    • Logo - Upload a logo file that will appear in your navigation. The recommended maximum dimensions for this logo are 250x50.
    • Logo in Footer - Upload a logo file that will appear in your footer. There are no maximum recommended dimensions for this logo size.
    • Custom Favicon - Upload a 16px x 16px PNG or GIF file to serve as your favicon.
    • Custom CSS - Here you can enter any custom CSS code for the theme, which will overwrite any other CSS code. You will not lose any of the custom CSS in this field when you upgrade the theme to a newer version.
    • Toggle Responsiveness - Uncheck this box if you would like to remove responsive feature of the site that alters the site based on the device it is being viewed on. By disabling this, visitors will see the desktop version of the site no matter what device they are viewing.
    • Toggle Infinite Scroll - Uncheck this box if you would like to remove the Infinite Scroll feature on the homepage and archive pages.
  2. Colors - Here, you can select which colors you would like to use for your site.
    • Primary Theme Color - Select or enter a hexidecimal code for the primary color of the site.
    • Top Navigation Background Color - Select or enter a hexidecimal code for the background color of the nop navigation bar.
    • Top Navigation Text Color - Select or enter a hexidecimal code for the background color of the dropdown menus.
    • Top Navigation Text Hover Color - Select or enter a hexidecimal code for the text color when you mouse over the top navigation.
    • Primary Link Color - Select or enter a hexidecimal code for the primary link color for the site. This will only affect unstyled links.
    • Link Hover Color - Select or enter a hexidecimal code for the color of links when you hover your mouse over.
  3. Fonts - Here, you can select from over 700 Google Fonts to set the various fonts for your site. You can browse the list of Google Fonts here. You can also enter standard web fonts like Arial and Georgia as well.
    • General Content Font - Enter the font name for the general font for the content on all pages.
    • Fly-Out Menu/Top Navigation Font - Enter the font name for the fly-out and top navigation menus.
    • Featured Posts/Article Headline Font - Enter the font name the font for the headlines in the Featured Posts section and the Article title on posts and pages.
    • Article Title Font - Enter the font name the font for the title of posts on article pages.
    • General Heading Font - Enter the font name the font for the general headings that appear at the top of the different sections around the site.
  4. Homepage Settings - This is where you will be able to configure the various homepage settings, including the Featured Posts section.
    • Show Featured Posts? - Uncheck this box if you would like to remove the Featured Posts section from the homepage.
    • Featured Posts Layout - Select between 4 different layouts for your Featured Posts section on the homepage.
    • Featured Posts Tag Slug - Enter the Tag Slug of the Tag you want associated with the Featured Posts section. Posts with this Tag will be displayed in the Featured Slider at the top of the homepage. You can find the slug for the Tag you want to use by going to Posts > Tags and then find the Tag you want to use for the Featured Posts section and find the slug for that Tag in the Slug column. To find more information on how to find the Tag Slug, click here.
    • Homepage Body Layout - Select your layout for the body of the homepage that will appear in the main content area of the homepage.
    • Number of Posts Per Page - Set the number of posts per page that you want displayed on the Homepage Blog and the Latest News Template.
  5. Article Settings - Here you can toggle the display of featured images, social sharing buttons, author info, and the previous/next story section on all posts.
    • Default Post Template - Select the default Post Template layout for your articles. This template will be used for all past articles and will be the default template for new articles unless a new template is chosen when creating a post.
    • Show Featured Image In Posts? - Uncheck this box if you would like to remove the featured image from automatically displaying in all posts.
    • Show Social Sharing Buttons? - Uncheck this box if you would like to remove the social sharing buttons from all posts.
    • Show Post Info? - Uncheck this box if you would like to remove the author/post info from the top of posts.
    • Show Author Box? - Uncheck this box if you would like to remove the author box from the bottom of your posts.
    • Show More Posts? - Uncheck this box if you would like to remove the More Posts from the bottom of the posts.
    • Number of More Posts - Set the number of posts that you want displayed in the More Posts section on your posts.
    • Show Previous/Next Post Links - Uncheck this box if you would like to remove the links to the previous/next posts that appear in the left/right margins of larger resolution screens.
    • Show Trending Posts Bar? - Uncheck this box if you would like to remove the Trending Posts Bar that appears at the bottom of your posts as you scroll.
    • Trending Posts Days - Number of days to use for the Trending Posts Bar. Only posts published within this length of time will be displayed in the Trending Posts Bar.
    • Disqus Forum Shortname - If you want to use Disqus as your commenting system, you do not need to install the Disqus plugin. All you need to do is enter your Disqus Forum Shortname in order to activate Disqus on your site. This is the unique identifier for your website in Disqus (i.e. yourforumshortname.disqus.com). Only enter the Shortname and not the full URL.
  6. Category Pages - Here, you can configure the layout of your category pages.
    • Show Featured Posts? - Uncheck this box if you would like to remove the Featured Posts section from the top of your category pages.
    • Featured Posts Layout - Select the layout of your Featured Posts section on the category pages.
  7. Scoreboard Settings - Here you can set up the optional custom scoreboard feature. For more information on how to enter scores to display in this widget, please refer to the Scoreboard section of the documentation.
    • Show Scoreboard? - Uncheck this box if you would like to remove the scoreboard feature from the site.
    • Scoreboard Skin - Choose between a light and dark skin for the scoreboard.
    • Name of Category X - Here you can enter a label for your category or sport, such as MLB, NFL, tennis, etc.
    • Select Category X - Select from any of the scoreboard categories that you created when entering scoreboard data. For more information on how to enter scoreboard data, please refer to the Scoreboard section of the documentation.
  8. Social Media - Here you can enter URLs for several popular social media sites to activate links to each page that will appear in a floating box on the right of the browser window. Simply enter the URL and the link will appear automatically!
  9. Ad Management - Enter ad code for the optional leaderboard banner areas and/or a wallpaper ad.
    • Header Leaderboard Ad Code - Enter your ad code for the 970x90 leaderboard ad area that will appear at the top of the site. You can also place a 728x90 ad in this area.
    • Featured Posts Ad Code - If you are using Featured Posts #4, you can insert a 300x250 ad that will appear at the top of the right column. Enter your ad code (Eg. Google Adsense) for that area.
    • Footer Leaderboard Ad Code - Enter your ad code (Eg. Google Adsense) for the 970x90 ad area just above the footer. You can also place a 728x90 ad in this spot.
    • Wallpaper Ad Image URL - Enter the URL for the wallpaper image (i.e. http://www.xyzdomain.com/xyz-wallpaper.jpg). Please do not insert the actual ad code for the wallpaper ad, just the image URL. The recommended width of the wallpaper ad is a minimum of 1400px. The recommended height is a minimum of 600px. NOTE: Due to the nature of wallpaper ads, the content of the site will sit on top of the ad and cover up the middle 1200px of the ad. The only visible area will the the left and right margins of the image which is why the ad should be wider than 1200px.
    • Wallpaper Ad Click-Through URL - Enter the URL that users will be taken to if they click on the Wallpaper Ad.
  10. Footer Options - Enter your information for the Footer Info Box.
    • Copyright Text - Here you can enter any text you want (eg. copyright text).

The League supports three custom menu sections: a Main Menu for the top navigation bar that will only be visible on desktop devices, a Fly-Out Menu that will slide out from the right and will be used on all devices, and a Footer Menu that will appear at the very bottom of your site.

To set up the menus, go to Appearance > Menus. Here, you can create a new menu by clicking the create a new menu link, give the menu a name, and click Save Menu button. You will then see a Manage Locations tab appear at the top of the screen. Click the Manage Locations tab and then select your newly created menu from the dropdown list of the menu location you would like to set up and click Save Changes. You are now able to create a custom link, page or category and add it to your new menu by clicking the Add to Menu button.

If you would like to add a "Home" button, you can do so by adding a "Custom Links" menu item. Enter the URL of your site as the URL and "Home" as the Link Text.

For more information on how to use the Wordpress custom menu feature, click here.

To utilize the "Megamenu" feature for Category menu items (the Megamenu feature will only work for Categories), do the following:

  1. Go to Appearance > Menus and click the Screen Options button at the top right corner of your screen.
  2. Make sure the CSS Classes checkbox is checked, then click the Screen Options button again to close the Screen Options.
  3. In the Menu Structure box, select the Categroy menu item you would like to add a Megamenu to by clicking on the down arrow on the right of the menu item.
  4. Type mvp-mega-dropdown in the CSS Classes (optional) box
  5. Click Save Menu
Menus

Widgets - top

The League comes with 8 custom widgets for use in 5 different widget areas: Homepage Widget Area, Homepage Sidebar Widget Area, Default Sidebar Widget Area, Post/Page Sidebar Widget Area, and the WooCommerce Sidebar Widget area if you are using the WooCommerce plugin. To activate the widgets, go to Appearance > Widgets and click and drag a widget from the Available Widgets section and drop it into any of the 8 different custom widget areas.

Widget Areas:

Available Widgets:

Widgets

Images - top

The League supports retina-ready images. To utilize this feature, follow these instructions:

  1. Create a second image that is twice the size of your existing image. For example, if your logo is 250x60, your retina image would need to be 500x120.
  2. Add @2x to the end of the name of the retina image. For example, if your logo is called logo.png, name your retina version logo@2x.png.
  3. Upload the retina image in the same directory as your non-retina image. For example, if your logo is located in /wp-content/themes/the-league/images/, you must upload the retina image in this directory.
  4. That's it!

The League utilizes Wordpress' built-in Featured Image feature to handle image management. The recommended size for images to show properly within posts and in the Featured Posts area on the homapage and category pages is 1000x600px. If you plan on using a different image size, it is recommended that you use image dimensions that are proportional to the 1000x600 recommended dimensions (i.e. 500x300 or 660x400).

To set the featured image for a post, go to Posts > Add New (or edit an existing post) and click the Upload/Insert icon above the main text box. From here, choose a file and upload it. Once it is uploaded, click Use as featured image located near the bottom of the Add Media window. Then click Save all changes, close the Add Media window and you're good to go! The League will take care of the rest in generating the smaller thumbnails that show up in the various places around the site.

Background - top

The League utilizes Wordpress' built-in Custom Backgrounds feature to set up your custom background color and/or image. For more information on how to set up your custom background, click here.

Post Options - top

The League gives you a variety of custom options for your posts, inlcuding a custom Image Gallery, a Featured Headline feature, and the ability to set a full-width posts.

Page Templates - top

The League comes with 4 custom page templates: Home, Authors List, Latest News, Full-Width. In order to create a custom page template

  1. Go to Pages > Add New. Enter a title in the Enter a title here box.
  2. In thePage Attributes section, select the page template you want to use from the Templates dropdown menu on the right.
  3. Click Publish and that's it!

Scoreboard - top

The League comes with a custom Scoreboard plugin that allows you to quickly enter and update scores to display in the custom scoreboard area. Here are the instructions for setting up your scoreboard posts:

  1. Go to Plugins > Add New then click the Upload link at the top.
  2. Click Choose File and select the mvp-scoreboard.zip file (located in the /plugins folder of your original zip file you downloaded from Themeforest), then click Install Now.
  3. After the plugin installs, click the Activate Plugin link.
  4. Go to the Scores section of your Wordpress backend.
  5. To add a new score, click Add New.
  6. Enter a title for the score entry (this will only be used if you use the "link" feature to make scores clickable to create previews, recaps, or game stories for each scoreboard item).
  7. Next, if you plan to create a preview, recap, or game story, you can enter that information in the main text editor area
  8. Then look for the Scores Info box, which is below main text entry box. Here, you can enter a Score Status (e.g. Final or Sat 8:00pm), enter the abbreviations of the home and away teams, enter the scores for each team, and select whether you want to actually display the numerical score in the scoreboard and whether you want to link the scoreboard item to the post. The Display Numerical Score feature is used for scoreboard items that haven't occurred yet. So, instead of displaying the default 0-0 score, you can hide the score and then check the box once the game begins or ends.
  9. Next, you will need to select or add a new catgory (e.g. MLB or Football) via the Score Categories box, located in the right sidebar of the post screen. Click Add New Category to associate this score with a category.
  10. Once you have entered a title, entered information in the Scores Info box and then selected (or added a new) category, click the Publish button and that's it!
  11. Make sure that you have set up your Scoreboard Settings in the The League Options and you should be good to go!
Scoreboard

Post/Page Slideshows (Theia Post Slider) - top

The League utilizes Theia Post Slider to give you dynamic slideshows in your posts and pages. Here are the instructions to install and set up Theia Post Slider for The League:

  1. Go to Plugins > Add New then click the Upload link at the top.
  2. Click Choose File and select the theia-post-slider.zip file (located in the /plugins folder of your original zip file you downloaded from Themeforest), then click Install Now.
  3. After the plugin installs, click the Activate Plugin link.
Theia Post Slider uses Wordpress' built-in "Page Break" feature to split up each slide in the slideshow. Simply click the "insert page break" shortcode button or manually insert
<!--nextpage--> to insert a page break, which will split your post into different pages/slides.

To customize Theia Post Slider to your liking, you can edit the slider settings by going to Settings > Theia Post Slider. Click here for the full documentation for Theia Post Slider.

The League utilizes Theia Sticky sidebar to allow sidebar content to stay stay visible within each section as you scroll down the page. Here are the instructions to install and set up Theia Sticky Sidebar for The League:

  1. Go to Plugins > Add New then click the Upload link at the top.
  2. Click Choose File and select the theia-sticky-sidebar.zip file (located in the /plugins folder of your original zip file you downloaded from Themeforest), then click Install Now.
  3. After the plugin installs, click the Activate Plugin link.

To customize Theia Sticky Sidebar to your liking, you can edit the slider settings by going to Settings > Theia Sticky Sidebar. Click here for the full documentation for Theia Sticky Sidebar.

Once you are in the Theia Sticky Sidebar Settings (Settings > Theia Post Slider), you will need to go to the General tab, enter a name for your sidebar, then enter the following into the Sidebar CSS Selector box: #mvp-side-wrap, #mvp-post-soc-wrap. Click Save Changes.

Then, in the Sidebar additional top margin (px) box, you will need to enter a value of 124. Click Save Changes. That's it! Your sidebars should now be sticky throughout your site!

Author Info - top

The League allows you to display information about the author on each post. You can enter/edit this information by going to Users > All Users and editing any of your existing users.

Author Info

Translation Files - top

The League comes translation-ready with .po/.mo files ready for translation. These files are located in the /languages folder of the main theme folder. Once you have translated the files, simply save them as the name of your language code (i.e. es_ES.po and es_ES.mo for Spanish) and place them back in the /languages folder.

For more information on how to utilize these files to translate this theme into another language, click here.

WooCommerce - top

The League is fully compatible with the popular e-commerce plugin WooCommerce, which will allow you to create a store within your site. You can download WooCommerce here. Once you have downloaded the plugin, follow these instructions to install the plugin with Wordpress:

  1. Go to Plugins > Add New
  2. Select the Upload link at the top.
  3. Click Choose File and select the woocommerce.zip file that you downloaded, then click Install Now.

Once the plugin is activated, WooCommerce will need to install several pages in order for it to function properly. Click here for more information about setting up WooCommerce.

bbPress - top

The League is fully compatible with the popular forum plugin bbPress, which will allow you to add a forum to your site. You can download bbPress here. Once you have downloaded the plugin, follow these instructions to install the plugin with Wordpress:

  1. Go to Plugins > Add New
  2. Select the Upload link at the top.
  3. Click Choose File and select the bbpress.xxx.zip file that you downloaded, then click Install Now.

Click here for more information about setting up bbPress.

CSS Files - top

Javascript Files - top

Support - top

If you have any questions related to setting up the theme that are not covered in this documentation or if you encounter any technical bugs, please submit a ticket at the MVP Themes Support Center. Please note that this theme is sold "as-is" and any additional custom modifications you would like to make to the theme are your responsibility.

Sources and Credits - top

I have used the following images or other files as listed.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

MVP Themes

Go To Table of Contents