Vision WordPress

Thank you for purchasing Vision Theme and for choosing Dart Simple Solutions

In this document, you will find in-depth description of all the features and functions available in the theme. If you have any questions not attended to by our template documentation, please contact us so our team can assist you. If you like our template, please leave your feedback and join us on Facebook! 

We are looking forward to hearing back from you, and to improving further this and many other templates in our portfolio. 

 

Thank you, 

Dart Simple Solutions

 

Our Website: www.dartsimple.com

Online Documentation: doc.dartsimple.com

Email: www.dartsimple.com/contact-us/

 

 

Installation

File Structure

Complete list of all project-related folders, files and documents included in the zip file with your new theme can be found below.

Path

Description

assets/

Contains Vision Theme Assets

assets/css/

Contains Vision Theme Styles

assets/css/agency/

Contains Template Agency Styles

assets/css/food/

Contains Template Food Styles

assets/css/photography/

Contains Template Photography Styles

assets/css/vendors/

Contains Vendor Styles

assets/css/vendors/admin/

Contains Admin Page Styles

assets/css/vendors/admin/plugins/

Contains Admin Page plugins Styles

assets/fonts/

Contains Vision Theme Fonts

assets/images/

Contains Vision Theme Images

assets/images/agency/

Contains Template Agency Images

assets/images/food/

Contains Template Food Images

assets/images/photography/

Contains Template Photography Images

assets/images/vendor/

Contains Vendor Images

assets/images/vendor/admin/

Contains Admin Images

assets/js/

Contains Vision Theme JavaScript

assets/js/agency/

Contains Template Agency JavaScript

assets/js/food/

Contains Template Food JavaScript

assets/js/photography/

Contains Template Photography JavaScript

assets/js/vendor/

Contains Vendor JavaScript

assets/js/vendor/admin/

Contains Admin JavaScript

assets/js/vendor/admin/plugins/

Contains Admin Plugins JavaScript

assets/plugins/

Contains Vision Theme Plugins

assets/scss/

Contains Vision Theme SCSS

inc/

Contains PHP Includes of Vision Theme

inc/classes/

Contains PHP Classes of Vision Theme

inc/views/

Contains Views of Classes

inc/views/admin/

Contains Admin Page views

inc/views/admin/tabs/

Contains Tabs of Admin Page

languages/

Contains Translation Data of Vision Theme

pages/

Contains Page Templates of Vision Theme

template-parts/

Contains Parts of Templates

template-parts/archives/

Contains Parts of Archive Templates

template-parts/archives/category/

Contains Parts of Category Archive Templates

template-parts/archives/portfolio/

Contains Parts of Portfolio Archive Templates

template-parts/articles/

Contains Articles Templates

template-parts/articles/category/

Contains Category Articles Templates

template-parts/articles/homepage/

Contains Homepage Articles Templates

template-parts/articles/portfolio/

Contains Portfolio Articles Templates

template-parts/carousels/

Contains Carousels Templates

template-parts/carousels/portfolio/

Contains Portfolio Carousels Templates

template-parts/footers/

Contains Footers

template-parts/headers/

Contains Headers

template-parts/partials/

Contains Parts ( block-about-author, etc. )

vc-elements/

Contains Visual Composer Shortcodes

vc-elements/agency/

Contains Visual Composer Shortcodes for Template Agency

vc-elements/food/

Contains Visual Composer Shortcodes for Template Food

vc-elements/photography/

Contains Visual Composer Shortcodes for Template Photography

woocommerce/

Contains WooCommerce Templates

woocommerce/cart/

Contains WooCommerce Cart Templates

woocommerce/checkout/

Contains WooCommerce Checkout Templates

woocommerce/global/

Contains WooCommerce Global Templates

woocommerce/loop/

Contains WooCommerce Loop Templates

woocommerce/myaccount/

Contains WooCommerce "My Account" Templates

woocommerce/single-product/

Contains WooCommerce Single Product Templates

woocommerce/template-parts/

Contains WooCommerce Template Parts

 

Installing the theme

Install via Wordpress Admin Dashboard

You can install theme via your WordPress dashboard.

Please note that your hosting provider must allow individual file uploads that are greater than 5 MB for this method to work.

Please following these steps:

1) Log in to your WP dashboard

2) On the left-side panel under WordPress Appearance, click on Themes section

3) Click "Add New" button

4) Click the "Upload Theme" button and browse to the zip file with your new theme

5) Once WordPress unzips relevant files, you will see a "Theme installed successfully" message, which could take some time. Once you see this message, please click the "Activate" link

