Chino WP - Documentation

Version 1.0.3

Cross Browser, High Quality and Responsive Multipurpose WordPress Theme.

Thank you very much for purchasing our WordPress theme. It is built with the latest HTML5 and CSS3 technologies, but at the same time it is also made compatible with older browser versions.

This document covers the installation and use of Chino WordPress theme. We encourage you to read this document thoroughly if you are having any difficulties.

If you have any questions that aren’t covered in this article, please feel free to email us on our user page, you can find the contact form here.

Don’t forget to rate this theme, it helps us improve our products.

We invite you to view our portfolio.

Thank you so much!

Getting Started

Make sure your hosting is running PHP version 5.3 or higher! On lower versions the theme can work only as a blog theme.

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex installation section

Installation

When you are ready to install a theme, you must first upload the theme files and then activate the theme itself. The theme files can be uploaded in two ways:

  1. FTP Upload: Using your FTP program, upload the non-zipped themes (chino & chino-child ) folders into the /wp-content/themes/ folder on your server.
  2. WordPress Upload: Navigate to Appearance 1 > Themes 2 > Add new 3. Go to browse, and select the zipped theme folder. Hit “Install Now” and the theme will be uploaded and installed.
    • Here you will see Add Themes screen
    • Click on Upload Theme button 1
    • Click on Browse... button
      1
      and choose main theme zip archive (chino.zip). After the theme is chosen click Install Now button
      2
    • Wait for the theme is being installed. You should see something like the image below. Click on Return to Themes page
      1
    • Do the same with child theme zip archive (chino-child.zip).
  3. Once themes are uploaded, you need to activate the child theme. Go to Appearance > Themes and activate
    1
    Chino Child theme.

Pre-packaged plugins installation

After the theme activation you will be promted to install Basement Framework plugin and other helpful plugins. Do it, the theme except the blog part is based on these plugins functionality.

Only Basement Framework plugin is absolutely required. Other plugins are optional.

In case you want to view demo content you should install them all.

The theme is packed with a tool to help you install all plugins you need. If plugins are not installed on the top of each page in admin area you will see the message like on image below. Click on Begin installing plugins link.

You will be moved to pre-packaged plugins list. Check all plugins with a checkbox 1.

To install all plugins choose Install from dropdown list 1 and then click Apply button 2.

Be patient, the installation can take several minutes. Do not refresh the page until the installation completed.

Demo Content

Note: We do not recommend to install demo content if you have existing content in your WordPress installation, as it will add numerous posts, pages, categories, media and more to your site. Also, we recommend replacing all content as soon as possible to avoid negative SEO effects or image licensing repercussions.

By default, a WordPress theme does not include pre-installed content. If, however, you would like to install your theme’s demo content to be used as a guide, you can do so by following these instructions.

  1. First of all you should install WordPress Importer plugin. You can do it directly from import screen. Follow Tools > Import. Click on WordPress link
    1
    .
  2. If the Importer is not installed you will regular plugin installation popup. Click on Install Now button.
    1
  3. After the installation you can immediately activate the plugin and run importer. To do so just click on the according link 1.

    In case you didn't do it you can activate the plugin at Appearance > Plugins page. Find the plugin in plugins list and click Activate 1

    After plugin is activated in regular plugins way you should go to Tools > Import and click WordPress link once again.

    You will be move to the 1st import page. Choose the chino-demo-content.xml 1 which is packed to a zip archive from ThemeForest and click Upload file and import button 2.

  4. Find the file link called chino-demo-content.xml in your ThemeForest archive.
  5. After you have initiated the demo content upload, you will be asked to assign or create a new author for your demo content — this is your choice. You will also be given a checkbox option 1 to Import File Attachments. Check this box to import the media you see in your theme’s demo. To complete the process click Submit button 2

Important settings

To make site usable you should enable menu and set user-friendly permalinks.

Menu

Follow Appearance > Menus and click Manage Locations tab 1

