California - Documentation - 20Script

#### California Wordpress Theme

##### Documented by WEBNUS

#### California Wordpress Theme

##### Documented by WEBNUS

### Quick path selector

01I am a beginner and not familiar with Wordpress :
Please read the documentation thoroughly with attention and follow the guides step by step.

02I know how to work with Wordpress, but I have not worked with Themeforest’s themes :
Please follow thoroughly the California theme tricks section and Sliders Setup.

03I worked with Themeforest’s themes and I am expert :
Please review California theme tricks section.

04I am a developer :
You are good to go, and if you have any question let us know.

### Package Content

Upon downloading the package zip file from Themeforest, you'll have all files you need inside. Zip package contains the following files and folders:

1. california-wp.zip contains California theme
2. California_child_theme.zip contains child theme
3. DummyContent folder contains Demo Contents such as pages and posts and slider import file.
4. UserGuide folder

### Getting Started

To install this theme you must have a working version of WordPress already installed. For more information regarding installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress
Please note that we do not give support or any questions related on how to install and maintain wordpress. For any faulty installation that may cause your website or our theme malfunction you should refer to wordpress support forum. Alternatively you can get help from your web hosting.

### Installation:

If you’ve downloaded whole theme package, unzip it. There you will find the theme installation file , user manual, dummy content .xml file, license folder, etc.

Alternatively you can simply download the installable WordPress file.

When you are ready to install a theme, you must first upload the theme files and then activate the theme. For this purpose, unzip the file that you downloaded from themeforest and there you would find theme (california-wp.zip) file and upload it via wordpress installer. The theme files can be uploaded in two ways

#### FTP Upload

1. Unzip the "california-wp.zip" file
2. Upload the extracted "california-wp" theme folder into "/wp-content / themes/" in your wordpress installation
3. For Activate the theme, Go to Appearance > Themes and activate the installed theme

#### WordPress Upload

1. Navigate to Appearance > Themes
2. Click Add New button and finnaly hit the Upload Theme
3. Click on Choose File and find the "california-wp.zip" file on your computer and click Install Now button
4. The theme will be uploaded and installed
5. For Activate the theme, Go to Appearance > Themes and activate the installed theme

##### Warning:

Please be informed that you should not upload the whole item you have downloaded from Themeforest as you will get an error of broken stylesheet file. Instead locate the california-wp.zip file inside the main file you have downloaded.
While installing your theme through wordpress admin, you may encounter an error message saying “are sure you want to do this?” This is mainly due to your hosting php settings. In some hosting the default value for max_upload_limit left default which is 2mb. To solve this problem you should either increase your maximum upload size (to 50mb) on your hosting admin panel or ask your host to do it for you if you do not have the privilege to alter your server php settings. This is a very common request and they should be able to help you out. Once the limit is increased you can re-try the install and you’ll be all good to go.

#### Plug-ins Install

Note: Demo content has created by visual composer. Please install and active the visual composer plug-in before import demo data

After theme activation it is advised to install default theme plugins:

1. Visual Composer
2. Webnus Portfolio
3. Contact Form 7
4. Envato Wordpress Toolkit
5. Kakapo Custom sidebar
6. Layer Slider
7. Slider Revolution
8. Social Count Plus
9. Templatera
10. WP Review
11. Woocmmerce

Click on Begin installing plugins and Simply select all plugins and install them. Then activate the plugins with help of Bulk action:

##### Install Plug-ins Manually

If you like to install plug-ins manually, Find these plug-ins in california-wp\inc\plugins folder

You can find the appropriate documents here:

- Layer slider documents
- Revolution Slider documents
- Contact Form 7
- WP Review

### Setting Up as Demo Site (Demo Data Install)

We have included the exported XML file from our demo; this allows you to quickly set up your theme the same way our demo is set up.

Note: Demo content has created by visual composer. Please active the visual composer plug-in before import demo data.

1. Navigate to WP Admin > Importer +
2. Select import content from list and Click on Import button
3. Please note in our dummy content none of the images will be downloaded because of copyright restrictions. You will need to add your images manually.
4. To create widgets, Click on Import Widgets button or navigate to the left sidebar menu of the WordPress’ Dashboard, then Appearance > Widgets. Just drag and drop the widgets on to the widgets area on the right side of the widgets page.
5. To set Menus, Click on Import Menus button or create menus manually Setting up the Menu
6. To set home page and posts page, Click on Import Reading Setting button or Navigate to Settings > Reading and select A Static Page for Front page displays and select your home page for the Front Page and blog for the Posts page
7. Finally Import Layer Slider demo content Import Layer Slider Demo content

#### Install Issue

If you have any problem with One Click Import Data method follow below instruction

1. Go to Tools -> Import in the blog’s admin panels.
2. Click on the WordPress and follow the instructions if Import plugin isn’t installed yet.
3. Browse the allpagesandpostsdummy.xml (XML file) in the DummyContent folder of package and Upload the XML file.
4. You will first be asked to map the authors in this export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.
5. please note in our dummy content none of the images will be downloaded because of copyright restrictions. You will need to add your images manually.
6. WordPress will then import each of the posts, page, custom post types, comments, and categories contained in this file into your blog.
7. Notice that the Sidebar and Footer Widgets are not replicated on your imported demo content. You should be the one to create the widgets. To create widgets, navigate to the left sidebar menu of the WordPress’ Dashboard, then Appearance > Widgets. Just drag and drop the widgets on to the widgets area on the right side of the widgets page.
8. After this, you need to select it to show up as the home page. Navigate to Settings > Reading and Select A Static Page for Front Page Displays and Select your home page for the Front Page and blog for the Posts page
9. Done! You should now have the dummy/demo content similar from the Live Preview of the theme.

You can use this bellow link to learn more about install xml for demo
Uploading Sample .XML Data To Your WordPress Theme

##### Increasing the WordPress Memory Limit

- Edit your wp-config.php file and enter something like:

      define('WP_MEMORY_LIMIT', '96M');

  WordPress memory can be different to the server – you need to set this regardless of server memory settings
- If you have access to your PHP.ini file, change the line in PHP.ini If your line shows 32M try 64M:

      memory_limit = 64M ; Maximum amount of memory a script may consume (64MB)

- If you don’t have access to PHP.ini try adding this to an .htaccess file:
  php_value memory_limit 64M
