About the Theme

Asteria is a responsive wordpress theme with plenty of features with easy to use Theme Options page.
The theme comes in 2 versions: Asteria Lite & Asteria PRO
Below are the feature comparisons between the 2 versions.
Features

Asteria Lite

Asteria PRO

Price

Free

$40
(One-time Payment)

Skins

Unlimited
(Ability to change the color of almost all
the elements and fonts)

Front Page Elements

Fonts

Unlimited

Posts Layouts

Slider

Header Type(Types of header)

Shortcodes

29

Widgets

15

Widget Areas

Sidebar Widgets/ Footer

Widgets

Sidebar Widgets/ Footer

Widgets/ Front Page Widget
Area

Menu

1 Menu Position/ 3 Level Drop- 1 Menu Position/ 3 Level Dropdown Menu

down Menu

Available Translation

1. English 2. Dutch 3. Spanish 4. 1. English 2. Dutch 3. Spanish 4.

Italian 5. French 6. Chinese
Italian 5. French 6. Chinese

Page Templates

Beautiful Gallery Feature

YES

YES

Fully Responsive

YES

YES

Maintenance Mode

YES

YES

Social Share buttons

YES

YES

Woocommerce Support

YES

YES

Threaded comments/Separated
Comments & Trackbacks

YES

YES

Fancy lightbox

YES

YES

Custom background per Page

NO

YES

Custom Header per Page

NO

YES

Upload LOGO

NO

YES

Video Thumbnail Feature

NO

YES

Related Posts

NO

YES

Google Analytics Integration

NO

YES

IE7/ IE8 Browser Upgrade Alert!

NO

YES

Full Email support

NO

YES

Priority support in Forum

NO

YES

Table of Contents
1. SETTING UP THE FRONTPAGE
2. SETTING UP POSTS IMAGE THUMBNAILS
3. SETTING UP POSTS VIDEO THUMBNAILS (PRO)
4. SETTING UP A BLOG PAGE
5. SETTING UP A CONTACT PAGE (PRO)
6. Setting Up A Menu
7. Setting Up A Beautiful Gallery
8. Setting Up Individual Background Image (Pro)
9. Setting Up Page Individual Page Header (Pro)
10. Styling The Theme
11. Widgets (Pro)
12. Shortcodes (Pro)
13. Theme Support

1. Setting up the front page

When you select Your Latest Posts from Settings> Reading you will be able to display 8
frontpage elements on your sites frontpage. They are:
i. Slider
ii. Blocks
iii. Welcome Text
iv. Frontpage Posts
v. Location Map (PRO)
vi. Call to Action (PRO)
vii. Frontpage Widgets Area (PRO)

i. Setting up the slider

From Asteria Theme Options> Slider click the + Add New button to add new slides. For each
slide you should set:

a. Title: Write a title of your slide. This is optional; if you dont want to display the title of the
slide you should keep this empty.
b. Image: Select/Upload Slide image by clicking the Upload Image button. If you are using the
Full Width mode, make sure the slider images have at least 1600px of width. If set to fixed,
the slider images should have minimum width of 1200px. If your images are bigger, you can
resize and crop them online using this application: http://pixlr.com/editor/. Theres also a video
tutorial on youtube on how to resize and crop your images and save them:
https://www.youtube.com/watch?v=WmFjvNlm1E4

c. Content: If you want to display a little subtext under the title of the slide you should use this
field. You can use HTML tags.
d. Link: If you want your slide image and title to contain a link, you should put it here.
e. Slide Text layout: Select how you want to display the text of the slider.

By default the slider displays 3 default slides, if you want to remove the slider from your
frontpage, set the slider type to Disable Slider. If you want to display sliders in your static
pages, use the slider shortcode that comes with theme. See Shortcodes Section for details.

ii. Setting up the blocks

To setup the blocks, Go to Asteria Options> Frontpage and click the arrow button beside the
text Blocks and blocks settings options will appear. You can setup or hide each block
individually. You can display up to 4 blocks. Each block has followings options:
a. Block Title: Title of the block.
b. Block Icon: You can select which icon to display from this option. To hide the icon, select No
icon from the list.
c. Block Content: Write your block content here. You can also add html and images in your
block content.
Note: You can hide each block by clearing the "Title" field and "Description" field. When these 2
fields are empty, the block is will not be shown on frontpage.

