User Manual
Wordpress Theme "Moon"

Video Guide

We've created a quick video guide to show you how easy it is to install "Moon". If video does not work for you or you need a different method of installation, try reading below for other methods of installation.

Step by Step guide

Method 1 (Recommended): Installing using Admin

You can install Moon to your website by using the Add New Themes option in the Appearance sub-menu.

1. Log in to the WordPress Administration Panels.

2. Select the Appearance panel, then Themes.

   

3. Select Add New.

4. Use the Upload Theme link on top to upload a zipped copy of a Theme that you have previously downloaded to your machine. File to upload is called moon.zip, it should be located inside of the archive you downloaded from ThemeForest

   

   

5. When Wordpress finishes installing the theme and outputs a "Theme installed successfully" message, click Activate link.

   

6. That's it, now the theme is installed & activated.

Method 2: Installation by using cPanel

If your host offers the cPanel control panel, and the Theme files are in a .zip or .gz archive follow these instructions. Note: This assumes the Theme you download is a compressed (.zip) file containing a folder under which all the Theme files reside.

1. Download the Theme .zip file to your local machine.
2. In cPanel File Manager, navigate to your Themes folder. If your WordPress is installed in the document root folder of your web server you would navigate to "public_html/wp-content/themes" and if you have WordPress installed in a sub-folder called wordpress, you would navigate to "public_html/wordpress/wp-content/themes".
3. Once you've navigated to the Themes folder in cPanel File Manager, click on Upload file(s) and upload that .zip file you saved in Step 1.
4. Once the .zip file is uploaded, click on the name of that file in cPanel, then in the panel to the right, click on "Extract File Contents", and that .zip file will be uncompressed.
5. Follow the instructions below for selecting the new Theme.

Method 3: Installing "Moon" Manually (FTP)

To add a new Theme to your WordPress installation, follow these basic steps:

1. Download the Theme archive and extract the files it contains. You may need to preserve the directory structure in the archive when extracting these files. Follow the guidelines provided by your Theme author.
2. Using an FTP client to access your host web server, create a directory to save your Theme in the wp-content/themes directory provided by WordPress. For example, a Theme named Test should be in wp-content/themes/test. Your Theme may provide this directory as part of the archive.
3. Upload the Theme files to the new directory on your host server.
4. Follow the instructions below for selecting the new Theme.

Standard

Regular post format is ideal for a blog post that has lots of text content and a single image that works as an addition to a text. Clicking on that image will not show a lightbox (if you want a lightbox to appear you have to use an image format). Also, standard format will not have an image background on a masonry tile and can not be used on a Full Height page template.

However standard post format has a benefit compared to other formats, it allows you to select a custom color of a tile on masonry page. You can set a predefined light or dark color, or pick a custom color from a color picker.

Image

Image post format is great for a post where you want to showcase a single image. You will have to set a "Featured Image" to be used for that post. Clicking on that image from a single post page will result in opening of a lightbox, where user can see that image in full detail. On a masonry or a full height page that image will be used as a background for the post title and description.

Gallery

If you have a set of images, or you want to showcase your photoshoot project and write a short story about it, there is nothing better than a gallery format. When you select this format you will see an extra field which will allow you to upload a set of photos to your post. These photos will roll on a tile, this way your site visitors can see more photos at once. Clicking on a tile will bring them to a separate page where you can lay those pictures in a multiple layouts, and allow your visitors clicking them and opening a lightbox.

Link

If you want to send your customer to an external link, this is the format you need. Once you've selected this checkbox, you will see a newly appeared extra field where you can set a url of that page you want user to be redirected upon clicking this tile.

You can set it's color and title to any color you want. In this example we have it set to blue and the title is "External Link"

Quote

Quote post format is great when you want to output a quote or short text with an extra caption. You can only output quote format on a masonry page as a tile. It does not have a single post version.

You can set a background image for a quote tile or use a solid color. In this example we have animage set as background.

Video

It is a video post which allows you to embed content from video hosting such as YouTube, Vimeo, Vessel and others.

