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

Installation

This theme is installed like any other WordPress Theme. Simply upload the astro.zip folder using the WordPress Dashboard or upload via FTP the astro folder into wp-content/themes folder.

After theme activation, you are advised to install one plugins that is bundled with the theme: Astro Framework. To take full advantage of all this theme has to offer, it's strongly recommended that you install this plugin. Here's a step by step video tutorial:

If you have any trouble opening this video you can view it online here https://www.youtube.com/watch?v=YQvbZo-3ACs.

One-click install demo content

The easiest and fastest way to generate sample posts, portfolio items, team members, slides and custom pages is using the feature One-click install demo content. Here's a video tutorial showing how to do this:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=R8mUyPXytXc.

Theme Options

Here's another video with a general overview of the theme management:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=kc7iKgMiIxg.

General Tab

a) Main Theme Options - Decide here if you want your theme to adjust to smaller screens. There are also some important options related with the content width:

i) Set the maximum width that the content area scales to (this is useful for really wide screens so that the content doesn't stretch too much);

ii) Ajax Calls: with this option ON the theme will attempt to load all content using Ajax Calls. This will speed up the website page loading process and allow some elements to have smoother transitions. If you have any trouble with pages that contain a plugin you can add a special class to the menu button that loads that page. The class name you must add is regular_load.

b) Fonts - There's a large number of google fonts available. The theme uses 2 types of fonts that can be selected here. If you need to add fonts that aren't bundled with the theme, you can use the method show here to add extra fonts: http://www.munto.net/blog/2013/08/27/extra-fonts-plugin-by-pirenko/.

c) Colors: General - Set the generic color scheme and style with these options. These colors will apply on multiple parts of the theme. You can also set up some background patterns here. If you need to add your own simply place your images inside the images/patterns/ folder that the theme will detect and make them ready for use;

d) Colors: Lines and borders - These values will apply to lines, borders and textfields. Some buttons will also receive a similar style (example: submit comment button). There's also the possibility to use shadows on some elements... Set the opacity to zero if you don't need any shadowing effect;

e) Colors: Buttons, Carousel and Other - These sepcific colors will apply specifically to the elements that are described near each color picker;

f) Sidebars - Just decide if you want to use the 2 sidebars that are available. The right sidebar option can be overiden on some certain page types too;

Logo Bar

Not much to say here... Set the colors for the vertical bar and also your footer text. After that upload your own brand 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;

Menu Bar

Customize here the looks of the left bar where the menu and left sidebar is displayed. Besides the menu bar width you can customize entirely the color scheme.

Left Sidebar

Once again you can fully tweak the color scheme for this specific sidebar. This element will stick to the lower part of the screen if there's enough space. On screens that don't have enough vertical space the sidebar will stick under the menu and a scrollbar will be displayed if needed.

Blog

Besides other options whose name describes exactly what they do here are some notes:

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

b) 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 network sharing buttons;

Portfolio

Once again besides other options whose name describes exactly what they do here are some notes:

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

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

c) Social Sharing - Show/hide/select the social network sharing buttons;

Translations

There are 2 methods to translate the theme: using the Astro Options and using .mo/.po files that can be combined with WPML. 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;

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 and vice-versa;

Custom Scripts

a) If you are using Google Analytics you can place the tracking code here;

b) The Custom CSS textfield is extremely important to make adjustments to the theme styling;

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

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;

Here's another video tutorial showing the complete theme options panel:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=-x8nn3HMzcA.

Configuration

Content Management

Blog/Posts

Recommended dimensions for the image to use on this page are 1200px. Once again this value can be lower if your Maximum 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 additional notes:

a) If you want to use a specific color for this post just set it up on the Featured Color option field;

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

c) 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 Featured image on Lightbox and Slideshow" inside the Theme Post Options panel. In this case the theme will fetch the second image/media to the lightbox and it will be the first image of the single page slider. You can set up to 10 images/videos for each news entry inside the same window;

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

e) 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 descriptions under, while the Grid Template shows them with a "boxy" style;

f) To set up multiple blogs you need to use the Theme Blog Options panel. This window will show after you select a page with the template "Blog Page" and there you can decide what categories you want to use;

Here's a video tutorial shwowing how to manage single blog posts:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=_yqnVRgIGtU.

Portfolio/Portfolio Items

Recommended width for the images to use on these pages is 1200px (height is variable). This value can be lower if your Maximum 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 additional notes:

a) If you want to use a specific color for this post just set it up on the Featured Color option field;

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

c) 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 Featured image on Lightbox and Slideshow" inside the Theme Portfolio Options panel. In this case the theme will fetch 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;

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

e) 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 to show a big Carousel like the theme preview landing page you should opt for the Portfolio Carousel Page Template. As an alternative you can use the Grid template on which the theme will resize the post featured images to create a perfect aligned grid. You have also the Masonry Template if you don't want the theme to crop the thumbnails and prefer that each image has it's own height;

f) To set up multiple portfolios you need to use the Theme Portfolio Options panel. This window will show after you select 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);

g) On single portfolio pages with fullscreen layout you can have a title and a description associated with each image. To edit this information for each image go to Media Library and edit the Title and Caption image fields. You will also need to activate the text output option under Astro Options>Portfolio tab>Portfolio: Image Descriptions;

Here's a video tutorial shwowing how to manage single portfolio posts:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=_I78adQsdIE.

Theme Sliders/Slides

Recommended width for the images to use on these pages is 1200px (height is variable). Just like before value can be lower if your Maximum 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 additional 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 Theme Slide 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) you can select it when you are adding a slider to a page;

d) The theme has a special page template to show a fullscreen slider. In this case you must create a page, select the template Page - Fullscreen Slider and, after saving it, select the necessary options displayed under the page content;

e) You can also show those theme sliders using the WPBakery Page Builder Plugin and selecting the Theme Slider button;

Important: When using the WPBakery Page Builder the slides group must 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.

Under each Team Member page content you have some options under the page content. Just on note to let you know that if you don't want to link the thumbs to team member single pages you can do this by selecting the respective option on this very same options panel;

Teams can be added to pages using the WPBakery Page Builder by selecting the options Team Members.

Pages Templates & 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) Besides WordPress default page the theme offers 2 types of pages: Classic Layout and With Sections. The difference between these two pages types has to do with the maximum width of the content background. 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. You can also set up some background patterns here. If you need to add your own simply place your images inside the images/patterns/ folder that the theme will detect and make them ready for use;

c) If you want to add some extra vertical spacing between elements simply add an empty row between them. There also an element called "Vertical Spacer" that you can add using the composer on which you can simply set up a value in pixels for a margin (positive or negative);

d) Under each page content you'll find more options such as the title text, title color, featured slider and sidebar display. The featured slider allows you to display a full width slider on top of a page (even if it's a Classic Layout page);

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>General>Styles and Scripts;

c) The theme provides some extra options under Astro Options>Woocommerce tab;

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:

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="astro_chimp"> Subscribe and stay updated with the latest news from us. We never spam! </div>
<div class="astro_chimp">
<div class="astro_chimp_label">First Name:</div>
<input type="text" name="FNAME" class="pirenko_highlighted">
</div>
<div class="astro_chimp">
<div class="astro_chimp_label">Email:</div>
<input type="email" id="mc4wp_email" name="EMAIL" required class="pirenko_highlighted" />
</div>
<div class="prk_minimal_button">
<input type="submit" value="Ok, Sign Me Up" />
</div>

Final Notes

Theme Update

The theme will be updated whenever new features are added or bugs appear. 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.

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 and inc/helper.php controls most of the frontend 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

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