6) Your new theme requires the following plugins to function properly:

  • Visual Composer
  • Contact Form 7
  • WooCommerce

Once the theme is installed and activated, please return to the Appearance > Themes section of your WP dashboard and click on "Begin Installing Plugins" button. On the screen that follows, click "Instal" under all the plugins on the list above. WooCommerce plugin won't be readily available on this screen, and needs to be installed separately.

7) Once plugins are installed, please return to the "Install Required Plugins" section to activate each plugin.

8) Your theme is now fully set-up and ready to use.

 

Install via FTP

To install theme via FTP, please follow these steps:

1) Unzip main theme files to a folder of your choice on your computer

2) Using FTP client of your choice (eg. Filezilla), login to the FTP account for the website where you would like to install the theme

3) Browse to the themes folder located at /wp-content/themes/

4) Upload all the main theme files you unpacked in step 1) to this folder /wp-content/themes/

5) Move plugin folders and files from the folder where you unpacked theme files to the following folder on your WP server: /wp-content/plugins

6) Theme and plugins will now become available for activation in your WordPress dashboard. Please follow the steps above to install and activate the theme.

 

Activate Theme

Once you upload the theme to WordPress, it needs to be activated for the site to change over to the new theme. To activate the theme, please follow these steps:

1) In your WordPress admin dashboard, browse to Appearence, Themes tab

2) Select your new theme and click Activate

 

Common Errors

Theme is missing the style.css stylesheet error

If you encounter this error, please check that all the steps in the installation process were followed correctly. If the issue persists, please refer to the following article by Envato.

 

Demo Import

We provide full demo data to help you get you started with the new theme as quickly and easily as possible. To further simplify the import process, and to ensure that you are able to import all graphics and images, the theme is equipped with a customized Import and Export feature.

To import demo content, please follow these steps:

1) Install all relevant plugins

Before you import demo data, the theme needs to be activated in your WordPress build. Additionally, all plugins need to be properly installed and activated. Please navigate to the last section of our documentation titled "Sources and Credits", where you will find full list of plugins used in the theme.

2) In your WP Dashboard, navigate to Appearance > Vision Options Importer, click on Browse and navigate to the zip file with demo data provided along with your theme.

 3) Click the "Submit" button to import settings and demo data. You will see a confirmation message once all settings are updated.

Note: To ensure custom settings stay intact, including your favicon, tagline and name of site, the demo data importer will not update or overwrite these settings.

Your demo content is now up and running. You can use it as the foundation for your own theme customization. Having demo content installed also helps when populating the theme with your own unique content, such as text, blog posts, articles and images.

 

Theme Customization

 

Your new theme comes packed with great customization options to help you make it look and feel just the way you want it. All customization options are organized in group and can be found in your WordPress admin dashboard under Theme Options tab. Please refer to a detailed listing and description of these options below.

All settings and customization options are available directly from your WordPress Admin Dashboard. Please click on "Vision Theme" in the left-side panel to bring about the settings page, which appears as follows:

 

 Base Settings

 All theme settings and customization options are available for your use under Vision Options tab in the left panel of the WP dashboard.

 The below settings are designed to extend to the entire website.

 Vision theme comes with 3 unique layouts/templates optimized for different kinds of portfolio, including Agency, Photography and Restaurant business. Start by selecting your layout of choice under the Choose Main Template option as follows:

 

 Other base settings are summarized below for your reference:

Setting

Description

Available Options

RTL Mode

Enables right-to-left script

 

Main Theme Color

Select color scheme

Red tones

Green tones

Main Font Family

Sets main font for the theme (used in texts, descriptions, etc)

Any of the available Google fonts

Heading Font Family

Set font for headers (titles, sub-titles)

Any of the available Google fonts

 

The theme comes with 3 unique layouts, each having its own customized menu settings.

1) Template Agency comes with 2 menu types which appear as follows:

 

2) Template Photography comes with 1 menu type which appears as follows:

 

3) Template Food comes with 1 menu typ1s which appears as follows:

Once you select your template of choice as per the instructions laid out in the Base Settings section above, you can then proceed to setting up the menu.

1) In the left-side panel of WP Admin Dashboard, click on Appearance -> Menus

2) Select a menu to edit, or create a new menu:

3) In the Menu Structure window that follows, add elements to your menu as necessary, and select Display location as either Primary or Inline Menu:

 4) Click the "Save Menu" button

 

Additional Information

Please refer to the following article in WordPress Codex for additional information on customizing the menu.

 

Theme Settings

Here we review settings and customization options available for the theme's Homepage and other Pages and sections.

Setting

Description

Available Options

Display Block “About Author”

