Getting Started

About the Theme

Author: Pirenko

Author Website: www.pirenko.com

Twitter: @Pirenko

Facebook: Pirenko

Youtube: PirenkoThemes

If you have any questions that weren't clearly answered on this help file please feel free to email via my user page contact form at Themeforest. If you have time don't forget also to rate the theme on your downloads section.

Thank you for purchasing Verve WordPress Theme!

Installation

This theme is installed like any other WordPress Theme. Simply upload the verve-theme.zip folder using the WordPress Dashboard or upload via FTP the verve folder into wp-content/themes folder. Please mnake sure that you upload this folder and not the whole file package zip file, because that will not work.

After theme activation, you are advised to install some plugins that are bundled with the theme: Verve Framework, Visual Composer and Envato WordPress Toolkit (for easy updates). To take full advantage of all this theme has to offer, it's strongly recommended that you install these plugins.

Here's a step by step video tutorial:

If you have any trouble opening this video you can view it online here https://www.youtube.com/watch?v=dm83nFVl0bI.

Demo Import

The easiest and fastest way to generate sample posts, portfolio items, slides and custom pages is using the Demo Import feature.

Here's a video tutorial showing how to do this:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=PWdxtoVuak8.

Theme Options

Here's a video tutorial with a general overview of the theme admin panel:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=k53VvY3QHQQ.

General Tab

a) General - Decide here if you want your theme to adjust to smaller screens. There are also some other important options related with the content width:

  • Turn ON/OFF retina detection to eventually serve larger images for retina screens
  • Set the maximum content width that the content area scales to (this is useful for really wide screens so that the content doesn't stretch too much)
  • Turn ON/OFF Ajax loading. This is a cool feature that will prevent the whole page to reload when you navigate through the website. Nevertheless, if you have plugins that rely on jQuery this option should be turned OFF to improve compatibility. If you have any trouble with only a specific page that contain a plugin you can add a special class to the menu button that loads that page. To load a page "normally" the class you must add is regular_load.

b) Fonts - Set the general size of the body font here and also the general styles that will be applied on different parts of the theme. There's a large number of google fonts available. The theme uses 2 types of fonts that can be selected here. You can also add an extra custom font that will be applied on elements as you wish. In this case simply add the class custom_font to those elements.
If you need to add fonts that aren't bundled with the theme, you can use the method show here to add extra fonts: https://www.pirenko.com/blog/2013/08/27/extra-fonts-plugin-by-pirenko/.

c) Colors: General - Set the generic color scheme and style with these options. These colors will apply on multiple parts of the theme. You can also set up some background patterns here. If you need to add your own simply place your images inside the images/patterns/ folder that the theme will detect and make them ready for use;

d) Colors: Textfields, lines and borders - These values will apply to lines, borders and textfields. Some buttons will also receive a similar style (example: submit comment button);

e) Colors: Buttons - These specific colors will apply specifically to the elements that are described near each color picker. There's also the possibility to use shadows on some elements... Set the opacity to zero if you don't need any shadowing effect;

f) Colors: Other - Preloader, rectangles navigations, featured headers and content overlay can be styled on this section;

g) Sidebars - Just decide if you want to show the right sidebar on pages and posts by default. This option can be overriden on certain page and post types too;

Branding & Logo Bar

Not much to say here... Simply upload your own brand images and they will be used across all the theme pages. You can also adjust the top margin for the logo to ensure that it is positioned according to your needs.
It is also here where you can set your website favicon that will be used on browsers that support it.

Menu Bar

Customize here the looks of the bar where the menu is displayed. Besides the menu bar position, size and alignment, you can also customize entirely the color scheme.

It is here that you can also activate the social network links and search icon that may be displayed near the menu. Configure here also the looks of the mobile mode menu.

Mobile Menu

Customize here the looks of the bar where the menu is displayed. Besides the menu bar size, background color and alignment, you can also customize entirely the color scheme.

If you need to add some extra elements under the menu you can use the Mobile Sidebar that you can edit under Appearance>Widgets.

Persistent Menu

