Viteeo Documentation

Documentation for Viteeo - Premium Wordpress Theme

Viteeo is the theme for creatives and professionals. Packed with great and usable features it's the perfect solution for when you want to built a super duper theme for you next project. Inside this documentation file you will find everything you need to know about the theme and how to get you up and running in no time.



Author: WPTitans
Contact: wptitans.com
Author URL: http://wptitans.com
Item URL: Coming soon
Current Version: 1.0
Documentation Version 1.0
Created: 2012-12-27
Modified: 2012-12-27

Installing WordPress

WordPress is known for its 5-Minute installation process. WordPress is very easy to install, many web hosts even have useful tools (e.g. Fantastico) to automatically install WordPress for you.

However, if you wish to install WordPress yourself, the video and the links will guide you further.


Installing and activating the required plugins

Before we start we need to install all plugins first. Viteeo is using four plugins to functions properly. The contact from 7 plugin, the awesome revolution slider and the wptitans shortcodes plugin and pricing tables plugin.

After you activate the theme you will see a notice at the top of the page. Follow the instructions which are given insdie that message and install and activate these 4 plugins before you proceed with the importer


Installing Viteeo Manually

Installing the theme can be done two ways. You can upload the theme ZIP file using the built in WordPress theme upload, or copy the files through an FTP client.

WordPress Upload
  1. Login to your WordPress admin.
  2. In the "Appearance → Themes" menu click the tab "Install Themes"
  3. At the top of the page click, "Upload", then click the file input to select a file.
  4. Select the zipped theme file inside the wp-theme folder, "viteeo", and click "Install Now"
  5. After installation you will receive a success message confirming your new install.
  6. Click the link "Activate"
Uploading by FTP
  1. Login to your FTP server and navigate to your WordPress themes directory. Normally this would be "wp-content/themes"
  2. Unzip the files from the zipped theme.
  3. Open it and inside the wp-theme folder find the folder "viteeo" and upload it to your "wp-content/themes" directory.
  4. After the files are finished uploading, login to your WordPress admin.
  5. In the "Appearance" menu click "Themes"
  6. Click "Activate" for the theme "Viteeo"

Installing Viteeo with our theme installer.

The installer is the perfect solution for everybody who's in a hurry and doesn't have time to read the docs or wait for support. With a few steps your new theme should look exactly like the demo. There are a few thing you need to consider before using this great and powerful function.

Before you begin here are a few points you need to consider.
  1. Only use the TitanInstaller on a fresh Install, already have content inside your set-up then use the documentation for a manual guide.
  2. Please delete the default page and post, that WordPress creates for you, before you start.
  3. Don't look at the front-end until all steps are finished, this to avoid confusing.
  4. Make sure the required plugins are installed and activated. You will see which one once the theme has been activated. A message appears.
What will happen after i click on the activate theme content button

This process is comparable with importing the dummy content by uploading the xml inside the WordPress Importer. Only now you wont have to search for an xml file within the download package and install the importer plugin first. Just one click and your done.