On this screen you should choose Top menu option 1 and click Save Changes 2

Permalinks are the permanent URLs to your individual weblog posts, as well as categories and other lists of weblog postings  — WordPress codex

You should set a permalink structure to make your website URLs more readable. And, naturally, it's better for SEO.

To set permalinks structure you should follow Settings > Permalinks and choose one of predefined options or enter your own template in Custom Structure option. Do not forget to save setting clicking Save changes button at the very bottom of this page.

Setting up the Homepage

To set up the homepage you should create a new page, you can do so by navigating to Pages > Add New. You can give this page a title yet you do not have to include any content.

What is pages and the process of pages creating is greatly described in official WordPress documentation. See this page for detailed information.

Once you have created your new page which you want to use as home page, navigate to Settings > Reading and configure the Front Page setting. Select the static page 1 option and choose the page you just created 2 as your front page.

Save settings 3

Setting up the blog archive page

Navigate to Settings > Reading and configure the Posts page setting.

If you prefer to use your front page as blog archive don't create pages above and select Your latest posts option 1 in Front Page Displays setting.

To set up the blog archive as a separate page you should create a new page first. Once you have created one select the static page 2 option and choose the page you just created 3 as posts page.

Save settings 4

Theme Settings

Theme Settings is a Chino theme settings page with theme specific options. To view this page navigate to Appearance > Theme Settings.

Chino Settings page has a number of setting sections. Let's look at each of them closer.

Logotype

Logotype setting allows you to set text or image logotype.

To set text logotype enter text you need to Text text field.

To set image logo click Set logotype image link in Logotype section, upload or chose existing image and click Set logotype image button. If you have already chosen image for logo you will see the image itself and text link Remove logotype image. In this case you can delete image and upload as described above.

Favicon

A favicon (short for Favorite icon), also known as a shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page - Wikipedia

To set image favicon click Set favicon image link in Favicon section, upload or chose existing image and click Set favicon image button. If you have already chosen image for favicon you will see the image itself and text link Remove favicon image. In this case you can delete image and upload as described above.

Note: please, choose .ico file. There are many favicons generators to create proper favicon online.

Preloader

Preloader is an image (usally animated gif) which is shown on page load before all page content is loaded.

To set image preloader click Set custom preloader image link in Preloader section, upload or chose existing image and click Set custom preloader image button. If you have already chosen image for preloader you will see the image itself and text link Remove custom preloader image. In this case you can delete image and upload as described above.

To prevent preloader image displaying set Use preloader image checkbox off.

Menu

The Chino can show menu in 2 states, opened and collapsed. The menu can colapse automatticaly or on defined screen width. For example, if you want to make menu colapse when screen is exactly 750 pixels and less fill Collapse value with 750. If you want to make menu always colapsed, use 0. In case you want to make menu always opened, use some big number, like 9999. To make menu calculate the parent container width and colapse with honor to free space use auto or leave the field empty.

The Chino also has an ability to show sticky meny. Just check Use sticky menu to make menu fixed on the top of screen.

Sticky menu color settings defines a background color of menu. It applies for sticky menu only.

Colors

The theme is bundled with 2 predefined light and dark styles. The style defines a lot of theme elements, but many of them can be redefined individually.

Main color is a color which applies to particular theme elements, like links, buttons, menu, etc. colors.

Background color sets the color of the whole site backgrounds.

Elements

This secion has three setting. The first one, Scroll top, allows to enable scroll to top button.

Hide sup-header setting hides all pages sup-headers. Shop breadcrumbs are sup-header too.

Hide header setting hides all pages headers.

Note: if you hide all headers parts and WooCommerce plugin is not active, the header area will not be shown at all. Logotype and menu, naturally, will be shown.

Footer contain to parts, copyright and content.

To change copyright fill Copyright text fields with text you need. To insert current year use {year} placeholder.

