Osetin Themes | 2015

User Manual
Wordpress Theme "Sun"

Extensive documentation guide version 1.0.0

If you have any questions that are beyond the scope of this help file, please feel free to create a support request at our support system at http://osetin.ticksy.com.

Welcome

Thank you for the purchase of our premium theme Sun. We will walk you through the installation and setup of this theme. Hold tight, it will be quick and easy.

Topics:

Installing the theme

Video Guide

We've created a quick video guide to show you how easy it is to install "Sun". 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

If for some reason you can't play an instructional video above, you can follow a step by step guide below which will cover all possible methods of installation in detail. If you have already installed the theme, you can proceed to Setting a Homepage section.

Method 1 (Recommended): Installing using Admin

You can install Sun 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 sun-by-osetin.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 "Sun" 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.

Importing Demo Data XML

This is an optional step. You can import a demo data to play around with and learn the features from a demo. You have to download a demo data xml file first. You can download it by selecting a demo type you want to import:

These files are also included with the theme download and located in "Extras" folder, but we recommend downloading using those links because it always has a latest versions vs the one that comes in a download. "Optional Step for Widgets Demo": We also include demo data for widgets that you see on a demo. To install demo data for widgets you need a plugin called "Widget Importer & Exporter", you can download it by clicking here. When you downloaded that plugin, you can now download the actual demo data file for widgets. Select a style you want to import data for widgets from:

To import a demo data, follow these steps:

You might see some Failed to import... errors after importing. Those probably happen because you don't have a plugin installed that is related to that post.

You can ignore those if you are not gonna use them (for example wooCommerce shop or bbPress forum), otherwise you will have to install the plugins you will going to use prior to importing demo data.

  1. Install all the plugins you want to use on your site, our demo data includes following plugin data (this is optional, if you dont want some of these plugins - do not install them):
    • UserPro Social Profiles - user login/register/publish posts functionality, plugin is located in the 'Extras/optional plugins' folder of the downloaded archive. License code is located in the license-codes.txt file of the documentation folder.
    • Mailchimp for Wordpress - newsletter widget
    • Contact Form 7 - it is used to build the "contact me" page
    • Instagram Feed - used for instagram widget you see in the footer sidebar
    • Easy Facebook Likebox - used for the facebook page box in the sidebar
    • Top 10 - Popular posts plugin - used for popular posts widget and view counter
    • Advanced Responsive Video Embedder - only used if you are going to add video posts
    • Soundcloud Shortcode - only used if you are going to add music posts
    • Widget CSS classes - this plugin is used to add "with-ribbon" class to a widget if you want it to have a ribbon behind a header
    • WooCommerce (eCommerce Shop) - this plugin is used to create a shop/ecommerce functionality, if you dont need that - just dont install it, and ignore error messages on demo import related to products.
    • bbPress (Forum) - this plugin is used to create a Forum functionality, if you dont need that - just dont install it, and ignore error messages on demo import related to forum posts.

    These are Food Recipe functionality only plugins (pick the one you like more, our theme supports both of this plugins to add recipes):

    • WP Ultimate Recipe - *OPTIONAL PLUGIN* this plugin is used to create a Recipe functionality, if you dont need that - just dont install it, and ignore error messages on demo import related to forum posts.
    • Meal Planner Pro Recipes - *OPTIONAL PLUGIN* this plugin is used to create a Recipe functionality, if you dont need that - just dont install it, and ignore error messages on demo import related to forum posts.
  2. Now you are ready to install demo data. Login to Wordpress Admin Panel > Tools > Import page.

  3. Select "Wordpress" from a list of available import formats (it may ask you to install it if you have not done so before).
  4. Click Choose File
  5. Select a file that you've just downloaded, depending on a site style you selected, it is called something like sun-demo-TOPIC.xml, it may take some time to import all the photos so do not refresh or navigate away from a page until you see a success message.

    You might see some Failed to import... errors after importing. These probably happen because you don't have a plugin installed that is related to that post.

    You can ignore those if you are not gonna use them, otherwise you will have to install the plugins you will going to use prior to importing demo data.

  6. By now you should have all demo posts data installed to your site, now if you want to import widgets that you see on our demo to your site you will have to install Widget importer & exporter plugin. Once it is installed - go to Tools > Widget Importer & Exporter > Download the widget demo data file by clicking here and then click "Import Widgets". That should import demo widgets into your site.
  7. Now you have to assign a menu to be used on your website. Admin Panel > Appearance > Menus > Manage Locations tab and from a select box choose a Top Menu for Top Menu field and Footer Menu for Footer Menu field and click Save Changes button.

  8. Final step is to set page called "Homepage" to be used as a homepage. To set it as your homepage, go to Admin Panel > Settings > Reading and set your "Front Page Displays" to be A Static Page with the "Homepage" selected from a "Front Page" select box.

  9. That's it, now you should have demo data installed.