iii. Setting up Welcome Text

To setup welcome text, Go to Asteria Options> Frontpage and click the arrow button beside the
text Welcome Text and welcome text settings options will appear. You can write you
welcome text and also what color the background of the welcome text area should be.

iv. Frontpage Posts

To display posts on front page, click the arrow button beside the Frontpage Posts text. Now
setup your posts:
a. Title & Description: You can display some text before your posts (Optional).
b. Layout: Select how you want your posts to appear.
c. Display posts from a category: By default, the posts appear form all categories and the
number of posts per page is set from Settings> Reading. But if you want to display posts from a
selected category and a selected number of posts, you should turn this option on.
d. Category Name: If you turn on the above option you will have to select the category of your
frontpage posts.
e. Number of Posts: You can only set the number of frontpage posts if you turn on the option
Display posts from a selected category from above. If you havent, you can set the number of
posts from Settings> Reading.

v. Location Map (PRO)

If you want to display your company location in a map, you can do that from this section. To
setup the map, you should set the following settings:
a. Title & Description: You can display some text before your posts (Optional).
b. Latitude and Longitude: to display your location in the map, you will have to find your
locations latitude and longitude. To know your locations lat/long, use this website:
http://www.doogal.co.uk/LatLong.php after determining your lat/long, you should put the
lat/long in this field separating them with a comma. Eg: 53.359286 , -2.040904
c. Map Bubble Text: You can display a text, your location details, etc when someone hovers
over your maps pointer. You can use HTML in this field.

vi. Call to Action (PRO)

If you want to get your visitors attention and urge your sites viewers of a sales promotion
message to take an immediate action you should use this Element. To setup a call to action
banner, you should fill these settings:
a. Call to Action Text: You can write the message you want your viewers to follow in this
section.
b. Button Text: Text to display in the button.
c. Button Link: when viewers click the button, they should be taken to this link.
d. Background Color: The color of the background can be set here.
e. Button Color: The color of the buttons background can be set here.
f. Button Text Color: You can set the buttons text color from this option.

vii. Frontpage Widgets Area (PRO)

In Asteria PRO you can select your widgets from Appearance> Widgets. These widgets will be
displayed only on frontpage. You can display any widgets you want here.

Frontpage Elements Position

You can change the order of the frontpage elements from this section. Simply drag and drop
each element and re-order their position. To Hide each elements, uncheck the options beside
each elements.

2. Setting up posts Image Thumbnails

To setup post thumbnails, you should use the Featured image option of wordpress. While
editing the post, on the right, notice there is a Featured Image box. Add your post thumbnail
image from here. For best visual appearance, the thumbnail size should be 350px x 235px

3. Setting up posts Video Thumbnails (PRO)

To setup video thumbnails, while editing the posts notice there is a box on right that says
Asteria Video Thumbnail. Add your youtube video link here to display it as a thumbnail of the
post. You can display your youtube videos as thumbnails. Your viewers can play the video
directly from the front page without going to the main post.

4. Setting up a Blog Page

If you want to set up a blog page, you should use the Blog page Template that comes with the
theme. To setup a blog page, follow these steps:

1. First mark all the posts with a category called blog or something.
2. Then create a new page and Give it a title. While in the post editor page, notice there is
a box on right called Page Attributes. From this box, you can select multiple page
templates. Select Blog Page Template from the dropdown list and save the page.

3. Then Go to Appearance> Asteria options> Misc. and select the category blog for
Display Blog Posts from a selected Category option.
4. Now view the created page, and you will see the page is displaying all the posts from
your specified category.

5. Setting up a contact page (PRO)

In Asteria PRO you can setup a contact page without any plugin. Just create a new page and
select the Contact Page template from Page Attributes box and you are good to go. By
default the contact page email address is set to your admin email address. You can change that
from Appearance> Asteria Options> Miscellaneous.