Footer content setting is a regular WordPress text editor. You can use all its abilities, like formatting and shortcodes.

Sidebar

Chino theme supports two types of sidebars. They are regular and woocommerce sidebars.

Sidebar options allow to set regular sidebar position and visibility.

Posts

This section allows to select what image the site should show for posts.

  • Author avatar will show post author image.
  • Featured image will show featured image of a post.
  • None will hide these images.

Shop

Note: this section will be abailable if you install and activate WooCommerce plugin.

Hide related products allows to hide related products section on single product page.

Sidebar align sets shop sidebar alignment. The sidebar will not be shown if it's empty.

"No products" text allows to specify the text to show when no products were found on shop catalog page.

"Nothing found" text allows to specify the text to show when no posts were found on search catalog page.

404 page

404 page section contains not-found-page text options. See image below to understand texts position

Inline assets

In this section you can add extra CSS and JS code which will be echoed in header and footer of each page accordingly. It can be easy method to override theme CSS and for example add Google Analytics JS.

Content creating

Understanding Content

Chino theme offers to create any content of pages, posts, etc. with shortcodes and Visual Composer, not templates. It means your content can be any you want. Your creativity is limited just by shortcodes and Visual Composer abilities.

Creating pages

To create a new Page, log in to your WordPress installation with sufficient admin privileges to create new articles. Select the Administration > Pages > Add New option to begin writing a new Page.

See good explanation of pages at WordPress Codex

Creating blog posts

See good explanation of posts at WordPress Codex

To create a new Post, log in to your WordPress installation with sufficient admin privileges to create new articles. Select the Administration > Posts > Add New option to begin writing a new Post.

Creating portfolio/projects

Chino Theme is packed with Basement Portfolio plugn which contains Project custom post type and projects categories.

First of all you should install Basement Portfolio plugin. The theme is pre-packaged with it. You even shouldn't download it.

To create a new Project, log in to your WordPress installation with sufficient admin privileges to create new articles. Select the Administration > Projects > Add project option to begin creating a new Project.

The regular part of project input fields is similar to posts and pages.

If you've installed Basement Tiles and Basement Slides section you will have some extra paramters on project page.

Project post type has Tile 1 and Slide 2 config parameters section.

  • Tile config section is used to set parameters for tile. Tiles are used for rendering works tiles. Detailed info how to fill content you can read in Creating tiles section.

  • Slide config section is used to set parameters for slide. Tiles are used for rendering works slides. Detailed info how to fill content you can read in Creating slides section.

Creating tiles

Chino Theme is packed with Basement Tiles bundle which contains Tile custom post type. Tiles present tiles with any possible content.

To create a new Tile, go to the Basement > Tiles and click on Add tilebutton.

Tile parameters section is used to set parameters for tile. Tiles are used for rendering tiles with shortcode or via Visual Composer. Each tile consists 4 layers and filters sections. They are Content 1, Ovelay 2, Hover 3, Link 4 and Filters 5.

  • Content, Overlay and Hover sections have similar settings and are very easy to understand.
  • Content section defines a content to be shown always in tile.
  • Overlay section defines a content to be shown always in tile if parameters are set. This section creates a layer above the content layer.
  • Hover section defines a content to be shown just on mouse hover if parameters are set. This section creates a layer above the content and overlay layers.
  • Link section defines a link of a tile. The link can be regular URL, video link or list of images link to show a gallery. Details are further.
  • Filters section defines values to filter this tile with. Filters 1 shows above tiles 2 list and look like on image below.

Content, Overlay and Hover sections parameters

As said above, Content, Overlay and Hover sections parameters are similar

The very first parameter of each section is Content 1

It's used to fill the layer content with a text and shortcodes with help of a regular WordPress editor.

Paddings 1 allows to make inner padding for content for current layer. It should be filled just with positive integer values. Leave fields empty to use default paddings.