- If none of the above works then talk to your host.

### Theme Modifications

The theme comes with a backend that allows for heavy style customization (colors, fonts, etc).
However often times this is not enough, and you users want to add their own CSS Rules to the theme. We heavily recommend to use a so called Child Theme for that. Using a Child theme allows you to update the theme and at the same time you also make sure that you will never lose any of your modifications to a theme update.
Using a child theme is simple: Just install it, as well as the original "California" Theme on your server. Instead of activating the Original Theme you activate the Child theme. Now if you want to add any custom css to your theme use the child themes style.css. If you want to add any custom php functions use the child themes functions.php.
Now if you update the original Theme with the latest Version, your child theme will stay in place with all your customizations.

### Create new Pages

You can create any number of pages with content. California includes several page templates to choose from, and you will need to choose the page template that suits your needs.

Follow These Steps Below To Create a New Page

1. Navigate to Pages and click Add New.
2. Input a new name for your page, then look for the Page Attributes on the right hand side of the page
3. Parent is usually set to No Parent unless the page you are making is a Side Navigation page
4. Then select a page template from the dropdown list. See list of page templates and descriptions below
5. You can select any number of Page Options
6. Content for your page goes in the editing field, use the Visual composer(recomended) or HTML editor. Page content is mainly built using Shortcodes, see the Shortcodes section for how to use them. You can also use our demo content, see the corresponding section of this document for the demo code of each page

##### Sidebar Position

Sidebar is basically a vertical column provided by a theme for displaying information other than the main content of the web page. Themes usually provide at least one sidebar at the left or right of the content. Sidebars usually contain widgets that an administrator of the site can customize.You can set sidebar position in Page Options > Sidebar Position.

Note: Please dont select Both item for sidebar position when you use custom sidebar. If you select Both item for Sidebar Position, Custom sidebar will not be displayed and instead of the default Left and right sidebar will be shown

### Visual Page Builder

California comes with Visual Page Builder. This software allows you to forget about shortcodes and create most complex layouts within minutes without writing a single line of code!

Our Visual Page Builder is based on widely popular Visual Composer by mixey. It has very simple and intuitive interface, but before getting started with building layouts, you may find it useful to get accustomed with Visual Composer documentation:
http://kb.wpbakery.com/index.php?title=Visual_Composer.

In the editor mode you'll have "Add element" button, which you should click or drag to the working canvas, to add content block or row to your page. Clicking the "Add element" button will show the content element selection menu. Content blocks are divided into categories so you can filter. Alternatively you can type the shortcode name to filter down the items instead of search them visually.

To start creating new layout click “Visual Composer” button on the top right of WYSIWYG (text editor):

WYSIWYG editor change to Visual Composer canvas. You can work with it as you do with regular Visual Composer.

##### Page Builder buttons :

1. Add Elements, using this button you can drop all shortcodes avalaible in California. You can drag this button and drop to a page section, row or a column.
2. Add Row. This is a column container. This shortcode does nothing other than holding controlling columns and elements.
3. Templates : You can save a page using this section and use it in other page. Its handy when you built blocks and columns that you might need them later in other pages.

After clicking “Add element” button, you’ll notice vast set of interface elements (shortcodes) developed exclusively for your theme . Their interface is build on same principles as standard Visual Composer shortcodes. Therefore if you’re already familiar with Visual Composer, working with our shortcodes will be very simple for you!

##### Elements Blocks :

Below image shows the list of all shortcodes that you can use in California. You can use category filter and search element name field to find your shortcode much quickly.

##### Rows