Slideout Menu

You can enable this menu type either for each individual page or for all the pages on your website. Just select "Slideout Menu" in a list of available navigation types on Theme Settings or Page/Post edit page.

You can also set a background color for this menu.

Fullscreen Menu

You can enable this menu type either for each individual page or for all the pages on your website. Just select "Full Screen" in a list of available navigation types on Theme Settings or Page/Post edit page.

You can also set a background color for this menu.

Flown over Content

You can enable this menu type either for each individual page or for all the pages on your website. Just select "Flown over content" in a list of available navigation types on Theme Settings or Page/Post edit page.

You can also set a background type for this menu.

Menu on Top

Visible or Hidden Menu with Whitespace Around

Creating customer testimonials

Creating a testimonial is super easy, Follow these steps:

1. Go to Admin > Testimonials > Add New
2. Type testimonial author (field on top)
3. Enter content of the testimonial
4. In the Sub Info field you can add some extra information about testimonial author
5. Save your testimonial by clicking Publish button

Connecting testimonials with posts (Optional Step)

You can attach a testimonial to your post. This will allow it to show up in the Details panel (see image below).

To attach a testimonial to one of your posts, go to edit post page and under the Middle Panel Settings tab - select a testimonial you want to attach to this post via Connected Testimonial select box.

Creating Dedicated page with testimonials

In order for your client's testimonials to be listed somewhere you will have to create a separate page for them which will look like this:

To create a page which will list your client's testimonials you have to create a new page from Wordpress Admin > Pages > Add New, then select a "Testimonials" template from a dropdown in the Page Attributes panel on the right, publish this post and that's it.

Creating a Pricing Plan or Service

In order to create a pricing plan you should open your wordpress admin, go to Pricing Plans > Add New. You will see a form where you should enter your pricing plan information.

• Title: your pricing plan name
• Content: description of services offered with this plan
• Price Value: how much does the plan cost (e.g. $50)
• Price Label: optional info about the price (e.g. per month)
• Plan Packages: you can optionally add multiple sub-plans under the main plan, e.g. 2 hour wedding photo session will cost less then 4 hour session, but they both belong to wedding plan.
• Position: position of the plan on a pricing table
• Packages Label: a heading above your sub plans
• Background Type/Color: control appearance of this pricing plan

Listing Pricing Plans on a page

In order for your plans to be listed somewhere you will have to create a separate page for them which will look like this:

To create a page which will list your active pricing plans you have to create a new page from Wordpress Admin > Pages > Add New, then select a "Pricing" template from a dropdown in the Page Attributes panel on the right, publish this post and that's it.

Ajax Pagination on Scroll

When user will reach the end of the current page, new posts will start to load and will be appended to current list of tiles.

Ajax Pagination on Button Click

When a user reaches the end of the current page a Load More button will appear, clicking which will result in loading of new posts and appending those to the current list of tiles.

Pagination with Page Numbers

This type of pagination is using a customized version of a free WP-PageNavi plugin. You have to install a plugin first in order for this type of pagination to work. It basically will created a paged navigation with links to each page.

Classic Wordpress Pagination

Default wordpress pagination with Previous Post & Next Post buttons.

Sliding Direction

You can select which sliding direction you want. This can be set either globally in Theme Settings > General > Slider & Tiles tab > Sliding Type. Or for each individual post on post/page edit screen under Slider Settings > Sliding Type select box.

Horizontal Sliding

This is how horizontal sliding looks on "Full Height" layout page.

When screen size is getting too small and tiles are too narrow to be usable, slider will automatically switch to vertical sliding mode.

Vertical Sliding

This is how vertical sliding looks on "Masonry" tiles page.

Sliding Controls Visiblity

You can enable or disable slider navigaiton arrows using this settings.

WooCommerce Requirements

The first step in setting up your WooCommerce powered online store is of course installing the plugin itself. But before you do so, please check the minimum server requirements:

• PHP 5.2.4 or greater
• MySQL 5.0 or greater
• The mod_rewrite Apache module (for permalinks)
• fsockopen support (for payment gateway IPN access)
• (optional) An SSL certificate if you choose to install any direct payment gateways
• (optional) Some plugins for WooCommerce require CURL
• (optional) Some plugins for WooCommerce require SOAP

Plugin Download & Installation

Upon activation, WooCommerce will install several items it requires to function properly:

1. New pages for handling things like the shop, cart and checkout
2. Custom post types and taxonomies for orders and products
3. New widgets and shortcodes
4. User roles for shop managers and customers

There are two WooCommerce installation options: Automatic or Manual.

Automatic installation

Automatic installation is the most straightforward option, as WordPress handles the file transfers itself without you needing to leave your Web browser.

To perform an automatic install WooCommerce:

1. Log in to your WordPress admin panel
2. Go to: Plugins > Add New
3. Type ‘WooCommerce’ into the search field and click Search Plugins. Once found, you can view details such as the the point release, rating and description.
4. Click Install Now. After clicking the link, you’ll be asked if you’re sure you want to install the plugin.
5. Click Yes. WordPress will automatically complete the installation.

It’s possible at this stage that you’ll be taken to a page requesting FTP details of your webserver. This happens if you’ve not installed a plugin on this particular installation of WordPress. If so, fill in your details to complete the installation.

Finally, select Install WooCommerce Pages to get started.

Manual installation

Manual installation involves downloading the plugin and uploading it to your webserver via your favorite FTP application.

1. Download the plugin to your computer.
2. Unzip the file.
3. Upload the unzipped plugin folder to your WordPress installation’s wp-content/plugins directory, using an FTP program or your hosting cPanel.
4. Activate the plugin from the Plugins menu within the WordPress admin.

After you’ve installed and activated the plugin, select Install WooCommerce Pages to get started.

Uninstall WooCommerce

If you want to uninstall WooCommerce, there are a couple things to understand.

If you deactivate and delete the plugin from the WordPress admin, you are deleting WooCommerce settings and database tables, and trashing the pages created when first installed.

If you need to remove ALL WooCommerce data, including products, order data, etc. Go to: WooCommerce > System Status > Tools, and enable the Remove post types on uninstall. Then when you deactivate and delete the pugin from the WordPress plugin admin, it will delete all WooCommerce data.

Creating Products

You can read more details on how to setup wooCommerce products here: http://docs.woothemes.com/document/managing-products/

Setting up a Shop Page

Translating theme to your language

In order to change language please follow these guidelines or this guidelines ( these are the best in my opinion). Anyway I will post a short guideline here as well, it should be pretty ease, all you have to do is to follow standard Wordpress guidelines for changing the language in a theme:

