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

Installation


This video explains the installation process.

Theme Options


General Tab

a) 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). It's also here where you can define the content border width and color;

b) Branding - 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 - 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;

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

e) Color Scheme - 9 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;

f) Footer - Place some text here. HTML supported;

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

h) 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;

i) Google Analytics - Place your custom code here if you don't want to use any plugin for this;

 


This video shows the general options tab.

 


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 other options tabs.

 

Configuration

Content Managment

Portfolio/Portfolio Items


Recommended width for the images to use on these pages 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 Twisted 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 Template type resizes the thumbs so that they all have the same height, while the Masonry Template type sets the same width to all and height is variable. You can also mark the post thumbnails as Featured and this will make the thumb have the double size on the Grid Multiple Sizes template type;

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

 

Blog/Posts

Recommended dimensions for the image to use on this page are 1000px. 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 Twisted 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 Twisted 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 Centered Template type shows the a vertical and wide layout, while the Timeline template shows them around a centered timeline.

 


This video shows how to manage the blog entries.

 

Theme Slider Page Slider/Slides

Recommended dimensions for the image to use on the slider are 1280x1024px. 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 Twisted 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 liek on the theme preview landing page. In this case you must create a page and assign the Template "Page - Theme Slider" and then select on the panel below the groups of slides;

c.2) You can show those slides 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 mange the slides and the shortcode sliders.

 

Custom Backgrounds

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

Shortcodes and HTML elements

You The theme comes packed with a shortcode manager to simplify the content insertion process. To activate the shortcode manager button make sure that you select the HTML tab when editing a page or post content. You should see a button like this

When you click on that button wou'll be able to use most of the shortcodes below.


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]

Blockquote

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

Buttons

  • [theme_button type="theme_button small" link="http://www.abc.com" window="_blank"]SMALL BUTTON[/theme_button]
  • [theme_button type="theme_button medium" link="http://www.abc.com" window="_blank"]MEDIUM BUTTON[/theme_button]
  • [theme_button type="theme_button large" link="http://www.abc.com" window="_blank"]LARGE BUTTON[/theme_button]
  • [theme_button type="theme_button_inverted small" link="http://www.abc.com" window="_blank"]SMALL BUTTON[/theme_button]
  • [theme_button type="theme_button_inverted medium" link="http://www.abc.com" window="_blank"]MEDIUM BUTTON[/theme_button]
  • [theme_button type="theme_button_inverted large" link="http://www.abc.com" window="_blank"]LARGE BUTTON[/theme_button]

Carousel Images

  • [prk_carousel title="Our Friends"]
    [prk_carousel_single path="yourimage.jpg"][/prk_carousel_single]
    [prk_carousel_single path="yourimage.jpg"][/prk_carousel_single]
    [prk_carousel_single path="yourimage.jpg"][/prk_carousel_single]
    [/prk_carousel]

Latest Comments

  • [pirenko_comments title="title here " items_number="number here"][/pirenko_comments]

Latest Portfolio

  • [pirenko_last_portfolios title="title here " items_number="number here"][/pirenko_last_portfolios]

Latest Posts

  • [pirenko_last_posts title="title here " items_number="number here" rows_number="3" cat_filter="print,web"][/pirenko_last_posts]

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]

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]

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]

Pricing Tables

  • [prk_price_table featured="Title here" header="Header here" color="#00FF00" price="50 USD per Year" button_label="Sign Up" button_link="http://www.google.com"]
    <ul>
    <li>Something here</li>
    <li>Add more li if needed</li>
    </ul>
    [/prk_price_table]

Services

  • [prk_service name="Swift Coding" link="#" image="entypo_icn-gauge" ]Seed image him morning was years void land female fifth. Moved she'd light winged behold second and. Replenish divide Air waters earth.[/prk_service]

Tabs

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

Team Members

  • [prk_member name="name here" role="role here" image="image path here"]Member description here...[/prk_member]

224 Font icons

  • <div class="entypo_icn-link"></div>
All icon classes available can be consulted by opening the icons.png image located inside the Documentation folder.

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>
<div id="mc_signup">
<p>
<label>Email address:</label>
<input type="email" name="EMAIL" placeholder="Your email address" class="pirenko_highlighted" required />
</p>
<div class="theme_button">
<input type="submit" value="Sign up" />
</div>
</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 http://www.youtube.com/watch?v=hjBLV58VhYw.

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 includes folder and at the js folder. Here are some notes:
  • CSS - inside the css folder you'll find the 3 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
  • jQuery - main.js has to do with functions used on the frontend
  • 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