First Things First ================== We would like to thank you for purchasing Indostio! We are very pleased that you have chosen Indostio for your website, you will not be disappointed! Before you get started, please be sure to always search our Documentation. We outline all kinds of good information, and provide you with all the details you need to use Indostio. The theme can only be used with WordPress and we assume that you already have WordPress installed and ready to go. If you do not, please go to [wordpress.org](http://wordpress.org) to download and install the latest version of Wordpress. ## WordPress Information To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in [WordPress Codex](http://codex.wordpress.org/Installing_WordPress). Below are all the useful links for WordPress information. - [WordPress Codex](http://codex.wordpress.org/Installing_WordPress) – General info about WordPress and how to install on your server. - [First Steps With WordPress](http://codex.wordpress.org/First_Steps_With_WordPress) – General info about multiple topics about WordPress. - [FAQ New To WordPress](http://codex.wordpress.org/FAQ_New_To_WordPress) – The most popular FAQ’s regarding WordPress. ## Licensing Plugins The theme includes a licensed plugin called Revolution Slider, which we purchased from codecanyon.net. We are not allowed to include the license key for this plugin in the theme package. However, we are responsible for updating the theme with the latest version of the plugin when an update is released. In fact, the license key will not allow you to update the plugin to the latest version. Only direct buyers of the plugin can do this. Because we provide the plugin with our themes, we will take care of updating it for our customers. You can see more about this on the plugin author's website at http://www.themepunch.com/faq/how-to-update-the-slider/. We will keep the plugin up to date for you. ## Files included in the package When you purchase our theme from ThemeForest, you need to download the theme package from your themeforest account. Navigate to your downloads tab on ThemeForest and find Indostio. Click the download button to see the two options. The **All files & documentation** contain everything, the **Installable WordPress** Theme is just the installable WordPress theme file. Below is a full list of everything that is included when you download the main files, along with a brief description of each item. - `indostio.zip`: main theme file that need to be uploaded to host to install Indostio theme. - `indostio-child.zip`: basic child theme of Indostio theme. It is created for people who want to customize code of the Indostio theme. - `Plugins`: This folder contains plugins that are included with the theme. - `Documentation`: documentation folder that contains documentation files. Getting Started =============== ## Installation ### Step 1 - Install theme After you download the package from ThemeForest, please unzip it. You'll see a file called `indostio.zip`, which is the main file needed to upload and install. You can either choose to upload and installl the theme using **WordPress theme install** or use **FTP** function. **Install theme using WordPress install function** - Go to `Appearance > Themes` and click **Add New** ![add-new](images/add-new.png) - Select **Upload** ![upload-theme](images/upload.png) - Click **Choose File** and select the `indostio.zip` file ![browse-theme](images/browse-theme.png) - Click **Install Now** - When upload and installation progresses are completed, click **Activate**, or go to `Appearance > Themes` and activate the **Indostio** theme ![active](images/active.png) **Upload and install using FTP** If you get any fail when install theme by Wordpress install function, we recommend to use FTP: - Unzip the `indostio.zip` file, you'll get a folder `indostio` - Use a FTP client like [FileZilla](http://filezilla-project.org/) and upload that folder to `wp-content/themes` folder on your host - Go to `Appearance > Themes` and activate the **Indostio** theme ### Step 2 - Install plugins After installing the Indostio theme, you'll see a notification in the top of the page that says the theme needs some plugins to function properly. The Indostio theme **requires** following plugins: - Indostio Addons: extra elements for Elementor. It was built for Indostio theme. - [Meta Box](https://wordpress.org/plugins/meta-box/): plugin for creating meta boxes for posts, pages,... It is free and available on WordPress.org - [Kirki](https://wordpress.org/plugins/kirki/): is a Toolkit allowing WordPress developers to use the Customizer and take advantage of its advanced features and flexibility by abstracting the code and making it easier for everyone to create beautiful and meaningful user experiences. - [Revolution Slider](http://revolution.themepunch.com/): is an all-purpose slide displaying solution that allows for showing almost any kind of content with highly customizable, transitions, effects and custom animations. Due to its visual oriented interface and countless options, Slider Revolution is suited for beginners and pro’s alike! The Indostio theme **recommends** following plugins: - [Contact Form 7](https://wordpress.org/plugins/contact-form-7/): plugin for creating contact forms. It is free and available on WordPress.org - [ MailChimp for WordPress](https://wordpress.org/plugins/mailchimp-for-wp/): helps you add more subscribers to your MailChimp lists using various methods. - [ Woocommerce ](https://wordpress.org/plugins/woocommerce/): it is a powerful, extendable eCommerce plugin that helps you sell anything. Indostio is working perfectly with these plugins. It automatically adds more styles to them to make the design match the theme. To install these plugins: - Click **Begin installing plugins** ![plugins](images/plugins.png) - You'll be redirect to a page where all needed plugins are listed. Just click on **Install** below each plugin's name ![install-plugin](images/install-plugin.png) - After installing, if it's required to activate the plugin, just activate ![active-plugins](images/active-plugins.png) ## Activate & Save Permalinks To prevent any 404 errors on custom post type pages, after installing and activating plugins for this theme, you need to activate & save permalinks. - Go to **Settings> Permalink** settings - Select the format you would like to use. - Click the **save** button. ![permalink](images/permalink.png) ## One click import demo content ### Step 1 - Import demo content - Download [Soo Demo Importer](https://github.com/nttber/indostio/raw/main/plugins/soo-demo-importer.zip) plugin. - Install a Plugin using Upload Method - Go to Plugins > Add New. - Click to Upload Plugin. - Click to Choose File, browse **soo-demo-importer.zip** in plugins folder of package theme and upload it. - Click to Install Now. - Click on Activate the plugin. ![product-size](images/26.png) - Install a Plugin using FTP Manager - You can use a FTP client like FileZilla. - Unzip the soo-demo-importer.zip file, you'll get a folder soo-demo-importer. - Upload that folder to wp-content/plugins folder on your host. - Go to Appearance > Plugins and activate the soo-demo-importer plugin. ### Step 2 - Import demo content - Go to Appearance>Theme option data. - Choose the demo and data you want to import. - Click Install. ![product-size](images/demo-data.png) ### Step 3 - The final step ### MailChimp Form - Go to `MailChimp for WP`>`Forms`: - Click **Save Changes** ![setup front page](images/50.png) Create Menu ====================== Following these steps to create a menu: - Go to `Appearance > Menus` - Click the **create a new menu** link to create new menu. - Select items from the left meta boxes and click **Add to Menu** - On the right, feel free to drag and drop menu items to organize them - When you're done moving menu items, check **Primary Menu** for **Theme locations** at the bottom of the page - Click **Save Menu** ![edit menu](images/edit-menu.png) ------------------------------ Customize ============= Indostio theme comes with unique, creative and easy-to-use Customize page. You can change all theme options in **Appearance->Customize** with live-previewing those changes before saving them. All options have full description so you can know what you are doing. Just click and save! General Settings ------------------- ** Custom Site Identity** This option will help you edit your title and tagline, and set site icon (The Site Icon is used as a browser and app icon for your site). Simply go to **Appearance->Customize->General->Site Identity** and change your title, tagline and upload your site icon. ![edit menu](images/56.png) Styling ------- **Color Schemes** Change color on while site. ![edit menu](images/color-scheme2.png) Header ------------- ** 1. Header Desktop ** Indostio uses Elementor to build the header. The templates are created in the Templates > Header Builder section. To select your header, simply go to **Appearance > Customize > Header > Header Layout**. ![edit menu](images/73.png) ** 2. Header Mobile ** Indostio uses Elementor to build the header. The templates are created in the Templates > Header Builder section. To select your header, simply go to **Appearance > Customize > Mobile > Header > Header Layout**. ![edit menu](images/header-mobile.png) Footer ------------- Indostio uses Elementor to build the footer. The templates are created in the Templates > Header Builder section. To select your footer, simply go to **Appearance > Customize > Footer Layout**. ![edit menu](images/113.png) Blog -------------- ** 1. Blog Layout ** Simply go to ‘Appearance->Customize->Blog -> Blog -> Blog Layout' and choose your layout. ** 2. Blog Excerpt Length ** Simply go to ‘Appearance->Customize->Blog -> Blog -> Excerpt Length' and enter your number ** 3. Blog Header ** Simply go to ‘Appearance->Customize->Blog -> Blog -> Blog Header' and change your setttings ** 4. Single Post ** Simply go to ‘Appearance->Customize->Blog -> Blog -> Single Post' and change your setttings - Post Layout: select post layout - no sidebar, right sidebar, left sidebar - Author Box: enable/disable the Author Box on the single post - Post Navigation: enable/disable the Post Navigation on the single post - Post Sharing: enable/disable the Post Sharing on the single post ** 5. Post Header ** Simply go to ‘Appearance->Customize->Blog -> Blog -> Post Header' and change your setttings ------------------------------ Portfolio ========= ** 1. Portfolio Header ** Simply go to ‘Appearance->Customize->Portfolio -> Portfolio' and change your setttings ** 2. Single Portfolio Header ** Simply go to ‘Appearance->Customize->Portfolio -> Single Portfolio' and change your setttings ## Create Portfolio Page 1. Go to **Pages > Add New** to create a new page for your portfolio. Name it as "Portfolio" or whatever you want. 1. Go to **Appearance > Theme Settings > Portfolio** to select Portfolio page. ![Select Portfolio page](images/portfolio-page.png) ------------------------------ Service ========= ** 1. Services Header ** Simply go to ‘Appearance->Customize->Services -> Services' and change your setttings ** 2. Single Service Header ** Simply go to ‘Appearance->Customize->Services -> Single Service' and change your setttings ## Create Service Page 1. Go to **Pages > Add New** to create a new page for your service. Name it as "Service" or whatever you want. 1. Go to **Appearance > Theme Settings > Services** to select Services page. ![Select Service page](images/service-page.png) ------------------------------ Team ========= ** 1. Team Header ** Simply go to ‘Appearance->Customize->Team -> Team' and change your setttings ** 2. Single Member Header ** Simply go to ‘Appearance->Customize->Team -> Single Member' and change your setttings ## Create Team Page 1. Go to **Pages > Add New** to create a new page for your team. Name it as "Team" or whatever you want. 1. Go to **Settings > Reading** to select Team page. ![Select Testimonial page](images/team-page.png) Additional CSS -------------- **How to custom CSS** Simply go to **Appearance->Customize->Additional CSS** and enter your css code. ![edit menu](images/67.png) ------------------------------ Update Theme ========= ** Method 1: Automatic Updates ** The <a href="http://envato.github.io/wp-envato-market/">Envato Market</a> plugin can install WordPress themes and plugins purchased from ThemeForest & CodeCanyon by connecting with the Envato Market API using a secure OAuth personal token. Once your themes & plugins are installed WordPress will periodically check for updates, so keeping your items up to date is as simple as a few clicks. - Step 1 – Download <a href="http://envato.github.io/wp-envato-market/">WP Envato Market</a> plugin. - Step 2 – Install and Active the plugin. To install the plugin navigate to Plugins > Add New and click on the Upload Plugin button at the top of the page. Next browse for the envato-market.zip file that you downloaded from Github. Then click the button to Install Now and when prompted click the Activate Plugin link. - Step 3 – If you translated the theme and the language files are in themes/indostio/languages/, you need to upload them to wp-content/languages/themes/. If not, after updating the theme, any customizations to the theme’s core files, such as PHP files, language files will be lost. - Step 4 – Click the Envato Market menu in WordPress and connect to the API. - Step 5 – Don’t forget to update the required plugins ** Method 2: Manual Update Via WordPress ** Step 1 – Download the Installable theme from ThemeForest in the Download menu on ThemeForest. Then extract it to your computer. Step 2 – Go to Appearance > Themes and deactivate indostio theme. To deactivate, simply switch to a different theme. For example, the default WordPress Twenty Seventeen theme. Step 3 – If you translated the theme and the language files are in themes/indostio/languages/, you need to upload them to wp-content/languages/themes/. If not, after updating the theme, any customizations to the theme’s core files, such as PHP files, language files will be lost. Step 4 – After deactivating you can go ahead and delete it. To do this, hover over the theme thumbnail then click Theme Details. In the bottom right corner of the window, click the Delete button. All your content such as pages, options, _images and posts will not be lost or erased by doing this. However, any customizations to the theme’s core files, such as PHP files will be lost. So you need to the child theme to customize the theme. Step 5 – Upload, Install and Active the theme. Step 6 – Don’t forget to update the required plugins Translation ========= **Tell WordPress which language file to use.** If you don’t use WordPress in your native language so far, you have to tell WordPress which language to use to activate the theme translation. You can do this by editing the wp-config.php file (the file is located in the main directory of your WordPress files) and defining the WPLANG constant. You have to set your language code there, for example fr_FR for French translation. ust add the line below to your wp-config.php or change it if it already exists: `define ('WPLANG', 'fr_FR');` ## Using Plugin The easiest way to translate your theme locally is by using the [Loco Translate](https://wordpress.org/plugins/loco-translate/) plugin. After you have installed and activated the plugin, simply go to `Loco Translate > Home` in the left-hand menu to start translating the theme from your WordPress backend. ## Using Poedit Poedit is a common program which you can use to translate the theme. It’s available for free on [poedit.net](http://www.poedit.net/). After you have installed Poedit, you can open it and select `File > New Catalog from POT file`. Then select the .pot file from the theme you wish to translate which you can find in the `/lang/` folder of theme. Then go through every line of text and translate it to your native language. Afterwards you can save the catalog with your language code (for example `es_ES.po`). Normally Poedit automatically creates the .mo file and saves it, too. The last step you have to do is to upload your created language files to the language folder of your theme using FTP. ------------------------------ Child Theme =========== Indostio is fully child theme compatible. We have attached a basic child theme to the download package which contains the minimum of required files. If you are planing any code customizations we highly recommend to do this inside the child theme! Learn more about child themes [here](http://codex.wordpresss.org/Child_Themes) ------------------------------