Theme Documentation

If you have any questions that are beyond the scope of this documentation, please contact us via our support forums. Please note that we only provide support in case of errors in our product or to advise you about using our product’s features.

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 or upload tool in Wordpress admin.

1) Upload via FTP:

First you must unzip the file you downloaded from Themeforest. There you will find a file named regolith.zip. Now unzip this file also. You should see a folder named "regolith". Upload this to /wp-content/themes/ in your wordpress installation.

2) Upload via Wordpress admin:

Open your Wordpress admin; Go to Appearance and choose Add New Themes. Click Add new. Upload the regolith.zip. Do not upload the zip archive you downloaded from themeforest. Upload only the regolith.zip file. If you have a "missing stylesheet" issue you are uploading the wrong file!

Activation

Once upload has finished, activate your theme in Appearance > Themes.
Once activated Regolith will create couple of default pages, among them - Blog and Homepage. These will be assigned as your new front page and posts pages. You can later edit these settings under Regolith > Visual editor > Static Front page.

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 "Regolith" at the bottom left corner of screen. There you will find theme 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.

Backup & Reset - export your theme settings and import them into another instance of Regolith. This is handy when you are setting up the theme locally and publishing it later on a different server. Also allows you to reset theme settings to defaults.

Go to theme settings and open the General tab. There you will find section called "Logo". There you will see two file upload fields and alt text field. Click on the "browse" button and select your logo from your computer. Also provide a smaller version of your logo, for the fixed, compact sidebar that's shown when scrolling beyond the original sidebar. 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.

The menu for this theme acts almost exactly like for any other wordpress theme. There is one difference. Each 1st level menu item has an icon. These are Font Awesome icons, so you can easily pick anything you like and place it there. To have the menu display your desired icons take these steps:

1) Go to Font Awesome and pick an icon you like and copy it's name. For example "icon-beer".

2) Open Wordpress menu editor ( Appearance -> Menus).

3) Open the menu item you want to add icon to. You will see two fields - Navigation label and Title attribute.

When you activate theme, Regolith will auto create a page that's used for homepage. This page will be called "Homepage" and you can find it and edit it under "Pages" in your wp-admin.

Homepage is set up using various shortcodes that are included with the theme. All of these shortcodes are there on your homepage by default. These shortcodes have various options, that you can read more about here.

By default your homepage content should look like seen below, but feel free to edit it to your liking.

Portfolio works a lot like regular blog posts, with couple minor differences. The portfolio does not need to be especially setup. If you have enabled pretty permalinks, then all your portfolios will always be visible under your-address.com/portfolio.

To create a new portfolio item first go to "Portfolio" section on wp-admin. Then click on "Add New" at the top of the page, just like you would do when creating a blog post. After that proceed to write your content and set a thumbnail the same as usual.

Now comes the part that's unique to portfolio. Click on "Add media" right above the post text editor. Choose "Create gallery". Select the pictures you want to display in portfolio and when you are done click on "Create new gallery". This will cause a gallery object to be inserted into the post.

Save the post and open it on front end of your page. The theme will have picked the images you placed in the gallery and displayed them in cool looking columns.

Contact page is already created by default. Also the required plugin is bundled with theme and should be easy to install. Once all that is done, go to Contact on the wp-admin menu and open/create a contact form (there is one created by default). Edit the form to your liking and save it. Then copy the id from shortcode above the form. (see code example below).

[contact-form-7 id="1805" title="Contact form 1"]

Now go to Contact Page section of Regolith admin. There you will find field named "Contact form id". Paste the ID there.

Now you can fill up the remaining fields, to display additional info.

Embed Google maps

There is also an option to embed a goole maps directly from theme admin panel. Go to Google maps and find your desired location. Then copy the maps iframe code and paste it in the field called "Google maps link". See example of google maps embed code below.

To make things easier with initial setup, we have provided you with sample content that you can import in your wordpress site. It is located in the folder you downloaded from Themeforest. It's called regolith.wordpress.xml. You can import it using wordpress admin. Go to Tools > Import. From the list select "Wordpress". Choose the aforementioned file and upload it.

Slider

Default usage:

[regolith_slider /]

Additional attributes:

[regolith_slider count="5" category="furniture" /]

Homepage slider is not visible when you first load the theme, since no slides are added to it. You can add images to homepage slider by going to "Slider" section in your wp-admin and creating new slides.

Headline column

The shortcode allows you to add headline columns to pages. Default usage as follows:

[column_wrap]
[column_item title="" description=""/]
[/column_wrap]

Each headline column consists of wrapping element ([column_wrap]) and the items ([column_item]). Items have the option to either show a font awesome icon or an image. If both are supplied, the icon takes the priority. See example below:

This theme has a Responsive layout that is laid out horizontally. All of the information within the main content area is nested within a div with a class of "main-content-wrapper". The general template structure is the same throughout the template.

This theme has 2 different layout modes - full screen and mobile (for screens smaller than 650px). Adjust your browser window size to explore them closer. It should be noted, that mobile version uses traditional vertical layout, instead of horizontal.

Regolith uses CSS3, so it will NOT support legacy browsers such as Internet Explorer 6 & 7 and 8.

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.js and this is the only file you may ever need to edit.

It is comparatively easy to find what you need to edit in theme.js. Just open the file and look for init function. It initializes all other functions which you can recognize by the name.

The theme allows you to to embed videos in posts. However that has to be done correctly in order not break, the text columns. You make sure, that the width of video player is not larger than 400px. To achieve, that go to youtube and under "embed" section pick a custom size option and set the width to 400px. Then copy the iframe and paste it into post editor window on wp-admin. Make sure, you have selected text editing mode!

The theme does a good job resizing content of pages, posts, portfolios etc. to fit the limited screen height. This is achieved by intelligently splitting content into dynamic columns. If however a post contains a non textual item, such as large image or custom html code, that can not be split, some of the contents may overflow the edge of screen and become invisible. The theme can only work well, if the content is edited in way, that allows it to be split into columns.

Regolith 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 en_EN.mo. When that’s done, simply upload the files to your themes languages folder.

Once the files have been uploaded, you need to tell wordpress which language to use. That can be done by editing wp-config.php file in your wordpress site root folder. Find this "define('WPLANG', '');" and replace it with something like this: "define('WPLANG', 'fr_FR');" where the fr_FR (french language code) is replaced with your desired language code.

Regolith can be used in multiple languages at the same time with the fantastic WPML plugin. Using it is pretty easy - just create duplicates for your content in the languages your page has. However contact form requires a bit of special treatment.

To use contact forms with WPML you must first create a contact form for both languages. Then head over to theme settings and open "Contact form" section. In the field contact form id you would normally place just the id for the contact form object, you now need to add labels for each of the languages you have. See the example below:

en-1805; de-1923; fr-2001

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. No guarantees, but I'll do my best to assist. 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.