Content image 1 parameter allows to set current content image. Sometimes it's usefull if you want to embed an image into tile instead of using background. To add an image just click its section button and choose or upload image with a regular WordPress media uploader.1

Centrize vertically checkbox asks tile to make current layer content fixed vertically. Sometimes it may not work, be carefull and check all your results.

Background section has very useful and flexible setting.

The first setting is a background image 1 itself. Click the Choose image button to select image with help of WordPress media uploader.

Color 2 option sets background color for this layer.

Opacity 3 sets opacity level for background color only (not image!).

Repeat 4 option sets repeatness of background image.

Attachment 5 option sets background inmage attachment.

Position 6 option allows to set a position of a background image. It supports any standart combinations of position.

Size 7 defines background size.

Link layer is transparent and contains link URL 1 if the latter is set. Also you can specify the link title 2 which will be shown on hover. There are 3 link types 3:

  • Regular link.
  • Video. This type allows to specify the link to Vimeo or Youtube video and show it in popup on project tile click.
  • Images gallery. This type allows to show images gallery in popup. Links to mediafiles should be written one per line.

Filters section

Filters 1 allows to set a list of filters to use for this tile. Filters should be filled one per line.

Tiles groups

Tiles groups are used for grouping tiles. Follow Basement > Tiles groups and click Add group button to create a new group.

In case you created tiles or project tiles you will see a list of available tiles. Click on image 1 to add this tile to group. Sort tiles with drag'n'drop 2 to set new tiles order.

After saving of a group selected tiles will be shown first in a tile list.

Creating slides

Chino Theme is packed with Basement Slides bundle which contains Slide custom post type. Slides present slides with any content. This bundle is really power tool to create sliders.

To create a new Slide, log in to your WordPress installation with sufficient admin privileges to create new articles. Select the Administration > Slides > Add slide option to begin creating a new Slide.

Slide parameters are equal to Tiles parametes but don't have Filters.

Slides groups

Slides groups are equal to Tiles groups but use slides.

Shortcodes

A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut. Support — WordPress.comm

Chino WordPress Theme is packed with a good bundle of shortcodes. They allow you to create your own markup and add content elements.

To add a shortcode set a caret in text your want to add shortcode or select some text to wrap it with shortcode you want. Then click the Shortcodes 1 button above an editor.

Note: shortcode button will not be displayed if your current editor is in Text editing mode. Choose Visual instead.

Shortcodes panel has menu 1 and shortcodes list 2 part.

Click on a menu section you need and then on the shortcode you need to build. Here you will see a shortcode build form. Let's take Separator shortcode as an example.

Here you see Back button 1 (you can also click on menu item to back directly to a section you want), Shortcode description 2, Parameter name 3, Parameter description 4, Value field 5 and Shortcode button 7

The button changes its text during values changing. It will show you how the shortcode will liik like. Click on button to insert the shortcode into the text.

There are simple shortcodes with no content and so call content shortcodes which can have a content between opening and closing shortcode. For example, the [col] shortcode can have a content and the full form of this shortcode is [col some_col_parmeters]content[/col]. To make such shortcodes automatically wrap your content you should select the text you need to wrap in editor and then open Shortcodes panel and build a shortcode. In a such case a shortcode preview on a button will have ... instead of the text you selected. After submitting a shortcode it will wrap a text you selected.

You should know that shortcodes which are not supposed to have content will replace selected text with theirs own code. Be careful! In any case you always can undo the latest actions with regular ctrl-z on PC or cmd-z on a Mac.

Default shortcodes section

Breakline

Breakline shortcode creates a line break. It is very usefull if you don't want to cerate paragraph but want to break a line of text.

Example: [breakline]

Non-breakable space

Non-breakable space shortcode creates a non breakable space. You can use it to paste together to words and avoid line break between them.

Example: [nonbreakablespace]

Link shortcode creates a simple HTML link. It is not usefull in editor but very nice for widgets texts formating.

