“AquaTheme - Premium WordPress Template” Documentation by “BlueOwlCreative” v1.6

“AquaTheme - Premium WordPress Template”

Created: 10, Mar.2013
By: BlueOwlCreative
contact@blueowlcreative.com Support Forum

If you have any questions that are beyond the scope of this help file, please feel free to visit our Support Forum and ask any questions there.
We have 5 STAR! friendly and timely support for everyone who purchased our theme.
Get it HERE if you haven't yet. Thank you!

Table of Contents

  1. Features
  2. Basic Installation
  3. Migration from another theme
  4. Importing the Demo Data
  5. Setting up your Homepage
  6. Setting up your Blogpage
  7. Setting up your Portfolio page/Items
  8. Setting up your Contact page
  9. Styling your Theme
  10. Widgets + Columns
  11. Using Shortcodes
  12. How to Translate
  13. Setting up Sliders
  14. Resource Files

A) Features - top

AquaTheme - Premium WordPress Template is a Premium Responsive, HTML5/CSS3 WordPress theme that features a clean and slick design that is suitable for a wide variety of websites. It utilizes Skeleton CSS Framework and is 100% tablet/phone friendly. AquaTheme - Premium WordPress Template also includes Revolution slider, FlexSlider, jCarousel, Google Web fonts, unlimited colors, plenty of Customization Options and more to contribute to an enjoyable, intuitive and functionally exhaustive user experience. The theme includes plenty of custom Shortcodes: Headers, Tabs, Accordions, Testimonials, Messages, Lists, Buttons, Tooltips, HighLights, several presets of Text Titles, tables and some awesome looking icons you can use for your featured text sections. AquaTheme - Premium WordPress Template is also Cross Browser compatible and has very clean code and documentation.


Version 1.6 Features:

Files updated in this version:

Version 1.5 Features:

Files updated in this version:

Version 1.41 Features:

Version 1.4 Features:

Files updated in this version:

Version 1.3 Features:

Files updated in this version:

Version 1.2 Features:

Files updated in this version:

Version 1.1 Features:

Files updated in this version:

B) Basic Installation - top

To install this theme you must have an operating version of WordPress already installed. For information regarding WordPress installation, please visit - http://codex.wordpress.org/Installing_WordPress

Extract the zipped package downloaded from ThemeForest to your desktop, in it you will find Aqua.zip file which is the wordpress theme.

You can install the theme in two ways:

After uploading the theme, you have to activate it. Navigate to Appearence -> Themes page to activate your new theme.

C) Migration from another theme - top

If you are migration from a differen theme you need to make sure you resize the previously uploaded images in order to be able to reuse them with Aqua. Luckily you have a cool plugin that does this automatically for you - install Regenerate Thumbnails plugin and run the resizing procedure.

D) Importing the Demo Data - top

We have included the an XML file that contains all of our Demo data, You may find this useful in setting up your theme. Please note, the XML file does not include the slider data/images. Instructions on how to import follow:

1. Locate the file in the root folder of your package - "aquatheme.Demo_Data.xml"
2. Navigate to WP Admin -> Tools -> Import.
3. Select and install WordPress importer.
4. Select the XML file and upload it. Wait for the content and the images to Import.
5. To enable the Menu we are using go to: Admin -> Appearance -> Menus page and select the "Main Navigation" option for the Main Navigation of your website.
6. Next, navigate to WP Admin -> Settings -> Reading Settings and set a front page and a posts page.
7. Continue setting up your Theme using Appearance->Customize and Appearance->Theme Options.

E) Setting up your Homepage - top

Homepages are built via the powerful shortcodes that come with the theme. To setup your own homepage, create a new page with "Default Template" page template, name it Home and paste the following code in the HTML editor (TEXT not VISUAL).

Homepage a few Shortcode Example:

You can also create your own styled Homepages by using the VISUAL editor and using the numerous shortcodes we have provided with the theme.

To then set your newly created Page as your Homepage, navigate to WP Admin -> Settings -> Reading Settings and set the newly created page as front page.

F) Setting up your Blog Page - top

To create your BlogPage create a new page with "Default Template" page template and name it "Our Blog".

To then set as your Blog page then navigate to WP Admin -> Settings -> Reading Settings and set the newly created page as "Posts page".

G) Setting up your Portfolio Page - top

To create your Portfolio Page create a new page with "Template - Portfolio Page" page template and name it "Portfolio".

To add Items to your Portfolio use the custom post type created for them. You can also create categories for your items that can later automatically be used to filter your portfolio items by users.

Portfolio Item Shortcode Example:



H) Setting up your Contact Page - top

To create your Contact Page create a new page with "Contact Page" page template and name it "Contact Us".

You are pretty much done here, if you want a map with your address to show simply go to Appearance -> Theme Options Contact Page and add your Google map address there like for example: "540 W 50th St, New York, New York, United States". You can also set an email different than WP admin email to receive mails from the contact page form.

I) Styling your Theme - top

Aqua has plenty of customizable options that we have developed for your ease of use. To customize your Website Name/Slogan use the Appearance->Customize window. You can also pick your choice of menu style preset there from 4 premade cool menu styles. Color options are also available for the Custom Menu Modes. In the CUSTOMIZE window you can also pick your main website Background/Background image + Main Highlight Color and preview the changes right away. You may also decide on a previously created custom menu for your main navigation as well as static page for your Home page and one for your Posts (Blogpage).

Further custom theme options are available at Appearance -> Theme Options. Here you can upload a custom logo image for your website, position it left/top into the header, Upload a custom Favicon + set all header Information you want to have like phone number/email contacts + Social icons + links. Under the "Typography" subsection you can set custom Google Fonts for various subsections/elements in your website + font-size for your navigation text. Next is the General section where you can setup your Layout type, enable/disable Breadcrumbs, edit custom Footer Text, Footer Social Icons, Sidebar layout, Enable Related Projects in Portfolio + Portfolio Items per Page. Under Sidebars you can create Dynamic Sidebars that you can later add Widgets to from the Widgets area and assign to specific Pages/Post. In the Contact Page section you set your Contact Page details.

