Yokko WP - Documentation

Version 1.0.4

Cross Browser, High Quality and Responsive Multipurpose HTML Template.

Thank you very much for purchasing our 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 Yokko 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.

Thanks so much!

Getting Started

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

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:

  • FTP Upload: Using your FTP program, upload the non-zipped theme folder into the /wp-content/themes/ folder on your server.
  • WordPress Upload: Navigate to Appearance > Add New Themes > Upload Theme. Go to browse, and select the zipped theme folder. Hit “Install Now” and the theme will be uploaded and installed.

Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and activate your chosen theme.

Note: you will be promted to install Basement Framework plugin. Do it, the theme is based on this plugin functionality.

Demo Content

Note: We do not recommend this 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. Log into your dashboard.
  2. Install and activate Yokko Theme first! (see appropriate section of this manual)
  3. Find the file link called yokko-demo-content.xml in your ThemeForest archive.
  4. You may not have Import plugin installed so install it first, please. On completeness you will see the after-install page with plugin activation link. Hit it once and follow further instructions.
  5. Navigate to Tools > Import, and choose the WordPress.
  6. When prompted, upload your demo content yokko-demo-content.xml file.
  7. 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 to Import File Attachments. Check this box to import the media you see in your theme’s demo.
  8. Once imported succesfully, navigate to Appearance > Theme Settings and configure your content
  9. ATTENTION! To enable menu go to Appearance > Menus, choose the tab Manage Locations, click on Top primary menu dropdown and select Top menu. Save changes - that's it, demo content is installed.

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.

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 option and choose the page you just created as your front page.

Setting up the blog archive page

To set up the blog archive page you should create a new page. Once you have created one, navigate to Settings > Reading and configure the Posts page setting. Select the static page option and choose the page you just created as posts page.

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

Yokko Settings

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

Yokko 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 Logotype 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 checkbox off.

Colors

Colors settings have one item Main color. It is used for setting the main color of theme.

Currently has just an option to change footer color.

Posts

In this section you can set headers for blog pages.

There are 4 settings for pages displaying posts lists. They are:

  • Blog archive header text is used on regular posts list page.
  • Blog categories page header text is used for category posts list.
  • Blog tags page header text is used for tag posts list.
  • Blog author page header text is used for author posts list.

These setting presents regular WordPress editors. You can fill the content as usually, using shortcodes and any WordPress editors possibilities.

Sidebar

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

Sidebar options allow to set regular sidebar enabling for different page types.

Shop

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

Here you can hide reated products on single product page, choose sidebar position and fill usefull pages texts

In this section you can choose what post type should take part in search process and fill search header and no results texts.

Here you can add copyright line. Use {year} placeholder to replace it with current year.

404 page

404 page section contains not-found-page text options.

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.

SEO

Here you can add common pages keywords and description to improve your SEO. Each page/post/etc. can override these setting individualy.

Content creating

Understanding Content

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

Creating pages

Pages are for content such as "About," "Contact," etc. Pages live outside of the normal blog chronology, and are often used to present timeless information about yourself or your site -- information that is always applicable. You can use Pages to organize and manage any content. - WordPress Codex

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

Posts are entries that display in reverse order on your blog page. Posts usually have comments fields beneath them and are included in your site's RSS feed. - WordPress Codex

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

Yokko Theme is packed with Basement Projects bundle which contains Project custom post type and projects categories.

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.

Project post type has Tile config parameters section and SEO section

Tile config section is used to set parameters for tile. Tiles are used for rendering works tiles shorcode. Each tile consists 4 layers. The first is featured image, the 3 latter are described below:

  • Overlay layer. It's shown always if setted. You can add any content in, use shortcodes, change its background color, background color opacity, background image and its position. Don't fill any data here if you want to disable this layer for this one tile.
  • Hover layer. By its content management is similar to overlay layer. The only difference is the behaviour. Hover layer is shown just on tile hover. Don't fill any data here if you want to disable this layer for this one tile.
  • Link layer. This layer is transparent and contains link if the latter is setted. Also you can specify the link title which will be shown on hover. There are 3 link types:
    • 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.

