Theme documentation

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.

You have two options for uploading the theme - to use FTP application or upload tool in WordPress admin panel. Once you have uploaded the theme you must activate it.

1.1 Upload theme via FTP application

  • First you must unzip the file you downloaded from Themeforest.
  • There you will find a file named 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 You can find the file by un-zipping the file you downloaded from ThemeForest.

Upload only the 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.

1.3 Activation

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.3 Import or setup home and blog pages
See Creating homepage and blog pages and Importing theme demo.

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.

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.

Home slider

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.

Exclusive Post

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

Title block

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 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.

The way Twitch video streams are loaded has been changed since theme update with version 1.0.5. To avoid caching offline stream state (in case if some caching plugin is used) and to decrease page load time (as it requires some time to receive information from twitch) Twitch video stream is now loaded with AJAX and it is performed after page load. If you are not able to see Twitch stream or error message probably you are using some third party plugin which crashes JavaScript execution and in the same time prevents stream from loading. In this case first you should try is disabling all the plugins except those which are required by the theme.

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.

10. Galleries

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/.

11. Layout

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.

13. Javascript files

All the Javascript files are located in theme/assets/js/ folder. This theme uses jQuery Javascript library and many plugins and custom built scripts. All the theme specific behaviour is written in 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.

All of the third party Javascript files used by the theme are located in theme/assets/js/vendor/ folder. These you should avoid modifying in any way.

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 default.pot

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 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.

15. Setting up newsletter

We are using MailChimp to configure our newsletter form, but there are a lot of services and plugins you can use. Follow these steps:

  • Go to
  • Register and account if you do not already have one, and log in.
  • Go to section "lists" and click on "create list"
  • Fill in all nedded fields and click on Save at the bottom of the page.

  • Now open your new list and select the "Signup forms" tab. Click on "Embeded forms".
  • In the page that opens, click on "Naked" tab.

  • Copy the code found at the bottom of page and paste it into text editor like notepad.
  • In the text, find a line that' similar to this one "<form action="">"
  • Copy the action value (it will be similar, but NOT the same as in the example above). To clarify. Action value is only this part:
  • Now open your wp-admin, and go to Appearance > Widgets. Insert "GoodGame Newsletter & Social Networks" into "Default" sidebar.
  • Now move on to Theme settings and open "Footer" section. Paste the form action value into the "Newsletter form action" field.
  • Select form action value "Post"
  • Enter "email field name" value "EMAIL"
  • Click save

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 file. If you downloaded the “All Files & documentation” from Themeforest, then you need to unzip the archive file you received, the will be inside of it
  • Click on Install themes and upload the file.
  • 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.

See Installing required plugins.

Thank you so much for purchasing this theme!