Example: [link parameters]...link text...[/link]

Contact form 7

Contact Form 7 shortcode is an interface to insert Contact Form 7 plugin shortcode.

Example: [contact-form-7 parameters]

Separator

Separator shortcode creates an invisible vertical space between top and bottom content. You should add and integer height to make it works.

Example: [separator parameters]

Button

Button shortcode creates a button. It has 3 predefined styles.

Example: [button parameters]...button text...[/button]

Search request

Search request shortcode renders current search request if it exists on current page.

Example: [search_request]

Counter

Counter shortcode creates a counter from zero or any other digit to the target. On a page rendered counter begins to count when you scroll to it.

Example: [counter parameters]

FAQ

FAQ shortcode creates an answer-question block to display FAQ element.

Example: [faq]

Bootstrap section

Bootstrap shortcodes section will be available just in case you have installed prepackaged Basement Bootstrap plugin.

Column

Column shortcode is used to determine a columns inside a row on your page. Column can have width, offsets, pulls and pushs.

Example: [col parameters]...content...[/col]

Row

Row shortcode is used to determine a row for columns on your page. It is important to use this one shortcode, because it helps to fix common style issues of markup. Do not use any formatting directly on row-shortcode content, instead of it use column-shortcodes and format the latter content if you need.

Example: [row parameters]...columns...[/row]

Icons section

Icons shortcodes section will be available just in case you have installed prepackaged Basement Icons plugin.

Aisconverse icons

Aisconverse icons shortcode creates an icon with color and font size using Aisconverse font collection.

Example: [icon_aisconverse parameters]

Fontawesome icons

Fontawesome icons shortcode creates an icon with color and font size using Fontawesome font collection.

Example: [icon_fontawesome parameters]

Map section

Map shortcodes section will be available just in case you have installed prepackaged Basement Map plugin.

Google map

Google map shortcode creates a map.

Example: [gmap parameters]

Slider section

Slider shortcodes section will be available just in case you have installed prepackaged Basement Slider plugin.

Slider

Slider shortcode creates a slider using Basement Slides. With help of this shortcode you can choose one of predefined sliders.

Example: [slider parameters]

Slides

Slides shortcode creates a slider using Basement Slides. Unlike the Slider shortcode you can select and reorder slides instead of choose a predefined slider.

Example: [slides parameters]

Tile section

Tile shortcodes section will be available just in case you have installed prepackaged Basement Tile plugin.

Tiles groups

Tiles groups shortcode creates a tile group using Basement Tile. With help of this shortcode you can choose one of predefined tiles groups.

Example: [tiles_group parameters]

Tiles

Tiles shortcode creates a tiles tiles instead of choose a predefined group.

Example: [tiles parameters]

Visual Composer

Visual Composer is the greatest drag'n'drop pages builder you can find. And it's packaged with Chino theme for free!

Visual Composer allows you to create really any layout grid and it will be responsive right out of the box. You shouldn't right a line of code to create really nice pages. Try to make something cool with it and you will be rewarded for your patience.

As said above Visual Composer plugin is pre-packaged with the theme and you need to install it. After installing and activation of a plugin go to Settngs > Visual Composer. Check all posts types you want to use Visual Composer in Content types 1 section. See a video tutorial How to use Visual Composer in Pages, Posts and Custom Posts of WordPress

Open a post or page and switch Backend Editor on 1.

You can find a lot of useful info how to use Visual Composer in internet. The first source you should check is an official Video Academy Tutorials.

Here in this documentation essentials info will be provided and Basement Visual Composer Elements.

Visual Composer grid

Visual composer allows to create a layout grid easily. You should understand the structure of a grid. The highest grid element is a Row. It can have another row a columns set. Rows and columns have a lot of parameters to make'em behave like you want.

To add an element like row or any other click on + button 1. It will open the Visual Composer panel with all elements listed.

Elements panel has a filter 1 and elements list 2.