1. Open "languages/default.po" file with PoEdit app (http://poedit.net/) and translate the strings you want to your language.
2. Save the translated .po file to the same "languages" directory by the appropriate name (e.g. if you are translating to French you have to use the filename fr_FR.po ) for a full list of languages please see this document
3. Final step is adding:

   define ('WPLANG', 'fr_FR');

   to the "wp-config.php" file located at your WordPress installation root folder.

Creating multi-language website using WPML

Support for WPML plugin will be included in future releases of the theme.

How does it work?

The idea behind it is pretty simple. Say you did a photoshoot in Los Angeles, you just create a new location for Los Angeles, set it's position on a map, and then when you create a post you just assign this new location to it. Then you will be able to see/filter all of your posts/projects by location on a map.

Creating locations

Once you have installed the theme and required plugins you will notice a new menu link appear in admin called Map Pins - this is where your locations (map points) will be stored. In order to create a location on a map you should click Map Pins > Add New.

1. 1. Assign a label to your location, it can be anything you want, city name, county name or whatever you feel like putting on a map
2. 2. Set the horizontal coordinate (percent out of 100% on X Coordinate axis) where the pin should be located on a map (just set a number and the system will append percent to it)
3. 3. Set the vertical coordinate (percent out of 100% on Y Coordinate axis) where the pin should be located on a map (just set a number and the system will append percent to it)
4. 4. That's it now you can assign a location to your posts and they will appear on a world map as soon as you assign it to at least one post.

Assigning locations to posts

You can attach your post or page to a location you've created earlier. Follow these steps:

1. Select a post/page you want to add location to and start editing it.
2. Open the tab called "Map".
3. Check Show a map checkbox.
4. Click Add Row button.
5. From a dropdown for Map Pin field - select the location you want this post to be attached to.
6. You can also modify color scheme of the location label and pin here.
7. You can add as many locations to a single post as you want.

Creating a page with locations on a map

Now we have locations and we have posts attached to them, next step is to create a page where you can list those locations on a world map. Clicking on a map pin will result in sliding out the panel with posts related to the location clicked.

Creating this page is pretty straight-forward, all you have to do is create a new page and set it's template to be Photos on a map.

Child Theme

If you want to make changes to default behaviour of the theme and modify default .php files without losing those changes on theme updates, the best way to do it is by creating a child theme and overriding default behaviour.

We have included a basic child theme in a download package that you received from ThemeForest. Folder is called moon-child. You will have to upload that child theme folder to your wp-content/themes folder. If you want to override a layout of a php file you find in a theme Moon, all you have to do is create the same file with your modifications in a moon-child folder (if a file is located inside an extra directory, you will have to create that directory as well). Now theme Moon will use that file instead of the original one.

Modifying theme's functions.php file

Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)

In that way, the functions.php of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme. Say that you want to add a PHP function to your theme. The fastest way would be to open its functions.php file and put the function there. But that’s not smart: The next time your theme is updated, your function will disappear. But there is an alternative way which is the smart way: you can create a child theme, add a functions.php file in it, and add your function to that file. The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme. Do not copy the full content of functions.php of the parent theme into functions.php in the child theme.

If you want to override one of the function of the theme Moon, all you have to do is create a function with the same name in the child theme's functions.php file, that will prevend a parent theme from loading an original function.

Modifying theme stylesheet variables

You can override default LESS css variables by modifying either /extend/custom-php-vars.php or /extend/overwritten-variables.less file. Make sure you backup those files if you made changes to them before you decide to update the theme, then when you finished updating put them back into respective folders in the updated theme to preserve changes you've made.

Overriding theme's css

You have two options of overriding default theme's styles. First is to do it via Admin > Theme Settings > Appearance > Customize tab > enter your LESS or CSS code into the textarea.

Second option is to type in your custom styles into the /extend/custom-styles.less file. Make sure to backup this file contents before a theme update, and put it back after you udpated the theme to preserve the modifications you've added.

When I am trying to install this theme, a message appears "The package could not be installed. The theme is Missing the style.css Stylesheet.

After you've purchased theme Moon from ThemeForest, you will receive a package in a zip file. You are not suppose to upload the whole package. This package contains not only the theme itself but also documentation, child theme and licensing info. First of all, you should unzip it using winrar or winzip, and you will see the real theme zip folder that is inside, called moon.zip. This is the theme zip file you have need to install and activate instead.

How do I customize css styles for this theme?

You can add your custom CSS to the CSS Styles field in Admin > Theme Settings > Appearance > Customize tab > enter your LESS or CSS code into the textarea.

I see that you are using a LESS instead of a regular CSS, what is that?

This is basically the same as CSS just with some extra features like support for variables and mixins. You can use regular CSS in .less files and it work just fine. However if you want to take advantage of all the cool features of LESS, you can read more about it here: http://lesscss.org/

Images do not appear on full hegiht posts or some other pages or I am seeing a "Division by zero" error.

Try disabling "Jetpack" plugin if you have it installed, it messes up an output sometimes and prevents image sizes to be calculated.

I have installed and activated the theme but when I visit my website it shows a blank screen OR an error Fatal error: Class 'lessc' not found less-variables.php".

Make sure you are running at least PHP version 5.4 on your server.

Version 1.0.0 (April 25th, 2015)

Initial Theme Release