1. Theme installation
To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex.
1.1 Upload theme via FTP application
- First you must unzip the file you downloaded from Themeforest.
- There you will find a file named
planetshine-goodgame.zip. Now unzip this file.
- You should see a folder named planetshine-goodgame
- Upload this folder to /wp-content/themes/ location in your WordPress installation.
1.2 Upload theme via WordPress admin panel
- Open your WordPress admin panel, go to Appearance and choose Add New
Click Upload Theme and choose the
planetshine-goodgame.zipYou can find the planetshine-goodgame.zip file by un-zipping the file you downloaded from ThemeForest.
Upload only the
planetshine-goodgame.zip file. If you have a "missing stylesheet" issue, then you have not un-zipped the original file and you are uploading the wrong one!
If you are seeing a "Are you sure you want to do this?" warning, then this usually means, that the theme file is too large for your server to upload using wp-admin. In this case you must use the FTP method instead.
Once upload has finished, activate your theme in Appearance / Themes in WordPress admin panel.
1.4 Install required plugins
GoodGame relies on number of plugins for various theme features. Without out them you will not be able to use many of the theme features. You absolutely must install Planetshine GoodGame Theme Extension plugin. This plugin powers a lof of the key features you see in the demo. See Installing required plugins.
1.5 Regenerate post thumbnails
If you are installing the theme on a WordPress site where you already have posts and pictures it is bly advised that you regenerate thumbnails! That can be achieved with Regenerate Thumbnails plugin which is already bundled with the theme. Once you have activated the plugin, go to Tools / Regenerate thumbnails in WordPress admin and run the regeneration process.
2. Installing required plugins
GoodGame relies on number of plugins for various theme features. Some are required - without them important theme features will not be available. For example, you need Planetshine GoodGame Theme Extension, WPBakery Page Builder to use static home page or Attachments in order to have the galleries. Other plugins are just recommended - they provide extra functionality that the theme supports, but it is in no way essential. For example, if you don't need a shop, then you can avoid installing WooCommerce.Installing plugins is easy. Right after you activated the theme a prompt will appear asking you do this. Click the Begin installing plugins link (see images below).
Some of the plugins, like WPBakery Page Builder and Slider Revolution might offer you the option of registering them. This is not required to use them and you have to dismiss these options because plugins that where acquired via bundles can't be activated. This feature is reserved only for plugins that where bought separately. Regardless this will have no effect on the plugins functionality and you will be able to use all of the features.
3. Check theme status
Once you have installed Planetshine GoodGame Theme Extension plugin you will get access to theme admin which includes the Status Page. It will help to ensure that GoodGame will work great on your server
It will show you if your Wordpress and hosting are set up appropriately for running GoodGame. Status page can be accessed by opening GoodGame Theme Settings and selecting Status & Import.
3.1 Troubleshooting status page issues
There are 7 things that are checked in the status page:
3.1.1 Install and activate theme
If you see this message, you have already succeeded. Yay!
3.1.2 Install required plugins
See Installing required plugins.
3.1.4 Resize thumbnails for pre-existing posts
See Resize thumbnails for pre-existing posts.
3.1.5 Make the uploads directory writable
See Changing File Permissions.
3.1.6 Enable PHP file_put_contents and file_get_contents functions
To achieve this you have to edit your servers
php.ini file. Chances are that this can be only done by your hosting administrator so you should contact them and ask for enable these two functions. For advanced users - this thread details how to disable functions in PHP. Enabling them is the exact reverse process.
3.1.7 Set PHP allocated memory limit to at least 128mb
This article details approaches that can be taken to achieve this: Increasing the WordPress Memory Limit.
4. Theme settings
Open admin section for your WordPress blog. You can find it by typing your domain name + /wp-admin/. Once you have opened the admin, you have to click on GoodGame at the top left corner of screen. There you will find theme settings.
There are 8 sections in the theme settings:
- General settings add logo, setup themes header, footer blog, post etc. settings.
- Visual editor edit visual settings. This takes you to WordPress theme customiser that allows you to change various colors, fonts and images and see the results immediately.
- Register Theme allows you to insert all the necessary info to enable theme updates via WordPress admin
- Status & Import see the theme setup checklist; import full theme demo or just couple of pages and load style presets.
- Advertisement create and manage banners and google ads.
- Sidebar Manager create new sidebars and assign them to different locations.
- Google Fonts select which Google Fonts should be made available for use in Visual Editor
- Help & Support view theme documentation and Planetshine support contact info.
4.1 Setting up your custom logo
Go to theme settings and open the General tab. There you will find section called "Logo". It offers you two types of logos - textual and image.
If you select Image logo you will see an upload field and alt text field. Click on the "browse" button and select your logo from your computer. The theme will offer you the option to restrict the image width by entering a size value in pixels. Use that if you logo is too large. Click save on the bottom of page and that's it! You should also provide an ALT text which will be show if your image ever fails to load on the front page.
If you select a Textual logo the theme will display your site name as the logo. You also have the option to display a colorful label above it that contains the name of currently open post category.
5. Importing theme demo
If you are starting a brand new WordPress site you can take benefit of GoodGame demo import feature. What this does it creates pages, posts, product menus etc. that you can see in the theme demo site. This can simplify taking the first steps towards customising the site to your needs.
To import theme demo go to GoodGame / Status & Import / Demo Import in your sites wp-admin and click Install demo.
Please make sure you have installed and activated all the required plugins before importing the demo content. Also it's recommended to complete the WooCommerce setup wizard.
Warning: uninstalling a demo will delete ALL the content that was created during the install even if you modified it afterwards.
7. Setting up homepage
If you used the auto page install feature after activating the theme, GoodGame will have created and set up a homepage for you. This page will be called Homepage and you can find it and edit it under Pages in your wp-admin. To create a homepage like the one seen in theme demo, WPBakery Page Builder plugin must be enabled!
Homepage layout is made with WPBakery Page Builder plugin (also included with GoodGame for free, but normally has to be bought seperately). It's a extremely powerful tool that allows you to build custom layouts by dragging and dropping elements. If you imported the demo content the theme will have already placed everything for you, but you can edit it easily using WPBakery Page Builder (learn more about it by checking out the WPBakery Page Builder documentation.)
Always make sure that you have selected the "Page Builder Layout" template for the page that you are building with WPBakery Page Builder
7.1 Homepage WPBakery Page Builder Blocks
This section of documentation will give examples of all the homepage WPBakery Page Builder blocks that are available in this theme. To add an item to homepage click WPBakery Page Builder "Add New Element" button (looks like large + sign). This will open a popup with all the composer elements. Select tab "GoodGame". You will see the following element selection dialog window.
See section about Homepage slider for detailed description.
Post category slider
Full width homepage element. Select post categories to show. Uses Ajax to switch between visible categories
Post platform slider
Full width homepage element. Select post platforms to show. Uses Ajax to switch between visible platforms
Post list with heading
Large featured post followed by list of smaller posts. The featured post can be set by checking "This post is featured" in post settings.
Large post slider
Large slider with 4 columns. 2/3 width recommended.
Latest photo galleries
List of latest photo galleries. 2/3 width recommended.
Compact post columns
Columns with post titles and small thumbnails. 2/3 width recommended.
Embed a specially styled singe post block.
Post list with large items (text below image)
Blog like post list with large items that have text below image. 1/3 to 2/3 width recommended.
Post list with large items (text on side)
Blog like post list with large items that have text on side. 1/3 to 2/3 width recommended
Insert a GoodGame styled title in page
Always make sure that you have selected the "page builder layout" template for the page that you are building with WPBakery Page Builder
7.2 Setting WPBakery Page Builder elements to full screen width
By default all WPBakery Page Builder rows will be limited in width to 1170px - the size of content box. To have them be as wide as browser window you can add the CSS class "full-width".
7.3 Homepage slider
GoodGame has it's own purpose built slider that you can use in homepage (alternatively you can use revolution slider). The slider can easily be setup using WPBakery Page Builder. If you imported demo content then you already should have the basic slider elements in place and now you just have to set correct post IDs. If you are starting from empty page then you first have to click WPBakery Page Builder "Add New Element" button (looks like large + sign). This will open a popup with all the composer elements. Select tab "GoodGame" and pick "Homepage slider".
This will add a new block to the homepage. This block is the slider. Inside it you can now place the actual slides. To do that click on the plus icon in the middle of the slider element.
In the dialog window that opens select "Home slider item".
Insert the ID of the post you want to link to this slide item and select image. You can find the ID of a post, by opening it's edit page in wp-admin and scrolling to the bottom of it. There will find a bolded text with something like this "Post ID: 283"
Click the save button and you have successfully created slider with one slide. Now you can use the same process for adding more slides.
8. Setting up Twitch
GoodGame theme uses Twitch API to provide Twitch integration. Each Twitch API request is cached for 60 seconds to decrease request count and load time. To perform Twitch API request Twitch Client ID is needed.
8.1 Acquiring Twitch Client ID
To acquire Twitch Client ID you should register your site on Twitch. To do this locate dev.twitch.tv website and follow these steps:
- navigate to -> Apps section;
- Click on Register your application button;
- Fill out registration form and click on Register button;
- Copy ID key from Client ID field;
- Locate your wp-admin;
- Go to theme's settings (GoodGame), General tab, Twitch section;
- Paste ID key to Twitch Client ID input field;
- Click on Save changes button.
8.2 Setting up Twitch content
Theme provides 2 different Twitch WPBakery Page Builder blocks - Twitch live stream and Twitch recent videos - located under GoodGame Post Blocks tab in WPBakery Page Builder's Add Element panel. Both WPBakery Page Builder blocks can be used in page either. To add Twitch WPBakery Page Builder block only streamer's username is needed.
It is also possible to add Twitch video stream to sidebar using GoodGame Twitch Live Stream widget.
9. Setting up and using Ads
GoodGame provides all the necessary features for displaying custom banner ads and google ads on your site. Ads can be managed by going to GoodGame theme settings page in wp-admin, then clicking Advertisement in the sidebar. GoodGame supports 4 different ad sizes - 970x90px, 728x90px, 468x60px and 300x250px. For each of the sizes you can create as many ads as you want - there are no limits.
Advertisement section has two sub sections - Manage and Locations. The Manage section is used to create, update and delete ads. Locations section allows you to assign these ads to any one of the predefined theme locations. On top of that you can also insert banners ads in sidebars using widgets, or in pages using WPBakery Page Builder content blocks made especially for the GoodGame.
Manage section is divided in sub sections according to ad sizes. For each of the ad sizes there is an existing default one that you can edit right away. You enable/disable individual ads, give them titles (useful when managing ad locations), upload banner image and set banner link. If you wish to use Google ad instead of regular banner, select "Type of ad" to be Google AdSense and then paste the Google AdSense code in the text field.
Location section list all the supported locations for ads in the theme. You can enable the location by checking it in. After that you also have to enable ads in by checking them in as well. If you have multiple ads check in a single location, they will be randomly rotated.
Below each banner size there is button Add new image banner or Google AdSense. Click this to add a new ad for this size.
The Ads section will not work if you have Ad Blocking plugins installed on your browser
Alternatively you can also include ads into pages using WPBakery Page Builder blocks provided by the theme.
GoodGame offers the possibility to create photo galleries. That can be achieved by going to Galleries section in wp-admin and clicking "Add new" button at the top of the page
First set a title and description just like you would for any regular post or page. Then scroll down to Gallery section right below the description text field. Plugin Attachments has to be installed and activated for this to work!
Click the Attach images button and add any number of images either by selecting them from your WordPress media library or uploading them from your computer. Once that's done you can adjust the order of images and add captions where necessary.
If you have enabled "pretty" wordpress permalinks, then you can view the gallery by going to http:// YOUR_SITE_URL + /gallery/.
This theme has a Responsive layout with one or two columns (varies for different sections). It's based on Bootstrap 3.3.5 and it's markup is structured according to bootstrap best practices. This theme has 4 different layout modes:
- Large (for 1170px or wider screens)
- Medium (for 970px to 1170px screens)
- Tablet (for 768px to 970px screens)
- Mobile (for screens smaller than 768px)
Adjust your browser window size to explore them closer. GoodGame uses lots of HTML5 and CSS3 features, so it will NOT support legacy browsers such as Internet Explorer 6, 7 & 8.
12. LESS & CSS files
GoodGame stylesheets are created using LESS technology. LESS files are located in /theme/assets/less folder. After editing LESS files theme will automatically compile them in one CSS file. There is also a /theme/assets/css folder, but these files are only used as a backup in cases where because of problems with server configuration it's impossible to compile LESS.
The main LESS file is
goodgame.less which includes all the other files. All the color variables are defined in variables.less however by default they are commented out because the theme will inject live color settings in the LESS file right from the Visual Editor. Specific sections of theme have their separate LESS files, for example, goodgame-bbpress.less, goodgame-woocommerce.less and planetshine-buddypress.less.
If you wish to edit the themes styling, it's best if you do this using WordPress child theme. That way you will simplify updating the theme in future.
theme/assets/js/theme.js. Code that handles behaviour of the mega menu is located in theme/assets/js/planetshine-mega-menu.js.
It is comparatively easy to find what you need to edit in theme.js. Just open the file and look for init function. It initialises all other functions which you can recognise by the name.
14. Translating the theme
GoodGame can be translated using the same tools and methods as the rest of WordPress - using POT language files. The language file for this theme can be found in languages folder in theme files. There you will find a file called
Once you have the POT file, you’ll need to open it in a program like POEdit, and translate the English language into your preferred language. When complete, you’ll want to save the file twice, as two separate files – a .po file and a .mo file. When you save the files, you must name them according to your country and language code. For example, the language code for English is en_EN, so you would save the translated files as
en_EN.po first, then en_EN.mo. When that’s done, simply upload the files to your themes languages folder.
Finally head over to Settings > General in wp-admin and select your desired language using the "Site Language" option and save the changes.
16. Updating the theme and bundled plugins
16.1 Automatic theme update
To update the theme automatically, follow these steps:
- Head over to GoodGame / Register Theme in your wp-admin
- Follow the instructions there to register your theme
- Go to Appearance / Themes and update your theme by clicking the update link
16.2 Updating theme manually
To update the theme, follow these steps:
- Head over to Appearance / Themes in your wp-admin
- Activate a different theme (for example twenty twelve)
- Delete the current version of GoodGame
- Download the update from Themeforest and get the
planetshine-goodgame.zipfile. If you downloaded the “All Files & documentation” from Themeforest, then you need to unzip the archive file you received, the planetshine-goodgame.zipwill be inside of it
- Click on Install themes and upload the
- Activate it and install updates for bundled plugins where necessary.
If you get a “Are You Sure You Want To Do This” message when installing update, it means you have an upload file size limit. Install the theme via FTP if this happens, or increase the PHP file upload size limit.
16.3 Updating plugins
WooCommerce, Contact Form 7 and other regular plugins can be updated using WP plugin section. However the premium plugins - Revolution Slider, WPBakery Page Builder, Ultimate Addons and Planetshine GoodGame Theme Extension can only be updated together with the theme. After installing a theme update you will be presented with a notification message offering to install the updates. It will be very similar to the one you used to install the plugins when you first activated the theme.