On single blog and portfolio entries you can activate a menu that stays fixed on the top of your screen (this will make navigation easier). On this section you can customize entirely the looks of this menu bar.

Footer Section

Once again you can fully tweak the color scheme for this specific area. This element will stick to the lower part of the screen and you can also display some extra information under the widgetized area.
Don't forget also that you can prepend or append a spcific page content to the footer widgetized area.

Blog

Besides other options whose name describes exactly what they do here are some notes:

a) Blog Categories Page Template - Decide the layout for the blog archives page;

b) Show author info under post - Decide if the information about the post author should be displayed. This info is set up under Users>Profile;

d) Social Sharing - Show/hide/select the social network sharing buttons;

Portfolio

Once again besides other options whose name describes exactly what they do here are some notes:

a) Skills Page Template - Decide the layout for the portfolio archives page;

b) Default Single Posts Layout - Half, Wide, Fullscreen or Custom Layout. This option can be overriden on each single post on it's respective options panel;

c) Overlayer colors - Edit the styles of the overlayer that may be displayed when you click on a portfolio item;

d) Social Sharing - Show/hide/select the social network sharing buttons;

Search Results

Customize the search results header image and sidebar display here.

404 Error Page

Customize the 404 error page header image and search field display here.

Translations

There are 2 methods to translate the theme: using the Verve Options and using .mo/.po files that can be combined with WPML. You have the option to decide that on this translation tab. If you only need one language we would say that using the theme options is easier and faster, but if you need more than one language you need to use the .mo/.po files method.

If you decide to use the .mo/.po solution the language files are located inside the lang folder. With this method you can also use the plugin WPML, because the theme is fully compatible.

Custom Scripts

a) The Custom CSS textfield is extremely useful to make adjustments to the theme styling;

b) You may also add some Javacript code on the Custom Javascript textfield;

Advanced

Change some of the theme Custom Post Types slugs that will be show on the URL browser address bar. To avoid 404 Errors and other similar link related trouble, do not use any special characters here and make sure also that their slug is different from all pages and any other Custom Post Types.

You can also change how Visual Composer is integrated with the theme. There's a tailored version for the theme that is 100% compatible and fully functional. This is called the "light" version. But there's also another option available (the "heavy" version) which should be more compliant with all the extensions that are available with the plugin.

If you opt for the "heavy" version you may still encounter issues with the some extensions and it will certainly increase the page loading times. You will not have access to some of the customized elements that were created for the theme. For all that was said, we strongly recommend you to use the "light" version.

Configuration

Content Management

Blog/Posts

Recommended dimensions for the image to use on this page are 1600px. If you have high resolution images for retina displays upload bigger images to WordPress install and the theme will resize them properly for smaller screens. Here are some additional notes:

a) If you want to use a specific color for this post just set it up on the Featured Color option field;

b) Blog entries are Posts that you create on your Dashboard. You may use categories and tags to organize your content;

c) The featured image will be the thumbnail and the first image of the slider. If you only want this image to be the thumbnail you should select the default option to "Skip Featured image on Lightbox and Slideshow" inside the Theme Post Options panel. In this case the theme will fetch the second image/media to the lightbox and it will be the first image of the single page slider. You can set up to 10 images/videos for each news entry inside the same window;

d) If you want to use videos or music hosted elsewhere you should use iframes to display the content. This code is obtained by clicking on the Embed/Share button when you are viewing the media on the original website. Here's a sample code to embed a Vimeo Video:

<iframe src="http://player.vimeo.com/video/40540343?color=ffffff&amp;autoplay=1" width="700" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

e) After adding some blog entries probably you want a page to show these items. You should go to Pages>Add New and set the Template (on the right side menu) to Blog Page. After this an options panel will be activated under the page content and will see multiple options for your blog page;

f) To set up multiple blogs you need to use the Theme Blog Options panel where you can decide what categories you want to use on this specific page;

g) You can also show those blog posts using the Visual Composer Plugin. For this select the element Latest Posts;

Here's a video tutorial shwowing how to manage blog posts:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=op0EPwXpaR8.