Choose a row to create it. See a video tutorial How to Add Row and Column with Visual Composer for WordPress

There are many controlls for row.

  • Move row
    1
  • Columns settings
    2
  • Add column to this row
    3
  • Collapse row (it can be useful if you have a lot of elements ina row and it's difficult to scroll a long screen)
    4
  • Row parameters
    5
  • Duplicate row
    6
  • Delete row
    7
  • Current column parameters
    8
  • Delete current column
    9
  • Add an element to this row
    10
  • Add new row/element outside of current rows
    11

Row settings

Row settings panel has two tabs, General and Design. General tab has an Extra class name 1 fields. It allows to add an extra CSS class to current row tag in HTML of you resulting page. Row stretch is not useful for Chino theme.

Design option tab is more interesting. It has CSS, border and Background options.

  • CSS settings are very usefull to have a control over margins and paddings of your rows, columns and other elements which have this setting. You can look at demo pages content, it uses a lot of this settings to make grid looks great.
  • Border setting allows to set a border of an element. Pay attention that border width can be set just in Css block.
  • Background settings allows to set a background image and some of possible attributes.

Column settings

Columns settings are similar to row settings but former has an extra tab named Width & Responsiveness. This tab settings allows to set column responsive parameters in a Bootstrap manner.

There are supposed to be 4 breakpoints to change column width on and make responsive.

  • Extra small devices screens
    1
    . These settings will be applied form the 0 witdth and higher.
  • Small devices screens.
    2
    These settings will be applied from 768 pixels and up. If this settings are set they will override Extra small devices screens settings from 768 pixels width.
  • Medium devices screens.
    3
    These settings will be applied from 992 pixels and up. If this settings are set they will override Extra small and Small devices screens settings from 992 pixels width.
  • Large devices screens.
    4
    These settings will be applied from 1200 pixels and up. If this settings are set they will override Extra small, Small and Medium devices screens settings from 1200 pixels width.
Note: small devices width is a default width and should be set from Width dropdown 5 See a video tutorial Responsive Column Control Width and Offset Param Usage Explained and How to Control Elements on Different Devices with Responsive Column Controls.

Basement Visual Composer elements

Basement plugins add 5 extra Visual Composer elements. They are Basement Counter, Basement FAQ, Basement Google map, Basements Slider and Basement Tiles.

These elements are almost similar to according shortcodes but allows to add blocks to Visual Composer grid.

Visual Composer blog settings

You can want to disable visual composer for a blog list and a post single page. Go to Settings > Visual Composer and uncheck post option in Content types section. In this case you will not be able to use Visual Composer for posts and all appropriate pages will use default non-visual-composer layout.

WooCommerce

The theme supports WooCommerce functionality. Refer to an official WooCommerce documentation please.

Note: with Chino you can change products background color to make products places more suitable for theirs images. Each product edit page has a box named Basement Parameters where you can choose a color you need. Leave blank to use default settings.

Contact form

To use contact form on your pages you should install Contact Form 7 plugin. To install it follow plugin installation instruction. In case you have already installed the plugin use [contact-form-7 parameters] shortcode or use one from Chino shortcode builder. Please, see Contact Form 7 docs to figure out how to use it.

To configure a look of form properly, you can use this markup:

<div>
<div class="form-group">[text* your-name placeholder "Your name" ]</div>
<div class="form-group">[email* your-email placeholder "Email"]</div>
<div class="form-group">[textarea* your-message placeholder "Message" ]</div>
</div>
[submit "Send"][response]
				

Widgets

Chino has 2 widget areas: Post page sidebar and Shop sidebar.

Note: if you don't want to display any of sidebars don't add any widgets to them.

Thank you!

Thank you for you interest and purchasing! We hope you will enjoy your new theme as we enjoied with its development. Feel free to write us to our mail envato@aisconverse.com or via our Envato account. We will do our best to make you happy with Chino and other Aisconverse themes.