Enables the "About" section on Homepage.


 

Homepage Posts Display Mode

Choose grid layout for posts to appear in on the homepage

1) Default


2) Grid


3) Tiles


 

Homepage Posts Count per Page

Set number of posts to display on Homepage by default

 

Homepage AJAX-Load Posts

Enable AJAX for post load

 

Homepage Tagline of Site

Enable Tagline on Homepage

 

Coming Soon Settings

 Here we review settings and customization options available for the theme's Coming Soon mode.

Setting

Description

Available Options

Display Counter

Enables Coming Soon mode of the theme whereby a countdown before launch is enabled on Homepage

 

Coming Soon End Date

Set the website launch date. Counter will be set to countdown to this date automatically.

 

Header Settings

Here we review settings and customization options available for the theme's Header section.

These settings are only available for the Template Photography and Template Food.

Setting

Description

Available Options

Display Social Icons

Enables display of social icons in the theme's header

 

Pre-Footer Settings

Here we review settings and customization options available for the theme's Pre-Footer section.

These settings are only available for the Template Photography and Template Food.

Setting

Description

Available Options

Display Pre-Footer

Enables display of pre-footer section

Blog Settings

Here we review settings and customization options available for the theme's Blog section.

Setting

Description

Available Options

Blog Archive Posts Display Mode

Layout for the "Archive" category of Blog

1) Default


2) Grid


3) Tiles


Blog Details Template

Blog post layout

1) Default


2) Alternative


Display Social Sharing on Single Post Page

Enable Social icons on the Blog Post page

 

Shop Settings

Please ensure your WooCommerce plugin is enabled for this section to function properly.

Setting

Description

Available Options

Shop Carousel Display

Enable slider

 

Shop Carousel Posts

Select products to display in slider using the Chosen plugin

 

Shop Products Count per Page

Number of products to display on the Shop page

A whole number of your choice

Portfolio Settings

Please ensure your WooCommerce plugin is enabled for this section to function properly.

Setting

Description

Available Options

Portfolio AJAX-Load Posts

Enable AJAX method of loading for posts in Portfolio

 

Portfolio Display Mode

Select Portfolio layout

1) Default


2) Tiles


3) Fullscreen


4) Masonry


5) Cards


Portfolio Posts Count per Page

Number of Porftolio posts to display

A whole number of your choice

Customizer Settings

For your convenience, we brought together settings for key content elements and sections in the theme that will help you personalize your theme quickly and easily. This section is subdivided in 4 sub-sections, with each sub-section dedicated to a separate section of the theme, including:

  • Header
  • Map/Contacts
  • Footer
  • About Us
  • Links to Social Networks
  • Coming Soon

Header Settings

Here we review content settings and customization options available for the theme's Header section.

Setting

Description

Available Options

Logo

Upload your logo

Image of your choosing

Header Background Color

Set background color for your header

Hex Color Code

Header Logo Wrapper Background Color

Set background color for your logo

Hex Color Code

The below screenshot demonstrates how these settings can be applied to the theme:

Contact Page Settings

Here we review content settings and customization options available for the theme's Contact Us section.

Setting

Description

Available Options

Map Longitude

Longitude associated with your address on the map. By setting this, you will update pointer location on the map.

Indicate standard longitude in signed degrees format (DDD.dddd)

Map Latitude

Latitude associated with your address on the map

Indicate standard latitude in signed degrees format (DDD.dddd)

Title of Map

Title to appear on the map

 

Phone Number

Your phone number

 

E-Mail

Your email address

 

Address

Your physical/office address

 

The below screenshot demonstrates how these settings can be applied to the theme:

Footer Settings

Here we review content settings and customization options available for the theme's Footer section.

Setting

Description

Available Options

Footer Logo

Upload your footer logo

Image of your choosing

Pre-Footer Background Color

Background color for Pre-Footer

Hex Color Code

Pre-Footer Logo-Wrapper Background Color

Background color for Logo

Hex Color Code

Footer Background Color

Background color for Footer

Hex Color Code

Copyright Text

Define text in the copyright section of the Footer

Text of your choosing

The below screenshot demonstrates how these settings can be applied to the theme:

Homepage Settings

Here we review content settings and customization options available for the theme's Homepage section.

Setting

Description

Available Options

Author Image

Upload author photo

Image of your choosing

Block “About Author” Title

Set Title for the About section

Title of your choosing

Block “About Author” Text

Define text for the About section

Text of your choosing

Author Page Link

Link section with another page with further detail

Web link of your choosing

Block About Author Background

Set background color for the "About" section

Hex color code

Image of Companies