Theme Requirements

Theme Sun requires WordPress installed on your host. To run WordPress your host just needs a couple of things:

That's really it. We recommend Apache or Nginx as the most robust and featureful server for running WordPress, but any server that supports PHP and MySQL will do. That said, we can't test every possible environment and each of the hosts on our hosting page supports the above and more with no problems.

Ask for it

Here's a letter you can send to your host; copy and paste!

I'm interested in running the open-source WordPress blogging software and I was wondering if my account supported the following:
  • PHP 5.4 or greater
  • MySQL 5.5 or greater
  • The mod_rewrite Apache module
Thanks!

Creating Posts

Once you have installed your new theme it's now time to add some posts.

To create a post:

Setting up masonry tiles homepage

If you want to set a custom layout for your homepage (as you see on a demo) and/or show featured posts slider roll you have to create a new blank page using template called Posts Index, you can set a template for the page on the right hand side panel called "Page Attributes" 1 (screenshot below).

On the page edit screen you can turn on the Featured Posts slider. In order to add a featured posts slider you have to check the Show featured posts slider checkbox 2 and when you click it - you will see a multi-select field where you can assign posts to be "featured" in that slider.

You can filter which posts you want to show on that page by clicking on the "Filtering" tab, there you can filter posts by category, tags, or even specific posts you handpick 3

You can control a filter bar by going into the "Filter Bar" tab 4. You can remove each filtering and ordering element if you wish so.

You can also select a pagination type 5 and the elements you want to show on post tile on index 6.

By default the theme will use columns settings that you've set in "Theme Settings" -> "General" -> "Masonry Tiles Settings", but you can override that by checking the "Use Custom Settings For Tiles" checkbox 8.

Now when you've created that page and selected posts you want to show, you will have to go to "Settings" > "Reading" and select this page as a static page to use for your homepage.

Creating Navigation Menu

Next step is creating a menu so that your users can naviagate through your website.

Step 1: Defining a Menu

You must define a menu before you can add items to it.

  1. From the 'Appearance' menu on the left-hand side of the Dashboard, select the 'Menus' option to bring up the Menu Editor.
  2. Select Create a new menu at the top of the page
  3. Enter a name for your new menu in the Menu Name box
  4. Click the Create Menu button.
  5. Your new custom menu has now been defined.

Step 2: Adding Items to a Menu

You can add different link types into your menu, these are split between panes left of the menu you're currently editing.

  1. Locate the pane entitled Pages.
  2. Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
  3. Select the Pages that you want to add by clicking the checkbox next to each Page's title.
  4. Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.
  5. Click the Save Menu button once you've added all the menu items you want.
  6. Your custom menu has now been saved.
The Screen Options panel on top (slideout) allows you to choose which items you can use to add to a menu. Certain items, like Posts are hidden by default.

Step 3: Adding Your Menu to Your Site

  1. Scroll to the bottom of the menu editor window. Section called Menu Settings
  2. In the section titled Theme locations, click the check box for the Header Menu field.
  3. Click Save Menu once you've made your selection.
  4. Repeat the same steps for the Footer Menu.
You can read more about menu creation on the official Wordpress documentation.

Contact Page

You can add contact page with a map and a contact form to your site. Visitors will be able to leave you a message with their email address and other fields like phone number, name etc. you select.

