Astron is a perfectly scalable, responsive, retina ready, performance and SEO optimized, multipurpose WordPress theme. It will fit every project, Huge or tiny. From huge corporate portals to studio or personal sites. Astron is a clean, modern and responsive WordPress and BuddyPress theme that can be used for, basically, any type of website or content. This theme is not dependent on BuddyPress or bbPress, and functions awesome without them.This Theme is built on the awesome Visual Swirl Framework and offers support for the WPML MULTI LANGUAGE plugin, in case you require it. Astron will be a great foundation for your next project!

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user contact page form here. Thanks so much!

Ensure that you have installed the latest and stable version of WordPress before installing this theme. Now follow the steps below.

If you have trouble uploading the theme via WordPress please proceed to the following:

  • Make sure that you are upload the file that is within
  • Make sure the file size of does not exceed your upload file size limit.
  • If none of the above mentioned does not work you will need to upload the theme using a FTP client such as FileZilla. To set up your FTP client to connect to your website see: Upload the Astron folder to your WordPress themes directory wp-content/themes/.

After you have installed the theme successfully, you can optionally import the supplied demo data in order to get a feel for things. If you would rather skip that and continue setting up your theme, please continue below.


Home and Blog Setup

  • Begin creating a new page by navigating to Pages › Add New. Here onwards you can basically give the page a title i.e. “Home” select the home page template in the Page Attributes panel, click the Hompage template you wish to use from the template drop down menu, and click Publish.
  • Then proceed by creating a blog page. You will only need to enter in a title for this page as there is no page template to assign.

This theme is packaged with tons of awesome and powerful features that give you the ability and tools to create beautiful and unique layouts with no hassle!

This theme comes with one custom menu cautiously positioned in the header area. During the theme activation, it is recommended that you set it up to ensure appropriate navigation.

  • Set up your custom menu by simply navigating to Appearance › Menus.
  • Enter your menu title and click the “Create Menu” button.
  •  To add items to your menu you can use the widgets on the left side.
  •  After you have added all your menu links that you desired, save your menu and attach it to the theme by selecting it from the “Theme Locations” Widget. And make sure you save once more when you're done.

The options panel comprises all of the theme's extensive configuration options.

  • To find the panel, navigate to the Visual Swirl icon followed by your theme name in the left-hand menu. In your panel you have the ability to modify & adjust numerous core aspects that structures your themes framework.

Astron provides you with a powerful way to feature any content your heart desires that makes adding, editing, ordering and deleting media so much easy.

Visual Swirl Slider – Comes packaged with a parallax slider and video backgrounds that can be illustrated unlimited number of times with several positions, hardware enhanced, touch-friendly, configuration options for pagination & arrows.

The theme’s most powerful and state of the art feature, Visual Swirl has spent a lot of time developing extensive, yet easy to use set of shortcodes that will enhance your site dramatically.

  • To open the shortcode window tab, click the "VSwirl Shortcodes" button next to the add media button.
  • Than select a shortcode of your choice. inserted into the text box.
  • Then fill in your desired settings for that specific shortcode.
  • Finally, click the "Add Shortcode" button which will insert your shortcode into the text box.
  • The following image represents a brief description.

6.1 Columns

Whenever you are dealing with columns it is vital that you observe the “Last Column” check box for the last column in every row.

NB: To achieve a row, it is of paramount importance that the columns in that row must add up to one whole. If these requirements are not met, your columns will not do function correctly as intended. Columns can display anything specified into them, including all shortcodes except for the carousel shortcode, which should be on its own and not in a column.

6.2 Full Width Section

Astron provides you options to create full width sections on your pages. This shortcode extends its backgrounds to stretch all the way across the screen. You can either select a solid color of your choice or upload an image that will be used as the background of this shortcode. This shortcode also gives you the option to parallax the background if you uploaded an image, which is useful when creating more fascinating sections.