Upload up to 3 logos of partner companies or your own brands

3 images of your choosing

The below screenshot demonstrates how these settings can be applied to the theme:

Here we review content settings and customization options available for the theme's Social Links functionality.

Setting

Description

Available Options

Instagram

Set the URL to your Instagram profile

Your URL

Facebook

Set the URL to your Facebook page/profile

Your URL

Twitter

Set the URL to your Twitter profile

Your URL

Pinterest

Set the URL to your Pinterest profile

Your URL

Coming Soon Page Settings

Here we review content settings and customization options available for the theme's Coming Soon mode.

Setting

Description

Available Options

Logo

Upload image for your logo

Image of your choosing

Link for Logo

Link logo to another web page

Linked page URL

Typography

The theme is using Google Fonts, putting 600+ fonts within your reach.

 

Forms

A number of ready-to-use forms are available for you in the theme. Please refer to the below for information on how to configure and use these forms. The theme is using Contact Form 7 plugin to deliver these forms.

To manage contact form settings, please click on the Contact > Contact Forms link in the left-side panel of your WP dashboard.

Form

Description

Contact Form

Default Contact Form

Contact Form Alternative

Contact Form with Alternative Layout

Notify Me on Coming Soon Page

Contact form used when site is in Coming Soon mode

Page Builder

The theme comes equipped with Visual Composer, boasting a user-friendly customization interface packed with value-added features. Use the intuitive drag-and-drop functionality to edit and customize your website with ease and speed. Please refer to the official Visual Composer user manual available at vc.wpbakery.com.

The theme is equipped with a number of sidebars matching the overall style and fitting harmoniously with the layout of the rest of the theme. 

  • Post Widget Sidebar (Only available for the Default Post layout, and will not work if you enable the Alternative option in the Post Detail settings)
  • Page Widget Sidebar has the same layout and style as the Post Widget Sidebar, but is placed in Pages

These sidebars will appear as follows in your theme:

 

Additionally, the following 4 sidebar layouts are available for the Footer section (these only apply to the Photography and Food templates as Agency doesn't have footer):


Widgets

The theme is making use of all standard WordPress widgets, which have been customized to ensure matching style of the template. All changes have been made via CSS and can be reviewed in the following files:

  • assets/css/agency/fix-widgets.css
  • assets/css/food/fix-widgets.css
  • assets/css/photography/fix-widgets.css

Custom Shortcodes

Aside from supporting all of the standard Visual Composer shortcodes, the following custom-developed shortcodes are available for your use when creating new pages. We also added a separate page template named "Template Page Empty", which lets you create new pages from scratch with a clean slate.

Vision Info Block

Vision Info Block (slug: vision-information-block), displays a block of content with text and image gallery with the following settings:

  • Content of Info Block - set your text content
  • Background Color of Info Block - define background color
  • Text Color of Info Block - define text color
  • Images of Media-Gallery - upload images to photo gallery

Here's a how the block appears in Edit mode:


Once configured, the Info block will appear in the theme as follows:



Customized VC Video

VC Video Shortcode (slug: vc_video) displays a block of video content with the following settings:

  • Image preview - sets the background image shown before video playback
  • Full Height - only available for Template Agency - extends video to full height of the block with no margins left
  • Video Title - lets you set a custom title for your video

Once configured, the Video block will appear in the theme as follows:


Vision Slider

Vision Slider (Slug: vision-slider) offers custom-designed slider that blends in seamlessly and aesthetically. The following settings are available:

  • Enable/Disable color fill for slider images (Slug: slider_fill_caption)
  • Select color of the fill (Slug: slider_fill_caption_color)
  • Enable text description for slider images (Slug: slider_images_description)
  • Enable title for slider images (Slug: slider_images_title)
  • Slider height ( Slug: slider_height )
  • Slider width (Slug: slider_width)
  • Image of your choice (Slug: slider_images)

Once configured, the Slider block will appear in the theme as follows:


About Author

Vision Block "About Author" (Slug: vision-about-author-block) offers custom-designed About section (only available for Photography and Food themes). The following settings are available:

  • Title (Slug: about_author_title)
  • Text (Slug: about_author_content)
  • Background color (Slug: about_author_background_block)
  • Main image (Slug: about_author_main_image)
  • Position of the main image (Slug: about_author_main_image_position)
  • Company logos (Slug: about_author_company_images)
  • Button text and color (Slug: about_author_btn_link)

Once configured, the block will appear in the theme as follows:


Hero Image

Hero Image block (Slug: vision-image) combines large image with title, description, overlay color and customized button. The following settings are available:

  • Image of your choice (Slug: vision_image)
  • Title (Slug: vision_image_title)
  • Description (Slug: vision_image_content)
  • Enable overlay color (Slug: vision_image_fill)
  • Overlay color (Slug: vision_image_fill_color)
  • Button text and color (Slug: vision_image_btn_link)

Once configured, the block will appear in the theme as follows:


Grid Shortcode

Vision Grid (Slug: vision-grid) offers a customized stylized grid to show WordPress posts. The following settings are available:

  • Post of your choice (Slug: vision_loop)
  • Image type (Slug: vision_posts_display_mode )

Once configured, the block will appear in the theme as follows:


Custom Hooks

To simplify customization and help your coding needs when working with the theme, we developed a number of custom hooks. Please refer to Vision_WP_Hooks Excel table for a full listing of WordPress hooks available to you in the theme.

 

New Pages

Vision is equipped with Visual Composer to facilitate creation of new pages. You can use any of the two templates for these purposes:

1) Standard template - already has sidebar, preview image on top of the page and social share buttons.

