Download the SuperMassive theme from your ThemeForest downloads page and then unzip the download. Once the download has been unzipped you should see a folder called supermassive-theme.
Uploading The Theme
Before uploading the theme make sure you have installed WordPress 3.1 or higher. You can download WordPress for free from WordPress.org. Now you can upload the theme in one of two ways:
1. Upload via WordPress
From your WordPress dashboard go to Appearance -> Themes.
On the Themes page click the Install Themes tab.
Click the Upload link directly below the two tabs which takes you to a page to upload the theme.
Click the Browse button and locate supermassive.zip that is inside your supermassive-theme folder. Double click the file to select it and then click the Install Now button.
If you have trouble uploading the theme via WordPress you will need to upload the theme via FTP as explained below.
Upload the supermassive folder that is inside your supermassive-theme folder to your WordPress themes directory wp-content/themes/.
Activating The Theme
When uploading the theme via WordPress you should be prompted to activate the theme. If uploading the theme via FTP go to Appearance -> Themes and click the Activate link below the SuperMassive theme.
2. BuddyPress/bbPress
Installing BuddyPress
Go to Plugins -> Add and type "BuddyPress" and install and activate the plugin called BuddyPress.
Click the BuddyPress tab on the left side of the page.
Click the Save & Next button until you come to the Pages tab where you can choose to automatically create your BuddyPress pages or assign existing pages for your BuddyPress page.
Click Save & Next to take you to the Permalinks tab and choose one of the available pretty permalink structures or create your own custom structure from Settings -> Permalinks.
Click Save & Next to take you to the Theme tab and scroll down to the Other themes section and select SuperMassive from the drop down menu.
Click Save & Next for a final time to set up your BuddyPress.
Installing bbPress
To use bbPress go to BuddyPress -> Forums and click the Install Site Wide Forums button and install and activate the plugin.
Now go to Settings -> Forums and in the Archive Slugs and Single Slugs sections make sure there are no Possible BuddyPress conflict error messages.
If there are you will need to change the name of the bbPress slugs or the slugs of the conflicting pages. It is likely the Forums base is set to "forums" and conflicting with a page BuddyPress automatically created called "Forums". Go to Pages -> All Pages and edit the page slug of the "Forums" page from "forums to something like "group-forums".
Although this theme was designed to work with BuddyPress and bbPress out of the box, I did not create either of these plugins and have no advanced knowledge about them. Unfortunately due to the huge amount of support questions I have to answer each day regarding my own themes I cannot really spend time answering questions about external plugins unless there is a conflict with the theme in some way (in which case I will offer a bug fix). You should direct any general BuddyPress or bbPress related questions to BuddyPress Support or bbPress Support.
3. Demo Content
Before importing the demo content make sure you have installed and activated the theme, BuddyPress and bbPress plugin.
A demo file comes with the theme that imports example posts, pages, comments, custom fields, categories, tags, widgets etc. which can help you in learning how the theme works. To add this content follow the steps below:
Go to Settings -> Media and uncheck the option Organize my uploads into month- and year-based folders (does not apply to WordPress Multi Site installations).
Go to Tools -> Import and select the WordPress option. If you are prompted to install the WordPress Importer plugin you should do this.
Click the Browse button and locate the demo.xml file that is inside the supermassive-theme/supermassive/help folder and double click the file to select it and then click the Upload file and import button.
A new screen will appear, check the Download and import file attachments option and click Submit.
To import the demo widgets go to Tools -> Import Widgets, click the Choose file button and locate the widget_data.json file that is inside the supermassive-theme/supermassive/help folder and double click the file to select it and then click the Upload file and import button.
3. Updating The Theme
From time to time free theme updates will be released which will include bug fixes and feature updates. When a theme update becomes available you should see an update notification in your admin panel, if you do not see any update notifications follow me on Twitter @ghostpool to be notified of the latest theme updates.
To get the latest version of the theme go to your ThemeForest downloads page and re-download the theme.
Unzip the download file and you should see a folder called supermassive-theme.
Your content, settings, images as well as CSS customizations from Appearance -> Theme Options -> CSS Settings will not be lost when you update the theme.
If you have made NO changes to the theme files
If you have made no changes to the theme files you can simply delete the existing version of the theme from Appearance -> Themes.
Click the Install Themes tab.
Click the Upload link directly below the two tabs which takes you to a page to upload the theme.
Click the Browse button and locate supermassive.zip that is inside your supermassive-theme folder. Double click the file to select it and then click the Install Now button.
You should then be prompted to activate the theme.
If you have made changes to the theme files
If you have made any changes to the theme files view the changelog before updating as it tells you which files that have been updated, added and/or removed.
You can use DeltaWalker or DiffMerge and compare the code changes between your modified files and the new theme files.
Using an FTP client download your current supermassive theme folder from the wp-content/themes/ directory to your hard drive and then rename the folder to something like supermassive-old.
Now upload the new supermassive folder that is inside your supermassive-theme folder to your WordPress themes directory wp-content/themes/.
5. Setting Up The Theme
Homepage
An example of this page should already have been created for you upon installing the theme. If it has not or you wish to create your own pages please read below.
Go to Pages -> Add New to create a new page.
Give your page a title and in the text editor add the following:
[slider name="slider" width="980" height="400" cats="17" margins="-70,0,0,0" shadow="shadow-xl" align="aligncenter"]
[text text_align="text-center" size="40" line_height="60"]The Next Generation of WordPress Themes[/text]
[text text_align="text-center" color="#666" width="880px" right="auto" left="auto"]This is just an ordinary WordPress page that has been customized using SuperMassive's huge array of shortcodes. Transform any page into a completely unique design in a matter of minutes all for $45. Click <a href="http://themeforest.net/item/supermassive-a-next-generation-wordpress-theme/132454?ref=GhostPool">here</a> to buy this theme today.[/text]
[curved]
[four type="joint" height="260"]
[text font="Lucida Grande, Lucida Sans Unicode, Arial" other="font-weight: bold;" size="15"]Lorem ipsum dolor[/text]
[text color="#777"]Sit amet, consectetur adipiscing elit. Nam a augue augue. n vel feugiat felis.[/text]
[image url="wp-content/uploads/earth-and-the-communication.jpg" width="190" height="140" shadow="shadow-s" left="8" bottom="10" align="aligncenter"]
[/four]
[four_middle type="joint" height="260"]
[text font="Lucida Grande, Lucida Sans Unicode, Arial" other="font-weight: bold;" size="15"]Libero quis elitr[/text]
[text color="#777"]Ut hendrerit, nibh quis auctor pulvinar, felis. Phasellus euismod sodales lectus.[/text]
[image url="wp-content/uploads/business-hand-pushing-social-network-communication.jpg" width="190" height="140" shadow="shadow-s" left="8" bottom="10" align="aligncenter"]
[/four_middle]
[four_middle type="joint" height="260"]
[text font="Lucida Grande, Lucida Sans Unicode, Arial" other="font-weight: bold;" size="15"]Rutrum non[/text]
[text color="#777"]Praesent rutrum libero quis elit egestas pulvinar.[/text]
[image url="wp-content/uploads/blackboard-with-network-communication-terms-on-it.jpg" width="190" height="140" shadow="shadow-s" left="8" bottom="10" align="aligncenter"]
[/four_middle]
[four_last type="joint" height="260"]
[text font="Lucida Grande, Lucida Sans Unicode, Arial" other="font-weight: bold;" size="15"]Sollicitudin eget[/text]
[text color="#777"]Suspendisse laoreet blandit turpis, ut congue nislt hendrerit, nibh quis auctor.[/text]
[image url="wp-content/uploads/dirty-keyboard.jpg" width="190" height="140" shadow="shadow-s" left="8" bottom="10" align="aligncenter"]
[/four_last]
[clear][clear]
[two][image shadow="shadow-m" align="aligncenter" url="wp-content/uploads/business-technology.jpg" width="450" height="318"][/two]
[two_last]
[text size="20" width="100%" text_align="text-right" color="#808080" line_height="20"]A stylish panel[/text]
[text size="40" width="100%" text_align="text-right" line_height="40" margins="0,0,10,0"]Without Borders.[/text]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a augue augue. Nam ac lacus a libero lacinia imperdiet at non elit. Vestibulum vel metus pellentesque nibh pulvinar consectetur. Praesent nisl risus, vestibulum sed pellentesque blandit, porttitor adipiscing ipsum. Vivamus tincidunt nisi at quam condimentum eget tempor lectus vehicula. Phasellus dictum, nulla sit amet semper facilisis.
Progressively aggregate extensible e-tailers and high standards in quality vectors. Distinctively fashion bricks-and-clicks intellectual capital for state of the art initiatives. Distinctively syndicate real-time technologies through open-source e-markets. Completely morph technically.
[/two_last]
[clear]
[two type="separate" height="304"]
[text width="180px" align="alignleft"]
<strong>Leget tempor lectus vehicula</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a augue augue. Nam ac lacus a libero lacinia imperdiet at non elit. Vestibulum vel metus. Efficiently disseminate backend resources via real-time architectures. Seamlessly.
[button]Read On...[/button]
[/text]
[image url="http://demo.ghostpool.com/supermassive/wp-content/uploads/large-flat-screen-with-nature-images-1.jpg" link="wp-content/uploads/large-flat-screen-with-nature-images-1.jpg" lightbox="image" height="175" margins="35,0,0,20" reflection="reflection-s" align="alignright"]
[/two]
[two_last]
[accordion]
[panel title="Accordion Panel 1"]Morbi euismod suscipit enim, <a href="#">vitae hendrerit elit</a> cursus et. Vestibulum vel metus pellentesque nibh pulvinar consectetur. Nunc volutpat risus a libero condimentum. Vestibulum vel metus pellentesque nibh pulvinar. Vestibulum vel metus pellentesque nibh pulvinar consectetur. Nunc volutpat risus a libero condimentum sit amet placerat nisi feugiat. Morbi euismod suscipit enim, vitae hendrerit elit cursus et. Praesent nisl risus, vestibulum sed pellentesque blandit, porttitor adipiscing ipsum. Vivamus tincidunt nisi at.[/panel]
[panel title="Accordion Panel 2"]Vestibulum vel metus pellentesque nibh pulvinar consectetur. Vestibulum vel metus pellentesque nibh pulvinar consectetur. Nunc volutpat risus a libero condimentum sit amet placerat nisi feugiat. Morbi euismod suscipit enim, vitae hendrerit elit cursus et.[/panel]
[panel title="Accordion Panel 3"]Vestibulum vel metus pellentesque nibh pulvinar consectetur. Nunc volutpat risus a libero condimentum sit amet placerat nisi feugiat. Morbi euismod suscipit enim, vitae hendrerit elit cursus et.[/panel]
[/accordion]
[/two_last]
To display slides in your slider from specific categories add your category IDs to the cats="" option (go to Slides -> Slide Categories and get the IDs from the ID column).
Scroll down to the Page Settings panel, check the Hide Page Title option, change the Frame and Breadcrumbs drop down menu options to Hide and change the Layout drop down menu option to Fullwidth.
Scroll down to the Discussions panel and uncheck the Allow comments option, if you cannot see the Discussions panel click here.
Go to Settings -> Reading, select A static page option and from the Front page drop down menu select the page you just created (leave the Posts page drop down menu empty).
You can create your own custom homepage layout by using different shortcodes and changing the shortcode options. For a full list of the shortcodes available click here.
Navigation
An example navigation should already have been created for you upon installing the theme. If it has not or you wish to create your own navigation please read below.
Go to Appearance -> Menus to set up your header and footer navigation menus.
Click the + button and create two menus.
On the left-hand side from the Theme Locations panel select your menus from the Header Navigation and Footer Navigation drop down menus.
Background
Go to Appearance -> Background to add your own background colour or upload your own background image.
If you only want to add a background colour with no background image you will still need to upload an image to overwrite the existing background image. Upload the transparent image that comes with the theme located at supermassive-theme/supermassive/lib/images/blank.gif.
Shortcodes
This theme comes with several shortcodes. Shortcodes are pieces of code that can be inserted directly into your posts, pages and widgets to add certain content easily such as videos and dividers.
Click the Visual tab at the top of the text box on any post or page.
Click the GP button to open the shortcode window.
From the shortcode drop down menu select a shortcode, which will automatically be inserted into the text box.
You can view the full range of options for all the shortcodes from the following page.
Sliders
Creating Slides
Go to Slides -> Add New to create a slide.
On the right-hand side you will see a Featured Image panel, click the Set featured image link to set an image for this slide.
After uploading or selecting your featured image click the Use as featured image link in the image upload window.
Enter your page, image or video URL that you want the slide to link to in the Slide URL text field.
On the right-hand side you can add your slide to a category from the Slider Categories panel.
Inserting Slider Shortcode
To insert a slider into your page add the following code to the text box on any post or page:
To add slides from a specific category add the slider category IDs to the cats="" option (go to Slides -> Slide Categories and get the IDs from the ID column).
You can also change a variety of other slider options by adjusting the shortcode, for a full list of slider options see this page.
Blog Pages
This theme comes with a [blog] shortcode that can be used to display posts in a blog or gallery/portfolio format.
Creating Posts
Go to Posts -> Add New to create a new post.
Give your post a title and content in the text editor.
Scroll down to the Post Settings panel where you can control the way the post looks.
On the right-hand side you will see a Featured Image panel, click the Set featured image link to set an image for this post.
After uploading or selecting your featured image click the Use as featured image link in the image upload window.
On the right-hand you can assign your post to categories from the Categories panel.
Inserting Posts Shortcode
Go to Pages -> Add New and insert the following post shortcode into the text editor:
[blog]
To add posts from a specific category to a post shortcode add the post category IDs to the cats="" option (go to Post -> Categories and get the IDs from the ID column).
You can also change a variety of other blog options by adjusting the shortcode, for a full list of blog options see this page.
Gallery/Portfolio Pages
This theme comes with a [blog] shortcode that can be used to display posts in a blog or gallery/portfolio format.
Creating Posts
Go to Posts -> Add New to create a new post.
Give your post a title and content in the text editor.
Scroll down to the Post Settings panel where you can control the way the post looks.
On the right-hand side you will see a Featured Image panel, click the Set featured image link to set an image for this post.
After uploading or selecting your featured image click the Use as featured image link in the image upload window.
To add additional images/audio/images in a lightbox click the the Add Media button and upload your files.
On the right-hand you can assign your post to categories from the Categories panel.
Inserting Posts Shortcode
Go to Pages -> Add New and insert the following post shortcode into the text editor:
To add posts from a specific category to a post shortcode add the category IDs to the cats="" option (go to Posts -> Categories and get the IDs from the ID column).
You can also change a variety of other post options by adjusting the shortcode, for a full list of portfolio options see this page.
Contact Page
An example of this page should already have been created for you upon installing the theme. If it has not or you wish to create your own pages please read below.
Go to Pages -> Add New to create a new page.
Insert the contact form shortcode into the text editor e.g. [contact email="youremail@address.com"].
Replace youremail@address.com with your own email address.
On the right-hand side in the Page Attributes panel select the Login page template from the Template drop down menu.
Now go to Appearance -> Theme Options -> General Settings and add the login page URL in the Login Page URL text field.
Registration Page
You do not need to create a registration page when using BuddyPress.
Go to Pages -> Add New to create a new page.
On the right-hand side in the Page Attributes panel select the Register page template from the Template drop down menu.
Now go to Appearance -> Theme Options -> General Settings and add the registration page URL in the Register Page URL text field.
Sidebars/Widgets
Go to Appearance -> Sidebars, click the Add Sidebar link and give your new sidebar a name.
Now go to any post or page and scroll down to the settings panel.
Now select one of your sidebars from the Sidebar drop down menu.
Go to Appearance -> Widgets and drag and drop widgets from the Available Widgets panel over the to your sidebar widget panels on the right.
You can also add any of the shortcodes with the theme within a Text widget.
Customising Theme Design
You will probably want to customise the design of the theme. This may involve editing the HTML in the php files (theme structure) and the CSS in the style sheets (theme design). If you are not familiar with HTML and/or CSS you will want to hire a developer to modify the theme for you. You can contact one of these developers from here. If they are unavailable you will have to look elsewhere such as FreelanceSwitch.
Developer Tools
An excellent way of styling your theme is to use the developer tools that come with most modern browsers. The developers tools allow you to see what HTML elements need to be styled and allows you to edit the styling of the theme within the browser window. These changes are not permanent and nobody else sees them, it's just a great way of adjusting the look of your site quickly. Here are some links to the developer tools for each of the major browsers:
Once you know what HTML elements you need to style and how, you can either edit the stylesheets directly (style.css etc.) or override the default styling by adding your CSS code to the Custom CSS box as explained below:
Go to Appearance -> Theme Options -> CSS Settings and in the Custom CSS text box.
The CSS code you add to this text box will overwrite the default styling of the theme.
The benefit of adding your CSS code to the Custom CSS text box rather than editing the stylesheets is that when theme updates are released your style modifications will not be overwritten.
For example, to edit the link and link hover colours you would add the following to the Custom CSS text box:
a {
color: #ff0000;
}
a:hover: {
color: #000000;
}
To change the colour of the post meta text you would add:
Open the supermassive-theme/supermassive/languages/en_EN.po file with Poedit.
Translate the file with Poedit, click here for more information.
Locate wp-config.php, which is in the root directory of your WordPress installation and change the language, click here for more information.
If you want your website to support multiple language you can use the qTranslate plugin.
Updating Your Translation Files
If you have updated the theme and the changelog says the translation files have been updated, if you have modified the translation files or created new ones you will want to update them rather than using the new ones.
To do this insert your modified translation file (e.g. en_EN.po) into the supermassive-theme/supermassive/languages/ folder overwriting the new file.
Now open this file in PoEdit and click Update and it will display the text changes since the latest theme update.
Using The Lightbox
Gallery Shortcode
To enable the lightbox on the [gallery] shortcode add itemtag="div" link="file" to the shortcode, like so:
[gallery itemtag="div" link="file" columns="3"]
Manual Use
To use the image or video pop up effect on any content add rel="prettyPhoto" to your links as follows:
You are probably receiving this error message because you are using a custom permalink structure without a forward slash at the end of your permalink. To fix this issue go to your Settings -> Permalinks and in the Custom Structure field add a trailing slash at the end of your permalink e.g. /%category%/%postname%/. You may need to save this page twice for the settings to be correctly changed.
Go to Pages -> All Pages and edit the desired pages. In the top right corner of the page click the Screen Options button and make sure the Discussion box is checked. Now scroll down the page and locate the discussion panel and uncheck the Allow comments box.
The are several reasons why you may not be receiving the emails:
Your emails are being sent to your spam/junk mail folder
You have entered the wrong email address in the contact form shortcode
Your web host does not allow you to send emails from the same address your are receiving the emails to
Your web host does not support PHPMail, you will need to contact them about this or switch hosts (I recommend DreamHosts)
Your web host (in most cases GoDaddy) does not allow contact forms to send emails to certain email providers (e.g. yahoo.com, hotmail.com etc), you will need to contact them about this or switch hosts (I recommend DreamHosts)
WordPress uses Gravatar to add avatars (user images). Register a free account at Gravatar.com, associate it with the email you're using on your WordPress site and upload your avatar image. Now go back to your site and within a short amount of time your avatar will show up in your comments, profile page etc. If you want people to upload an avatar from your own site instead, use a plugin such as Add Local Avatar.
Go to http://cufon.shoqolate.com/generate/ and upload your font (e.g. OTF/TFF file). Check the The EULAs of these fonts allow Web Embedding box. Once you've selected the desired glyphs, check the I acknowledge and accept these terms box and click Let's do this! to generate your cufon font file.
Now open supermassive-theme/supermassive/functions.php and find:
You will need to create your own cufon font file so it supports your characters. Go to http://cufon.shoqolate.com/generate and upload the desired font from the supermassive-theme/help/lib/files folder. Check the The EULAs of these fonts allow Web Embedding box. Now select the glyphs you want to include (choose the glyphs that support your characters). Now check the I acknowledge and accept these terms box and click Let's do this! to generate your cufon font file. Now upload your cufon file to supermassive-theme/supermassive/lib/scripts/fonts overwriting the old cufon file. If your cufon file does not overwrite the old file (it may be a new font) please see the question above.
You need to add the desired width and height to the video URL. For example for a YouTube video with the URL http://youtu.be/oeuHxC1cF0o you would add the following to the end of the URL &width=500&height=250 to give http://youtu.be/oeuHxC1cF0o&width=500&height=250. This will give you a video with a width of 500px and a height of 250px.
You can use a variety of ad plugins to insert advertisements within your posts/page. The plugin Wp-Insert has been tested with this theme. To insert advertisements in the header and footer go to Appearance -> Theme Options -> General Settings and add your content in the Contact Info and Footer Content text boxes.
Yes you can do this using the Display Widgets WordPress plugin, which allows you to specify which posts, pages and/or categories individual widgets are displayed on.
This is probably because you have <code></code> or <pre></pre> tags within your page text boxes. Edit your pages, switch to the Text/HTML tab and remove all occurrences of these tags.