Here's a video tutorial shwowing how to manage blog pages and feeds:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=uAVGwgz8IlA.

Portfolio/Portfolio Items

Recommended width for the images to use on these pages is 1600px (height is variable). If you have high resolution images for retina displays upload bigger images to WordPress install and the theme will resize them properly for smaller screens. Here are some additional notes:

a) If you want to use a specific color for this post just set it up on the Featured Color option field;

b) You may use portfolio skills to organize your entries. You may also add some tags to these items;

c) The featured image will be the thumbnail and the first image of the slider. If you only want this image to be the thumbnail you should select the default option to "Skip Featured image on Lightbox and Slideshow" inside the Theme Portfolio Options panel. In this case the theme will fetch the second image/video to the lightbox and it will be the first image of the slider. You can set up to 20 images/videos for each news entry inside the same window, but if you are only using images the entries number is not limited (simply use the option bulk upload);

d) If you want to use videos or music hosted elsewhere you should use iframes to display the content. This code is obtained by clicking on the Embed/Share button when you are viewing the media on the original website. Here's a sample code to embed a Vimeo Video:

<iframe src="http://player.vimeo.com/video/40540343?color=ffffff&amp;autoplay=1" width="700" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

e) After adding some portfolio items probably you want a page to show these items. You should go to Pages>Add New and set the Template (on the right side menu) to Portfolio Page. Just like with the blog, after this an options panel will be activated under the page content and will see multiple options for your portfolio parent page

f) To set up multiple portfolios you need to use the Theme Portfolio Options panel where you can decide what skills you want to use on this specific page;

g) You can also show those portfolio entries using the Visual Composer Plugin. For this select the element Latest Portfolio;

Here's a video tutorial shwowing how to manage portfolio posts:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=nnKjrM7hY3Y.

Here's a video tutorial shwowing how to manage portfolio pages and feeds:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=jdvwNu79ncg.

Theme Sliders/Slides

Recommended width for the images to use on these pages is 1600px (height is variable). If you have high resolution images for retina displays upload bigger images to WordPress install and the theme will resize them properly for smaller screens. Here are some additional notes:

a) When you create a slider if you want to use an image use the Featured image panel. If you want to use a video use the same code as for the portfolio section and place it on the Video HTML code textfield;

b) You can set the slides to link to other pages or external links. In this case fill the URL textfield inside the Theme Slide Options. You may also change the text color and the position where that text is displayed;

c) You can organize your slides using Groups. This is the way to create different sliders across the website. After creating a Group (ex: first_group) you can select it when you are adding a slider to a page;

d) If you want your slider to fill the whole screen vertically make sure that you select the option "Make slider fill the window height". This option is shown on the panel located undeer the content when you are editing a Theme Page;

e) You can also show those theme sliders using the Visual Composer Plugin. For this select the element Theme Slider;

Team Members

Members are managed in a similar way to portfolios or slides. You can organize them into categories (teams) and you can show teams using shortcodes. Each member has a single page that you can add to the menu or to whatever section you want.

Under each Team Member page content you have some options under the page content. Just on note to let you know that if you don't want to link the thumbs to team member single pages you can do this by selecting the respective option on this very same options panel.

Teams can be added to pages using the Visual Composer by selecting the options Team Members.

Here's a video tutorial shwowing how to manage testimonials:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=qBxiuwSAUxc.

Testimonials

Testimonials are a great way of showing some sort of feedback that you need to display. They are managed like any other custom post type. You can organize them into categories (sets) and you can inser them into pages using the Page Builder. The elemnt to use in this case is Testimonials and you have multiple options to customize the frontend display.

Here's a video tutorial shwowing how to manage testimonials:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=L_l1E6haCaY.

WooCommerce

If the theme should be extended with WooCommerce nothing special needs to be done after activating the plugin. I would just add these notes:

a) Thumbnails and product images will look blurry with the default dimensions. To avoid this situation I suggest going to WooCommerce>Settings>Catalog>Image Options and adjusting the values (for reference on the preview they are 600×600,800×800 and 150×150);