SEO section is used to override global SEO parameters.

Detailed info how to fill content you can read in Shortcodes section.

Creating team/members

Yokko Theme is packed with Basement Team bundle which contains Member custom post type.

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

Besides regular WordPress fields Member post type has two additional fields like Position and Hover text. They are used for team shortcodes to determine team member on page.

Creating slides

Yokko 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 section is used to set parameters for slide. Tiles are used for rendering works tiles shorcode. Each tile consists 4 layers.

  • Content layer. It's shown always if setted. You can add any content in, use shortcodes, change its background color, background color opacity, background image and its position.

    Note: if you want to set single image as slide content you should select this image in slide content editor and choose Formats > Theme Styles > Slide Image in editor panel. The same note applies to each other slide configs section except Link section.

  • Overlay layer. By its content management is similar to content layer. This layer is shown over content layer. Don't fill any data here if you want to disable this layer for this one slide.
  • Hover layer. By its content management is similar to content layer. The only difference is the behaviour. Hover layer is shown just on tile hover. Don't fill any data here if you want to disable this layer for this one slide.
  • Link layer. This layer is transparent and contains link if the latter is setted. Also you can specify the link title which will be shown on hover. There are 3 link types:
    • 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.

See Shortcodes section to figure out how to create sliders from created slides.

Creating photos

Yokko Theme is packed with Basement Photos bundle which contains Photo custom post type.

Yokko uses photos to create photo galleries.

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

Besides regular WordPress fields Photo post type has two additional fields named Photo and Preview. Preview is the first photo user see in gallery, and photo is an image for popup.

Creating videos

Yokko Theme is packed with Basement Video bundle which contains Video custom post type.

Yokko uses video to store video links to use them in shortcodes.

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

Besides regular WordPress fields Video post type has an additional field named Link. Link stores video link to video file on Youtube or Vimeo.

Creating audios

Yokko Theme is packed with Basement Audio bundle which contains Audio custom post type.

Yokko uses audio to store audio files and it data to use them in shortcodes.

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

Besides regular WordPress fields Audio post type has an additional field named Audio file. You can upload any audio file with this field. The upload process is similar to featured image upload.

Creating stories

Yokko Theme is packed with Basement Chronology bundle which contains Story custom post type.

Yokko uses story to show "timeline" for your site.

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

Creating FAQ

Yokko Theme is packed with Basement FAQ bundle which contains FAQ custom post type.

Yokko uses FAQ to show frequently asked question with help of shortcodes.

To create a new АФЙ, log in to your WordPress installation with sufficient admin privileges to create new articles. Select the Administration > АФЙs > Add АФЙ option to begin creating a new АФЙ.

See Shortcodes section to figure out how to create FAQ list.

Creating pricing tables

Yokko Theme is packed with Basement Pricing bundle which contains Pricing custom post type.

Yokko uses Pricing to show pricing tables with help of shortcodes.

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

Pricing post type has some extra parameters. Play with it to see how they apply.

Also Pricing post type has Period taxonomy. Period is used to group pricing on pricing table rendering.

See Shortcodes section to figure out how to create Pricing tables.

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

Yokko WordPress Theme is packed with a great 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 button above an editor.

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

Layout section

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]...columns...[/row]

Column

Column shortcode is used to determine a columns inside a row on your page. Column can have width, offsets, pulls and pushs. The whole bunch of options is available in Detailed column shortcode.

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

Detailed column

Detailed Column is an alias of Column shortcode. It has extended parameters for proper column tuning.

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

Link shortcode creates a simple HTML link. It is not usefull in editor but very nice for widgets texts formating (for more information see widgets sections).

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

Breakline

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

Example: [br]

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: [nbsp]

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 height="X"]

Elements section

Button

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

Example: [button]...content...[/button]

Custom button

