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 Pixia WordPress Theme!

Installation


This video explains the installation process.

Theme Options


General Tab

a) Liquid 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) Logo and favicon images - Nothing to say here... Just upload your own images and they will be used across all the theme pages. 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;

c) Background managment - 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. The overlay image it's a semi transparent pattern that place on top of the background image or pattern. This is usually used only when there's a background image.;

d) Header and Footer - Add some textures for the background and just set a color and it's relative opacity;

e) Color Scheme - 5 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 like tags;

f) Shadows - Set the shadows color and their opacity here. Set the opacity to 0 if you don't need any shadowing effect;

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

h) Sidebars - Just decide if you want to use a the small sidebar under the menu and also the sidebar and at the very bottom of the page.

i) Footer Text - Set here the text to be shown on your page footer (HTML supported).

 

Translations Tab

It's important to explain how the theme translates the content displayed, because you have a translations tab, but you may also use .po files that are included on the "lang" folder. The priority on translations are the ones that you have set on Pixia Options>Translations Tab! If the values here are the default ones then the theme will search if there are any .po files provided and will apply those translations. If you are familiared with working with .po files I recommend you to disregad the translations tab and use them to translate the theme.

Custom Scripts Tab

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;


 

This video shows the main theme options.

 

Configuration

Content Managment

Portfolio/Portfolio Items


Recommended width for the images to use on this page is 1200px (height is variable). 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 not select the default option to "Use featured image on slideshow" inside the Pixia 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. The Classic page resizes the thumbs so that they all have the same height, while the masonry option sets the same width to all and height is variable.

e) To set up multiple portfolios you need to use the Pixia 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).


 

This video shows how to manage the portfolio.

 

Blog/Posts

Recommended dimensions for the image to use on this page are 1200px. 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 Pixia 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 Pixia 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 page shows the usual blog layout, while the masonry shows them using a liquid layout.


 

This video shows how to manage the blog.

 

Homepage Slider/Slides

Recommended dimensions for the image to use on the slider are 1920 x 1280 px. Here are some aditionnal notes:

a) 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 Pixia Slides Custom Options;

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 can add a slider using this shortcode (for correct slider interactions you should also set a unique id):

[slider id="first_slider" category="first_group"][/slider]


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

 

This video shows how to manage slides.

 

Custom Backgrounds

You can assign specific backgrounds to Pages (only pages) by setting their featured image.

Shortcodes and HTML elements


Blockquote

  • [pirenko_blockquote bf_author="Author - " author="John Doe"]Ut placerat sollicitudin porta.[/pirenko_blockquote]

Messages

  • [error_box]<strong>Alert:</strong>This is a message![/error_box]
  • [warning_box]<strong>Alert:</strong>This is a message![/warning_box]
  • [info_box]<strong>Alert:</strong>This is a message![/info_box]

Unordered lists

  • [list_with_icons icon="minimal_check"]
    <ul>
    <li>Unordered item 1</li>
    <li>Unordered item 2</li>
    <li>Unordered item 3</li>
    </ul>
    [/list_with_icons]
  • [list_with_icons icon="green_check"]
    <ul>
    <li>Unordered item 1</li>
    <li>Unordered item 2</li>
    <li>Unordered item 3</li>
    </ul>
    [/list_with_icons]
  • [list_with_icons icon="squared"]
    <ul>
    <li>Unordered item 1</li>
    <li>Unordered item 2</li>
    <li>Unordered item 3</li>
    </ul>
    [/list_with_icons]
  • [list_with_icons icon="rounded"]
    <ul>
    <li>Unordered item 1</li>
    <li>Unordered item 2</li>
    <li>Unordered item 3</li>
    </ul>
    [/list_with_icons]

Tabs

  • [prk_tabs][prk_tab title="Title1"]Tab Content1[/prk_tab][prk_tab title="Title2"]Tab Content2[/prk_tab][/prk_tabs]

Accordion

  • [prk_accordion][prk_ac_single title="Section 1"]Text here.[/prk_ac_single][prk_ac_single title="Section 2"]Text Here.[/prk_ac_single][/prk_accordion]

Buttons

  • [theme_button link="http://www.google.com"]This is a sample.[/theme_button]
  • <button class="prk_button">Default</button>
  • <button class="prk_button ui-button-primary">Primary</button>
  • <button class="prk_button ui-button-success">Success</button>
  • <button class="prk_button ui-button-error">Danger</button>
  • <a class="prk_button">Anchor</a>
  • <input type="submit" class="prk_button" value="Submit"/>

Layout

  • [one_half]Your content here[/one_half]
  • [one_half_last]Your content here[/one_half_last]
  • [one_third]Your content here[/one_third]
  • [one_third_last]Your content here[/one_third_last]
  • [two_third]Your content here[/two_third]
  • [one_fourth]Your content here[/one_fourth]
  • [one_fourth_last]Your content here[/one_fourth_last]
  • [one_sixth]Your content here[/one_sixth]
  • [one_sixth_last]Your content here[/one_sixth_last]
  • [five_sixth]Your content here[/five_sixth]
  • [five_sixth_last]Your content here[/five_sixth_last]

173 Buttons with icons

  • <span class="ui-icon ui-icon-carat-1-n"></span>
All icon names available can be seen inside the custom.css file (near line 2450).

 

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:

<p>
Subscribe and stay updated with the latest news from us. We never spam!
</p>
<p>
<label>Email address:</label>
<input type="email" name="EMAIL" placeholder="Your email address" class="pk_contact_highlighted" required />
</p>
<div class="theme_button">
<input type="submit" value="Sign up" />
</div>

Using WPML for multi-language sites

If you need to use multiple languages with this theme, I 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:

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

Using High Resolution Images


If you want to use retina ready image simply make sure that you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server. The image must be on the same directory as the normal image.

As an example, if you have an image on your page that looks like this:
<img src="/images/my_image.png" />
The script will check your server to see if an alternative image exists at this path and will load it like this:
<img src"/images/my_image@2x.png" />

Customization Tips


If you need to dig into the code to make some sort of adjustments the most important files are located at the includes folder and at the js folder. Here are some notes:
  • CSS - inside the css folder you'll find the 2 CSS files used all over the theme
  • PHP - custom.php controls most of the frontend content (located on the "inc" folder)
  • PHP - theme_options.php controls most of the backend custom content
  • PHP - shortcodes.php controls the shortcodes
  • jQuery - main.js has to do with functions used on the frontend
  • jQuery - admin_scripts.js has to do with functions used on the frontend

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