Manual for Organic Web Premium WordPress Theme

First of all: Thank you for purchasing one of our Premium WordPress themes! We really appreciate that and hope you enjoy working with it.

If you want to get news about themeupdates, new releases as well as other important news sign up to our Email newsletter or follow us at Facebook or Twitter.

About this manual

This document describes the abilities of the Organic Web Shop WordPress theme and helps you to set up the themedemo. Please read it carefully and post in our dedicated support forum at http://support.colibri-interactive.com if you have an unanswered question.

Setup: WordPress

Before you can set up this theme you need a working version of WordPress installed. For further information about how to set up WordPress please see the WordPress Codex Website.
The latest version of WordPress is available for download at: https://WordPress.org.

Setup: Theme

First you need to upload the theme files and then activate it.

To upload the files you can choose between uploading the files with a FTP application and the WordPress Uploader.

FTP Application
Upload the unzipped theme files via an FTP application to your server into your WordPress installation to /wp-content/themes.

WordPress Uploader
Alternatively, you can use the WordPress Uploader you'll find at Appearance > Themes > Add New > Upload Theme. Then click the browse button and select the theme zip file. After that click 'Install Now.

Please note: If you get the error that the style.css file can not be found you have uploaded the wrong zip file. Please make sure that you're uploading the theme zip file and not the "complete theme pack" zip file! If you've downloaded the theme pack zip file you need to unzip it first and use the theme zip file which is included.

Activate the theme
To activate the theme navigate to Appearance > Themes, hover the themes thumbnail and click Activate.

Themesettings

The theme settings give you the opportunity to chance the appearance of the theme and to customize it to your needs. There are two setting pages available: one for general theme settings and one for the homepage.

Homepage Settings

First, set up a page, which will work as your homepage. Navigate to Pages > Add New. You can name it as you like and give it any content, but it’s important that you choose the template Homepage, then click Publish.

Next you need to tell WordPress to use this page as your start page. To do so navigate to Settings > Reading. Select the A static page option and select the page you just created as Front page.

The homepage is now set up and can be filled with slider graphics at Appearance > Homepage Options.

Click the checkbox Enable slides to display the slides. This option saves you a lot of work if you want to disable the slides temporarily because you don’t have to add all the slides and links afterwards again.

After that select which slider you want to use:

Site Slider

This is the default slider. Slides have to be added on the Homepage Options page and are limited to 6 slides.

Revolution Slider

Enables the Revolution Slider ability of the theme. Enter the shortcode of the Revolution Slider you want to use in the “Revolution Slider Shortcode” field on the Homepage Option page.

General Theme Options

On the general theme option page you can set up your primary brand color, select weather you want a dropdown navigation, subnavigation in the sidebar or both. You can set a general style and change the font type used for headlines. Furthermore, you can set up your logo and favicon and insert custom scripts like Google analytics code. If you want your logo to appear crisp and clear on Apples retina displays upload your logo graphic double the size it should be displayed and set the with and height. Example: Your logo should be displayed with 100px width and 50px height. Upload your logo graphic with 200px width and 10px height and set the width to 100 and the height to 50.

Additionally, you can enable/disable the Facebook ‘like’ button to appear on your site as well as the ‘Tweet this’ function.

Below that you can set the title and text which appears on the error 404 (page not found) page. If you leave this textfields empty a default text will come up.

Furthermore, you can enable/disable the comments function for pages and blog posts separately.

Navigate to Appearance > General Theme Options to change the settings.

Slide box

A great feature of this theme is the slide box. It’s an area which will slide in from the top of the page and gives your users additional info about whatever you want him to tell. I personally like to use that for contact info.

To use that feature tick the checkbox to enable the slidebox and choose any existing page from the dropdown below to display that content.

Site footer

Tick the option Activate footer to enable the site footer with an additional widget area.

This theme theme comes with one custom menu, named Primary Menu, which is located above the content next to the logo.

It shows all navigation elements of level 1. Elements above level 1 appear in the sidebar as a sub-navigation list. (Please note that pages with the page template fullwidth do not show sub-navigation elements!)

To set them up navigate to Appearance > Menus. Enter a menu name for the menu and click Create Menu. Then assign it to the Primary Menu and click Save.

To assign the available pages to a menu check the tick next to it, and click Add to Menu, then Save Menu.

To generate a sub-navigation element add the page to the menu. Then drag it below the parent element and a bit to the right. It will snap in indented as child of the parent navigation element.

Setting up the blog

To set up a blog page navigate to Pages > Add New. You can name it as you like and give it any content. Then navigate to Settings > Reading, select A static Page and select the page you have just created as Posts page.

To add a new blog post navigate to Posts> Add New. Give it the name you like, insert your content and make sure to set up a featured image which will appear in the list view of your blog posts.

To set up the featured image click Set featured image and select an image from your Media Library or upload a new one. Click Use as featured image to use it as featured image for the blog post. The featured images need to have a width of 595px, with a recommended height of 180px.

Setting up the contact page

To set up a page with a contact form, create a new page and assign the Contact template to it. The email will be send to the address you set up in your WordPress settings.

Widgets

Widgets are little items you can use to display all kind of content in specified areas on your website without writing any line of code.

Navigate to Appearance > Widgets and drag&drop the widget you like onto the area on the left you want it to appear at. (If accessibility mode is disabled.) Otherwise use the 'Add' button.