NB: This feature can only be used on full width pages (with no sidebars) - Thus it will function if you use it on blog posts or on the portfolio more details page.

6.3 Animated Images

This shortcode allows you to animate a given image that will respond or commence when the user scrolls to the image’s location on the page. You are given three options to choose which allow you to control the uniqueness of your layouts.

6.4 Testimonial Slider

This allows you to display your specified testimonials in a well formatted slider, and goes well with the full width section for a more appealing area to show off your testimonials.

6.5 Centered Heading

This shortcode aligns the heading tag in the center and comes with an optional subheader below it. This is ideal to use at the top of pages or to present a new section in a page.

6.6 Divider

This shortcode makes a divider to separate your sections.

NB: There is only one option available to select and it will regulate whether or not to show a line in the divided space.

6.7 Button

The button shortcode is a simple way to add a styled button quickly to your page. Simply choose the suitable size, fill out the two fields and that’s it.

6.8 Icon

This theme is packaged with the FontAwesome web fonts. To choose your icon, select your desired size and add the shortcode to the editor.

NB: The size attribute is very vital in determining how the icon will display, so make sure you set it to an appropriate size.

6.9 Toggle Panel

This shortcode creates a toggle panel or an accordion that expands and displays more content when the user clicks on the title.

6.10 Tabbed Section

This shortcode creates a tabbed interface for the user to click through and alter or adjust the content appropriately. To create this shortcode just add or remove tabs as desired until you are prepared to place the shortcode in the editor.

6.11 Bar Graph

The Bar Graph shortcode creates an animated horizontal bar that propagates to the given percentage, which is ideal for displaying a info graph or other data that you desire to visually present.

6.12 Team Member

The team shortcode takes in all the information that you specify for a team member and formats it pleasantly. It is recommended to use a 1/3 column for this shortcode. If you provide more than 3 team members, you are given the option to create a carousel and add each team member on a slide.

This shortcode comes with two configuration options for your suitability. Simply choose your desired settings and add the shortcode into the editor.

NB:  The carousel shortcode inserts the format of the shortcode and leaves the content empty for you to fill in. Reasonably the carousel will contain other shortcodes or images which are best done in the editor first, and not inside the shortcode generator.

6.14 Clients

This shortcode allows you to setup all of your clients in either a column or carousel based layout. Simply select the desired number of columns, check whether or not you would like a carousel, and start uploading your images.

6.15 Pricing Table

This shortcode allows you to display any pricing, plans, membership options or payment options you wish to arrange in an attractive manner. This shortcode comes with one option to choose. After you choose your desired number of columns, the shortcode will be inserted into your text editor, where can you edit as desired.

6.16 Recent Posts and Work shortcode

These shortcodes allows you to have control over where you want to show your recent content. You are given the configuration option to whether or not to display the titles that you indicated in the theme’s options panel.

Here is where you will control, adjust and produce all of the work associated items that you desire to place in your portfolio.

7.1 Project Categories

Categories that you create for your portfolio will spontaneously be added to the "Sort Portfolio" list.

NB: Remember to allocate your items into a specific category for your user to be able to sort through them.

7.2 Project Attributes

Attributes will automatically appear below the description you created for the assignment on the "More Details" page. The attributes that you describe will appear in every single work item creation page for you to mark off all that is necessary. The convenience of this is you don't have to re-describe attributes that are reoccurring on projects.

7.3 Understanding Portfolio Images

It is imperative to understand how the portfolio works with the featured images provided.

NB: always upload your portfolio images at a minimum width of 800px. This will make sure that it appears attractive in different variation of screen sizes e.g. computer, mobiles and tablets. Moreover automatic resizing will take into effect in all places not including the “More Details" page displays in its totality.

7.4 Creating a Gallery

If you need to show many images on a specified portfolio item, just attach a WordPress gallery in your editor and select the checkbox in the "Project Configuration" on whether or not to turn that gallery into a slider.

