First Things First ================== We would like to thank you for purchasing Sober! We are very pleased that you have chosen Sober 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 Sober. 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. ## Online Documentation Please keep in mind that the online version is always up-to-date and contains all information you are looking for. You can visit it here: [Online Sober Documentation](http://docs.uix.store/sober/) ## 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 There are two licensing plugins used in the theme: **Visual Composer** and **Revolution Slider**, we purchased them from codecanyone.net and included them in the theme package. We are not allowed to include the license key for each of them. If there is any update, we are accountable for updating the theme with the newest version of plugins. In fact, the license key will not help you anything even updating plugins to the newest version. Only direct buyers can do this. Because we provide those with the themes; therefore, we will take care of updating them for our customers. Just take a look at the link by the author of plugins to see more. https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524337 http://www.themepunch.com/faq/how-to-update-the-slider/ We will keep the plugins up - to - date. ## 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 Sober. 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. - `sober.zip`: main theme file that need to be uploaded to host to install Sober theme. - `sober-child.zip`: main theme file that need to be uploaded to host to install Sober theme. - `Documentation`: documentation folder that contains documentation files. - `Demo Data`: folder contains demo data files which are exported from the demo site. - `soo-demo-importer.zip`: the plugin for "one click import demo". - `Sliders`: folder contains exported sliders - `Data`: folder contains content files for manually import demo content - `demo-content.xml`: the XML file for importing demo content - `widgets.wie`: the file contains exported widgets - `customizer.dat`: the file contains exported settings for the theme ------------------------------ Getting Started =============== ## Step 1 - Install theme After you download the package from ThemeForest, please unzip it. You'll see a file called `sober.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** - Select **Upload** - Click **Browse** and select the `sober.zip` file - Click **Install Now** - When upload and installation progresses are completed, click **Activate**, or go to `Appearance > Themes` and activate the **Sober** theme **Upload and install using FTP** If you get any fail when install theme by Wordpress install function, we recommend to use FTP: - Unzip the `sober.zip` file, you'll get a folder `sober` - 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 **Sober** theme ## Step 2 - Install plugins After installing the Sober theme, you'll see a notification in the top of the page that says the theme needs some plugins to function properly. The Sober theme **requires** following plugins: - [Woocommerce](https://wordpress.org/plugins/woocommerce/): it is a powerful, extendable eCommerce plugin that helps you sell anything. - [WPBakery Visual Composer](http://vc.wpbakery.com/): it is Drag and Drop Frontend and Backend Pagebuilder Plugin for Wordpress. - Sober Visual Composer Addons: extra elements for Visual Composer. It was built for Sober 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 The Sober theme **recommends** following plugins: - [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! - [Contact Form 7](https://wordpress.org/plugins/contact-form-7/): plugin for creating contact forms. It is free and available on WordPress.org - SOO Wishlist: plugin that is responsible for adding all Wishlist features to website. This one need Woocommerce to work. - [MailChimp for WordPress](https://wordpress.org/plugins/mailchimp-for-wp/): helps you add more subscribers to your MailChimp lists using various methods. - [Variation Swatches for WooCommerce](https://wordpress.org/plugins/variation-swatches-for-woocommerce/): this plugin provides a much nicer way to display variations of variable products, such as Color swatches, Size lable... Sober 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** - You'll be redirect to a page where all needed plugins are listed. Just click on **Install** below each plugin's name - After installing, if it's required to activate the plugin, just activate ## Step 3 - Config Image Sizes After finish installing this plugin, you need to change the size of product images for catalog. - Go to `Woocommerce > Settings > Products > Display`, under the Product Images section, you will find Catalog Images, Single Product Images, and Product Thumbnails. - Catalog Image is for your images on the shop page and for shortcodes. Single Product Image is for your images on the single product pages. Product Thumbnail is for your smaller product thumbnails for widgets. - Change the size of Catalog Image to 433 x 516, Single Product Image to 897 x 908, Product Thumbnail to 80 x 100. ![woocommerce settings](images/woocommerce-settings-image-sizes.png) ## Step 4 - Enable Portfolio Support If you don't want to have portfolio on your site, just ignore this step and go to next step. If you want to import all portfolio demo conent, you have to enable portfolio support before process to next step. The portfolio feature is disabled by default. Please follow the instruction in the Portfolio section to enable portfolio support: [Enable Portfolio Support](#toc-portfolio) ## Step 5 - Import demo From the version 1.0.5 of Sober, we included "One Click Import Demo" into it. To have this importer, please make sure you have: 1. Installed and activated this plugin [Soo Demo Importer](http://uix.store/plugins/soo-demo-importer.zip) 2. Installed and activated plugin __Sober Addons__ version __1.1__. If you are using an older version, please deactivate it > delete it > go to Appearane > Install Plugins and insatll the latest version of this _Sober Addons_ plugin. After having these plugins installed and activated, you will see a new menu **Import Demo Data** under _Appearance_ menu. Go to that page and select the homepage you want to import. ![Sober One Click Import Demo](images/demo-import.png) The import process usually take few minutes to complete. ------------------------------ Theme Customizer ================ Theme option / Customize area is one of the main feature in our theme. They give you abilities to made a changes to your site without touching a single line of code. The Customizer gives you an ability to live preview changes on the site while options give you an ability to search through the options and do some specific task which will be explained later. You can access the theme customizer by going to **Appearance > Customize** ![Sober customizer](images/customizer.png) In theme customizer, you will see sections which contain options for header, footer, blog, shop, layout, widget, menus,... We will go through them one by one in bellow sections. ------------------------------ Setup Header ============ Header is the most complex part of this theme. It contains topbar, header layout, logo and menu. ![Header layouts](http://demo.uix.store/sober/wp-content/uploads/sites/2/2016/12/Headers.jpg) ## Topbar You can control the site topbar in **Customize > Header > Topbar**. There are some options which help you control the topbar: - Show topbar: enable or disable the topbar - Topbar Color: select the background color for topbar. There are 2 options for you choose - Dark or Light - Topbar Layout: select layout of topbar. There are 2 options - 1 column (full width) or 2 columns (split topbar into 2 columns). - Left Content: if you select 2 columns layout, you will be able to select which content will be displayed in the left side of topbar. You can choose either "Currency & Language switcher" or "Custom Content". For having currency & language switchers, you need to install [WooCommerce Currency Switcher](https://wordpress.org/plugins/woocommerce-currency-switcher/) and [WPML](https://wpml.org/) plugins. Note that the right content is the *Topbar Menu* which is set in the *Menus* section. ## Header You can control your site header in two places: Customizer and each individual page. Firstly, go to **Customize > Header > Header**. In order to help you setup your header easier, we group many options into one option for header layout and more other options for header style: - Header layout: select the right layout for your site header. There are 6 layouts with diffent elements, structure for each layout. - Header Background: select header background from two options - white or transparent. - Header Text Color: select header text color from two options - dark or light. This option only availe But, you also can ovride some options in every single page. Go to **Pages > All Pages** and select the page you want to change header style. You will see the **Display Settings** meta box bellow the main editor of that page. In each page, you are able to change _Header background_ and _Header text color_. Please note that, this Display setting box doesn't appear if that page is using _Homepage_ template. ## Logo Sober theme has it own options for you to upload and config your logo image. - Logo: upload your logo image there. - Logo Light: upload your logo which is in light color. When you need this? If you select header background as transparent, you should prepare the main logo in dark color and upload this light version to make sure your logo display well in all situations. - Logo Width & Logo Height: specify the width and height of your logo image. By default, you don't need to enter values for it. The logo will be display in nature dimension. But if you want the logo displays well on retina screens, you should prepare it in double dimension the enter these values as regular dimension. For example, your logo is 140x70, you should design it in 280x140. Then enter the value of width is 140px and height is 70px. - Logo Margin: this option is used to adjust the logo to the right position you want. ## Header Icons Sober theme has options for controlling header icon for each header layout. You can found these settings in **Appearance > Customize > Header > Header Icons**. - Header Icons: this option will show up when you select header layout v1, v2, v3, v6. It allows you to arrange and toggle icons. - Header Icons Left & Header Icons Right: this option will show up when you select header layout v5. It allow you to arrange and toggle header icons on the left and right side of header layout v5. - Header Icons Left V4 & Header Icons Right V4: this option will show up when you select header layout v4. It allow you to arrange and toggle header icons on the left and right side of header layout v4. - Shopping Cart Icon Source: you can select to use a built-in icon from the Sober theme or upload your own icon image. ## Menus Menus are the default part of any WordPress site. If you are new with WordPress, we recommend you take a look at this guide firstly - [WordPress Menu User Guide](https://codex.wordpress.org/WordPress_Menu_User_Guide). ### Menu Locations In Sober theme, there are 6 menu locations: - Primary Menu: this is the main menu of your website. - Secondary Menu: in case you choose header layout __Header V4__, your header will display 2 menus with logo at the center of primary menu and secondary menu. - Topbar Menu: this menu will be display in the right side of your topbar. As we wrote in the __Topbar__ section, you need enable topbar first, then select __Topbar Layout__ as "2 Columns" first. - Footer Menu: this is left menu in the footer. - Footer Socials: it is displayed in the right side of site footer. This menu only displays social icons base on URLs you enter. - Mobile Menu: this is the menu for display on mobile devices. If this menu is not set, it will use __Primary Menu__ for mobile menu. Why you need this? Because of the primary menu support mega menu on large screens, therefore you should create another menu for mobile. Of course, theme will remove all mega menu style if you still using the primary menu for mobile. ### Setup Mega Menu Sober theme come with a built-in Mega menu. It means you don't need to purchase or install extra plugin for this feature. To setup mega menu, please go **Appearance > Menus** and select menu you want to edit. Please note that mega menu doesn't support config in Customizer. A mega menu can ben enabled on every first level menu item. This image can show you what is menu item level: ![Menu levels](images/menu-levels.png) We will guide you how to setup a mega menu: **Step 1**: Select top level (Level 1) menu item that you want to setup mega menu for it. You will see a new _Settings_ link added to every menu item. Click to that _Settings_ link, a new popup will show up. Please note with different menu item levels, different popups will appear. ![Menu settings](images/mega-menu-settings.png) **Step 2**: In the popup, there are options helping you setup this mega menu item. ![Mega menu popup](images/mega-menu-popup.png) - Enable mega menu: select enable or disable mega menu for this menu item. By default, it is disabled. - Mega panel width: enter the width of the mega menu panel in pixel. This option **can not be empty**. Besides, you will see all direct children menu items of this menu item display there. They are all menu items level 2 which are children of current menu item. Each of them will be a column in mega menu panel. You can change the width of each column right there by clicking to the arrow icons. **Step 3**: If you don't want to setup the background for this mega menu, you can ignore this step. Just click to _Background_ menu in the left side of popup, new options will appear and allow you to upload background image as well as select background properties. ![Mega menu background](images/mega-menu-bg.png) **Step 4**: This step is optinal too. With menu item level 2, you will be abble to hide it. For example, you can see in the shop mega menu, our last column is empty. It is used to create a space for displaying background image. And from menu item level 2, you can add custom content to your menu item. ## Language Switcher Sober is built to fully compatible with [WPML](https://wpml.org) plugin. You need to purchase WPML separately if you want to build a site with multi-languages feature. Once WPML is installed on your site, Sober will help you display a built-in language switcher on topbar or header. If you are not familiar with it, the documentation of WPML will be the first place you should visit: - [WPML Documentation](https://wpml.org/documentation/): This documentation will help you a lot to work smoothly with WPML. - [WPML Forum Support](https://wpml.org/forums/forum/english-support/): If you bought WPML then you get free support from their amazing team. - [Translating widgets](https://wpml.org/forums/forum/english-support/): Tutorial recommended by wpml team for translating widgets. -------------------------------------- Setup Page Header ================= ![Customize page header](images/customize-page-header.png) Page header is the big banner display after the header. In **Customize > Page Header**, you will see these options: - Show Page Header: select to enable or disable page header. - Show Breadcrumb: select to show or hide breadcrumb in page header. - Page Header Style: select page header style. There are two styles for page header - Normal or Minimal. Normal is the default value and it is the big page header with background image. Minimal style is a small page header without background image and it won't take much space of your site. It look like a breadcrumb with title on the left. - Page Header Image: upload background image for the page header. This is the default image for it. But you can also overide in every single page. - Text Color: select text color for the page header cotent. There are two color - Dark or Light. It will be color of page title and breadcrumb. Depends on the page header image, you should select the right text color for the best readability. - Shop Page Header Image: upload background image for page header on shop pages. Shop pages include Shop, product category page, product tag page. - Shop Page Header Text Color: select text color for page header on shop pages. All options for page header in the Customizer are default options. You can override them in each single page. Just go to **Pages > All Pages** and select to edit the page you want to change page header style, you will see the **Display Settings** meta box right bellow the main editor. You can see options to disable page header, change page header image, change page header text color there. -------------------------------------- Setup WooComemrce & Shop ======================== Sober is an ecomemrce WordPress theme and WooCommerce is the main plugin which provides all functionalities about selling products online. If you are new with WooCommerce plugin, please take a look at its' documentation first - [WooCommerce Documentation](https://docs.woocommerce.com/documentation/plugins/woocommerce/) ## Config WooCommerce After WooCommerce installed and activated on your website, it will require you to do some setup steps. You should follow it to complete the installation. In these steps, WooCommerce will recommend you to create some pages such as: Shop, Checkout, Cart, My Account page. If you imported our demo content before, you can skip this step to avoid duplicate these pages. Because they are imported from our demo content. And if you skip this step, you must go to **WooCommerce > Settings** and select these pages manually. ## Create Order Tracking Page If you want to have _Order Tracking_ page, you must create it manually. But if you imported our demo content before, you can use the page we created for you. To create _Order Tracking_ page, please go **Pages > Add New** to create a new page. You can name this page as "Order Tracking" or anything else you want. Inside that page content, please insert this shortcode: `[woocommerce_order_tracking]` After created the _Order Tracking_ page, please go to **WooCommerce > Settings** then select **Checkout** tab. You will see an option for selecting what page is _Order Tracking_ page. ![Order tracking page setting](images/woocommerce-order-tracking-setting.png) ## Config Wishlist Sober theme come with a private plugin - Soo Wishlist. This is a plugin that developed to work smoothly with this theme. After activated this plugin, you will new setting tab called **Wishlist** in **WooCommerce > Settings**. This tab contains options allow you to control the display of the wishlist. ![Wishlist setitng page](images/woocommerce-settings-wishlist.png) ## Config Currency Switcher If you want to have multi-currencies in your website, we recommend you to use this plugin - [WooCommerce Currency Switcher](https://wordpress.org/plugins/woocommerce-currency-switcher/). This plugin provides ability to add more currencies to your store. But in free version, it is limited to 2 currencies only. It also provide shortcodes and a widget to display currency switcher. But in Sober theme, we create a eye catching switcher that match with theme's style. Therefore, you don't need to add the switcher manually, just activate this plugin and add more currencis as you wish. ![WooCommerce currency switcher settings](images/woocs-settings.png) If you need more help with this feature, you can go to the documentation of it: [WOOCS FAQ](http://currency-switcher.com/category/faq/) [WOOCS Video Tutorials](http://currency-switcher.com/video-tutorials/) Plese note that, this plugin will overide some default options of WooCommerce about displaying price. ## Control Shop Display When you go to **Appearance > Customize > Shop**, you will see two sections there: Catalog and Product. The **Catalog** section contains options for products archive page, such as Shop, product category page, product tag pages. - Proudct Toggle: enable to show the product filter link on the _Shop_ page. This filter show 4 links above product grid: All Products, Hot Products, New Products and Sales Products. - Proudct Filter: enable or disable filter icon on the right side of shop toolbar. - Show Hover Thumbnail: select to enable or disable hover effect of products on _Shop_ page. If you enable it, when vistors hover the mouse over products, it will show the secondary product image. The secondary is the first image in product gallery. - Product Quick View: select to enable or disable product quick view modal. - Show Quick View When: if you enable the _Product Quick View_ option above, you can select when a quick view modal appear from this select list: click on the image, click on quick-view button (this option will show a new button for quick-view), click on buy button (this option will replace add-to-cart button by quick-view button) or click on product title. - Product Columns: select the default columns for _Shop_ page. - Product Per Page: select the default number of products to show on _Shop_ page. - Navigation Type: select the shop navigation type, numeric or ajax load more button. The **Product** section contains options for single product page. - Product Newness: enter number of days that a product is set as _New_ product. Sober will calculate remain days between current date with the published date. - Single Product Type: select single product display type. There are three types for you choose. ## Config Variations Swatches By default, WooCommerce shows variations of variable products as drop-down selectors. From the version 1.1.0, Sober supports to display them in a nicer way, as swatches. In order to have this, you have to install the [Variation Swatches for WooCommerce](https://wordpress.org/plugins/variation-swatches-for-woocommerce/) plugin. This plugin will add more options to product attributes to allow you set an attribute type as **Color**, **Image** or **Label**. ![Product attribute types](images/product-attribute-type.png) For example, you can select the **Color** type for attribute _Color_; the **Label** type for attribute _Size_ and the **Image** type for _Material_ attribute. Please follow bellow steps to add new attribute with swatches support or edit an exists attribute and make it display swatches rather than drop-down selectors. - **Step 1**: navigate to **Product > Attribute** to add a new attribute or edit an exists attribute. - **Step 2**: when you editing or adding an attribute, you will see the option **Type**, please select the type you want this attribute to be displayed on the front-end. This option has _Select_ value by default. You can chose either Color, Image or Label. If you chose Select or Text, this attribute will show as drop-down selector on the front-end. - **Step 3**: after you finish adding or editing an attribute, you can click to that attribute name or the cog icon on the right side of each attribute to configure terms of that attribute. - **Step 4**: in this page, you can add new attribute terms or edit exists terms. You will see a new field bellow the **Description** field. It could be a color picker, image uploader or text input if you select attribute type as Color, Image or Label in the previous step. ![Product attribute color](images/product-attribute-color.png) ![Product attribute size](images/product-attribute-size.png) ## Other Settings 1. From version 1.1.3, Sober has a new option to enable ajax add to cart on single product page. Please navigate to **WooCommerce > Settings** and select tab **Product > Display**. You will see a new option "Enable AJAX add to cart button on single". -------------------------------------- Setup Footer ============ ![Sober footer](images/footer.jpg) The Sober default footer contains footer content area and copyright area. Both of these areas can be configured in **Customize > Footer** section. ## Footer content Footer content area is the section where you see the subscribe form within "Go to top" icon. Sober has some options for controlling this area: - Enable Footer Content: allows you to show/hide footer content - Enable "Go to top" icon: turn on it if you want to show that "Go to top" icon at footer. - Footer Content: this is the main option for this area. You can enter _HTML_ and _Shortcodes_ here. For example, we used a subscribe form which is provided by plugin [MailChimp for WordPress](https://wordpress.org/plugins/mailchimp-for-wp/) plugin. This is the code we used: ``` <h3>Newsletter</h3> <p>Get timely updates from your favorite products</p> [mc4wp_form id="306"] ``` Please note that the form ID here (306) is on site only. It could be different on your site. If you want to get the right shortcode for this, please go to **MailChimp for WP > Forms** and press the **Get Shortcode** button. Besides, the default form will look a little bit different with the form on our demo. Please replace all code of that form by following code: ``` <input type="email" name="EMAIL" placeholder="Your email address" required=""> <input type="submit" value="Subscribe"> ``` ## Footer Copyright This area is used to display your copyright trademark. You can enter any content such as `©2017 Sober`. On our demo, you can see a menu there. In order to setup this menu, please go to **Appearance > Menus** and asign your menu to **Footer Menu** location. ![Footer menu](images/footer-menu.png) ## Footer Socials We use a normal menu for social icons on the right side of footer. It is pretty simple to create your own social menu icons there. You just need to create a new menu (or edit your current menu) and add link to your social pages. Remember to assign it to **Footer Social** menu location. This menu will detect the correct icon from the URL. For example, if the URL contains "twitter.com" it will display the Twitter icon. ![Footer socials](images/footer-socials.png) Currently, Sober supports following social icons in Footer Socials menu: 1. Facebook 1. Twitter 1. Google Plus 1. Linkedin 1. Instagram 1. Yelp 1. Youtube 1. Flicker 1. PInterest 1. Github 1. Vimeo 1. Dribbble 1. WordPress 1. Tumblr 1. Codepen 1. Skype 1. Reddit 1. Stumbleupon 1. Pocket 1. Foursquare -------------------------------------- Visual Page Builder =================== It has very simple and intuitive interface, but before getting started, you may find it useful to get accustomed with its documentation: [Visual Composer Documentation](https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress?title=Visual_Composer) In Sober theme, we also create some new elements that will help you a lot to build your website easier. ![Sober Elements](images/sober-elements.png) ------------------------------ Templates ========= **Homepage**: This template is full width and has no banner, no custom layout, no padding between the content and the header, the content and the footer. ------------------------------ Post Format =========== [Post Formats](http://codex.wordpress.org/Post_Formats) is theme feature which is a piece of meta information that can be used by a theme to customize its presentation of a post. In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list. Sober theme supports the following post formats: - `gallery` - A gallery of images, which will be displayed in a responsive image slider, powered by Flexslider. - `image` - A single image, which will be shown above post title. - `video` - A single video, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed above post title. - `audio` - An audio file, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed using a powerful HTML5 audio player provided by Wordpress as default player. Using post format in Sober lets you differentiate post from each other and make the blog page / single page looks more beautiful. When you edit a post, select a format you want to apply to that post on the **Format** meta box on the right. When you choose a format, a corresponding meta box will appear **below** the content editor, here's the list of them. All you need to do is just enter **all** information in the fields in these meta boxes. This information will be used to decorate the post. For example: gallery post format will uses uploaded images to show a slider above post title, a video post will display a video player above post title, etc. ------------------------------ Portfolio ========= From the version 1.1.0, Sober start supporting to manage and present your Portfolio. To have this feature, you have to ensure you are using at least version 1.2 of **Sober Addons** plugin. If you are using an older version, please see this [update Sober Addons guide](#faq-update-sober-addons) to update it. ## Enable Portfolio Support<a name="enable-portfolio"></a> If you are using the version 1.2 or newer of Sober Addons plugin, you can go to **Settings > Writing** to enable Portfolio support. ![Enable portfolio support](images/portfolio-enable.png) After you enable Portfolio support, you can see a new menu "Portfolio" on your admin. In this menu, you can manage your **projects** and **portfolio type**. ## Create Portfolio Page After you enable Portfolio support, you can view your portfolio in the link: `http://your_domain/portfolio`. But we recommend you to create a page for this to easier management in future. Please remember your portfolio URL will be that page's URL. 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 **Settings > Reading** to select Portfolio page. ![Select Portfolio page](images/portfolio-page-select.png) ## Change Permalink Structure Sober Addons plugin allows you to change the permalinks of Portfolio and project pages as you want. To do this, you can go to **Settings > Permalinks**. Besides default settings of WordPress and WooCommerce, you will see new options for Portfolio there. ![Portfolio permalink](images/portfolio-permalink.png) ## Manage Projects It's pretty simple to manage your projects. It's similar to manage posts. You can go to **Portfolio > All Projects** to manage your projects or go to **Portfolio > Add New** to add a new project. ![Add new portfolio project](images/portfolio-add-new.png) In this screen, you will see it is very similar to adding/editing a page. - **1**: enter project name here - **2**: enter project content here. You can see we use the default WordPress's gallery to display project images. You could learn more about how to add a gallery to a post here: [The WordPress Gallery](https://codex.wordpress.org/The_WordPress_Gallery). Please note, to have a similar gallery as ours, please follow these settings: ![Portfolio gallery settings](images/portfolio-gallery-settings.png) - **3**: select project type. You can also add new project type here. - **4**: upload the feature image for the project. ## Control Portfolio Display Sober has options to help you control how your portfolio be present on the front-end. Please note that your [portfolio page](#toc-create-portfolio-page) will be used to present your projects. You don't need to add any content to that page. To control how to portfolio display, you can navigate to **Appearance > Customize > Portfolio**. In this panel, you will see two sections: - **Portfolio Page**: this section contains options to handle the portfolio page display. - **Project Page**: this section contains options to handle a single project display. Let's go through each section: ### Portfolio Page In this section you will see bellow options: - Portfolio Filter: enable or disable the project filter on the top of your portfolio. - Portfolio Style: select the style/layout of your portfolio. You can chose either Classic, Full Width or Masonry. ![Portfolio layouts](images/portfolio-layouts.png) With the _Masonry_ style, you will have new options on **Customize > Page Header** that allow you to select page header image for the portfolio page and select text color for that page header. Besides these options, there is an option in **Settings > Reading** that let you specify how many project will be show up per page. It is **Portfolio items show at most** option. - With **Classic** layout style: we recommend to show 9 items per page. Or you can use other values like 6, 12, 15, 18. - With **Full Width** layout style: we recommend to show 8 items per page. Or you can use other values like 16, 24. - With **Masonry** layout style: we recommend to show 6 items per page. Or you can use other values like 12, 18. ### Project Page In this sections you will see bellow options: - Single Navigation: enable or disable the navigation to next/previous project on the single project page. - Next Link Text: Enter the next link text for the navigation - Prev Link Text: Enter the previous link text for the navigation ------------------------------ 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 =========== Sober 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) ------------------------------ FAQs ==== 1. **How to change the default logo to other?** Go to `Appearance > Customize > Header > Logo`, the option for change logo is there. 2. **Does Sober theme support child theme?** Yes, it does. Please see details in above section. 3. **How to update Sober Addons plugin?**<a name="faq-update-sober-addons"></a> From the version 1.2 of this plugin, you can update it in the admin area like other plugins. But if you are using an older version than 1.2, please go to **Plugins** menu and delete it then go to **Appearance > Install Plugins** to install it again. The latest version will be installed. 4. **How to change the shopping cart icon?** You can navigate to **Appearance > Customize > Header > Header Icons** to select another shopping cart icon or upload your own. 5. **Can I have ajax add to cart button on the single product page?** Yes, you can. From version 1.1.3, you can navigate to **WooCommerce > Settings > Product > Display** and select the option "Enable AJAX add to cart button on single". ------------------------- Update History ============== __Version 1.2.1__ * Fully support WooCommerce 3.0.x * Product gallery is presented as a slider, improve UX * Supports site preloader with new options to enable it. It is disabled by default. * Add new option to display "Sold Out" badge * Add new option to select the search type of the search form in mobile menu * Improve performance on mobile * Improve the quick-view modal * Fix IE 11 issue with SVG icons * Fix ajax add to cart on simple product doesn't work with WooCommerce 3 * Fix dropdown arrow icon of variable products isn't clickable * Fix the issue of typography options for product short description __Version 1.2.0__ * Add support for WooCommerce version 3.0 * Add Typography settings in Customizer * Update cart modal with ability to remove items by ajax * Update WPML compatible * Update style of external/affiliate products * Support updating plugins better * Make theme compatible with plugin Nav Menu Roles * Fix issue with cart modal * Fix CSS issue of element Product Carousel * Fix the quick-view issue of external/affiliate products __Version 1.1.5__ * Add new options to add more content to bottom of footer * Add a new option to enable portfolio sharing * Tweak: add product link to product title in the quick-view modal * Tweak: add style of message boxes to WooCommerce messages * Improve mobile menu toggle icon * Fix layout issue on shop page when product images has different heights * Fix layout issue on shop page with category boxes * Fix warning message when a product has no price __Version 1.1.4__ * Add new option in Customize > Shop > General that allow to open the shop cart modal after successful addition * Fix shopping cart icon style issue * Fix style button "Add to wishlist" in loading style * Fix a small issues in RTL support __Version 1.1.3__ * Add new option in WooCommerce > Settings > Product > Display to enable ajax add to cart on single product * Add new option to arrange and toggle header icons * Add new option to change cart icon * Add new option to turn off shop toolbar * Support RTL (please update Sober Addons plugin to 1.2.3 for fully supported) * Improve YOAST SEO plugin compatible * Improve "Product Tabs" element: allow select category for the filter (please update Sober Addons plugin to 1.2.3) * Tweak: use WordPress's setting for date format on blog posts * Fix bug divide by zero * Fix bug extra product content doesn't show up * Fix bug enable buttons for mobile not working * Fix bug portfolio page setting doesn't work (please update Sober Addons plugin to 1.2.3) * Fix bug wrong email format of "Contact Box" element (please update Sober Addons plugin to 1.2.3) __Version 1.1.2__ * Add a new option to select menu hover animation * Add a new option to show/hide blog category list * Add a new option to manage post header fields * Add a new option to show product buttons on mobile * Improve Yoast SEO compatible * Tweak author bio box: add link to author posts * Fix bug ajax load more products without adding CSS column classes * Fix bug shop tab filter by tags doesn't work * Fix a small CSS issue on checkout page * Fix the javascript error of page header parallax * Fix issue when has no page header on blog page __Version 1.1.1__ * Add new option for page header parallax * Add new options to manage product filter tab on shop page * Add new option to hide price for "Out of stock" products and show "Sold Out" * Add new option to add close icon to mobile menu * Update style for grouped products * Update FontAwesome to version 4.7.0 * Fix bug sticky product description on product style 1 doesn't work on Safari sometimes * Fix bug slide menu doesn't work with sticky header V6 * Fix bug product doesn't show image on mobile when use product style 1 * Fix CSS issue with variation swatches * Fix wrong price direction * Fix warning "Divide by zero" * Fix partner images are cropped (Please update Sober Addons plugin to have this fix) __Version 1.1.0__ * New - Support portfolio * New - Support product variation color swatches with plugin [WooCommerce Variation Swatches](https://wordpress.org/plugins/variation-swatches-for-woocommerce/) * Add new option that allow to add extra content at bottom of product short description on every product page * Add new option to control product sharing * Add new option to add more content on the right side of footer social icons * Add new option that allows add product number badge next to shopping cart icon on mobile menu * Add new option to change mobile menu width * Improve loading performance and help browser render the webpage a litle bit faster * Fix CSS issue for pages which has no content * Fix bug about responsive * Fix warning when a product has no price __Version 1.0.8__ * Improvement performance * Improvement shop cart display on mobile * Fix issue about sticky header style * Fix issue modal can't scroll * Fix product images are not showed on mobile when quick-view is off __Version 1.0.7__ * Add infinity scroll for shop page * Improve user experience on mobile for product list and product style 1 * Fix mega menu settings lost data when save __Version 1.0.6__ * Update Sober Addons plugin to version 1.1.1 * Update Soo Wishlist plugin to version 1.0.1 * Update Soo Product Filter to version 1.0.1 * New option to use text logo * New option to disable header hover effect * New option to change shop tabs from "Hot, News, Sales" to top 3 categories * New option to add "OFF" word to sale badge, after percentage number * Fix bug logo size can not be applied * Fix bug logo margin can not be applied * Fix normal sticky header style on Cart, Wishlist, Order Tracking pages __Version 1.0.5__ * Update Sober Addons plugin to version 1.1 * Start supporting Yoast SEO breadcrumb * Fix quick view modal responsive problem * Fix banner images don't fill grid on iMac screen * Fix sticky header style on pages which have no page header * Fix product variation dropdown style on Mac OS __Version 1.0.4__ * Improve performance by reducing site size * Press ESC button to close modal * Add sticky header feature __Version 1.0.3__ * Improve responsive display on mobile * Improve performance * Fix sticky product summary problem on Safari * Fix dropdown style problem on Safari * Fix search icon in mobile menu __Version 1.0.2__ * Use SVG for default logo * Improve mobile menu performance * Fix error when WooCommerce plugin is not activated __Version 1.0.1__ * Add product option that allow to set a product as new product * Add configuration file for supporting WPML * Update recommended plugin list * Fix some mirror issues in CSS __Version 1.0__ * Initial release