This chapter covers theme download, installation, sample content import, menu and front page assigning and theme options import.

After purchasing this theme download the package from Themeforest. To do that, go to your themeforest.net profile move your mouse cursor over your login name in the right top corner and then click “Download”.

Here you will find all the items that you have purchased. Locate Aster, click the “Download” button and choose “All files & documentation” and save the package on your computer.

ast-download

UNZIP the package you just downloaded.

Inside you will find a copy of this documentation, license and a zipped Aster theme file (aster.zip) that you will need to install onto your WordPress.

  1. Login into your WordPress Admin panel
  2. Go to Appearance > Themes
  3. Click on the “Add New Theme” > Upload Theme
  4. Choose file and select aster.zip (this file is INSIDE the zipped file you’ve downloaded from Theme Forest)
  5. Hit “Install Now” and the theme will be uploaded and installed.
  6. Then click on the Activate link.

activate-theme

Installing Plugins

  • After successful theme installation you will be presented with a set of plugins which were used in the live theme preview.
  • Clicking on ‘Begin installing plugins’ .
  • Then select all of the plugins in the plugin list and bulk install them.install all

 

NOTE: Images are not included in the demo import due to licensing restrictions. All images will be replaced with light gray image holders.

Aster demo import is easy and fast.

After you installed your theme and all required plugins, follow these steps:

  1. Go to Theme Options > Demo Importer
  2. Click on the blue “Import Demo” button and wait until the importing process is done!import demo

Now you will have a fully functional site with the exception of columns. To activate columns (for example in the sample About Me page) – follow the first 2 steps of this chapter. And then just continue from this point on.

If you want to upload sample content manually (without using 1-Click Demo Install option), follow these steps:

  1. go to Tools > Import.
  2. Choose “WordPress” and upload aster demo.xml file that came with the theme when you purchased it.
  3. Go to Appearance > Menus and assign the menu that you see there as your Primary Menu and click “Save”.
  4. Go to Settings > Reading , choose the “Front Page Displays a static page” option and set Front page: Portfolio and Posts page: Blog.

Import Theme Options

Things like pages, posts, entries and media are imported trough Sample Content, but colors, styles, patterns, gallery settings etc. are imported trough Theme Options.

To import theme options follow these steps:

  1. Go to the same folder in which you found Aster Demo.xml file and in this folder you will see another folder called Theme Options.
  2. Open it up and select Aster Theme Options.json file
  3. Open this .json file (this can be done in TextEdit or similar text editing program).
  4. You will see lines and lines text/code, select it all and copy it.
  5. Now go to Theme Options > Import/Export click on the “Import from file” button and paste in the .json file, then click the “Import” button.

This chapter contains information about basic theme controls and their location so please read this chapter to avoid any confusion and get to know the theme better.

You can upload your logo image by going to Theme Options > Branding.

Upload your logo under Site Logo and Site Logo @2x

Site Logo @2x means a retina logo image. This logo should match the “Site Logo” graphic but it should be exactly 2x bigger. So if you “Site Logo” is 100×150 pixels big, “Site Logo @2x”  should be 200×300 pixels big. You should do this to enshure that your logo image is nice and sharp on retina displays.

Logo Position

Since Aster 1.1.0 you can choose to center your logo in the middle of the navigation or align it to the left side. To do that, go to Theme Options > Branding and locate Logo Position

There are 3 types of patterns in Aster:

  1. Header background pattern,
  2. Background pattern,
  3. Pop-up background pattern (read more about this one here)

Header Background Pattern

To upload a menu background pattern, go to Theme Options > Style > Patterns and upload it under “Header Background Pattern”

Background Pattern

The background pattern is used in several places:

  • blog post background in blog page
  • single portfolio description background
  • service background

To upload a background pattern, go to Theme Options > Style > Patterns and upload it under “Background Pattern”

If you want to use the flower pattern from the demo, you can download it here.
For more interesting and free patterns check out Subtle Patterns. Download any of them and use them in your Aster.

To change the main theme colors go to Theme Options > Style > Colors 