To create a new page which will have the contact form and a map follow these steps:

  1. Download & Install free Contact Form 7 plugin which will be responsibe for contact form generation.
  2. Create a new contact form by going to Wordpress Admin > Contact > Add New, then select fields you want to show on the form.
  3. Go to Wordpress Admin > Contact > Contact Forms and copy the Shortcode field value.
  4. Create a new page by going to Pages > Add New and using a default template.
  5. Add title, content (included the copied shortcode from step 3).
  6. Now click Publish and that's it.

Page with Categories/Custom Links

You can create a dedicated page to list your categories with a nice background for each tile. You can also set a custom URL to send user when they click on a tile. You can also set a tile name and add custom description for it, and of course set a color scheme fader on hover for each tile.

This page's layout can be also modifed in anyway you want, select columns, rows count or sizing, and it will take care of the rest. It will make tiles responsive, so depending on how big is a tile it will modify its contents font sizes and information that is being visible.

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

Theme Translation & Multilingual

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.

Adding Links to Social Networks

You can add social icons to your website. They will appear in the header below top menu, footer and special widget in a sidebar.

  1. In order to add social network to your website go to Theme Settings > General > Social Media tab.
  2. Select Yes in the Show Social Icons in Header and/or Show Social Icons in Footer select boxes depending on where you want to show them
  3. Click Add Row button.
  4. Select Service name.
  5. Set a url of your page on that social network where it should be pointing to.
  6. That's it, now you should see a social networks appear on your site.

Customizing Theme Appearance

Customizing theme appereance is incredibly ease and won't require any coding knowledge. The idea is that you have global and per page/post settings. You can set global settings on Theme Settings pages in admin. Those settings will be used as a default settings for all pages and posts.

However if you want to modify appearance of some of your posts/pages to be different from defaults you've set in Theme Settings you can do so on the page/post edit screen.

Updating theme "Sun"

We will try to cover theme update process in detail, just follow steps below, it should be pretty easy.

Back Up Your Theme Files

First thing’s first – before we get started you need to back up your database and your current theme. Since we’re replacing and updating theme files, there’s a chance something could go wrong so it’s best to play it safe and have a backup.

Use whatever method you feel most comfortable with. You may want to simply copy your entire WordPress directory to your computer using FTP and backup your database with a plugin. You may have a VaultPress account or a membership with some other third-party backup site that does all the hard work for you.

You can read more information about Wordpress backups by clicking here.

Uploading and Replacing an Existing Theme

It is required that you manually upload a new version of a theme and replace an older version in order to upgrade it.

However, if you go to Appearance > Themes > Add New and try to upload a new version of a theme that is already in your site's themes directory, it will fail and you’ll get an error message telling you the destination folder already exists.

The reason for this error is due to the fact you can't have two folders in your themes directory with identical names.

There are a couple of simple solutions:

Login to your site via FTP or cPanel and delete the old theme and then upload the new version. Make sure you make a backup of the old version of your theme just in case something goes wrong.

If deleting your old theme makes you nervous, another option is to rename the old version of the theme. This will allow you to successfully upload the new version of the theme.

  1. Login to your site via FTP or cPanel and navigate to wp-content/themes/ and find your old theme (folder called sun-by-osetin).
  2. Rename your old theme something like "sun-by-osetin-old".
  3. Upload your new theme.

The old and new versions of the theme will both appear in the themes interface, but you will be able to distinguish them by their folder names and version numbers.

For Developers

This section is for advanced users who want to customize a default behaviour. We will explain you how to edit php files and stylesheets.

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 sun-by-osetin-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 Sun, all you have to do is create the same file with your modifications in a sun-by-osetin-child folder (if a file is located inside an extra directory, you will have to create that directory as well). Now theme Sun 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 Sun, 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/php-variables.php or /extend/less-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 tab > enter your LESS or CSS code into the textarea for "Custom CSS".

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.

Frequently Asked Questions

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 Sun 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 sun-by-osetin.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.

Where do I find license codes for included premium plugins like UserPro and UserPro Bookmarks add-on?

You can find them in the "Documentation" folder of your download from ThemeForest, file called "license-codes.txt".

Changelog & Updates History

Following you'll find a list of all theme Sun releases with a log of features added and bug fixes next to each one.

Version 1.0.0 (March 25th, 2016)

Initial Theme Release