Heads up! The homepage has to be set up with different helpers, like slider manager, layout manager, widgets and custom menu. We will explain the complete process here. Remember that you have to create a homepage and blog first and select these home[age and blog inside the reading settings (/options-reading.php).
1. Reader settings

Create a homepage page and a blog page first and select them inside the reading settings. No need to add anything inside these pages since the layout builder will know which one is the homepage

2. Go to Option panel

For the homepage we're using a homepage layout builder which let's you decide what you want to show inside the homepage page.

Open the option panel menu and click on the Layout Builder link to open up the Layout manager.


3. Working with the Homepage Layout Builder

  1. Select the blue button, this one is fixed and can only be used to create the homepage from.
  2. Select the layout element you want to include, choose from; Full width text section, Two column section, Three column section, Four column section, Custom info post section, Divider, Intro text section, Post section, Twitter section, Scrollable section, Pricing table section, Slider widget and Page content.
  3. Once you've decided which element you need you click on Add Element, so first start filling up your page with the elements. Don't worry if the order is not correct, your able to rearrange them later by dragging them to it's proper position.
  4. Click on the edit icon to open an element, now you see all kinds of inputs, just fill out all the details required.
  5. Some elements widths can be set also, for example you want a slider in 2/3 and twitter in 1/3 then you need to set it up here by selecting the appropriate column width from the drop-down.
  6. Click your mouse on a row and start dragging it till your satisfied.
  7. Don't need an element anymore or made a mistake then simply remove it by clicking on the bin icon.
  8. Hit save and your homepage is created.
  9. Click Quick Start to create layouts for other pages like about us, services etc.

4. Adding layouts inside pages

Now to show the new page you just created you need to create a new page wp-admin/post-new.php?post_type=page and scroll down till you see the Layout Details window. Now select the full width option 1 and select the New Layout from the titan template drop-down 3

Ignore 2 when you are working with layout builder pages.

Next select if you want a slider/title or blank top section on this page 4. Now when you have selected a slider you need to select the slider here 5. And then final select the full width slider or fixed 6, please be warned that the full width only works on full width layout and not on boxed.


Adding portfolio items

Start by opening a new portfolio post type, then add title and a little short description of your portfolio item. Just like you would do normally.

  1. The featured image is the one that's visible inside all small thumbnails.
  2. Click here to add your images, use this only if your suing a slideshow within your portfolio
  3. Click the pencil icon to open the row or click the bin icon to delete the row.
  4. When the rows are opened you can delete and check the urls of the images
  5. This option depends on a few factors, when you only want to show a single image then upload a featured image and select featured image from here. Want to show the slideshow then load your slider items and select slideshow in here. Want to show a single video then select video in here and add the video url.


Adding portfolio pages

Adding portfolio is even easier then creating a portfolio items. Sit back and pay attention while we're explaining the process of adding a portfolio page.

  1. Add your portfolio page title in here.
  2. Don't add anything in here since it will not show anywhere. The portfolio page templates only show thumbnails and the ajax powered single portfolio.
  3. Inside the Page Attributes window your able to select the portfolio page template.
  4. Leave this set to the default value, there are no sidebars active inside the grid pages.
  5. These options are also of no use, only when adding posts and pages your able to use them.
  6. Now when you have added images inside the portfolio post types and assigned the to a Model category/filter for example then click here on the tab Models. Now only portfolio items from the Models category will show. Want more filter/categories to show then select more tabs.
  7. Your able to sort the grid by title, date, random, author or none
  8. And your able to order the grid on ascending or descending
  9. Activate or de-activate the Live Animating Filtering
  10. Add the page title in here which will show inside the background area below the menu
  11. Add the title description in here which will show inside the background area below the title


Adding portfolio menus

Now we will guide you through the process of setting up the custom menus and show the Portfolio with portfolio categories attached.

  1. Open the screen option panel
  2. Select Portfolios
  3. Select Portfolio Categories
  4. Now go to Appearance -> Menus and add an # inside the url input and add a label name and click on Add to Menu
  5. Scroll down until you find the Portfolio Categories window, select the categories you need and click on Add to Menu
  6. Now simply drag your Portfolio Categories below the Custom Portfolio Menu and your done


Featured Media Options.

The blog is something we all are very familiar with so we won't go through the basics. We're only explaining the functions we've added such as the featured media options, the filters and grid page templates.

Create a new post and scroll down to the bottom of the page till you see the Layout Details window.

  1. Select Sidebar position
  2. Select which sidebar you wan to show
  3. Ignore this
  4. Select the page style, want a slider, a title bar or nothing. Make your choice here please
  5. This is de default featured image function

    WordPress Post Thumbnails


Adding blog page templates.

Your able to choose between 3 different grid to show of your blog posts and it's also possible to choose between various filtering option so that you can make any type of blog page and as much as you please.

Functionality is somehow the same as creating a portfolio page.

  1. Add your blog page title in here, we will show you how to set up a full width blog page.
  2. Don't add anything in here since it will not show anywhere. The blog page templates are only showing posts.
  3. Inside the Page Attributes window your able to select the blog page template Full Width 1, Full Width 2 or Classic.
  4. Leave this set to the default value, there are no sidebars active inside the full width page templates, when you select classic blog template then you can select a left or right sidebar.
  5. These options are also of no use, Only when creating normal pages your able to use them. Or when you really want to show a slider then select slider in here. Or blank so nothing will show at the top section.
  6. Sort by category options are available, so when you only want to show a certain category inside your blog page then select that category here.
  7. Your able to sort the grid by title, date, random, author or none
  8. And your able to order the grid on ascending or descending
  9. This option is not active here, only when selecting the portfolio page template
  10. Add the page title in here which will show inside the background area below the menu
  11. Add the title description in here which will show inside the background area below the title

Slider

After pressing the "Create New Slider" button you will reach a form where you are asked to enter a Slider Title (used for the Slider overview in this backend) and a Slider Alias (a slug that is used to implement the Slider in your WP later, so keep it simple with no spaces and special chars).

The options in the boxes on the right side (General Settings, Position, Appearance, Navigation, Thumbnails) have helping Tooltips on mouseover so they are not explained here.

The Slider Type is not in use since unlimited has it's own full width and fixed options on each page

The Sizes section is needed to fit the slider in all screen sizes needed. The height of the slider will always be calculated to keep the aspect ratio from the max width and height given in the Slider Size line.


Slides

The next step is creating/editing slides. You get there by just clicking on "Edit Slides" in the Slider Form window.

Just press "New Slide" and the native WP Media Upload dialog window will appear. Choose or Upload the slide's background image, choose "Full Size" and then "Insert Into Post" (all like you are used to it in your WP editor). You can always click on the pic to change it.

Use the arrow handles on the right side to change the slides position in the slider (top to bottom = first to last slide to be shown) or delete it with the "Delete" button.

The "Edit Slide" leads you to the next chapter "Slide".


Slide & Layers

In the "Edit Slide" view you see the heart of our plugin. The drag&drop Caption editor.

But first please note that you have another chance here to change the background image with the "Change Image" button.

To create a Layer (Caption, Image or Video) press the button "Add Layer" or "Add Layer: Image". In case of a text layer a basic layer will be created you can use the "Text" field in the Layer Params to change the caption on it. The "Style" select box shows some basic styles (CSS classes) you can use to style the caption (you can always add own CSS classes to this field or edit the existing ones via the "Edit CSS File"). We have already pre-styled some to match unlimited

To create a Layer (Caption, Image or Video) press the button "Add Layer" or "Add Layer: Image". In case of a text layer a basic layer will be created you can use the "Text" field in the Layer Params to change the caption on it. The "Style" select box shows some basic styles (CSS classes) you can use to style the caption (you can always add own CSS classes to this field or edit the existing ones via the "Edit CSS File"). We have already pre-styled some to match unlimited

In case of an Image Layer you will see the native WP Media Uploader again. In case of a Video Layer you will prompted to a custom Video selection wizard.

You now can move the Layers around via drag&drop or type in the x and y coordinate in the corresponding fields.

The "Layers Sorting" drag&drop list determines the Layers' z-index. This list specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.


Options to include the Revolution Slider


Adding slideshows through short-codes

When you want to add the certain sliders through short-codes then simply open up the shortcode manager and go to Specials/Slideshows and select your Revolution Slider you want to show.

Adding slideshows through the layout builder

When you want to add a slideshow through the layout editor then just add an layout element and select slider widget. Now select your slider from the dropdown list.

Or you can simple open up a page and select the slider directly inside the top of page, same concept as the homepage but then your able to reproduce the homepage structure on all pages if needed. Open a page and scroll down to Layout Details and set your slider.

Widget Locations

  1. Default Blog sidebar
  2. Mobile sidebar, anything added in here will show inside the mobile footer
  3. These are the footer columns as described at the footer section
Be warned! Wordpress saves sidebars by number instead of name, so when dynamically new sidebars or footer areas are added or deleted it's possible that WordPress swaps or deletes widgets.
Widgets

The widgets are all pretty straight forward and require no explanations. Just open them and set them up.

Custom Post types

Viteeo is using 3 different custom post types, testimonials, portfolios and teams. Each one of the post types speaks for it selves and require little explanation. We've made a video which will walk you through the processes.

Translation

How to work with PoEdit and use the po/mo files in the this theme

Inside this section you will find a small and very easy to understand guide about the way to ad po and mo files to this theme. Make sure you have translated your wordpress set-up. read through the following list about the way to achieve this. It's really easy, in some cases you can even download a copy of wordpress in your language.

Next you find the po and mo file of this theme inside the lang folder inside the root of the theme. Download these files and open the po file with Poedit. When you've opened the .po file you will see a screen like shown on the right.

Next thing you need to do is to translate all items until the last line. After that you need to save the file as both .po and .mo. Rename it the the po and mo files to your language code. For example when your dutch and you have set the translate option inside your config.php to define ('WPLANG', 'nl_NL'); then you need to rename your po and mo to nl_NL.po and nl_NL.mo

Now you've saved your po and mo you need to upload them to the root of the theme. Not inside the lang folder but in the root of the theme. If this doesn't work then rename the lang folder to language and ad the files in there. Below you will find a few more useful links to get started with making the po and mo work.

Links

Viteeo is only using one default style and besides that you have the opportunity to create a custom style with our dark starters style and light starters style. This means that when you need a dark style you only have to select the dark starters style and open the stylesheet and start editing without messing anything up. Only the required styles are present inside this stylesheet.

This works pretty easy. First thing you need to do is watch this video and you know exactly how to create you own wptitans child theme ;).


We would love to thank everybody for their great work and for letting us use the resources. All resources are GPL , Commercial licensed or we have written permission for usage.

None of the images and logo inside the demo are included inside the download package. The download package contains a single demo image and dummy logo image.

JavaScript

  1. Easy Pie Chart — Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element
  2. Bootstrap — Bootstrap, from Twitter
  3. Viewport Selectors — by Mika Tuupola

Icons

  1. GLYPHICONS — library of precisely prepared monochromatic icons and symbols.
  2. Free Social Icon pack by Obox
  3. Flat iPhone 5 Black

Demo Images

  1. PhotoDune — High Quality Royalty-Free Stock Photography
  2. Fotolia — Royalty Free Stock Photos
  3. Unsplash — Free (do whatever you want) hi-resolution photos.

Once again, thank you for purchasing one of our products. If you have any questions that are beyond the scope of this help file, please feel free to send us an email and we will be more then willing to guide you through. Also when you've found a bug or any sort of issue, sending an email through our ThemeForest Profile Page is the fastest way to receive support. Thanks so much!