7.5 Video Formatting

To feature a video for a project just fill out the video meta box with the associated information.

NB: Self-hosted videos require you to upload a .ogv and .m4v file formats as well as supply an image. Otherwise, If the video is hosted on Vimeo or Youtube, simply copy the embed code into the box and you're done,

7.6 Masonry Sizing

If you wish to make use of the "Masonry Item Sizing" option, you must be careful of the sizes your featured images will get cropped at:

  • Regular:                Min Width 500px             Min Height 500px
  • Tall:                       Min Width 1000px           Min Height 500px
  • Wide:                    Min Width 500px             Min Height 1000px
  • Tall & Wide:          Min Width 1000px           Min Height 1000px

NB: Make sure that you use these sizes when uploading your images, otherwise the images will be out of proportion and won’t fit the grid as they are supposed to.

Custom page layouts can be used on any page simply by choosing the desired layout from the “Page Attributes” widget.

8.1 Home

Your homepage includes 4 options for your page layout: Recent Posts, Recent Work and Slider.

Every layout will comprise of the home slider, the content you specify in the editor, and the recent applicable information below. See the Home Slider section of this guide for more info.

8.2 Portfolio

The portfolio page layout creates a attractive grid of all your projects. The grid is also re-organized via the “Sort Portfolio” button. See the Portfolio Post Type section of this guide for more information.

Custom page options are additional boxes that you will notice on every page you create or edit. This gives you more control on arranging your pages.

Page Header

The “Page Header Settings” box allows you to arrange your page header in two ways. Either a regular clean title & subtitle, or a full width image background with the title & subtitle overlaid.

NB: The Page Header Settings will be disregarded for certain pages including: The blog page an all of the home layouts.

This theme is packaged with a couple of custom widgets for your convenience.

10.1 Recent Posts Extra

This widget shows a thumbnail of the featured image and date and operates the same as the core WordPress recent posts widget with the exception of the featured image and date.

10.2 Recent Projects

The recent projects widget will display your chosen number of the most recent projects added to the portfolio post type.

In some circumstances extra functionality can be attained from the use of CSS classes that is if you know how to implement your own styling’s, for more information on this subject click here

Mega Menus

To make use of a mega menu, navigate to the Appearance > Menus tab in the admin section and be certain that the  "CSS Classes" are turned on in the screen options tab located in the upper right corner of your screen. When the required box is checked, you’ll notice an input field for "CSS Classes (optional)" in each of your menu items. As described in the screenshot below:

Simply enter  "megamenu" and there you have it. You will be given the default amount of three column mega menu unless you specify one of the following in the second:

  • Columns-3
  • Columns-4
  • Columns-5
  • Columns-6

E.g. if you desired a 4 column mega menu, simply insert " megamenu columns-4" into your CSS class box (NB: insert without the quotes).

This theme supports & is intergrated with  some of the top and most handy WordPress plugins that I thought you might like. Therefore if you desire to make use of the functionality of these categories, I recommend you use the following:

  1. BuddyPress
  2. bbPress
  3. WooCommerce
  4. Newsletter
  5. Contact Form 7
  • Install a translation program e.g. Poedit.
  • Open the astron-theme/astron/languages/en_EN.po file with Poedit.
  • Click here for more info on how to translate files with Poedit.
  • Find the wp-config.php file, located in the root directory of your WordPress installation and change the language.
  • If you want your website to support multiple language you can use a translate plugin e.g. qTranslate

Updating your Translation Files

  • If it is specified in the Changelog of the Theme that the Translation file has been updated, then please make sure that you update your translation file/s as well.
  • To achieve this, insert your modified translation file into the astron-theme/astron/languages/ folder replacing the new file.
  • Now open the file with PoEdit and click Update and it will show the text changes from the time when there is an update.

NB: Demonstrative Content will be included in the next short-term release. Thank you and sorry for the inconvenience.