2) Empty template - designed for pages to be created from scratch using Vision UI toolkit, Visual Composer and shortcodes.

Standard template appears as follows in your WP Admin dashboard:

Once configured, the block will appear in the theme as follows:

Unlike the above, Empty template by design is stripped of all default elements to give you more space:


To create a blank new page, please browse to the Pages section of the WP Admin Dashboard and select "Template Page Empty" under Template on the right side of the "Add New Page" screen as follows:


Portfolio

Entries in your Portfolio can be added via WordPress Custom Post Type named "Portfolio". Portfolio posts are equipped with their own set of categories and tags developed with custom taxonomy. You can also filter Portfolio posts on the Archive page. The following content settings are available for you to add content to new Portfolio posts:

  • Preview Image
  • Subtitle
  • Media Gallery Showcase
  • Media Gallery Items
  • Author Title
  • Author Text
  • Author Image
  • About Author Page
  • Full-Width Media

The edit menu will appear as follows when you click on edit or add new Portfolio post:


Other Settings

Posts

  • Video Preview URL - shows playable videos for posts that have videos - available for post Archive pages when they are set to Tiles layout

Products

  • Text Delivery - adds a secondary block of text to product descriptions - only available for Template Agency

Icons

The theme comes with a full set of FontAwesome icons available to you for further customization.

Translation & WPML

You are able to create an easy-to-translate multilingual website with our theme as it's fully compatible with WPML plugin - one of the most effective localization solutions available for WordPress today. Please refer to the official WPML support page for user manuals and further reference:

To add new languages, or adjust translation, please edit translation file saved in the following folder:

  • languages/vision-theme.pot

This main translation file is well-organized and links back to relevant files and lines of specific code impacted by translation, helping you to add new languages and edit existing ones as quickly and easily as possible.

You can use any open-source or commercial PO-file editing software to manage your translation files. One of such editors is available to you free of charge for basic version at https://poedit.net/wordpress ( available for Linux, Windows and Mac OS)

Additional Information

Getting started - wpml.org/documentation/getting-started-guide

Theme localization - wpml.org/documentation/getting-started-guide/theme-localization

RTL Support

The theme supports Right-To-Left languages for maximum compatibility and global exposure. Please refer to Theme Settings page to enable RTL support as follows:


Sources & Credits

WordPress Plugins

Plugin Name

License

URL

Chosen v.1.7.0

MIT License

github.com/thenbrent/chosen-for-wordpress

Contact Form 7

GNU General Public License (GPL) v2

contactform7.com

WPBakery Visual Composer

Extended (In-Stock) License

vc.wpbakery.com

Frameworks

  • Bootstrap 3 - getbootstrap.com

JavaScript

  • jQuery - jquery.com
  • Isotope - isotope.metafizzy.co/
  • Magnific Popup - dimsemenov.com/plugins/magnific-popup/
  • js - creativelive.github.io/appear/
  • js - hilios.github.io/jQuery.countdown/
  • JCF - psd2html.com/js-custom-forms/
  • Masked Input Plugin - digitalbush.com/projects/masked-input-plugin/
  • Parsleyjs - parsleyjs.org/
  • js - imulus.github.io/retinajs/
  • js - github.com/kenwheeler/slick
  • Stickyfill - github.com/wilddeer/stickyfill
  • js - wowjs.uk/
  • GMap3 - gmap3.net
  • Modernizr - modernizr.com/

CSS

  • animate.css

Images

Please note that images are not included with the theme, but will be replaced with other placeholders to retain layout and style of the template.

  • pexels.com
  • depositphotos.com