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 the Aria WordPress Theme!

Installation

The theme folder has more than 5MB so due to WordPress restrictions it must be uploaded via FTP and not under Appearance>Themes;

 

This video explains the installation process.

Theme Options


General Tab

a) Main Layout Options - Decide here if you want your theme to adjust to smaller screens. You can set also the maximum width that the center are scales to (this is usefull for really wide screens so the that content doesn't stretch too much);

b) Background - From top to bottom the theme searches for an image, then for a pattern and only after that the solid color. So if you set an image it has priority on the other options. If a background image is set for a specific page it will also override these settings that apply in general to all the pages of the theme;

c) Fonts - There's a large number of google fonts available. Let me know if you need any sepcific font to be added;

d) Color Scheme - 13 colors are used all over the website and their names are self explanatory. Set also the opacity used on buttons and some other background blocks;

e) Borders and Lines - Set lines and shadows color and their opacity here. Set the opacity to 0 if you don't need any shadowing effect;

g) Sidebars - Just decide if you want to use the 2 sidebars that are available and define the number of widgets per row on the bottom sidebar;

f) Revolution Slider - Turn it off if you don't need it so that the files aren't included;

 

This video shows the General Tab Options.

Branding

Not much to say here... Just upload your own images and they will be used across all the theme pages. You may also upload special images for high resolution screens. Depending on your logo configuration you might want to adjust the menu vertical placement and you can do this by adjusting the menu vertical displacement value;

 

Header

a) Header - Customize here the looks of the bar where the page titles are displayed;

b) Top Bar - Style the small top bar above the menu or simply turn it off. Add up to 6 links to your preferred social networks. They will be displayed near the menu;

 

Footer

a) Footer - Lots of customization possibilites here same as for the header;

b) Footer Small Bar - Style the small top bar under the footer. You can also place you Google anlaytics full code here if you need to;

 

Portfolio

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

b) Number of posts to load on each event - set how may items are loaded when the load more posts button is pressed;

c) Default Single Posts Layout - Wide or half. This option can be overiden on each single post on it's respective options panel;

d) Show Related Posts - decide if 3 related entries should be displayed under the single portfolio entry;

e) Social Sharing - show/hide/select the social netowrk sharing buttons;

 

Blog

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

b) Force images to have the same height - decide if the images should be cropped to have the same size on parent blog pages;

c) 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 netowrk sharing buttons;

 

Contact

All information is self explanatory. Just a small not to clarify that the Contact page content will be displayed on top of the contact form. This content is optional;

 

Translations

There are 2 methods to translate the theme: using the Aria Options and using .mo/.po files that can be combined with WPML or other similar translation plugins. You have the option to decide that on this translation tab. If you only need one language I 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 extremelly important to make adjustments to the theme styling;

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

 

WooCommerce

If WooCommerce plugin is installed some extra options can be set up here. One quick note to inform that if the sidebar is shown by default and on a specific page it should be hidden, this can be done by adding ?sidebar=n to the URL;

 

Advanced

Change some of the theme custom post types slugs that will be show on the URL browser address bar. Do not use any special characters here;

 

This video shows the Branding, Header, Footer and Contact Tabs Options.

 

This video shows the Translations, Custom Scripts, WooCommerce and Advanced Tabs Options.

Configuration

Content Management

Portfolio/Portfolio Items


Recommended width for the images to use on these pages is 1200px (height is variable). This value can be lower if you Center Content Width in pixels is much lower than this. 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 aditionnal notes:

a) You may use the portfolio categories to filter the entries. You may also add some tags to these items;

b) 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 Features image on Lightbox and Slideshow" inside the Aria Portfolio Custom Options. In this case the theme will fecth the second image/video to the lightbox and it will be the first image of the slider. You can set up to 10 images/videos for each news entry inside the same window;

c) 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>

d) 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. If you want the Portfolio items always visible you can use also the Titled Portfolio template. As an alternative you can use the Grid template on which you can also mark the post thumbnails as Featured and this will make the thumb have the double height of the normal thumbs;