Rows are used to divide your page into the logic blocks with columns, columns later will hold your content blocks. Rows can be divided into the layouts (eg. 1/2 + 1/2, 1/3 + 1/3 + 1/3, and so on). Your page can have unlimited number of rows. To change row's position, click and drag row's drag handler (top left row's corner) and drag row around (vertical axis). Please note that you can edit a row property to enable full width option.

##### Introducing Row based on below screenshot :

1. Delete button to delete the row and the all elements inside it.
2. Clone Button to dublicate the row and all its columns and elements
3. Edit button to give it custom class name and enable fullwidth mode.
4. Dragger button to move vertical wise.
5. Layout section to divide the row into differnt column width combinations.
6. Column Edit button inside this row
7. Plus button will bring up all elements pop up in order for you to choose which element to drop into this column.

##### Columns

Columns are part of the row and they hold your content elements inside them. Columns can be reordered. Click and drag column around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse (to re-position).

##### Content Elements

This is a list of available content elements that can be placed inside of the columns. Think of them as bricks. With those bricks you are building your layout. Most of the content elements have options, to set them click pencil icon. To save changes click save button.

1. Delete Button to delete the shortcode
2. Clone button
3. Edit button to view all of this shortcode options
4. Shortcode Name

##### Row Types in Visual Composer

1. Click on Add row Button in Visual composer and click on pencil icon.
2. In Edit Row window, you can select a row type depends on you needs.
3. FullWidth Row : This type is suitable for Insert Layer Slider or Revolution Slider on it
4. Blox : This type is suitable for rows that you need to set Background Image or Background Color, specific Height or set a custom class
5. Parallax : This type is suitable for rows with Parallax functionality. In this case you can set Background Image and Parallax scroll speed for better result
6. ProccesBox : This type is necessary for insert Webnus Process Item on it. In this case you can set icon, Title and Process Count
7. Video Background : This type is necessary for Video Background. In this case you can set Background Video, Video Type and Foreground Pattern.
8. MaxSlider : In this row type, you can create Full Width Slider at the top of the page.

##### How to create “Our Process”

1. Click Add row in Visual Composer and then click on pencil Icon. Edit Row window will be open,
2. In Row Type drop-down menu select ProcessBox and set valuse for Top Icon، Title، Subtitle and Process Count and click on Save
3. Click on Plus sign in row
4. Click on Webnus proccess Item and set Process Title، Process Text and Process Icon
5. Repeat steps 3 and 4 for all the processes.

##### Page Composer Settings

You can control page composer global settings such as disable/enable in a post type and user roles that can use a shortcode. You can find these settings from WordPress dashboard left sidebar settings > Page Composer. Once you arrived to this page, you will face with 2 options :

###### Content types :

This option allows you to choose which post type should have the page composer feature. Please note that only post types will have this feature that they have WP editor feature. so for example clients will not have page composer even if you check mark its post type.

###### User groups access rules :

This option will give you the ability to select which shortcode should be appeared in the specific user role. this is useful when you give subscribers the ability to post, so you can disable some shortcodes for them.

### Create page with shortcodes

California includes a lot of shortcodes. Most pages and elements are built using shortcodes, it provides major flexibility to use them anywhere, and also allows users to quickly and easily build pages. All shortcodes are accessed in the usual spot, which is in the Visual Editor Field. See the screenshot below to see where they are located. Click a shortcode icon and simply populate the content inside of it, some of them have various options to choose from, and the column shortcodes can be wrapped around other content to keep them inside columns. See our demo code for additional examples.

Note: We recommend you to use visaul page builder rather than attempting to creat pages with shortcodes

#### How to Use Column Shortcodes

Column shortcodes are used addition with the other shortcodes when you want to keep your content within a specfic column. For example, you have an image slider, and you want it to only cover half the width of the page. You would then wrap a [one-half] column shortcode around the slider. This is the basis for all columns. Below is an example with a little bit of math that helps explain the process of how you need to specify the order of the columns.

- If you want four columns you'd use four sets of [one-fourth] shortcodes.
- Each set contains and open tag [one-fourth] and a closing tag [/one-fourth]. Your content for the columns goes between the open/close tags.
- So a row of content in 4 columns looks like this [one-fourth]...[/one-fourth] [one-fourth]...[/one-fourth] [one-fourth]...[/one-fourth] [one_fourth]...[/one-fourth]

Most of these shortcode are familiar to you except two shortcodes that we will explain them for you
For create full width section with custom background, you can use two below shorcodes

1. Blox
2. BloxDark

Both of them are similar, the only difference is that in "BloxDark" all entries are white and in "Blox" all entries are dark. So if you have pictures with white background use "BloxDark" and vice versa.
Both of these shorcodes have four predefined colors that can be use in below syntax

1. Class="bluebox"
2. Class="redbox"
3. Class="greenbox"
4. Class="yellowbox"

It should be noted that these four colors could be dark or pale depending on the type of the container

Important advice: Considering the existence of varied type of short codes in this document, we recommend you to use prepared samples rather than attempting to write your own shortcodes in demo pages

### Setting up the Menu

California supports custom WordPress menus, with up to three levels of dropdown support for the main menu. There are 4 areas of the theme where you can assign a menu; the Header Menu, the Topbar Navigation, Left Navigation Page Template Menu and the Footer Navigation Menu. If you've imported the demo data, then please follow those steps and select the demo navigation menu called "Header Menu" as the main navigation. If you are making a new menu and would like to assign it to any of our 3 menu locations, read below.

To setup a new menu, please follow the steps below
Please note that it is better to create your own pages first, even if they are blank pages

1. Navigate to Apperance > Menus page
2. Click the "create a new menu" link to make a new menu. Enter the name then hit Create Menu
3. To add a menu item, you can easily select one of your already made pages on the left hand side and click Add to Menu
4. Enter Navigation Label and Title Attribute. To show menu description, don’t forget to click Screen Options and select Description checkbox and enter description
5. You can also add menu items by entering a custom name and custom link into the Custom Links box
6. You can manage your menus using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of another menu item and it will lock into place and create a dropdown section
7. After setting up your menu, select the menu you just created as the Main Navigation in the Theme Locations box
8. Once it's all done, make sure you click the Save Menu button

#### Setting up the Mega Menu

To setup your Mega menu, please follow the steps below

1. create a new page and name it anything that you want(for example Mega test1). you can use visual composer for design your menu/page
2. Scroll down until you find "Is mega menu?" and check this checkbox.
3. Navigate to Appearance>Menus and click on Screen Options and check CSS Classes
4. Add the page that you created in Step 1 behind of menu item and type mega in CSS Classes field.
5. Finally Click on Save Menu

Also with adding "mega" class to category links in menu, you will be able to show latest postes of that category at bottom its sub menu.

Topbar Navigation Menu: California also includes a secondary top navigation option with one of our various header designs. It's called Top Navigation in the menu section of your admin. Follow the steps above to create a custom menu for your top navigation and set it to show in the Theme Locations box.

Footer Navigation Menu: California also includes a secondary Bottom navigation option with one of our various footer designs. It's called Footer Navigation in the menu section of your admin. Follow the steps above to create a custom menu for your top navigation and set it to show in the Theme Locations box.

### Setting up the One page

In one-page website, the main menu links to internal sections of the page not to other independent pages. For example Services link in menu goes to Services Section in the same page not to Services Page. To do this we used standard html linkage which called anchor link. Now let's see how to set one-page menu in Max-one step by step:

Craeting one page scroll is very easy. In fact you just create a normal page using any shortcodes and contents you like. However the difference is you need your navigation menu items to be linked up with in-page contents. That is a very easy process. Follow these instruction:

1. Add a new page and enter a title for your page
2. look for the page attributes on the right side of the page and find The "Onepage Menu" page template
3. Switch to Visual Composer by clicking on BACKENDT EDITOR button
4. Start adding contents now. Feel free to insert anything you want. However note that you need to give each section a name.

For example let's say we want to add a Our Team section to our page. We normally start off by adding a Row. To do this click on Add Elements or Add Row button on the top of visual composer (Figure 1-2).

5. Once it is placed on page, click on Edit button (Figure 1-2).
Fig 1-1 - Create you contents with "Row".
Fig 1-2 - Create you contents with "Row".
6. Now inside the edit options windows you can give an ID name for your sections. Find a text field called ID in Rows (Figure 1-3) and Give them any name you like. For example a good name for our-team section could be "team" or "OurTeam". Just avoid spaces in your characters.
Fig 1-3 - Give a name to your Rows.
7. After you gave a name to your section continue adding contents to your section. Repeat the above steps for every new section you have. For example when you finish with "our-team" section and want to start adding "portfolio" you need to add a Row and give it a new ID name such as "portfolio".
8. When you finish creating contents Save your page by pressing "Publish" or "Update" button on the right side
9. Now it is time to create your menu. Go to Appearance > Menus (Figure 1-4)
10. Create a new menu and enter a name for your menu (Figure 1-4)
11. Open Links on the left side menu (Figure 1-4)
12. In URL field Enter the name you just added to your section back in step 5 preceding by a hash tag prefix. For example for portfolio section if you gave it a name like "Portfolio" then you have to enter #Portfolio (Figure 1-4)
13. In Link text field you can enter any names but remember that it is better to be related to you URL above. So if you have entered#Portfolio above in URL then you can enter Portfolio here in Link text field. Please note that this text will be showed up on your navigation bar. (Figure 1-4)
Fig 1-4 - Create a menu and add some links to it.
14. Click on "Add to Menu" button
15. Repeat steps 10, 11 and 12 for each section
16. Now Save your menu by clicking on the Save Menu button on the right side
17. You are almost there! You just need to make your menu appears in the right location. To do this Go to Manage Locations on top of the page
18. Under the Theme Location, Assign your newly created menu to Main Navigation. Just select your menu name in the menu and Save Changes
19. That's it! Now you have your one page scroll website up and running.

### Setting up the Home Pages

Once you have created your home page, you need to select it to show up as the home page. To do this, follow the steps below.

1. Navigate to Settings > Reading
2. Select A Static Page for Front Page Displays
3. Select your new home page for the Front Page
4. This is also the same spot you select the Blog page

### Theme Options

California has an advanced Theme Options panel that is loaded with options. There are numerous options to go over in these docs but please take some time and navigate through each tab. Go to Appearance > Theme Options and take a look. We've organized them into logical sets and have given descriptions for items that need it, most things are self explanatory. Be sure to hit Save Changes to save your settings once you are done.

You can also backup your theme options, click on the Import/Export tab and copy the data inside the Transfer Theme Options Data field.

General:

In general section you will see Layout with two options: wide and boxed. Wide is good for full screen mode and boxed will not stretch pages.
Tips: if you like to use background image, you need to use boxed mode. Choosing wide mode will cover the selected image as background and you won’t be able to see any BG image.
After that, you will see custom favicon, a favicon also known as a Web site icon, tab icon or bookmark icon for your website. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab. simply click on browse and select your own.
if you keep surfing the General Tab, you will find more options like slogan and contact information.
Tips: if you are going to use your own logo, the written slogan will be disappeared. So make your logo image by slogan included in it if you need one for your business. The contact information in this tab will be shown later in Contact us page.

Header options:

If you like to put your logo in your pages, this is the right place. Simply browse and select you logo as image, a window will appear that will let you browse from computer or library. Then you may want to add some info like "title", "description" and so on, finally click on "insert into post" button.
Tip: for Retina issue choose a logo by double size (height and width) of what you like to see in browsers, and then make it smaller by changing the “Logo Width”. In other words, upload 2x size of your logo for Retina purpose and it will be big for your website, to make it in your desirable size make it as small as you like by changing the Logo Width.

Scroll down and you can see more options for “Topbar” show/hide, “social icon” show/hide, "sticky menu" disable/enable, "search" box and also “menu layout” which let you choose different graphical type of menu for your page.

Background:

In this section you can choose background image (use it only in boxed mode) and its settings, background color and finally background pattern if you desire.

### Setting up Blog Page

To setup your blog page, create a new page and name it anything that you want. Make sure the page Template is set to Default Template in the Template section of Page Attributes Box on the right hand side of the page editor.

#### Set Blog Options

To select a specific blog page layout design, simply follow the steps below

- Navigate to Theme Options and click on the Blog Options Tab
- In this tab you can configure anything about blog an finally hit save changes
- Finally Navigate to Settings > Reading and select your blog page name for the Posts Page

##### Create posts

After your Blog page is made, you have to create posts to show up on the blog page. Follow the steps below to create a blog post.

- All of your blog posts are made in the Posts section of your wordpress admin. Click on Posts to open the section.
- At the top of the posts page, click on Add New to make a new post. Create a title and insert your post content in the editing field
- On the right hand side of the post page is the Categories box. To make a new Category, click + Add New Category and give it a name. You can have as many as you want. To apply a Category to a post, simply check the box next to the Category name.
- You can also apply Tags to a post. The Tag box is below the Category box. Simply insert your tags, separate multiple tags with commas
- To set a Featured Image. Click the Featured Image box and select an image from the media window and click Use As Featured Image
- To set a Video. Enter video embedded code in Video post section and Click Save
- To add a sidebar you must first create the sidebar under Appearance > Sidebars. And then select the sidebar you would like to display on this page.
- Once you have everything you want selected, click Publish and your post will show up on your blog page

### Setting up the Portfolio

Note: to use portfolio you need to install the related plugin first.To do that from admin sidebar panel go to Appearance > install Plugins and activate Webnus Portfolio

Each portfolio post you make gets a thumbnail added to the main listing section (by setting a featured image for each post). For add a portfilio, you must use visual composer. Follow these steps below to add a portfoio section in your pages.

1. Click Add row in Visual Composer and then click on pencil Icon. Edit Row window will be open,
2. For show full width slider, select FullWidth Row in Select Row Type list.
3. Click on Plus sign in row
4. Click on Add Element and select one of the slider that you want(for example: Portfoilo)

#### Create Portfolio posts

After your Portfolio page is set, you create posts to show up on the portfolio page. Follow the steps below to create a portfolio post.

1. All of your portfolio posts are made in the Portfolio section of your wordpress admin. Click on Portfolio to open the section.
2. At the top of the page, click on Add New to make a new portfolio post. Create a title and insert your post content in the editing field
3. On the right hand side of the post page is the Categories box. These Categories are the filters that will sit above your portfolio images and allow you to filter the different types of projects. To make a new Category, click + Add New Category and give it a name. You can have as many as you want. To apply a Category to a post, simply check the box next to the name.
4. To set a Featured Image. Click the Featured Image box and select an image from the media window and click Use as Featured Image. Setting a Featured Image is important because it is needed for the thumbnails to show up on the main portfolio page.
5. Once you have everything you want selected, click Publish and your post will show up on your portfolio listing page and the single post page

### Setting up Footer

To setup footer, navigate to Appearance>Widgets and drag any widget that you want from Available Widgets list and drop to one the Footer sidebars. Footer Section 1, Footer Section 2, Footer Section 3 or Footer Section 4,

### Widgets

WordPress Widgets add content and features to your Sidebars and Footer. Examples are the default widgets that come with WordPress; for example post categories, tag clouds, navigation, search, etc. Widgets require no code experience or expertise. They can be added, removed, and rearranged on the WordPress Administration Appearance > Widgets panel.
WordPress Widgets add content and features to your Sidebars. Examples are the default widgets that come with WordPress; for post categories, tag clouds, navigation, search, etc. Plugins will often add their own widgets.

##### How to use widgets:

1. Go to Appearance > Widgets.
2. Choose a Widget and drag it to the sidebar where you wish it to appear. The widget areas designated
3. Once you dropped the widget to widget areas, WordPress automatically updates the Theme and it will appear in its area.
4. Preview the site. and look for the specified area you dropped your sidebar. for example if you used "archive widget area" you should look for it in archive loop.
5. Return to the Widgets Panel to continue adding Widgets. California has 6 custom widgets as designated below
6. To arrange the Widgets within the sidebar or Widget area, click and drag it into place.
7. To customize the Widget features, click the down arrow in the upper right corner to expand the Widget's interface.
8. To save the Widget's customization, click Save.
9. To remove the Widget, click Remove or Delete.

### Setting up the Sliders

California includes 3 sliders, the Revolution Slider, the Layer Slider and Max Slider. First two sliders include a plug-in that fully integrated into California. Both plugins are the same and work the same way. Please install any slider that you want, the plugins will be able to be access in the sidebar of your wordpress admin. We have an individual section below for each of our 3 sliders that show you how to use each one.

For add a slider, you must use visual composer. Follow these steps below to add a slider in your pages.

1. Click Add row in Visual Composer and then click on pencil Icon. Edit Row window will be open,
2. For show full width slider, select FullWidth Row in Select Row Type list.
3. Click on Plus sign in row
4. Click on Add Element and select one of the slider that you want(for example: Layer Slider)
5. Select a slider from LayerSlider ID list.

#### Layer Slider

California includes Layer Slider . LayerSlider is the most advanced Responsive jQuery Slider Plug-in with the famous Parallax Effect and optional 3D Transitions! You can use LayerSlider to create a breathtaking Image Slideshow, Banner Rotator or Content Slider to your site!
First of all please install Layer Slider plug-in

##### Import Layer Slider Demo content

1. Click on the Layer Slider sidebar item in your admin section
2. In Import & Export Sliders section, click on choose file button and select the LayerSlider_Export.zip file in DummyContent folder.

3. click on Import button.

####

##### Create Slider

1. Click on the Layer Slider sidebar item in your admin section, then click the “Add New” button and give the slider a name.

2. The “Slider Settings” tab will open and allow you to set the general settings for your slider such as the width, height, responsive, full width, and more. Check out each tab.

3. On the Appearance tab is a Skin field, .There are many Skins you can select for the Skin field, use any of them listed

4. Once you are done, click “Save Changes” to save the slider. Next you can add slides, see the information below.
   Please Note – You can get Kreatura’s sample sliders by clicking the “Import Sample Sliders” button. It’s a good way to learn and see the different types of settings.

##### Create Slides

1. Click on the “Slides” tab.

2. Slide #1 will already be created, add a background image for the slide, set thumbnails, transitions, links and more in the settings box above the slider preview window.
3. Each slide you make can have multiple layers to it. The layers show up below the slider preview window. Click “Add New Layer” create a new layer. An editing section will display once clicked.

4. The layer editing section has 5 tabs; Content, Transition, Link, Styles, Attributes. Content tab is where you add your content, Transition tab is where you set all the timings and animations, Link tab is where you can set the content to link, Styles tab is where you set custom styles, Attributes tab is where you can add custom id’s or classes.>
5. Click on the Content Tab and enter your text, image or video or custom HTML content. Then set your transitions, links, styles and attributes if needed.
6. Click the “Enter Preview” button to view a preview of the slider and layers.
7. When finished, click “Save Changes” to save it. Repeat process for more slides.

#### Revolution Slider

California includes Revolution Slider . This slider is a fully developed slide displaying system offering the capability to show images, videos and captions paired with simple, modern and fancy 3D transitions. On top of that, Slider Revolution is fully responsive and mobile optimized and can take on any dimensions.
First of all please install Revolution Slider plug-in

##### Import Revolution Slider Demo content

1. Click on the Revolution Slider sidebar item in your admin section
2. Click on Import Slider button and in Import Slider window click on Browse button and select the revolution-slider-california-wp.zip file in DummyContent folder.

3. click on Import Slider button.

####

##### Create Slider

1. Click on the Revolution Slider sidebar item in your admin section, then click the Create New Slider button..

2. Insert a slider Title and alias. The alias text will generate a shortcode that can be used in the editing field of pages or posts.

3. Then select the Source Type. If you choose Posts or Specific Posts, please refer to the Revolution Slider Docs for information on how to set that up.
4. Then select the Slider Layout type, each type will have its own settings. Set the Grid and Responsive settings here also. View the layout example diagram below this area to understand what each section is.
5. On the right hand side are many other options you can set. All are self explanatory with descriptions. Test them out
6. Once you are done, click Create Slider and your new slider will be made.

######

##### Create Slides

1. Click the Edit Slides button in the Rev Slider settings.

2. Click the New Slide or New Transparent Slide button.

3. When done, you will see a new slide box, click Edit Slide to open the slide editing section. This is where you add all your slide content.

4. The slide editing section has many different sections that allow you to customize the slide. We cannot cover them all, but please do check out each one.

5. To add a text layer, click the “Add Layer” button that sits below the slider preview window. Enter your text in the Text/HTML field that shows in the Layer General Parameter box. To style it, select one of the styles from the dropdown or make your own by clicking “Edit Style”.

6. To add an image or video, click the “Add Layer: Image” or “Add Layer: Video”.
7. Below the slide preview box on the left hand side are 3 sections; Layer Parameters, Layer Animations, Layer Links & Advanced Parameters. Select the settings you wish to have, and click Preview Slide to see a preview of what will happen.
8. On the right hand side below the slider preview box is the Layers Timing & Sorting box where you set the time it takes for each layer to show on the screen.
9. When finished, click Update Slide to save it. Repeat process for more slides.

   You can find the appropriate documents here: Revolution Slider documents

#### Max Slider

- Max Slider is Full Width and Full height. Unlike the first two mentioned Sliders, Max Slider is really easy to make. Just follow these steps:

- 1.Make a new page, and then click on Backend editor.

2.Click on “Add Row” button, in new created row click on the “edit this row” icon.

3. In edit row, select Max Slider

4.Select your desired images.

5.After choosing the images, you can enable/disable Parallax and Pattern mode.

6.Now add some text

7.Click on Text Block

8.Write your text and then save it.

9.Now it’s time to see the result

### Page Title ( Headline )

If you like to make some changes in your page headline this will be helpful

1. This is a default headline for a page

2. But maybe you want create your header like this

3. please create a new page and click on backend editor

4. Add a row and click on “edit this row” icon. Make sure that in Page Options, page title is in hide mode

5. Choose Blox in edit row. Do not forget to save after all edits are done.

6. Fill the fields as below.

7. Now you need to set some distance and then text

8. Finally update and publish the page

### Typography

To access typography settings please go to Theme Options> Typography
Here you have access to whatever in relation with font such as font type, font size and font color.

#### How to purchase and use Typekit fonts :

1. Go to this address https://typekit.com/fonts
2. click on "creat new kit"

3. A window will open, insert your name and domain(s)*

4. You must copy only "Typekit Kid ID" as shown in green field

5. Go to “Theme Options > Typography” in your WordPress admin panel and then copy the id in "Typekit Kit Id" field

6. Copy your desired font names from www.typekit.com/fonts/ and paste them in "Typekit Font Family"

7. And finally go to “Select Font” and select your fonts.

### Woocommerce

One of great features of California is that you can make an online shop with it.

California is fully compatible with latest version of Woocommerce Plugin. We added required stylings to fit the design, Checkout section in header toolbar, and all required confiq codes to make it seamless with California. If you dont need Woocommerce simply dont install it and all the features, codes and anything required for woocommerce will not be loaded and interfered. Vice versa, if you need to set up woocommerce just install woocommerce like you do for other plugins and thats all about it. you dont need to do anything else. There are couple of options in Theme Option>Woocommerce

Woocommerce Documentation

### Theme Upgrades Tool.

After installing and activating Envato WordPress Toolkit from "Install Required Plugins", you will need Envato Market API which can be found in API Keys from Settings section after logging into your Themeforest account.Please press on Generate API Key, to make a Key for you. Save that generated API key with your marketplace username and password in the plugin then from "Themes" tab in plugin you will see the latest version of purchased theme and simply install it.

### How to Translate

We provide translation files for you to translate the theme into your language. The translation files default.mo and default.po are located in the languages folder inside your package. To translate the theme into your language, follow the steps below

- Edit the .po file using POEdit (you can also use qTranslate or WPML plugin)
- Use the translation field to make replacements
- From the file menu, save file with your language name it, for example: es_ES.po It will generate both a .po and .mo file for your translation.
- Next edit wp-config.php located in the root folder of wordpress and define the WPLANG prefix with your language name which should be similar to the translation file name.
- Then go to your server via FTP, navigate to the theme folder and find the languages folder, its located at wp-content > themes > california-wp > languages
- Upload the language files in the languages folder, and then you're done!

Please Note: If you are interested to help us to translate the theme to your native language please let us know by sending an email to webnus.net@gmail.com

### Set Twitter feed (latest tweet)

First of all navigate to http://dev.twitter.com/app and click on "create new application" button
In the next page click on “Create my access token” button
Fill items (Application Details) In new page (call back url can be left blank) and check "yes agree" and finally enter captcha value and click “Create your twitter application” button
In the next step select “OAuth tool” tab and copy vales of "Consumer key”, “Consumer secret”, “Access token” and “Access token secret” in Webnus Twitter feed Widget

### Flickr Photo Stream

Please insert below code in flickr widget then change flickr id:
Change current attrubition of user to your's ID (user=00000000@N00).

Please visit below link for capture your ID:
http://www.flickrbadge.com/

<script type="text/javascript" src="http://www.flickr.com/badge_code.gne?count=9&display=random&size=square&nsid=36587311@N08&raw=1"></script>

### CSS and Credits

CSS Files and Structure:

we have 19 CSS files in this Theme: "style.css" - "portfolio.css" - "elements.css" - "blog.css" - "main-menu.css" - "base.css" - "scaffolding.css" - "icon-box.css" - "widgets.css" - "iconfonts.css" - "blox.css" - "prettyPhoto.css" - "flexslider.css" - "color-skins.css

The "style.css" file is separated into sections using:

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Credits: We have used the following images, icons or other files as listed.

- Font: Google Web Fonts at: http://www.google.com/webfonts
- Images: all images use it to (Slider and etc) under license ENVATO - photodune.net and Purchaseing by Owner (WEBNUS)
- Includes Amazing Revolution Slider Plugin - $15 Value!
- The Awesome Layer Slider Plugin - $15 Value!
- The Awesome Visual Composer WordPress Plugin - $25 Value!
- Kakapo – Custom Sidebar for every page Plugin– $14 Value!
- Script: Other Scripts is Free download

### Where to find css files and using Inspect Element

CSS Folder
California Theme Options come with nice features which will help you manage your site but in some cases you may want to make some changes on appearance of the theme such as font weight, font color and etc with css, although Inside of Wordpress you have access to style.css which can be found in:
Appearance>Editors
But here we are going to discuss about other css files which you may need to edit them to get your purpose.
When you unzip the downloaded package from themeforest in your computer, you can check the folders inside of it, please find california-wp folder, inside of it there is a css folder that holds all css files. One of most important css files is “main-menu.css”. Remember the name because we want to use it as our example very soon.

Inspect element in chrome
If you browse with Chrome and want to make changes to design then you can use Inspect Tool to see the source code of your website and the CSS rules applied to it.
Now let’s open the home page of California and try to make some change.
To enable it just use CTRL+SHIFT+I (on MAC -> COMMAND+SHIFT+I) or right click and from the pop-up menu select Inspect Element :

Once you have clicked on that option you will see two windows for HTML code and for the corresponding CSS rules that apply to each html item.

Interesting usage of this tool is that you can make live changes and see how they would fit into the overall design without even modifying the actual code from the theme. Do not worry if you delete some elements or styling in this editor. This happens only in the browser and you can see again the site as it is by doing a refresh (F5). To edit a particular part of an element in the HTML window simply double click it and change the text or tag in it.
Let’s change the font weight in main menu :

Now let’s have more fun and change the font color in main menu

Once you decided about the changes, please go to css folder and find the desired css file. In our case we must edit line 17 of main-menu.css and then upload it via ftp. To edit you can use different software such as” DreamWeaver” or “Sublime text” or simply by “Note”.

When all edits has done save the changes and then upload the css via ftp or cpanel.
Note: always make backup before making any change on css files.

### California Tricks

#### 1) Setting Up as Demo Site

Note: Demo content has created by visual composer. Please active the visual composer plug-in before import demo data.

1. Navigate to WP Admin > Importer +
2. Select import content from list and Click on Import button
3. Please note in our dummy content none of the images will be downloaded because of copyright restrictions. You will need to add your images manually.
4. To create widgets, Click on Import Widgets button or navigate to the left sidebar menu of the WordPress’ Dashboard, then Appearance > Widgets. Just drag and drop the widgets on to the widgets area on the right side of the widgets page.
5. To set Menus, Click on Import Menus button or create menus manually Setting up the Menu
6. To set home page and posts page, Click on Import Reading Setting button or Navigate to Settings > Reading and select A Static Page for Front page displays and select your home page for the Front Page and blog for the Posts page
7. Finally Import Layer Slider demo content Import Layer Slider Demo content

#### 2) Visual Page Builder

California comes with Visual Page Builder. This software allows you to forget about shortcodes and create most complex layouts within minutes without writing a single line of code!

Our Visual Page Builder is based on widely popular Visual Composer by mixey. It has very simple and intuitive interface, but before getting started with building layouts, you may find it useful to get accustomed with Visual Composer documentation:
http://kb.wpbakery.com/index.php?title=Visual_Composer.

In the editor mode you'll have "Add element" button, which you should click or drag to the working canvas, to add content block or row to your page. Clicking the "Add element" button will show the content element selection menu. Content blocks are divided into categories so you can filter. Alternatively you can type the shortcode name to filter down the items instead of search them visually.

To start creating new layout click “Visual Composer” button on the top right of WYSIWYG (text editor):

WYSIWYG editor change to Visual Composer canvas. You can work with it as you do with regular Visual Composer.

####

##### Page Builder buttons :

1. Add Elements, using this button you can drop all shortcodes avalaible in California. You can drag this button and drop to a page section, row or a column.
2. Add Row. This is a column container. This shortcode does nothing other than holding controlling columns and elements.
3. Templates : You can save a page using this section and use it in other page. Its handy when you built blocks and columns that you might need them later in other pages.

After clicking “Add element” button, you’ll notice vast set of interface elements (shortcodes) developed exclusively for your theme . Their interface is build on same principles as standard Visual Composer shortcodes. Therefore if you’re already familiar with Visual Composer, working with our shortcodes will be very simple for you!

##### Elements Blocks :

Below image shows the list of all shortcodes that you can use in California. You can use category filter and search element name field to find your shortcode much quickly.

##### Rows

Rows are used to divide your page into the logic blocks with columns, columns later will hold your content blocks. Rows can be divided into the layouts (eg. 1/2 + 1/2, 1/3 + 1/3 + 1/3, and so on). Your page can have unlimited number of rows. To change row's position, click and drag row's drag handler (top left row's corner) and drag row around (vertical axis). Please note that you can edit a row property to enable full width option.

##### Introducing Row based on below screenshot :

1. Delete button to delete the row and the all elements inside it.
2. Clone Button to dublicate the row and all its columns and elements
3. Edit button to give it custom class name and enable fullwidth mode.
4. Dragger button to move vertical wise.
5. Layout section to divide the row into differnt column width combinations.
6. Column Edit button inside this row
7. Plus button will bring up all elements pop up in order for you to choose which element to drop into this column.

##### Columns

Columns are part of the row and they hold your content elements inside them. Columns can be reordered. Click and drag column around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse (to re-position).

##### Content Elements

This is a list of available content elements that can be placed inside of the columns. Think of them as bricks. With those bricks you are building your layout. Most of the content elements have options, to set them click pencil icon. To save changes click save button.

1. Delete Button to delete the shortcode
2. Clone button
3. Edit button to view all of this shortcode options
4. Shortcode Name

##### Row Types in Visual Composer

1. Click on Add row Button in Visual composer and click on pencil icon.
2. In Edit Row window, you can select a row type depends on you needs.
3. FullWidth Row : This type is suitable for Insert Layer Slider or Revolution Slider on it
4. Blox : This type is suitable for rows that you need to set Background Image or Background Color, specific Height or set a custom class
5. Parallax : This type is suitable for rows with Parallax functionality. In this case you can set Background Image and Parallax scroll speed for better result
6. ProccesBox : This type is necessary for insert Webnus Process Item on it. In this case you can set icon, Title and Process Count
7. Video Background : This type is necessary for Video Background. In this case you can set Background Video, Video Type and Foreground Pattern.
8. MaxSlider : In this row type, you can create Full Width Slider at the top of the page.

Tip : if you faced text align center trouble, you can fix it in two different ways.

1. if you are working with Visual Composer check below pictures :

2. if you are working with shortcodes check below picture :

#### 3) Setting up the Mega Menu

To setup your Mega menu, please follow the steps below

1. create a new page and name it anything that you want(for example Mega test1). you can use visual composer for design your menu/page
2. Scroll down until you find "Is mega menu?" and check this checkbox.
3. Navigate to Appearance>Menus and click on Screen Options and check CSS Classes
4. Add the page that you created in Step 1 (Mega test1) behind of menu item and type mega in CSS Classes field.
5. Finally Click on Save Menu

Topbar Navigation Menu: California also includes a secondary top navigation option with one of our various header designs. It's called Top Navigation in the menu section of your admin. Follow the steps above to create a custom menu for your top navigation and set it to show in the Theme Locations box.

Footer Navigation Menu: California also includes a secondary Bottom navigation option with one of our various footer designs. It's called Footer Navigation in the menu section of your admin. Follow the steps above to create a custom menu for your top navigation and set it to show in the Theme Locations box.

#### 4) Setting up the One page

In one-page website, the main menu links to internal sections of the page not to other independent pages. For example Services link in menu goes to Services Section in the same page not to Services Page. To do this we used standard html linkage which called anchor link. Now let's see how to set one-page menu in Max-one step by step:

Craeting one page scroll is very easy. In fact you just create a normal page using any shortcodes and contents you like. However the difference is you need your navigation menu items to be linked up with in-page contents. That is a very easy process. Follow these instruction:

1. Add a new page and enter a title for your page
2. look for the page attributes on the right side of the page and find The "Onepage Menu" page template
3. Switch to Visual Composer by clicking on BACKENDT EDITOR button
4. Start adding contents now. Feel free to insert anything you want. However note that you need to give each section a name.

For example let's say we want to add a Our Team section to our page. We normally start off by adding a Row. To do this click on Add Elements or Add Row button on the top of visual composer (Figure 1-2).

5. Once it is placed on page, click on Edit button (Figure 1-2).
Fig 1-1 - Create you contents with "Row".
Fig 1-2 - Create you contents with "Row".
6. Now inside the edit options windows you can give an ID name for your sections. Find a text field called ID in Rows (Figure 1-3) and Give them any name you like. For example a good name for our-team section could be "team" or "OurTeam". Just avoid spaces in your characters.
Fig 1-3 - Give a name to your Rows.
7. After you gave a name to your section continue adding contents to your section. Repeat the above steps for every new section you have. For example when you finish with "our-team" section and want to start adding "portfolio" you need to add a Row and give it a new ID name such as "portfolio".
8. When you finish creating contents Save your page by pressing "Publish" or "Update" button on the right side
9. Now it is time to create your menu. Go to Appearance > Menus (Figure 1-4)
10. Create a new menu and enter a name for your menu (Figure 1-4)
11. Open Links on the left side menu (Figure 1-4)
12. In URL field Enter the name you just added to your section back in step 5 preceding by a hash tag prefix. For example for portfolio section if you gave it a name like "Portfolio" then you have to enter #Portfolio (Figure 1-4)
13. In Link text field you can enter any names but remember that it is better to be related to you URL above. So if you have entered#Portfolio above in URL then you can enter Portfolio here in Link text field. Please note that this text will be showed up on your navigation bar. (Figure 1-4)
Fig 1-4 - Create a menu and add some links to it.
14. Click on "Add to Menu" button
15. Repeat steps 10, 11 and 12 for each section
16. Now Save your menu by clicking on the Save Menu button on the right side
17. You are almost there! You just need to make your menu appears in the right location. To do this Go to Manage Locations on top of the page
18. Under the Theme Location, Assign your newly created menu to Main Navigation. Just select your menu name in the menu and Save Changes
19. That's it! Now you have your one page scroll website up and running.

#### 5) A brief look to Theme Options

General:

In general section you will see Layout with two options: wide and boxed. Wide is good for full screen mode and boxed will not stretch pages.
Tips: if you like to use background image, you need to use boxed mode. Choosing wide mode will cover the selected image as background and you won’t be able to see any BG image.
After that, you will see custom favicon, a favicon also known as a Web site icon, tab icon or bookmark icon for your website. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab. simply click on browse and select your own.
if you keep surfing the General Tab, you will find more options like slogan and contact information.
Tips: if you are going to use your own logo, the written slogan will be disappeared. So make your logo image by slogan included in it if you need one for your business. The contact information in this tab will be shown later in Contact us page.

Header options:

If you like to put your logo in your pages, this is the right place. Simply browse and select you logo as image, a window will appear that will let you browse from computer or library. Then you may want to add some info like "title", "description" and so on, finally click on "insert into post" button.
Tip: for Retina issue choose a logo by double size (height and width) of what you like to see in browsers, and then make it smaller by changing the “Logo Width”. In other words, upload 2x size of your logo for Retina purpose and it will be big for your website, to make it in your desirable size make it as small as you like by changing the Logo Width.

Scroll down and you can see more options for “Topbar” show/hide, “social icon” show/hide, "sticky menu" disable/enable, "search" box and also “menu layout” which let you choose different graphical type of menu for your page.

Background:

In this section you can choose background image (use it only in boxed mode) and its settings, background color and finally background pattern if you desire.

Typography:
Here you have access to whatever in relation with font such as font type, font size and font color.
The main font used in California theme is "Source Sans Pro" which is one of the Google free fonts, and "Varela" font is used for paragraph and menu which this one is a Google free font too. "Typekit" fonts have been used in this theme. California uses, "futura-pt" font for some heading* and "proxima-nova" font for paragraph, these two fonts are not free so they must be purchased from Typekit.

Note: "proxima-nova" and "Varela" are very similar; if you like to have "proxima-nova" please read the below structure, if not "Varela" will be used which is free and does not need any change in codes and options.

##### How to purchase and use Typekit fonts :

1. Go to this address https://typekit.com/fonts
2. click on "creat new kit"

3. A window will open, insert your name and domain(s)*

4. You must copy only "Typekit Kid ID" as shown in green field

5. Go to “Theme Options > Typography” in your WordPress admin panel and then copy the id in "Typekit Kit Id" field

6. Copy your desired font names from www.typekit.com/fonts/ and paste them in "Typekit Font Family"

7. And finally go to “Select Font” and select your fonts.

Styling Options:
Here you have access to "link" and "icon" colors such as : main color, iconbox color, portfolio color, learn more link color, our process icon color, our team image border color, our client icon hover color and etc.

Social Networks:
Here you can set your social network's URL links.So people will be able to follow you in there.

#### 6) Page Option tips

Transparent header: By choosing this option, Background will be removed and content will be visible behind the header.

Hide header at start: By choosing this option, Header will be hidden and will be visible by scroll.

Page title bar : by creating any page in wordpress, you need it to name it. it's your page title name. by default it will be shown in pages. if you like no to show it simply choose "Hide" from this section.

Sidebar Position : Sidebar is basically a vertical column provided by a theme for displaying information other than the main content of the web page. Themes usually provide at least one sidebar at the left or right of the content. Sidebars usually contain widgets that an administrator of the site can customize.You can set sidebar position in Page Options > Sidebar Position. If you dont select any sidebar in Custom sidebar list, You will see the default sidebar's.