J) Manage Widgets - top

Managing your widgets takes places on the Appearance->Widgets page. You can add/remove widgets here for your precreated sidebars or your custom sidebars (custom sidebars are created at Appearance->Theme Options->Sidebars). The default Sidebars are Aqua Sidebar (used in regular Post Pages using the "Default Template"). For our Demo we've used: "Custom Menu", "Aqua Latest Posts", "Tag Cloud" + Text Widgets in which we have Pasted Shortcodes for Testimonial Carousel and Accordion (more on shorcodes in the next Section). There are also 4 predefined Widget Areas for the footer section in which you can place any widgets you want like we have.

K) Using Shortcodes + Columns - top

Aqua is based on the "Skeleton Grid CSS Framework" - Full width page has 16 columns, a page with a sidebar is 12 columns. The attribute "width" is important here and sets your column width. You can either use the number of columns (out of 16) that should decide your column's size - for example 'four' or you can use a convention like '1/2', '1/3', etc. Another important attribute is 'position'. You have 3 options here - 'first', 'none' or empty and 'last'. If 'first' is used then no starting margin will be used, if 'last' is used then no ending margin will be used + it's assumed that this column is last in current row and floats will be cleared. Make sure you play around with those to get the way it works + get the best result for your specific page/layout. Also note some of the shortcodes like Testimonials require the setting of a width attribute as well that should conform to the columns' width convention.


Aqua comes packed with plenty of custom shortcodes allowing you to add/customize complex styled content easily. The shortcodes are available in the formatting options on the post / page Visual text editor. Our shortcodes buttons are on the last row. Just hover any button to see which shortcode it is for; click it to use the shortcode and it will be automatically added to your post, then you need to populate the content. Make sure you use the front end preview to make sure you got it all right. Some shortcodes require some playing around with them to see how they work (getting their attributes right etc). Using columns shortcodes you can build your own layouts. The Page columns shortcodes are a bit tricky, make sure you spend some time understanding how the columns work. There is a shortode for a single column but you need to populate its attributes, I would suggest using the dropdown for the Column Rows so you get the hang of them.

Post Carousel (most complicated shortcode) explained:

[posts_carousel heading="Latest Posts" post_type="post" category_slug="" order_by="date" order="DESC" limit="10" meta="yes" excerpt="yes" excerpt_char_limit="64" exclude_current="yes" width="four columns" scroll_by="4"][/posts_carousel]

Attributes:
heading - The Title above the Carousel.
post_type - The Type of Posts we want to display (post/portfolio/service etc).
category_slug - Filter Posts in the carousel by category slug name.
order_by - The OrderBy Clause in the WP_Query (author, date, title etc. Full list here)
order - The Order clause in the WP_Query (ASC/DESC), more here.
limit - How many items to show
meta - Display the meta data, like date, author etc below the Post title (yes/no)
excerpt - Show an excerpt of the Post below the Title(yes/no).
excerpt_char_limit - How many characters to show of the excerpt
exclude_current - Exclude the current Post from the posts carousel (useful when on a Post page)
width - Width of each item
scroll_by - Should equal the number of items seen on the screen by default, so they are scrolled at once!

L) How to translate - top

The translation file is located in languages folder "/wp-content/themes/Aqua/languages". Edit the .po file using POEdit, use the translation field to add your Translations. Once you are done save file with your language name like so de_DE.po. It will automatically generate both a .po and .mo file for your translation. Next edit wp-config.php located in the root folder of your wordpress installation and define the WPLANG prefix with your language name which should be uniform with the translation file name.

M) Setting up Sliders - top

Aqua ships with two types of Cool sliders - RevolutionSlider and FlexSlider. Both sliders can be added to any page via shortcodes.

FlexSlider

To add a flexslider, do the following:


RevolutionSlider WP

RevolutionSlider for WP is slighly more complex to setup but is also much more powerful and once you get used to it you can create awesome sliders with stunning effects!

Please Note: Separate Documentation on RevolutionSlider is included with the package! We find the interface of the plugin pretty straightforward but should you have any problems with it feel free to browse through its documentation.

To install RevolutionSlider, and add it to a page do the following:

N) Resource Files - top

AquaTheme uses the following CSS files (If you are willing to change the looks of an element you need to edit these files):
Aqua/stylesheets/carousel.css
Aqua/stylesheets/flexslider.css
Aqua/stylesheets/prettyPhoto.css
Aqua/stylesheets/skeleton.css
Aqua/stylesheets/stylesheet.css

AquaTheme uses the following JS libraries:
Aqua/js/common.js - Common Theme Javascript functions
Aqua/js/jquery-1.7.2.min.js - jQuery core files
Aqua/js/jquery.easing.1.3.js - jQuery library for smooth transitions
Aqua/js/jquery.flexslider-min.js - FlexSlider plugin
Aqua/js/jquery.jcarousel.min.js - jCarousel plugin
Aqua/js/jquery.prettyPhoto.js - PrettyPhoto Library (zoom)
Aqua/js/jquery.quicksand.js - QuickSand Library
Aqua/js/jquery.tipsy.js - Tipsy Library

AquaTheme Images:
The images used are only for presentation purposes, unless stated in the item description.

If you have any questions that are beyond the scope of this help file, please feel free to visit our Support Forum and ask any questions there. We have 5 STAR! support for everyone who purchased our theme. Get it HERE if you haven't yet. Thank you!

BlueOwlCreative

Go To Table of Contents