This theme comes with three widget areas. One in the sidebar, one in the optional footer and two on the home page. The upper one on the home page divides into four spaces per row. The lower one divides into two per row.

Custom widgets

Wordpress comes with a whole bunch of widgets but some really handy ones are missing. That’s because this theme comes packed with custom widgets!

Ad Widget

The Ad widget helps you to get more revenue from your page. Now you can sell advertising space by displaying an image and linking it to any (external) page.

Insert the URL of the ad image you want to display in the field ‘Ad URL‘. Make sure your URL has a leading http:// otherwise the image can’t be loaded! (Sample: http://www.any-website.com/my-adimage.jpg)

Select the format your ad has from the ‘Ad format‘ drop down. The setting 245x245 is for ads you want to display in the sidebar. The 197x197 format is for ads in the footer. If you select one of these two options the image gets ‘squeezed‘ to that size, no matter what the original size is. Even if this works with any image make sure the ad image you want to display has the appropriate format. Not only that the quality with image material in the right size is much better, the data volume the user hast to transfer is also used much more efficiently!

Use the original setting if you want to display the ad image no matter what size it has.

Fill in the URL of the website you want to link your ad to in the field ‘Ad target URL‘. Again, make sure you have a leading http:// in your URL. Otherwise the link isn’t working properly.

Pretext and post text are optional fields. Use them to display text above (pretext) or below (posttext) your ad.

In most cases you want to open the linked website in a new window, so tick the checkbox Open in new window.

Flickr Widget

The Flickr widget lets you display up to eight photos of a Flickr stream. In the field ‘Flickr ID‘ goes the user ID of the account you want to pull the pictures from. Use the link provided, to find out the Flickr ID you need.

‘Number of photos‘ is the field, where you define how much photos you want to display. Maximum is 8.

Select from the drop down ‘Type‘ if it’s a user or group account and from the drop down ‘Order‘ if you want to pull always the latest pictures or pull them by random.

Twitter Widget

The Twitter widget lets you display the recent tweets of any public twitter account. Fill the account name into the field ‘Username‘ and the number of tweets you want to display in the field ‘Number of tweets…‘.

If you want to get more followers, tick the checkbox ‘Show Follow me link‘ to display your username after the last tweet. The field ‘Your Follow me text‘ gives you the opportunity to add some text between the last tweet and the username.

Video Widget

Have you ever wanted to show a video to your users on every page? The video widget does exactly that.

Paste the embed code in the textarea you get with every video from YouTube or Vimeo and write an optional caption to appear below the video.

Please note that videos in the sidebar should have a maximum width of 245px and in the footer 197px.

Donation Widget

The donation widget lets you display a donation button to raise money for your project. You can edit the title of the widget and a text that describes what for the user can donate for. And of course, you can edit the URL to a website that takes your donation (e.g. PayPal) and the copy on the donation button itself.

Plug-Ins

The theme uses plug-ins to improve the abilities it offers. In the following you find a overview of the plug-ins it currently features.

All plug ins can be installed via the plugin installation panel that automatically shows not installed or activated plugins as required or suggested plugins.

To update a plugin uninstall it and then reinstall it via the panel. This downloads always the latest plugin version supported by the theme.

Portfolio

The portfolio plug-in gives you the opportunity to showcase your projects. Every project can be added to an unlimited number of categories, which automatically create a filter in the frontend (if the appropriate pagetype is used).

To create the portfolio make sure you have installed and activated the portfolio plug-in. Then create a new page and assign the desired portfolio page types to it. This page is used as a “container” to hold the portfolio items that you create via the portfolio menu added to your WordPress backend by the plug-in. Don’t forget to add the portfolio page to your menu.

When you have installed and activated the portfolio plug in you find a new menu item in your WordPress backend called “Portfolios”. Click > Portfolios > Add Portfolio to create a new portfolio item. Enter the Name of the portfolio and the content as for usual WordPress pages and add a featured image.

If you want to use the filter option in the frontend you need to assign the portfolio item to at least one category. Tick the checkboxes of current categories or create a new on. You can also list the portfolio item in multiple categories. It will be shown just once in the overview but your users will see it within every of the filtered categories. When you’re done click publish.

The portfolio items are listed in chronological order, depending on the creation date. To change the order in the frontend change the date they are created.

Contact Form 7

A plugin to create forms that can be send send viaemail. Create a form and insert it to the desired page with the individual form shortcode.

Revolution Slider

This premium plugin plugin lets you create stunning slideshows with effects very easily. It usually costs you additional money but is included in the purchase of the OrganicWeb theme for free. Please note, that you can not use the automatic update function of the plugin due to that reason as you do not have a plugin purchase code. This code is only available for direct customers.

To update the plugin, backup the slides you have created via the export function, uninstall the revolution slider plugin and reinstall it via the plugin installation panel that appears. If you have questions regarding the use of the plugin see the FAQ and documentation at:

http://www.themepunch.com/support-center

Resources

The theme uses various JavaScript libraries to improve the user experience.

jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. http://jquery.com

Colorbox

A lightweight customizable lightbox plugin for jQuery. http://www.jacklmoore.com/colorbox

Slides

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. http://slidesjs.com/

If you have questions that are not answered in this manual post in our Support Forum.