Custom button shortcode creates a button. You can define how exactly your button should look.

Example: [button]...content...[/button]

Aisconverse icons

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

Example: [icon_aisconverse]

Fontawesome icons

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

Example: [icon_fontawesome]

FAQ

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

Example: [faq]

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]

Author name

Author name shortcode renders current author name on author posts page.

Example: [author_name]

Taxonomy name

Taxonomy name shortcode renders current taxonomy (category or tag) name on taxonomy posts page.

Example: [taxonomy_name]

Search request

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

Example: [search_request]

Featured image shortcode renders current featured image if it exists. You can also make an image circle.

Example: [featured_image]

Sections section

Header

Header shortcode provides a way to render beautiful header with proper layout.

Example: [header]...content...[/header]

Service block

Service block shortcode is an alias of detailed column shortcode. Service block renders good layout for presentation your services.

Note: as any column shortcode Service blocks should be wrapped with [row] shortcode.

Example: [services]...content...[/services]

Post link

Post link shortcode creates full width block with a link.

Note: don't wrap this shortcode to [row] please!

Example: [post_link]...content...[/post_link]

Quote

Quote shortcode creates full width block with a quote.

Note: don't wrap this shortcode to [row] please!

Example: [quote]...content...[/quote]

Years chronology

Years chronology shortcode creates stories content carousel.

Example: [chronology]

Team

Team shortcode creates team members block. Each member item will call popoup with its content on click.

Example: [team]

Pricing table

Pricing table shortcode creates pricing table with separating price blocks by periods.

Example: [pricing_table]

Google map

Google map shortcode creates a map.

Example: [gmap]

Contact form 7

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

Example: [contact-form-7]

Sliders & carousels section

Carousel shortcode creates sliders and carousel. It has a lot of parameters which are described in shortcode interface.

Example: [carousel]

Content carousel shortcode is used to create proper wrapper for gallery slides.

Example: [content_carousel]

Slide for gallery shortcode creates gallery slide content.

Example: [gallery_slide]

Portfolio section

Projects tiles shortcode creates projects tiles using each selected project tile config.

Example: [projects_tiles]

Authors

Authors shortcode creates list of authors to show in a content. They can have any common link. On empty common link each of them will call popup with memebr info on click.

Example: [authors]

Media section

Video

Video shortcode is an alias to WordPress embed shortcode. It allows to choose Video post with saved link to YouTube or Vimeo.

Example: [embed]...[/embed]

Audio

Audio shortcode is an alias to WordPress audio shortcode. It allows to choose Audio post with saved audio file.

Example: [audio][/audio]

WooCommerce section

Products tiles

Products tiles shortcode creates WooCommerce products tiles width products categories filter.

Example: [products_tiles]

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 HERE-GOES-PARAMETERS-OF-THE-FORM] shortcode or use one from Yokko 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

Yokko WordPress Theme is packed with two custom widget. Their names are Basement simple text and Basement latest items tiles.

Basement simple text allows to create a text width title and link of title. You can use shortcodes for text field. Unfortunately, Shortcode Builder is not available for widgets and you shout add shortcodes manually.

Basement latest items tiles allows to create tile links to any post types using featured image as background.


Yokko has 5 widget areas: Footer 1-4, Post page sidebar and Shop sidebar.

Note: if you don't want to display sidebar on shop page don't add any widgets to Shop sidebar.

FAQ

  1. How to change theme's font?

    It's easy. First of all you should be sure you use Yokko child theme as active theme. If so, follow steps:

    • Open functions.php in yokko-child folder and add the next code: function theme_main_font() { return 'PASTE_GOOGLE_FONT_LINK_HERE'; }
      The link should be like http://fonts.googleapis.com/css?family=Open+Sans
    • Open style.css in yokko-child folder and add the next code: body, input[type=text], input[type=email], input[type=password], input[type=search], textarea, textarea.form-control { font-family: 'YOUR_FONT_NAME', sans-serif; }
    • That's all. Reload your page.