e) To set up multiple portfolios you need to use the Aria Portfolio Template Custom Options. This window will show after you save a page with the template "Portfolio Page" and there you can decide what categories you want to use. It's here where you decide too if you want the images to link to a single page or open a lightbox (enlarged image);

f) For each Portfolio Page you can use the Ajax loading option (this will make the single post show without reloading the page).

 

Blog/Posts

Recommended dimensions for the image to use on this page are 1000px. Once again this value can be lower if you Center Content Width in pixels is much lower than this. 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 aditionnal notes:

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

b) 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 not select the default option to "Use featured image on slideshow" inside the Aria Custom Post Options window. In this case the theme will fecth the second image/video to the lightbox and it will be the first image of the slider. You can set up to 10 images/videos for each news entry inside the Aria Custom Post Options window;

c) 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>

d) 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. The Classic Template type shows an image on top with descriptiosn under, while the Timeline template shows them around a left timeline;

 

Theme Slider Page Slider/Slides

Recommended dimensions for the image to use on the slider are 1280x1024px. Just like before value can be lower if you Center Content Width in pixels is much lower than this. 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 aditionnal 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 Aria Slides Custom 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) and assigning some slides to this entity, you have 2 ways to use that group of slider:

c.1) You can show those slides directly on the top of a page like on the corporate theme preview landing page. In this case you must create a page and select the option show slideshow on top of this page ( then select on the option below the groups of slides);

c.2) You can show those slides using the WPBakery Page Builder Plugin and selecting the Theme Slider button;


Important: The category should be the Group Slug (not the Group Name)

 

Teams/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. Teams can be added to pages using the WPBakery Page Builder by selecting the options Team Members;

 

Custom Pages & WPBakery Page Builder

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

a) There are 2 types of pages: Classic Layout and Section Pages. If you don't need any section to fill the whole width of the screen use the Classic Layout Template. On the other hand, if you are going to need zones that fill the whole screen horizontally you must use a Page with Sections;

b) If you want to create a full width section 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;

c) If you want to add some extra vertical spacing between elements simply add an empty row between them;

d) If you want to use a special header with an image set up a featured image for that page;

e) Under the page content you'll find more options such as headings color and sidebar display;

 

This video shows how to create pages with the WPBakery Page Builder.

Revolution Slider

This great plugin comes with a lot of cutomization options and a good way to start is by importing some demo content. The plugin developer has some samples here http://www.themepunch.com/codecanyon/revolution_wp/index-exports.html

After grabbing one of these samples create a new slider and select the import/export option under the slider options;

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 dimenstions. 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 color scheme is set up under WooCommerce>Settings>Genera>Styles and Scripts;

Using Weglot for multi-language sites

If you need to have multiple languages with this theme, you can consider using the Weglot plugin. They have a free and paid version. Some quick remarks on this plugin:

  • Add Weglot to this theme for a multilingual website in 5 minutes, fast integration without any code. An SEO optimized multilingual plugin, Weglot detects, translates and displays your website under language subdirectories to give you full visibility in your new markets.
  • Add 100+ languages with Weglot and choose your translation quality. Make use of a first layer of machine translation which you can then manually edit or order professional translations directly inside the Weglot Dashboard.
  • WordPress integration: https://weglot.com/integrations/wordpress-translation-plugin/

Using WPML for multi-language sites

If you need to have multiple languages with this theme, you can also check 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="aria_chimp"> Subscribe and stay updated with the latest news from us. We never spam! </div>
<div class="aria_chimp">
<div class="aria_chimp_label">First Name:</div>
<input type="text" name="FNAME" class="pirenko_highlighted">
</div>
<div class="aria_chimp">
<div class="aria_chimp_label">Email:</div>
<input type="email" id="mc4wp_email" name="EMAIL" required class="pirenko_highlighted" />
</div>
<div class="theme_button small">
<input type="submit" value="Ok, Sign Me Up" />
</div>

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 css folder you'll find the 5 CSS files used all over the theme. Their names explain where they are used and other.css contains all styles related with plugins and widgets
  • PHP - functions.php controls most of the frontend content
  • PHP - theme_options.php controls most of the backend custom content
  • 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 - admin_scripts.js has to do with functions used on the backend

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