There you will be able to change the Brand Color that controls the majority of design elements such as:

  • Horizontal separators that you can see below most headings
  • Blockquote visual elements
  • Service visual elements
  • Metadata color
  • …and more

 

 

This chapter explains how to create your portfolio in Aster.

Check out Theme Options > Portfolio for extra portfolio controls.

If you imported the demo content, you already have a pre-made portfolio page and you do not need to create a new one.

  1. Go to Pages > Add New
  2. Give this page a name (ex., Portfolio) DO NOT write anything in the content area.
  3. On the right side of the screen locate “Page Attributes” and set the Template to Portfolio.
  4. Click the “Publish” button.
  1. Go Portfolio > New Portfolio Entry.
  2. Give this gallery a name (Weddings, New York, People …)
  3. Add a sub-title (optional) to your gallery in the Sub Title area. If you don’t want to use Sub Titles, go to Theme Options > Portfolio to disable them.
  4. The cover image of each gallery is the Featured Image, so upload your cover image in the Featured Image area on the right side of your screen.
  5. All of the images that will appear inside this gallery need to be uploaded in the Gallery meta box by clicking on the blue “Add to Gallery” button.

portfolio images

You can “drag” the image thumbnails around to change the image order.

description

You can add a description to each of your portfolio entries. To control the width of the description area, use the Description Width field.

width

By default the width is set to 400 pixels.

Since Aster 1.0.9 you can add Vimeo and Youtube videos to your portfolio entries.video

To do that, follow these steps:

  1. Open a portfolio entry where you want to add a video
  2. Click on the blue “Add to gallery” button
  3. Choose a random image from your library and click on the “Select” button (This image will not show up anywhere, it will just serve as your video placeholder)
  4. Now click on the image you just added to your gallery to reveal the Attachment Details fields and add your video URL.add video
  5. Click on the “Update” button.
  6. Drag and drop the video placeholder image to rearrange it.

Since Aster 1.1.4+ you can now set a single portfolio entry as your front page.

To do that, follow these steps:

  1. Create your portfolio entry (Portfolio > New Portfolio Entry)
  2. Go to Pages > Add New
  3. Give this page a name – example, “Front Page Entry”.
  4. Set the Page Template to “Single Portfolio Entry
  5. A new dropdown will show up. Choose the entry that you created in step 1
  6. Click on the “Publish” button
  7. Go to Settings > Reading
  8. Set your Frontpage to “Front Page Entry” (the page you created in step 3)

To create multiple portfolio pages with different galleries in each portfolio page follow these steps:

  1. Go to Portfolio > Categories
  2. Create your portfolio categories (for example, Editorial, Personal, Nature etc.)
  3. Go to Portfolio > All Entries,
  4. Open an entry. On the right side of the screen locate ”Portfolio Categories” and assign it to a specific category/categories

assign category

 

Adding Categories To Menu

  1. Go to Appearance > Menus
  2. On the right side of your screen click the “Screen Options” button and activate “Portfolio Categories”screen options
  3. Toggle open “Portfolio Categories”, select the ones you want to use and add them to your menu.add to menu
  4. Click the “Save Menu” button

Let’s say you have 4 portfolio entries – Weddings, Children, Portraits, Couples. You want to change the order to – Couples, Weddings, Portraits, Children.

Here’s what you do:

Step 1

  1. Go to Settings > Intuitive CPO (if you don’t see this option in Settings, install a plugin called “Intuitive Custom Post Order”)
  2. Under “Sortable Post Types” choose what you would like to reorderIntuitive CPO
  3. Click the “Update” button

Step 2

  1. Go to Portfolio > All Entries
  2. Place your mouse cursor over the entry that you would like to move until you see the “move arrow” icon showed in the image belowarrow-move
  3. Drag and drop the entries in your preferred order.

This chapter explains how to create your blog in Aster.

If you imported the demo content, you already have a pre-made blog page and you do not need to create a new one.

  1. Create a new page Pages > Add New and give the blog a name, DO NOT write anything in the content area.
  2. Go to Settings > Reading and set the Posts page to your new blog page.posts page

After you have assigned your Posts page you can start creating posts for this page.

  1. Go to Posts > Add New
  2. Give your post a name
  3. The main text goes into the main content area.
  4. Upload a thumbnail image for your post inside the Featured Image metabox.

The cover image will be automatically cropped. If you want to control the crop, upload an already cropped, square image. If you want to disable cropping, go to Theme Options > Blog 

You can access blog settings by going to Theme Options > Blog. There you can:

  • Control your blog meta data – Categories, tags, comment count, date
  • Turn on/off post thumbnail crop.

Carousel Slider (called Flickity) is a sliding image strip that you can place in your pages and blog posts.

carousel-slider

This slider is “activated” by combining a simple shortcode with WordPress default gallery option.

  1. Go to Page or Post where you want to place a carousel slider
  2. In the main content area type in this shortcode: 
  3. Place your gallery in between the 2 shortcode partsadd gallery between shortcode
  4. To create gallery click on the “Add Media” button
  5. Choose “Create Gallery” and select all of the images you’d like to usecreate gallery
  6. Click on “Create a new gallery” button
  7. In the Gallery Settings area set the Link to None and Size to large, medium or full size (depending on how big the slider should be). Ignore the rest of the settings.gallery settings
  8. Depending on what size you choose, you need to add a size value in the shortcode itself (   [village_carousel size=“x”]   )

Carousel Slider Sizes

There are three slider sizes you can choose from:

  • size=“large”(750px height) ;
  • size=“medium”(300px height) ;
  • size=“small” (150px height)

The rule is that the gallery size (step 7) has to be equal or bigger than the short-code size (step 8). Otherwise your images will be blurry.

Your final layout should look something like this:

slider

Note

If you plan to use the “small” size, you should upload a minimum of 12 images.
If you plan to use the “medium” size, you should upload a minimum of 6 images.
If you plan to use the “large” size, you should upload a minimum of 4 images.

Controlling gap size between slider images

By default you have a space between your slider images. You can make this space bigger, smaller or remove it completely. To do that you need to add one of the following pieces of code to your carousel shortcode:

  • space=“tiny” (to make the gap smaller)
  • space=“huge” (to make the gap bigger)
  • space=“none” (to remove the gap)

Your slider shortcode should look like this now:

Instead of Y you write one of the size names.

 

Enabling slider autoplay

If you want to enable the autoplay option, you need to add the following code to your shortcode:

  • autoplay=“on”

Your slider shortcode should look like this now:

 

Enable slider image snapping

If you want your images to snap (each image centers itself on the screen when browsing) add this to your shortcode:

  • snap=“yes”

Your carousel shortcode should look like this now:

 

You can use all options described above in one shortcode. For example:

 

“Welcome Page” is the fullscreen image with a logo image that you see when you visit Aster for the first time.

 

To create such a page, go to Theme Options > Welcome Page.

  • First activate the Welcome Page by setting Enable Welcome Page to ON.

By enabling the Welcome Page it will authomatically appear when someone visits your site directly (www.yoursite.com) The Welcome Page will lead your visitor to your assigned front page (in Settings > Reading)

  • Upload your chosen image under Background Image

Your image should be landscape oriented, preferably 1920×1080 px big. To ensure speedy loading the image should be under 1MG. Use JPEGmini or a similar program to optimize your image before uploading it.

  • Upload a logo graphic under Welcome Image

Your Welcome Image should be a .png file with a transparent background. You can see the image we used in the demo below. (the “Enter Site” is added to the logo to make sure users know what to do)

There are a couple of strict steps you need to follow in order to create a services page, so please read carefully.

  1. Go to Pages > Add New
  2. Give your page a name (ex., Services)

Creating the first service block

  1. Click on the “Add Media” button and choose an image for your 1st service
  2. After the image is placed in the main content area, click on it and click on the pencil iconedit
  3. Click on “Advanced Options
  4. In the Image CSS Class field type in village-split-left (for image on the left side text on the right) or village-split-right (for image on the right side, text on the left). Then click the Update button.advanced options
  5. Write your Service description UNDER the image.description
  6. IMPORTANT – After your text is written, click on the “Horizontal line” button to mark your service end.horizontal line

Now your 1st service is created.

To add another service, follow the same steps again (step 1-6). It’s important that your layout would always be – Image; Text; Horizontal lineImage; Text; Horizontal line – …

In Aster demo you can see the “Toggle” on the right side of the menu bar (enveloper icon). In this case you can access Contact information when you click on the button, but you can add any information in this area.

To activate the toggle, follow these steps:

  1. Go to Theme Options > Toggle Area
  2. Enable  it by clicking on the ON button
  3. Type your page content in the Information Text area
  4. Upload a background pattern in the “Background Pattern” area
  5. Choose a color of the fade in / fade out transition in the “Background Color” area
  6. Choose icons that you would like to use.
  7. Click on the “Save Changes” button when done.

To add captions to your text, you need to use basic HTML. Place your caption text in between <h1> .. </h1> for Heading 1, <h2> .. </h2> for Heading 2 etc.

Your client area is located in your admin dashboard > Client Area.

client area

If you don’t see it there, go to Appearance > Install Plugins and install Client Area.

  1. Go to Client Area > Add New
  2. Give your gallery a name (ex., Jane&John )
  3. Click on the blue “Add a gallery” button to add images
  4. In the “Featured Image” area (on the right side of the screen) add an image that will serve as a cover image for this gallery.
  5. In the “Featured background image” area upload a larger image (optional) that will serve as a background image for the password field area.
  6. Click on the “Publish” button.
  1. Choose the gallery that needs to be password protected (Client Area > All Galleries)
  2. Click on the Edit link next to “Visibility” and choose Password Protectedpassword
  3. Type your chosen password in the password field and click OK
  4. Click the Update (or Publish) button

Follow these steps:

  1. Go to Pages > Add New
  2. Give this page a name (ex., Client Area)
  3. In the content area you can write a few lines of text for your users (optional)
  4. Publish this page
  5. Go to Client Area > Settings and in the Client area archive locate your new page. 
  6. Now go to Appearance > Menus, locate your “Client Area” page in the Pages area and add it to your menu.

Smart tags are assigned to your images automatically. They can be used to show your client (or your client can show you) which image they are talking about. So instead of saying “them image with the girl and roses”, you would just write “#90” .

smart-tags

you can turn on smart tags by going to Client Area > Settings.

To comment with a smart tag simply write # and the number of the image. For example, #90

Screen Shot 2015-08-27 at 8.25.43 PM

To disable the option to comment in your client gallery, go to Client Area > Settings and turn OFF “Enable Comments”.

  1. Go to Contact > Add New
  2. Delete the code that you see in the Form area and in its place paste in this:
  3. Fill in your email information in the “Mail” area
  4. Click the “Save” button at the top of the page
  5. Copy the shortcode generated for you at the top of the pagecontact form shortcode
  6. Paste this shortcode in the page where you want your contact form to show up.

This chapter explains how to add both Social Networks and Social Sharing to your site.

If you Imported Demo content with 1-Click Demo Install follow these steps:

  1. Go to Appearance > Widgets
  2. Remove All widgets from “Navigation Widgets” area, except “Simple Social Icons”widgets
  3. Toggle open “Simple Social Icons” tab and add your social network links
  4. Click on the “Save” button

If you did not use the 1-Click Demo Install option, then:

To place your Social Networks in the footer area like shown in the demo, follow these steps:

  1. Go to Appearance > Widgets
  2. Locate “Simple Social Icons”
  3. Place it inside “Navigation Widgets” (if there are any other widgets inside “Navigation Widgets”, make sure you remove them before the next step.)
  4. Toggle open “Simple Social Icons” tab, scroll down and add your social network links
  5. Click on the “Save” button

If you want your Social Networks to open in a new tab, activate “Open links in new window”

open in new tab

Changing Icon Color

By default “Simple Social Icons” show up in default theme colors. If you want to change this, first you need to go to Theme Options > Advanced and turn OFF “Force Social icon Styles”.

Then go back to Appearance > Widgets and use color pickers to color your social icons.

“Sharing” is a feature that comes from Jetpack WordPress plugin. If you don’t have Jetpack installed, go to Plugins > Add New and install “Jetpack” plugin.

  1. Go to Jetpack and activate “Sharing”activate sharing
  2. Click on “Configure” button or go to Settings > Sharingconfigure sharing
  3. Drag and drop buttons from “Available Services” and place them in “Enabled Services” area
  4. Choose your button style (we used Icons Only in our demo)
  5. Choose where you want to show your Sharing buttons (we suggest that you choose “Posts” and “Portfolio Entries”)
  6. Click on the “Save Changes” button

A shortcode is a WordPress-specific bit of code that lets you do nifty things with very little effort. Shortcodes can create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.

Installing Grid Columns

If you want to use columns first you need to install Grid Columns plugin.

  1. Go to Plugins > Add New
  2. Search and install Grid Columns

Screen Shot 2015-10-06 at 10.42.09 AM

Using Grid Columns

This column shortcode provides you with a shortcode called [column]. It allows you to create columnized content.

Some terms you should know
  • grid: The overall container for your columns. A grid is made up of sections.
  • section: The individual sections of a grid. For example, if the grid is equal to 4, it means there are 4 sections in the grid.
  • column: A column goes inside of the grid. A column can span one or more sections of the grid. The number of columns cannot exceed the number of sections in the grid.
[column] shortcode arguments

  • grid: This is the number of sections in the grid. You cannot use two different grids together. The allowed values for this argument are 2, 3, 4, 5, and 12.
  • span: This is the number of sections you’d like the current column to span. Each instance of the[column] shortcode’s spans must add up to equal the grid number.

Basic Usage

To create columns, you only need to wrap the [column] shortcode around some content that you want to columnize.

Example #1

By default, this grid is “4”. So, you can set up four columns like so:

That would output the following.

4col

You’ll notice that each “span” is equal to the number of columns in the grid. So, if the span is “1”, it’s equal to one column. If the span would be “2”, it would equal to two columns. You can only have as many spans/columns as the grid allows. Therefore, grid="4" means you can only have four columns.

Example #2

If you would want to create 2 columns, you would use this code:

That would output the following.

2col

Example #3

Let’s do something a little more advanced. Suppose you wanted a 4-section grid with the first column taking up the space of two sections (like in the demo, Contact Form page). Your code would look like the following:

That would output the following.

3col1

You probably noticed the span="1" and span="2" parts in the code. This represents the number of sections this particular column spans. So, if your grid is set up into 4 sections (default), you can only have a total span count of 4 (2+1+1=4).

Advanced Usage

If you want to control the width of your columns a bit more, try to use a different grid. Instead of grid=”4″ try using grid=”5″ or grid=”12″, but again remember that the number of columns cannot exceed the number of sections in the grid.

Example #1

This would output:

12col

Example #2

This would output:

3col2

This applies only to 2 columns layouts. You can see and example in the image below.

Screen Shot 2015-09-30 at 12.27.48 PM

To create such columns, instead of the regular column shortcode you need to use a div tag. The rule here is that in one div tag you write both the left side column text and the right side column text. If you want another row of text beneath the first one, you create a new div tag and again write both column content in this div tag.

To make it easier for you, copy the code below and paste it in your page to see how it works.

To avoid any mistakes, paste this code in the Text mode, not the Visual mode.

text tab

To bring attention to some part of your content you can style it as a “Callout text”. such text will appear in a slightly larger type size and italic.

callout 1
Callout example 1
callout-2
Callout example 2

To create a callout text, place your text in between this shortcode:

 

button

Use this shortcode whenever you want to create a button:

 

A separator is a 5px thick horizontal line that you can use to visually separate content.

separator

Place the following shortcode in an area where you want the separator to appear:

The separator will always appear centered.