6. Setting up the Menu

Setting up a menu is quite easy. Follow these steps to create a menu:
1. Go to Appearance>Menus and click the create a new menu link. Give your menu a
name and click the Create Menu button.
2. Now add menu items to the newly create menu. You can add menu from your pages
and categories. You can also add custom links to your menu. To add a menu item, select
the menu item from left and click the Add to menu button.
3. You can change the order of menus from right by dragging and dropping them. To
create a submenu, drag a menu item and move it to right.

4. After adding all the menu items, select the Header Navigation option from the bottom
and click Save Menu button.

7. Setting up a Beautiful Gallery

With Asteria you can setup beautiful galleries without any plugins. Example
To set up a gallery, follow these steps:
a. Create a New post, page and click the Add Media button. A new window will popup.
b. Click the Create Gallery button from left. Now upload your photos or choose from existing
photos by clicking the Media Library link.
c. After selecting the images click the Create new Album button.
d. Now on the right make sure you select: Link to: Media File
e. Then click the Insert Gallery button from bottom. Thats it!
Note: To disable this feature, Go to Appearance> Asteria Options> Miscellaneous Settings and turn off
the Beautify My Galleries option.

8. Setting up Individual Background Image (PRO)

In Asteria PRO you can use different background color or images on different pages/posts.
While editing the post/page notice on right there is a settings box called Asteria Background
per page. You can set the background color/image from this options box.

9. Setting up page individual page header (PRO)

With Asteria PRO you can use different page header for different pages. Each pages of your site
can have different image. You can setup different page headers while editing the page. In page
editor, notice there is a box on right that says Asteria Page header Under this you can either
select a different image as your page header. Make sure the width of the image is at-least
1200px. If you are using the Full Width mode from the theme options page, then the image
should be at-least 1600px wide.

10. Styling the Theme

With Asteria you can change the color of every elements and text.
a. Setting up a logo: By default the theme displays a text logo. You can change the font,
size and color of the logo from Appearance> Asteria Options> Typography. If you want
to display an image logo, you can also do that from Asteria Options> Basic.
b. Changing the background color/image: You change the background color or add an
image as background from Appearance> backgrounds.
c. Changing the Elements Color: To change the color of each element, Go to Appearance>
Customize. You can change the colors from Asteria Element Colors and Asteria Text
Colors.

11. Widgets (PRO)

Asteria PRO comes with 15 custom widgets. You can add them to your widget areas from
Appearance> Widgets. The widgets are:
1. Biography Widget - A widget to display site owners biodata, occupation and image.
2. Countdown Widget - A widget to display countdown to your event or anything.
3. Custom 125 x 125 ad Widget - To display custom 125 x 125px ads.
4. Custom 160 x 600 ad Widget - To display custom 160 x 600px ads.
5. Custom 250 x 250 ad Widget - To display custom 250 x 250px ads.
6. Facbook Likebox Widget A widget to display the profiles of those who liked your facebook
page.
7. Featured Posts Widget A widget to display posts from a selected category.
8. Flickr Photostream Widget A widget to display flickr images from any flickr album.
9. Google Plus Followers Widget A widget to display your google plus followers.
10. Image Widget An image widget to display image.
11. Pinterest Pinboard Widget A widget to display pinterest images from your pinterest
profile.
12. Popular Posts Widget Displays popular posts of your site. The popularity of the posts is
based on comment counts.
13. Random Posts Widget Displays random posts.
14. Recent Posts Widget Displays recent posts with style. Forget about the generic recent
widget that comes with wordpress.
15. Twitter Follower Widget A widget to display followers from your twitter account.

12. Shortcodes (PRO)

Asteria PRO comes with 29 amazing easy to use shortcodes with inline documentation helper.
You can use these shortcodes in your posts, pages and also in your text widget.

1. Success box Shortcode

2. Info box Shortcode
3. Warning box Shortcode
4. Error box Shortcode
5. Quote Shortcode
6. Divider Shortcode
7. Table Shortcode
8. 2 columns text Shortcode
9. 3 columns text Shortcode
10. 4 columns text Shortcode
11. Facebook Like button Shortcode
12. Tweet button Shortcode
13. Pinterest button Shortcode
14. Google + button Shortcode
15. Slider Shortcode
16. List type 1 shortcode
17. List type 2 Shortcode
18. List type 3 Shortcode
19. List type 4 Shortcode
20. List type 5 Shortcode
21. Responsive Youtube video Shortcode
22. Responsive Vimeo video Shortcode
23. Tabs Shortcode
24. Toggle Shortcode
25. Button Shortcode
26. Call to Action Shortcode
27. Iframe Shortcode
28. Countdown Timer Shortcode
29. Featured Image Shortcode

1. Success Box Shortcode

Display Your content in a greenish message box. Great for displaying success messages.
Example
Usage: Wrap your text with [success][/success]
2. Info Box Shortcode
Display Your content in a bluish message box. Great for displaying info messages.
Example
Usage: Wrap your text with [info][/info]
3. Warning Box Shortcode
Display your content in an orange message box. Great for displaying warning message.
Example
Usage: Wrap your text with [warning][/warning]
4. Alert Box Shortcode
Display your content in a red message box. Great for displaying alert message. Example
Usage: Wrap your text with [alert][/alert]
5. Quote Shortcode
Display your quote with a beautiful quote icon. Example
Usage: Wrap your text with [qoute][/quote]
6. Divider Shortcode
Use this shortcode to display a borderline or divider to divide your post. Example
Usage: [divider style="solid" color="#eeeeee" width="1px"]
parameters:
style= solid, dashed, dotted, double, groove, ridge, inset,
outset, none
color= any hex color values.
Width = any number of width in pixel. e.g: 5px

7. Table Shortcode
Use this shortcode to display a table. Example
Usage: [table cols="names,age,occupation"
data="Jhon,25,Blogger,Sara,20,Model"]

8. 2 columns text Shortcode

Use this shortcode to display text in 2 columns. Example
Usage:
[col2] your text that you want to display in 1st column [/col2]
[col2] your text that you want to display in 2nd column [/col2]

9. 3 columns text Shortcode

Use this shortcode to display text in 3 columns. Example
Usage:
[col3] your text that you want to display in 1st column [/col3]
[col3] your text that you want to display in 2nd column [/col3]
[col3] your text that you want to display in 3rd column [/col3]
10. 4 columns text Shortcode
Use this shortcode to display text in 4 columns. Example
Usage:
[col4]your text that you want to display in 1st column[/col4]
[col4]your text that you want to display in 2nd column[/col4]
[col4]your text that you want to display in 3rd column[/col4]
[col4]your text that you want to display in 4th column[/col4]
11. Facebook Like button Shortcode
Display a facebook like button anywhere you want. Example
Usage: [fblike]
12. Tweet button Shortcode
Display a Twitter Tweet button anywhere in the post. Example
usage: [tweet]
13. Pinterest button Shortcode
Display a Pinterest Pin it button anywhere in the post. Example
Usage: [pinit]

14. Google + button Shortcode

Display a Google plus shortcode button anywhere in your post. Example
Usage: [gplus]

15. Slider Shortcode

Display a slider anywhere in your post. Example
Usage: to add a slider in your post, follow these steps (Video Tutorial):
a. Click the Slider Shortcode button. This will be added to the post editor:
[slider effect="random" pausetime="3000" autoplay="true" navigation="true"][/slider]
b. Put your cursor right before this [/slider]. Like this
c. Click the Add Media button and upload your images. Then hold the ctrl button from
your keyboard and select the images that you want to display in your slider. Now click
Insert into Post button.
d. Thats all! You have successfully added a Slider in your post. You can change the
parameters of your slider if you want to customizr the slider.
parameters:
effect= random, sliceDown, sliceDownLeft, sliceUp, sliceUpLeft,
sliceUpDown, sliceUpDownLeft, fold, fade, slideInRight,
slideInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow,
boxRainGrowReverse
Pausetime= in milliseconds. Eg: 3000
autoplay= true/false
navigation= true/false
16. List type 1 Shortcode
Instead of typical circle list style you can display your lists with beautiful style. Example
Usage: [list1]<li>item1</li><li>item2</li><li>item3</li>[/list1]
17. List type 2 Shortcode
Instead of typical circle list style you can display your lists with beautiful style. Example
Usage: [list2]<li>item1</li><li>item2</li><li>item3</li>[/list2]
18. List type 3 Shortcode
Instead of typical circle list style you can display your lists with beautiful style. Example
Usage: [list3]<li>item1</li><li>item2</li><li>item3</li>[/list3]

19. List type 4 Shortcode

Instead of typical circle list style you can display your lists with beautiful style. Example
Usage: [list4]<li>item1</li><li>item2</li><li>item3</li>[/list4]
20. List type 5 Shortcode
Instead of typical circle list style you can display your lists with beautiful style. Example
Usage: [list5]<li>item1</li><li>item2</li><li>item3</li>[/list5]
21. Responsive Youtube video Shortcode
With this shortcode you can display youtube videos that are responsive to the screen
size.
Usage:
[youtube width="100%" height="100%"
autoplay="false"]https://www.youtube.com/watch?v=pwNMvUXTgDY[/youtube]
22. Responsive Vimeo video Shortcode
With this shortcode you can display Vimeo videos that are responsive to the screen size.
Usage: [vimeo width="600" height="365"
autoplay="false"]http://vimeo.com/4749536[/vimeo]

23. Tabs Shortcode

With this shortcode you can display your content in beautiful tabs. Example
Usage:
[tabs titles="Tab One, Tab Two"]
[tab]Tab one content[/tab]
[tab]tab two content[/tab]
[/tabs]
Note: To use html inside you tabs, switch to Text mode of the editor.
24. Toggle Shortcode
With this shortcode you can display your content with show/Hide button. Example
Usage: [toggle title="Spoiler alert"]Your content which is by default
hidden.[/toggle]
parameter: title= your show/hide buttons text.
25. Link Button Shortcode
You can display colorful buttons with this shortcode. Example
Usage:

[button background_color="#eb5c49" text_color="#ffffff"

url="http://www.google.com" ][/button]
parameters:
background_color = any hex color value
text_color = any hex color value
url = link of the button
26. Call to Action Shortcode
If you want to get your visitors attention and urge your sites viewers of a sales
promotion message to take an immediate action you should use this Element. Example
Usage: [callaction url="http://www.google.com" background_color="#2dcb73"
text_color="#ffffff" button_text="A Simple Button"
button_background_color="#e64429" button_text_color="#ffffff"]Your Call to
Action Text Message[/callaction]
parameters:
url= url of the button
background_color = any hex color value.
text_color= any hex color value
button text = Text that you want to display inside the button
button_background_color = any hex color value.
button_text_color = any hex color value.

27. Iframe Shortcode

With this shortcode, you can display any websites you want in your post using iframe.
Example
Usage: [iframe url="http://www.beemp3.com" width="100%"
height="500" frameborder="0"]
parameters:
url= the webpage that you want to show inside you iframe.
width = width in percent.
height = height in number
frameborder = any numeric number.

28. Countdown Content Shortcode

Countdown shortcode will hide your selected text and show it automatically on a certain
date.
Usage: [countdown date="21" month="9" year="2015"]Your content that will be
hidden and will be shown after the countdown ends.[/countdown]

29. Featured Image

Displays the featured image of the post, if set any.
Usage: [featimage align="left"]
parameters:
align: left, right, center

13. Theme Support

About the theme
Asteria is a wordpress 3 theme with awesome layouts, fonts, slider, layouts & easy to use
theme option panel.
1. Asteria Lite (Free)
2. Asteria Pro (Premium)
Both of the themes are licensed under GNU General Public License v2

About The Developer

This Theme is designed and developed by Towfiq I.

Theme Support
Theme support of the free version is provided here:
http://www.towfiqi.com/forums/forum/asteria-lite
Theme Support for the premium version is provided here:
http://www.towfiqi.com/forums/forum/asteria-pro