b) The theme provides some extra options under Theme Options>Woocommerce tab;

Here's a video tutorial shwowing how to install WooCommerce:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=bO8PSQYHZLk.

Managing pages & Visual Composer

This theme was developed to work combined with the Visual Composer Plugin. You'll find all the necessary elements to create all sorts of content across all your pages. Here are some notes:

a) If you want to create a full width section (fills the screen horizontally) click on the edit button on the row and you'll find that option there. It's also here that you can set up you background and margins. You can also set up some background patterns here. If you need to add your own simply place your images inside the wp-content/themes/verve/images/patterns/ folder that the theme will detect and make them ready for use;

b) If you want to add some extra vertical spacing between elements simply add an element called Vertical Spacer. The you set up the offset value in pixels for a margin (positive or negative);

c) Under each page content you'll find more options such as the title text, title color, featured slider and sidebar display. The featured slider allows you to display a full width slider on top of a page;

d) The theme comes with 2 sets of font icons that you can use anywhere: Google Material Design Icons and Font Awesome Icon Set.

g) Most of the Visual Composer elements that you add have the option to add some custom CSS classes. This is extremelly important if you want to style some elements in a different way. Here are some custom CSS classes that are really useful:

  • verve_faded - the element will perform an opacity reduction on rollover
  • hide_later - the element will be hidden only on screens that are smaller that 768px
  • show_later - the element will be shown only on screens that are smaller that 768px
  • hide_much_later - the element will be hidden only on screens that are smaller that 480px
  • show_much_later - the element will be shown only on screens that are smaller that 480px
  • verve_retina - the image(s) inside will be scaled to 50% of the original size
  • regular_load - the link will perform a regular page load even if Ajax Loading is ON

Here's a video showing how to create content using Visual Comoposer:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=GjhobMuglgg.

Using WPML for multi-language sites

If you need to use multiple languages with this theme, we strongly recommend using the WPML plugin. Yes it is paid, but it is worth every penny.

Here's a quick list of things that can be useful during this process:

Mailchimp Integration

If you use Mailchimp for nwesletter subscriptions, I strongly recommend using the Mailchimp for WP plugin by ibericode. Here's an example of a form that you can copy/paste:

<div class="verve_chimp"> Subscribe and stay updated with the latest news from us. We never spam! </div>
<div class="verve_chimp">
<div class="verve_chimp_label">First Name:</div>
<input type="text" name="FNAME" class="pirenko_highlighted">
</div>
<div class="verve_chimp">
<div class="verve_chimp_label">Email:</div>
<input type="email" id="mc4wp_email" name="EMAIL" required class="pirenko_highlighted" />
</div>
<div class="colored_theme_button">
<input type="submit" value="Ok, Sign Me Up" />
</div>

Theme Update

The theme will be updated whenever new features are added or bugs appear. If you have the recommended Envato WordPress Toolkit Active the process is automated as long as you already have placed the necessary information on the plugin settings.

If you prefere to do it manually the video below shows how to update your theme (the video shows another theme, but the update process is always the same on my themes):

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=hjBLV58VhYw.

Final Notes

Customization Tips

If you need to dig into the code to make some sort of adjustments the most important files are located at the inc and js folders. Here are some notes:

  • CSS - inside the scss folder you'll find the 10 SCSS files used all over the theme. These .scss files are compressed into a single file called main.css that is located on the css folder. You can learn more about scss files here http://sass-lang.com/
  • PHP - functions.php and inc/helper.php controls most of the frontend content display functions
  • jQuery - main.js has to do with functions used on the frontend (all .js files located in the js folder)
  • jQuery - other.js has to do with functions used on the frontend related with plugins and widgets
  • jQuery - js_composer_front.js has to do with functions used on the frontend related with the Visual Composer Plugin
  • All .js files are minified so if you decide to make changes don't forget to minify them and replace the respective -min.js file

Send me an email via Themeforest if you need any further help

Rating the theme

You are more than welcome to rate this theme. It will help me to move forward and eventually implement improvements on future updates. Here's an image showing how to do it from themeforest.net: