How to update WordPress themes

Automatic updates

Since October, all FitWP themes can be automatically updated inside WordPress dashboard just like normal themes on wordpress.org.

To enable automatic update, you need the latest version of the themes. Please update the theme manually first (see below for the guide). You have to do this once and you won’t have to do that again.

To get automatic updates, just go to Appearance → Theme Update and enter your purchase code. Whenever a new version is available, you will see a notification in the dashboard and you can update then.

By default, WordPress checks for updates twice a day. If you want to force check for a new version, just go to Dashboard → Updates and click the button Check Again.

Manual updates

You can manually update the theme by going to the Downloads page on ThemeForest and download the theme (just the theme only).

Then unzip it and use a FTP client like FileZilla to upload it to wp-content/themes folder, overwriting the old files.

Upload theme

Felix

Welcome! First of all, we want to thank you for purchasing our Felix – Music WordPress Theme.

In the following section, we will show you how to set up and use Felix theme the easiest way possible. Although there’re a lot of things written in this documentation, the theme itself is not hard to use. You can go to the Theme Options page and discover everything yourself. This file is more of a reference if you do not know what to do, or if you are not familiar with WordPress.

If you have any questions that are beyond the scope of this help file, please feel free to ask your questions at the support forum.

FILE INCLUDED

The download package (.zip) that you get from ThemeForest contains the following files and folder:

  • felix.zip: main theme file that needs to be uploaded to host to install Felix theme
  • demo-content.xml: demo content file, which contains all pages and posts from live preview website. It will help you to have a first look at how we use Felix theme
  • docs.html : theme documentation (this file)
  • theme-options.txt : theme option backup file. You’ll need this to restore the default theme options that setup for demo website.
  • Plugins:
    • codecanyon-2751380-slider-revolution-responsive-wordpress-plugin.zip : Slider Revolution Responsive WordPress Plugin. Completed download package from Codecanyon.net. It’s FREE for you to use with Felix theme
    • felix-demo-import.zip: a plugin which helps you to import the demo content by just 1 click.
    • home-page-slider.zip: Demo slider that exported from our demo, but with placeholder images

INSTALLATION

Install Theme

We have written a very detailed guide on how to download and install a WordPress theme from ThemeForest, please follow the instruction in that article.

Also, please follow the guide to import the demo content if you want to have the site looks exactly like our demos.

In order to build the homepage the same as in the demo, you need to follow the instruction to create a static front page.

Import demo slider

After finish installing demo content, you should import the demo slider which is exported from our demo site. It is located in the Plugins folder of the download package. Go to Revolution Slider menu then select Import Slider. A modal window will appear, you just need to click on Choose File button then select the zip file home_slider.zip in Plugins folder. Finish importing slider by clicking on Import Slider button.

THEME OPTIONS

The Felix theme comes with unique, creative and easy-to-use Theme Options page. You can change all theme options in one place!

With Felix’s advanced theme options panel, you can customize just about any part of your site quickly and easily. Every element on the site can have the color changed to your liking. Choose a color scheme for website, select fonts for all headings and body copy, change sizes, colors and line-heights of all fonts, select different footer column layouts, enable or disable several options, upload your own custom favicon, select from various site/page layouts, input custom CSS, set hundreds of other options to easily customize your site!

All options have a full description so you can know what you are doing. Just click and save!

Let’s go through each section.

General

general options

This sections contains:

  • (1): favicon upload, allows you to upload favicon for you website
  • (2): touch icon, allows you to upload icon for mobile devices and tablets
  • (3): show the player on all pages. By default, the player only is displayed on the homepage. If you turn on this option, it will display on all pages.
  • (4): show comment on page
  • (5): backup – restore, allows you to backup Felix options and restore them later, or transfer the saved options between different installs.
Note: From WordPress version 4.3, you can setup favicon and touch icon in Appearance > Customize. The options (1) and (2) in the theme is used if your website is running on older version of WordPress.

Here are the explanations of some options that can help you understand and use them better:

Favicon Upload

Favicon (short for Favorite icon), also known as a shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar (sometimes in the history as well) and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab, and site-specific browsers use the favicon as a desktop icon.
This is how favicon appears

Felix lets you upload favicon or enter favicon URL in the input box:

  • If you have a favicon uploaded, or you store the favicon somewhere out of the Media Library, you can just put the URL of the favicon into the input box, or
  • If you want to upload favicon for your website, click the upload button (the green one near input box) and upload it to Media Library as a normal image, then click Select.

The favicon should be in one of the following formats:.ico, .png, .gif Usually, we should use .ico.

When you’re done, you can click Save Changes button to save your data.

Touch Icon

Touch icons are the favicons of mobile devices and tablets. Each mobile devices and tablets have its own standards for displaying the touch icon (read this article to have a better understanding about touch icon and supported devices) and require various icon sizes. But for best compatibility and simplicity, an image with size 152×152 is enough.

To specify a touch icon for your website, just do the same as for favicon: you can either put the URL of the touch icon into the input box or upload the icon to Media Library.
The icon must be PNG image

When you’re done, you can click Save Changes button to save your data.

Show comments on page

This option allows you to show/hide comments and comment form on pages. By default, Felix doesn’t display comments and comment form on pages.

Important: In case this option is set to “ON”, to display comments on pages, you still have to allow comments for pages when you edit pages.

By default, this checkbox is checked (meaning comments are allowed on pages). But in case you want to show comments on all pages, except some specific pages, you can use this checkbox to hide comments for those pages only.

Backup – Restore

Felix allows you to backup theme options and restores them later. You can also transfer the saved options data between different installs.

To backup theme options, just copy the text inside the text box and save it into a file on your computer. To import data, replace the data in the text box with the one from the saved file and click Import Options button.

After clicking Import Options, Felix will automatically setup all options and refresh the current theme options page, so you can see the options immediately.

Design

This sections contains:

  • Color Scheme: allows you to change color scheme of the whole website
  • Layout: allows you to change layout style and layout for the whole website, for blog posts and pages
  • Custom CSS: allows you to add your custom CSS

Color Schemes

color schemes

Felix theme has 3 predefined color schemes to choose from: red (default), orange and blue. When you change the color scheme of the theme, all links, button background and other elements will change their color or background accordingly. The default color scheme is red, but you can select any from 3 colors here. After selecting, click Save Changes button to save your data. Now go to the frontend and check the colors of links, buttons, etc.

When you select Color Scheme section, you’ll see the following options:

  • (1): select built-in color scheme. These are 5 predefined color schemes. When you select one of them, your website elements will change color accordingly.
  • (2): enable/disable custom color scheme. This option allows you create a custom color scheme, and you can build unlimited color schemes here! Just enable this and you’ll see options below.
  • (3): primary color. This is primary color for your custom color scheme, used for links, overlay, button background on hover, badges, etc.
  • (4): secondary color. This color will be used as the secondary color of the website. It is used in gradient.
  • (5): tertiary color. This color will be used as the tertiary color of the website. It is used in gradient too.

Layout

layout options

This section helps you to select which layout will be used in the whole website.

  • (1): sidebar layout for the blog, single posts, and other archive pages. You can select sidebar position here: left, right or none (don’t display sidebar).
  • (2): sidebar layout for pages. Same meaning as for blog above but only applied for WordPress pages.
  • (3): sidebar layout for WooCommerce pages. Same meaning as for blog above but only applied for WooCommerce pages: shop page, single products, product tag archive, product category archive.
Note: These options is site-wide, meaning for the whole website. But you still can set custom layout for a single post and page when edit (We’ll explore it later).

Custom CSS

custom css

This section allows entering custom CSS that will be output in the <footer>. This will overwrite CSS of theme, so please be careful!

Custom CSS is useful when you want to adjust small things for your website. If you have to adjust a lot of things in the website, please use Child Themes.

Header

This section contains:

  • Header: options for changing the display of site header, ex: logo, menu,…
  • Hero Section: options for selecting the type of content of hero section on Homepage.
  • Title Area: options for title area.
  • Header Scripts: options for appending scripts to <head>.

Header options

header options

This sections contains:

  • (1): header will always stay on the top of the screen when scrolling.
  • (2): header will be displayed without background color. This option only applied for the homepage.
  • (3): Select which content you want to display on left side of header: Logo or Social Icons. When you select Social Icons, new options will be showed and let you enter links for your social channels
  • (4): logo upload, allows you to upload the logo for your website. You can either put the URL of the logo into the input box or upload the logo to Media Library. The live preview of the logo will appear below the inputs.
  • (5): logo size. Specify logo size in px here. It will help you resize the logo to correct dimensions.
  • (6): logo margin. Specify logo margin in px here. This is useful when you upload the logo with a different size than recommended. You can move logo a little, adjust space to make it look good.
You should resize the logo to correct size in Photoshop or any image editor before upload. It will keep your logo not resized and small size.
  • (7): Turn it on if you want to show search icon at the right side of the header.
  • (8): Turn it on if you want to show shop cart icon at the right side of the header.

Hero Section

hero section

Note: Hero content is the top section on the homepage. It is displayed on home page ONLY.

This section contains options:

(1): select which type of content to display in hero section.

  • Image: display a single image. When you select this option, following options will be displayed:
    • (2): upload hero image.
    • (6): enter the content of hero section.
  • Video: display video in the hero section. When you select this option, following options will be displayed:
    • (2): upload default poster for this video. It will also is used for mobile devices. Because video will not display on these devices for performance purpose.
    • (3): enter video URL here. This option allows direct video URL (.mp4, .webm) or Youtube video URL.
    • (4): enter alternative video URL. This option is optional. When you enter a direct video URL in (3), you should provide an alternative video in another format to make sure your video can play on most browsers. Example: if you enter a .mp4 video in option (3), you should provide the same video in .webm the format in option (4).
    • (5): turn on this option will make video play automatically when website loaded. If not, there is a big play button will appear inside this section. The poster image in option (2) will be used by default.
    • (6): enter the content of hero section.
  • Custom: display custom content for hero section. It usually is used for display slider from the plugin, eg: Revolution Slider. When you select this option, following options will be displayed:
    • (7): enter your custom content here. Example for Revolution Slider: [rev_slider alias="home_slider"]

Title Area

title area

This section contains one option for select background for title area. Title area is the top section after site header in all of the pages, but the homepage.

Header Scripts

header scripts

Enter scripts or code you would like the output to <head>. It can be:
<link> tag for a custom font (from Google Fonts maybe)
– Any meta tag: to show the designer, copyright, etc. in meta tag
– Google Analytics code
– Any Javascript code that needs to be executed in <head>

If you want to put custom CSS here, you’re doing wrong. There’s a section for Custom CSS under Design, use it instead.

Player

player

This section contains:

  • (1): enter number of tracks for default playlist
  • (2): select which tracks in default playlist: latest tracks or featured tracks.
  • (3): turn on this option to make the player automatically play when website loaded.
  • (4): turn on this option to select the intro track. Intro track will be playing firstly from the playlist.
  • (5): select a track from track list to set as intro track.

Artists

artists

This section contains:

  • (1): turn on this option will allow displaying statics of an artist on the single artist page. This information will be displayed at the end of the page.

Albums

View post on imgur.com

Albums archive page is the page which using Albums the template.

This section contains:

  • (1): select how to display albums in archive page: grid or list.
  • (2): if you select to display albums as a grid in option (1), you also able to select how many columns to display albums, 3 or 4 columns.
  • (3): enter number of albums to be displayed per page.
  • (4): turn on this option to show album category filter.

Events

View post on imgur.com

Events archive page is the page which using Events the template.

This section contains:

  • (1): select which events will be displayed: all event, past event or upcoming events.
  • (2): enter a number of events to be displayed per page.

Gallery

View post on imgur.com

Galleries archive page is the page which using the Galleries template.

This section contains:

  • (1): select how to display images inside a single gallery: slideshow or masonry.
  • (2): turn on this option to show related gallery at bottom of gallery single page.

Shop

View post on imgur.com

Galleries archive page is the page which using the Galleries template.

This section contains:

  • (1): enter a number of products to show per page.
  • (2): select columns to display products, 3 or 4 columns.

Blog

This section contains options which help you to change something about displaying posts archive pages (blog, category, tag, date)

View post on imgur.com

  • (1): what type of post content will be displayed. Available options are Post excerpt, Post content or Post content before more tag.

To understand what those values mean, take a look at the screenshot bellow:

View post on imgur.com

Where:

  • (A): Whole post content, this is what you enter in the editor.
  • (B): Post excerpt, which is optional hand-crafted summaries of your content. If you don’t enter anything in the excerpt box, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
  • (C): The post content before more tag
  • (D): The more tag

Return to blog option: if you choose

  • Post excerpt: Felix will get post excerpt and display it. Remember: if you don’t enter excerpts for the post, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
  • Post content: Felix will get whole post content and display it. This is the default value.
  • Post content before more tag: Felix will get only the post content before more tag and display it.
  • (2): post content limit. Sometimes you enter a very long text for post excerpt or post content, display such long text in blog and archive pages is not good and harm your website beauty. So we need a way to truncate text to make it shorter. This option is created for that purpose.Simply specify the number of words will be displayed here. Post content or excerpt will be truncated to an exact number of words. You should try changing this value and preview your blog to see what is best for you.The default value is 55 words.
Important: this option affects only when you NOT choose Post Content from the Display option above
  • (3): read more text. The default value is Continue reading.

Footer

View post on imgur.com

This section gives you options to customize footer area on your website.

  • (1): enable or disable footer social icons.
  • (2): enter social links.
  • (3): enable or disable footer widgets area.
  • (4): number of columns in the footer. It also is the number of footer sidebars (widget areas). The default is 3.
  • (4): copyright text. You can enter text, HTML, and shortcodes here. To make you easier to display copyright text, Felix has default shortcodes that you can enter here:
    • [year]: display current year
    • [site_link]: display link to your website with text is the website title. For example, if you have a website at http://example.com and title Example, this will display a link like this:
      <a href="http://example.com">Example</a>
    • [bloginfo]: display blog information. This is the wrapper of bloginfo() function. Default it will display blog name (e.g. website title), but you can use it with parameter name to display more information, for example:
    • [bloginfo name="name"]: display blog name (default)
    • [bloginfo name="description"]: display blog description (tagline)
    • [bloginfo name="version"]: display WordPress version
    • [bloginfo name="rss2_url"]: display RSS2 feed link
    • [bloginfo name="home"]: display home link
    • For more value of name, please see bloginfo() function
  • (5): footer scripts. Enter scripts or code you would like output before </body>. It can be Google Analytics code or any Javascript code.

Page Display Settings

We’ve seen how to change featured title area, sidebar layout for the whole website. Felix also supports customizing these things for specific pages.

When you edit a page, you’ll see this meta box below the content editor:

View post on imgur.com

  • (1): select background display type for title area, use the default setting, featured image or custom image.
  • (2): upload custom background image if you select Custom background image in option (1).
  • (3): whether to use custom page layout. If you check this box, you’re able to set custom layout style and sidebar layout below. If you don’t, the page will use default layout set in Theme Options.
  • (4): custom sidebar layout. Choose custom sidebar layout for the page. If you don’t choose anything, Felix will use default sidebar layout set in Theme Options.
  • (5): you can enter custom CSS code here. It will be applied for current page only.

Page Templates

Felix has some built-in page templates that can help you create special pages easier:

  • Events: template to display events archive.
  • Galleries: template to display galleries archive.
  • Releases: template to display albums archive.
  • Homepage: template to display homepage with hero section.

When you edit a page, look at on the right, find Page Attributes meta box and select a template from the drop-down Template:

View post on imgur.com

Widgets

Felix plays nicely with default WordPress widgets. Besides that the theme has some additional widgets that might be useful for you:

[FitWP] Flickr

This widget displays the list of photos which is got from a user or group on Flickr.

This widget has the following options:

  • Title: widget title
  • Flickr ID: this is ID (not username) of user or group on Flickr. You can go to http://idgettr.com to get the ID.
  • Type: select type of above ID is User or Group
  • Number of photos: how many photos you want to display
  • Display: which photos you want to display, latest or random photos.
  • Size: select size of photos

[FitWP] Latest Tweets

Before you use this widget, you have to create a Twitter app. Following these steps:

View post on imgur.com

  • Fill in all information needed for the app. The name and description can be anything, it does not have to be a certain name. You can leave the Callback URL field empty.
  • After creating the app, go to API Keys tab then click Create My Access Token button at the bottom to generate the necessary codes. It usually take 10 – 15 seconds to generate these codes, you have to reload that page to see your code in Your Access Token section.

View post on imgur.com

  • Now you can copy the following fields for setting up Latest Tweets widget:
    • API key -> Consumer Key
    • API secret -> Consumer Secret
    • Access token -> Access token
    • Access token secret -> Access token secret

These fields will be used in the tweets widget.

Now go to your website admin area, then Appearance > Widgets, drag and drop [FitWP] Latest Tweets widget into a sidebar that you want it to show there. You’ll see these fields this:

View post on imgur.com

(1): You also need to enter Cache time, which is the time your tweets will be temporarily stored in WordPress cache,

(2): Twitter username which you want to get from

(3): Number of tweets you want to get

After filling all information, just click Save.

[FitWP] Recent Posts

This widget replaces default WordPress recent posts widget. It displays recent posts in the much more beautiful way and gives you more control to what will be shown.

The widget has the following options:

  • Title: widget title
  • Number Of Posts: how many posts you want to displayed
  • Category: you can choose to display posts from all categories, or a specific category or multiple categories
  • Show Comment Number: whether or not show comment number
  • Show Thumbnail: whether or not show thumbnail
  • Default Thumbnail: if post doesn’t have thumbnail, this default thumbnail will be used
  • Show Date: whether or not show post date
  • Date Format: date format. See this link for a full list of supported date formats
  • Show Excerpt: whether or not show post excerpt
  • Excerpt Length: the number of words of post content will be displayed
  • Show Readmore Text: whether or not show read more text
  • Readmore Text: Read more text

[FitWP] Tabs

This widget displays popular posts, recent posts and recent comments in a tabbed widget. Each tab has its own options. For popular posts and recent posts, the options are similar to the Recent Posts widget above.

Note that popular posts are counted based on a number of comments.

[FitWP] Social Links

This widget shows links (with icons) to your social network profiles. All you need to do is just enter URL to your social network profiles and optionally title for each link.

TheJ

Welcome! First of all, we want to thank you for purchasing our TheJ WordPress Theme.

In the following sections, we will show you how to set up and use TheJ theme the easiest way possible. Although there’re a lot of things written in this documentation, the theme itself is not very hard to use. This file is more of a reference if you do not know what to do, or if you are not familiar with WordPress.

Files Included

The download package (.zip) that you get from ThemeForest contains the following files and folder:

  • thej.zip: Main theme file that needs to be uploaded to host to install TheJ theme
  • docs.html: Theme documentation (this file)
  • thej-demo-import.zip: The plugin for demo import
  • Plugins: Plugins needed for the theme

Installation

We have written a very detailed guide on how to download and install a WordPress theme from ThemeForest, please follow the instruction in that article.

Also, please follow the guide to import the demo content if you want to have the site looks exactly like our demos.

Setup the Homepage

It’s no doubt that the homepage is the most important page of the website. In TheJ, we use Visual Composer to build the homepage and other pages on the website, such as About Us or Services. So this guide is applied not only for the homepage but also for other pages that use Visual Composer as well.

Before going into details with Visual Composer, let’s setup the static page for the homepage. Doing that by following this guide.

Create homepage

In order to build the homepage the same as in the demo, you need to follow the instruction to create a static front page.

Then, you can build the homepage content with Visual Composer. We have written a very detailed guide on building pages with Visual Composer. Please note that if you use our demo import plugin, then you already have all the content set up. You can start playing with them and change them to fit your requirements.

Add/edit portfolio

The portfolio is the most important part of TheJ. You can use the portfolio to show your projects, creative works or anything. It’s the best way to let people know what you’ve done and get more clients.

In order to add the portfolio to your website, you need to install the Jetpack plugin and enable the Custom Content Types module. Please follow this instruction to understand how to do that.

Add/edit testimonials

TheJ also integrates with Jetpack testimonial custom post type that you can see on the demo homepage. Similar to the portfolio, please follow this instruction to understand how to do that.

Theme Options

After done installing and setup the theme, you might want to customize the theme to fit your needs. All the theme customization are the location in Customizer → Theme Options. You can change all theme options in one place and preview the changes in real-time! There are various options for the theme and they’ll be explained in the sections below

General options

favicon

The general options are located under General section. There is only 1 option for the website site icon. The site icon is an icon associated with a website or web page intended to be used when you bookmark the web page. Web browsers use them in the URL bar, on tabs, and elsewhere to help identify a website visually. Also, it is used as application icon of the mobile device.

To add a site icon, follow these steps:

  1. Click the Select Image button. A popup will appear allowing you to upload a new logo or select an existing one from the Media Library.
  2. Once you upload or select an image, you can crop it to make it fits the position. After done, click Save and your logo will appear in the preview panel.

Header options

The header in TheJ has a fixed layout and contains the following elements:

  • Site logo
  • Search form
  • Main menu
  • Cart icon (if you enable e-commerce functionality with WooCommerce plugin) and mobile menu toggle icon
  • The post title area in other pages (not homepage)

Among these elements, the search form has no options. The following will show you how to customize the other elements.

Logo

By default, TheJ displays the site title but you can change that to display site logo. The site logo feature requires WordPress 4.5, so you need to upgrade your WordPress to version 4.5 if you have an older version. If you couldn’t upgrade, then the only option for you is displaying the site title.

In order to add a logo to your site, go to Customizer → Theme Options → Header and click the button Select logo to upload the logo or select from the Media Library.

Header options

Main menu

Although the theme is working now and it shows menu, but because we haven’t created a menu for primary location, the theme will display all pages by default. As the number of pages is large, displaying all of them in the menu is a bad idea.

Following these steps to create a menu (here we will use the WordPress Dashboard instead of the Customizer because this allows us to add mega menu as described in the next section):

  • Go to Appearance → Menus
  • Select an existing to edit, or click Add a menu. Note: when you import the demo, you already have a menu Main, so select it if you want to have the same menu as in the demo.
  • Click Add items to add items to the menu
  • When you’re done adding menu items, check Primary Menu for Theme locations at the bottom of the page

menu

Mobile menu

There is also 1 option for the mobile menu here in the Customizer → Theme Options → Header. The mobile menu is displayed when you click on the toggle icon on the top bar. The option allows you to select which type of content will be displayed in the mobile menu: the main menu or widgets.

If you choose the main menu and social icons then all items of the main menu and social icons will be displayed in the mobile menu.

If you choose widgets then you need to go to Customizer → Widgets and you will see a new sidebar Mobile. Simply add new widgets to this sidebar and they’ll display in the mobile menu.

Title alignment

On single posts or pages, we also have the option to align the page title.

Page title alignment

Footer options

The footer of TheJ is simple and has only the copyright text. To change it, go to Customizer → Theme Options → Footer to start customizing the footer.

Footer option

You also have another option to show or hide Go to top button.

Blog options

The blog options are located in Customizer → Theme Options → Blog. There are several options as follows:

Blog options

Options Description
Blog/Archive layout The layout for the blog posts: list, grid or masonry
Hide post thumbnail on blog archive page Do you want to hide post thumbnails on the blog page? See Minimal demo
Content display on blog archive page What type of post content will be displayed. Available options are Post excerpt, Post content or Post content before more tag. To understand what those values mean, take a look at the screenshot bellow:

post content

Where:

  • (A): Whole post content, this is what you enter in the editor.
  • (B): Post excerpt, which is optional hand-crafted summaries of your content. Learn more about the manual excerpt. If you don’t enter anything in the excerpt box, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
    (C): The post content before more tag
    (D): The more tag

Return to blog option: if you choose

  • Post excerpt: The theme will get post excerpt and display it. Remember: if you don’t enter excerpts for the post, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
  • Post content: The theme will get whole post content and display it. This is the default value.
  • Post content before more tag: The theme will get only the post content before more tag and display it.
Options Description
Post content limit (words) The number of words of the post content will be displayed on the blog page.
Hide related posts on single post This option allows you to hide related posts on the single post. It’s useful if you use another related posts plugin.

Layout options

Layout options allow you change the sidebar position for your website. You can put the sidebar on the right, left or hide it. Doing that by going to Customizer → Theme Options → Layout:

Theme layout options

Color options

TheJ allows you to change the color scheme and colors of some elements to have a unique look and feel. There is no limit to pick colors in TheJ (we will constantly update the theme with more options for colors).

To start customizing the colors, please go to Customizer → Theme Options → Colors and you’ll see the following options:

Color options

To change the color scheme of the theme, you need to adjust 2 colors:

Options Description
Primary color The primary color for the theme, which is used for links, buttons, social icons. The default is black.
Secondary color The secondary color for the post meta, categories, post date. The default is gray.

To personalize the theme, TheJ adds the following options for you to customize the top bar, the primary menu, and some elements, all are self-explained by their name:

  • Header text color
  • Background color

Typography options

One of the coolest features of the TheJ theme is custom typography. This feature allows you to select custom fonts, font sizes, font styles for various elements on the website without touching code. TheJ supports all Google Fonts (more than 700 fonts) which is the largest free collection of fonts available on the Internet.

To start using custom fonts for TheJ, please go to the Customizer → Theme Options → Typography and you’ll see the following screenshot:

Typography options

TheM allows you to change typography for:

  • Body text (post content, post summary)
  • Headings (H1, H2, …, H6 tags)
  • Primary menu
  • Post title

These are the main elements of the website and for each element, TheJ sets up a necessary group of settings to adjust such as:

  • Font family: which can be selected from 700+ fonts from Google Fonts. To see how they look, you can simply select them and see the changes in real-time or go to http://google.com/fonts and search for the font name.
  • Font weight: normal, bold, extra bold, etc. Some fonts have only some weights, so make sure you preview the result.
  • Font size: in pixels. Leave it blank to use the default value.
  • Line height: in pixels. Leave it blank to use the default value.
  • Text transform: UPPERCASE, lowercase, Capitalize
  • Letter spacing: in pixels. Leave it blank to use the default value.

Note that some elements don’t have all the above settings. We add only the settings with a serious consideration that those settings are really needed for the elements.

If you want to change typography for other elements or custom the fonts more deeply, please use the Custom CSS module in Jetpack.

Portfolio options

TheJ has a built-in portfolio section which shows your projects in a beautiful masonry grid with a filter. This is a great way to show to your visitors what you have done in the past by highlighting previous projects. To know how to add or edit projects, please follow this guide.

The settings for portfolio are simple and put in Customizer → Theme Options → Portfolio:

Portfolio optionsPortfolio options

Options Description
Portfolio page title The title for portfolio archive page (at http://yourdomain.com/portfolio). By default, it’s just Archive which is useless. Enter something meaningful here like Portfolio, Our works, Recent Projects, etc.
Portfolio page content The content that displays below page title in the portfolio archive page
Portfolio layout Choose which type of portfolio page? Grid or masonry. We recommend masonry as it’s more beautiful.
Portfolio Masonry Custom Enter the custom layout for masonry. This option is used to setup the width of each element in the masonry grid. Each number means the width of an element:
1: One square block with 25% of the width. This is a base unit (1×1).
2: One rectangle block with 50% of width (2×1)
2v: One rectangle block with 25% of width and double height (1×2)
4: One square block with 50% of width (2×2)
Pagination style The pagination style. The theme supports 3 pagination style: default next/prev style, infinite scroll and load more button. Note that if you choose infinite scroll or load more button style, you need to install the Jetpack plugin and activate the Infinite scroll module.
Pagination load more text The load more text for the load more button. Only applied if you choose to load more button style.
Single portfolio display Choose how to display single portfolio image: normal (image left, content right) or full (full-width image on the top and content on the bottom)

WooCommerce options

TheJ supports WooCommerce plugin – the best and most popular e-commerce plugin for WordPress. Essentially, you do not need to do anything. TheJ smoothly integrates with WooCommerce and setup everything for you.

To change the options of TheJ for WooCommerce, please go to Customizer → Theme Options → WooCommerce:

WooCommerce options

There is only 1 option for WooCommerce: default layout for shop page which can be a list, grid or 2 column.

Widgets

TheJ plays nicely with default WordPress widgets. Besides, the theme has some additional widgets that might be useful for you. In order to add widgets to your website, simply go to Customizer → Widgets or Appearance → Widgets and select widgets begin with TheJ to your website. All the options of the widgets are self-explained.

TheM

Welcome! First of all, we want to thank you for purchasing our TheM WordPress Theme.

In the following sections, we will show you how to set up and use TheM theme the easiest way possible. Although there’re a lot of things written in this documentation, the theme itself is not very hard to use. This file is more of a reference if you do not know what to do, or if you are not familiar with WordPress.

Files Included

The download package (.zip) that you get from ThemeForest contains the following files and folder:

  • them.zip: Main theme file that needs to be uploaded to host to install TheM theme
  • docs.html: Theme documentation (this file)
  • them-demo-import.zip: The plugin for demo import

Installation

We have written a very detailed guide on how to download and install a WordPress theme from ThemeForest, please follow the instruction in that article.

Also, please follow the guide to import the demo content if you want to have the site looks exactly like our demos.

Configure plugins

To make sure the plugins work well with your blog, you should configure them a little bit as below:

Jetpack:

This plugin requires you to connect to WordPress.com to use its functionality. However, if you don’t want to connect to WordPress.com, you can still use it freely by following these steps:

  • Use an FTP software like FileZilla to connect to your host
  • Open the file wp-config.php in the installed WordPress folder
  • Add the following line at the beginning of the file, below <?php
define( 'JETPACK_DEV_DEBUG', true);

For more information, please read this guide.

By default, TheM uses 2 modules of Jetpack: Custom Content Types and Infinite Scroll:

  • If you want to show portfolio on your blog, then you need to activate Custom Content Types module.
  • If you want to have infinite scroll for the blog post, portfolio or shop, then you need to activate Infinite Scroll module.

Go to Jetpack → Settings and activate the modules you want to use.

jetpack

There are several useful modules that you might want to use. Just activate them and try! Jetpack is a very powerful plugin and one of the most popular plugins for WordPress. It’s well developed and actively maintained by Automattic, the organization behind WordPress.

WooCommerce:

To make sure product images are displayed beautifully, we need to adjust WooCommerce settings.

Go to WooCommerce → Settings and click on the tab Products. Then click on Display link and change the image sizes as shown in this screenshot:

woocommerce

YITH WooCommerce Compare:

Go to YITH Plugins → Compare and set Link or Button option to Link as follows:

compare

Setup the homepage

The homepage of TheM has several sections that help you to show your content in an attractive way. You can drag and drop these sections to reorder them or remove them completely. It’s fully customizable and extremely flexible for your website.

Homepage overview

The homepage has 5 sections (see the screenshot):

  1. Slider
  2. Featured Posts
  3. Featured Post
  4. Instagram
  5. Featured Post

home

Each section represents itself a widget, which allows you to edit its configuration easily. You can also use WordPress widget management system to reorder them as you wish.

The homepage uses a specialized sidebar (called Homepage) to display its content. The widgets which can be configured in the Customizer or Widgets page in the dashboard.

Create homepage

In order to build the homepage the same as in the demo, you need to create two pages, one for your homepage and one for your blog page. Go to Pages → Add New and create a page titled Front Page and a page titled Blog. You can also name these pages anything you like, but for the sake of website organization, we recommend using the name Front Page and Blog.

For the homepage, after you have given your page a title, select Homepage from the list of available Templates on the right as the following screenshot:

home

After creating a page and applying the homepage template, you should set it as the static front page by going to Settings → Reading and select A static page (select below) for Front page displays, and then select the page from the dropdown for Front page as follows:

select pages

Homepage sidebar and widgets

The content below the main menu (slider, featured posts, etc.) is the Homepage sidebar. We make several widgets for you to add your content to the homepage easier. You can add any other widget to the homepage if you want to (text widget, gallery widget).

To start adding content to Homepage sidebar, go to the Dashboard → Appearance → Widgets, you will see the Homepage sidebar as well as all available widgets:

sidebar

Another way to add and edit widgets is using the Customizer. Do that by clicking Customizer in the admin bar and select Widgets, then select Homepage section:

customizer

We will use the Customizer in the documentation as it allows you to view the changes in real-time without reloading the page.

Now let’s go through the homepage widgets.

The slider is a collection of featured posts that are displayed in a special slider with a unique effect for text and image. You are able to select which posts to show in the slider as well as which elements to show. This is a good place if you want to highlight the best posts in your blog.

In the Homepage sidebar in the Customizer, click button Add a Widget, you will see a list of available widgets on the right where you can search for widgets and add them. Here we will search for TheM: Featured Posts widget and click on it to add to the Homepage sidebar.

slider

The widget has several options for you to adjust:

Option Description
Number of posts The number of posts you want to show in the slider (e.g. the number of slides).
Category Which category you want to get posts from. Select All if you want to show posts in all categories.
Tag Which tag you want to get posts from. Select All if you want to show posts in all tags.
Show date Do you want to show post date? The date will be rotated 90 degrees to have a good effect. You should enable this for the slider.
Date format The date format. By default, it takes WordPress settings in Settings > General.
Show excerpt Do you want to show post excerpt in the slider? The post excerpt is taken from post excerpt and fallback to the post content.
Excerpt length The number of words of post excerpt you want to show in the slider. The recommended number is 40.
Show read more button Do you want to show read more button?.
Read more text The read more text.
Display as Choose which format you want to show the featured content. There are 4 styles that you can select from creative slider (as shown in demo Creative, full-width slider – in demo Travel/Girl, single post slider – in demo Lifestyle/Minimal, grid – in demo Creative/Food)
Slider speed (ms) The number of milliseconds between slides.
Hide these posts in the home page Whether to exclude these posts in the post list in the homepage to remove duplication?

Tip: To select specific posts for the slider, you can create a specific tag and add it to the posts you want to show. Then in this widget, select that tag.

Similar to the creative slider, the grid of featured posts displays posts in a 3-column or 4-column grid. This is also a good place to highlight your posts.

The grid of featured posts uses exactly the same widget as the slider (Featured Posts). The only difference is you do not check the option to Display as the slider.

Note: In order to have the best view, you should set the number of posts to 3 or 4.

Section: Featured post

The Featured Post widget allows you to show a single post in the homepage beautifully. That’s a good option to show the post that highlights the main content of your blog.

To add the widget to the homepage, select TheM: Featured Post from the widget list:

featured

The widget has several options for you to adjust:

Option Description
Select post Select the post you want to show.
Thumbnail Select position for the thumbnail. In the demo, we use this widget twice: one with thumbnail left and one with thumbnail right to give a good effect of view.
Show date Do you want to show post date? The date will be rotated 90 degrees to have a good effect. You should enable this.
Date format The date format. By default, it takes WordPress settings in Settings > General.
Show excerpt Do you want to show post excerpt? The post excerpt is taken from post excerpt and fallback to the post content.
Excerpt length The number of words of post excerpt you want to show. The recommended number is 40.
Show read more button Do you want to show read more button?.
Read more text The read more text.

Section: Instagram

The Instagram widget displays the latest images from your stream on Instagram or from any person or from any tag in a beautiful grid or carousel slider. It’s quite flexible and gives your blog an impressive look.

To add the widget to the homepage, select TheM: Instagram from the widget list:

instagram

The widget has several options for you to adjust:

Option Description
Title The title of the widget. It’s usually not used in order to display the images cleaner.
User ID Your user ID. In order to get your user ID, click the link above this field Authorize and get your Access Token and User ID here. You will be redirected to Instagram to login if you haven’t. Then you will be asked to authorize the app to access your account. Don’t worry, the app only sees your basic info like username and email. Then you will be redirected to a page where your user ID and access token are displayed.
Access token Your access token that you will get in the previous step.
Cache time The number of seconds that the widget cache the content from Instagram. This prevents continual sending requests to Instagram which might be blocked if the frequency is too low. A good option is 3600 (1 hour).
Number of images The number of images you want to show. If you don’t show images as a carousel slider (the option below), then you should set this number to 4.
Other user ID Use this option if you want to display images from the other person than yourself. To get other user’s ID, click the link Click here to get other person’s ID below the input.
Tag If you want to get images not from yourself, but from a tag in Instagram, then enter the tag here.
Display as carousel slider Do you want to show images in a carousel slider (as displayed in the demo)? If not, images will be shown in a grid.

Theme options

After done installing and setup the theme, you might want to customize the theme to fit your needs. All the theme customization are the location in Customizer → Theme Options. You can change all theme options in one place and preview the changes in real-time! There are various options for the theme and they’ll be explained in the sections below

General options

favicon

The general options are located under General section. There is only 1 option for the website site icon. The site icon is an icon associated with a website or web page intended to be used when you bookmark the web page. Web browsers use them in the URL bar, on tabs, and elsewhere to help identify a website visually. Also, it is used as application icon of the mobile device.

To add a site icon, follow these steps:

  1. Click the Add a Site Icon button.
  2. Click the Choose File button to select the desired icon.
  3. Click the Upload Image button.
  4. Crop your image. You can use the Preview section on the right to see what your image will look like in its final form.
  5. Click the Crop Image button.
  6. That’s it! You’re shiny new Site Icon is ready to go!

Header options

Top bar

The top bar is divided into 2 parts: the top bar left and top bar right. Each part can have the following content:

  • Social icons
  • Functional icons (search, cart, mobile menu icons)
  • A custom menu
  • Custom text

By default top bar left displays social links and top bar right displays functional icons. To change which is displayed in the top bar left, please go to Customizer → Theme Options → Header and you will see the options as follows:

header options

Simply select which type of content you want to display for each part of the top bar.

If you want to display text , simply select Text option and enter the text in the input below. Note that you can enter HTML here, so it’s good for you to display a welcome text with a link or something.

If you want to display social links in the top bar, then you need to create a custom menu for social links and set it to display here. To do that, follow these steps:

  • Go to Customizer > Menu and click the button Add a Menu.
  • Click the button Add Items and select Custom Links in the list.
  • Enter link to your social profile and click Add to Menu.
  • Repeat the process to add more links to your social profiles in other social networks.
  • When you’re done, check the checkbox Social Links Menu in the section Menu locations to make it display in the top bar.

social menu

If you want to display a custom menu in the top bar, then you need to create a custom menu and set it to display here. To do that, follow these steps:

  • Go to Customizer → Menu and click the button Add a Menu.
  • Click the button Add Items and select Custom Links in the list.
  • Enter link to your social profile and click Add to Menu.
  • Repeat the process to add more links to your social profiles in other social networks.
  • When you’re done, check the checkbox Top Bar Left/Right Menu in the section Menu locations to make it display in the top bar.

top bar menu

Note: when you set a menu for social links, these links will be displayed in the footer and About me widget as well as in the mobile menu.

By default, TheM display the site title but you can change that to display site logo. The site logo feature requires WordPress 4.5, so you need to upgrade your WordPress to version 4.5 if you have an older version. If you couldn’t upgrade, then the only option for you is displaying the site title.

In order to add a logo to your site, go to Customizer → Theme Options → Header and click the button Select logo to upload the logo or select from the Media Library.

header options

You also can choose the logo position below as center (default), left or right.

When choosing the position left or right, you have an option to minimize the main menu to the toggle icon like in the Minimal demo

Although the theme is working now and it shows menu, but because we haven’t created a menu for primary location, the theme will display all pages by default. As the number of pages is large, displaying all of them in the menu is a bad idea.

Following these steps to create a menu (here we will use the WordPress Dashboard instead of the Customizer because this allow us to add mega menu as described in the next section):

  • Go to Appeance → Menus
  • Select an existing to edit, or click Add a menu. Note: when you import the demo, you already have a menu Main, so select it if you want to have same menu as in the demo.
  • Click Add items to add items to the menu
  • When you’re done adding menu items, check Primary Menu for Theme locations at the bottom of the page

menu

Mega menu

One of the best feature of TheM is mega menu. The mega menu allows you to display custom content in the menu, not only links. You can choose to display custom text or post list in the menu.

In order to use mega menu, you need to use the WordPress Dashboard, not the Customizer. Go to Appearannce → Menus and follow the steps below:

Click on a top-level menu item to edit it, you will see an checkbox for Enable mega menu? This option allows you to display its submenu items in a mega menu:

mega

Then add a Custom Link as a submenu item for this item, you will see the following options:

submenu

Let’s break it out:

Option Description
Layout The layout of this submenu item.
Item type The type of the content of this submenu item. It has 2 options: Text which displays a custom text (similar to the text widget in WordPress) or Posts which displays a list of posts.

If you choose item type Text, you will see an option for the Content. Simply enter the content you want to display. HTML and shortcodes are allowed. (See the screenshot above)

If you choose item type Posts, then you will see more options like this:

submenu posts

Option Description
Number Of Posts How many posts you want to displayed. It should be fit to your layout, e.g. if you choose layout 3/4, then you should set the number of posts 3.
Category You can choose to display posts from all categories, or a specific category
Tag You can choose to display posts from all tags, or a specific tag
Show Date Whether or not show post date
Date Format Date format. Click the [?] link for a full list of supported date formats
Show Excerpt Whether or not show post excerpt
Excerpt Length The number of words of post content will be displayed

After done editing, click Save Menu and see it in action in the front end.

Mobile menu

There is also 1 option for the mobile menu here. The mobile menu is displayed when you click on the toggle icon on the top bar (if you choose top bar left / right displays functional icons, or you can see it on mobile devices). The option allows you to select which type of content will be displayed in the mobile menu: the main menu and social icons or widgets.

If you choose the main menu and social icons then all items of the main menu and social icons will be displayed in the mobile menu.

If you choose widgets then you need to go to Customizer → Widgets and you will see a new sidebar Mobile. Simply add new widgets to this sidebar and they’ll display in the mobile menu.

The footer of TheM is simple and has only 2 parts: the social links and copyright text. The social links is automatically pulled from the Social Links menu that we have covered in the section [#top-bar](Top bar) above. Please read this to understand how to setup the social links menu.

Go to Customizer → Theme Options → Footer to start customizing the footer.

footer options

Options Description
Hide social links Whether to hide social links
Footer text The footer copyright text. You can enter HTML and shortcodes here.
Footer background Upload or select an existing image from the Media Library for the footer background.
Footer background position Where do you want the footer background image to align?
Footer background size (width height) Enter CSS for background size
Footer background repeat Do you want the background image repeated?
Show go to top button Do you want to show go to top button?

Blog options

The blog options is located in Customizer → Theme Options → Blog. There are several options as follows:

blog options

Options Description
Blog sidebar layout The sidebar layout for the blog (left, right or no sidebar)
Hide post thumbnail on blog archive page Do you want to hide post thumbnails on the blog page? See Minimal demo
Content display on blog archive page What type of post content will be displayed. Available options are Post excerpt, Post content or Post content before more tag. To understand what those values mean, take a look at the screenshot bellow:

post content

Where:

  • (A): Whole post content, this is what you enter in the editor.
  • (B): Post excerpt, which is optional hand-crafted summaries of your content. Learn more about manual excerpt. If you don’t enter anything in the excerpt box, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
    (C): The post content before more tag
    (D): The more tag

Return to blog option: if you choose

  • Post excerpt: The theme will get post excerpt and display it. Remember: if you don’t enter excerpts for post, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
  • Post content: The theme will get whole post content and display it. This is the default value.
  • Post content before more tag: The theme will get only the post content before more tag and display it.
Options Description
Post content limit (words) The number of words of the post content will be displayed on the blog page.
Read more text The read more text
Pagination style The pagination style. The theme supports 4 pagination style: next/prev style (see Travel demo, numeric style, infinite scroll (see Minimal demo, load more button (see Creative demo. Note that if you choose infinite scroll or load more button style, you need to install the Jetpack plugin and activate the Infinite scroll module.
Pagination load more text The load more text for the load more button. Only applied if you choose to load more button style.
Hide related posts on single post This option allows you to hide related posts on the single post. It’s useful if you use another related posts plugin.

Color options

TheM allows you to change the color scheme and colors of some elements to have a unique look and feel. There is no limit to pick colors in TheM.

To start customizing the colors, please go to Customizer → Theme Options → Colors and you’ll see the following options:

color options

To change the color scheme of the theme, you need to adjust 2 colors:

Options Description
Primary color The primary color for the theme, which is used for links, buttons, social icons. Default is black.
Secondary color The secondary color for the post meta, categories, post date. The default is gray.

To personalize the theme, TheM add the following options for you to customize the top bar, the primary menu and some elements, all are self-explained by their name:

  • Top bar background color
  • Top bar text color
  • Top bar link color
  • Top bar link hover color
  • Primary menu link color
  • Recent posts heart icon color

Typography options

One of the coolest features of the TheM theme is custom typography. This feature allows you to select custom fonts, font sizes, font styles for various elements on the website without touching code. TheM supports all Google Fonts (more than 700 fonts) which is the largest free collection of fonts available on the Internet.

To start using custom fonts for TheM, please go to the Customizer → Theme Options → Typography and you’ll see the following screenshot:

font options

TheM allows you to change typography for:

  • Body text (post content, post summary)
  • Headings (H1, H2, …, H6 tags)
  • Top bar
  • Primary menu
  • Post title

These are the main elements of the website and for each element, TheM sets up a necessary group of settings to adjust such as:

  • Font family: which can be selected from 700+ fonts from Google Fonts. To see how they look, you can simply select them and see the changes in real-time or go to http://google.com/fonts and search for the font name.
  • Font weight: normal, bold, extra bold, etc. Some fonts have only some weights, so make sure you preview the result.
  • Font size: in pixels. Leave it blank to use the default value.
  • Line height: in pixels. Leave it blank to use the default value.
  • Text transform: UPPERCASE, lowercase, Capitalize
  • Letter spacing: in pixels. Leave it blank to use the default value.

Note that some elements don’t have all the above settings. We add only the settings with a serious consideration that those settings are really needed for the elements.

If you want to change typography for other elements or custom the fonts more deeply, please see the documentation for custom CSS in the Design options section.

Portfolio options

TheM has a built-in portfolio section which shows your projects in a beautiful masonry grid with a filter. This is a great way to show to your visitors what you have done in the past by highlighting previous projects.

The settings for portfolio are simple and put in Customizer → Theme Options → Portfolio:

portfolio settings

There are only 2 options:

  • Portfolio archive page title: The title for portfolio archive page (at http://yourdomain.com/portfolio). By default, it’s just “Archive” which is useless. Enter something meaningful here like “Portfolio”, “Our works”, “Recent Projects”, etc.
  • Number of projects per page: The number of projects shown in 1 page on the archive page. Note that by default if you choose pagination style Next/Prev links or numeric links (in the Customizer → Theme Options → Blog section), then all portfolios are get and organized in a masonry layout. In these cases, this option is not applied. It’s only applied if you choose pagination style Infinite scroll or Load more button where some projects are loaded when scrolling or clicking the button.

WooCommerce options

TheM supports WooCommerce plugin – the best and most popular e-commerce plugin for WordPress. Essentially, you do not need to do anything. TheM smoothly integrates with WooCommerce and setup everything for you.

To change the options of TheM for WooCommerce, please go to Customizer → Theme Options → WooCommerce:

woocommerce settings

There is only 1 option for the number of products shown on the shop page. This option overwrites default WordPress/WooCommerce options which make you can customize the shop page better.

Add/Edit Portfolio

TheM has a built-in portfolio section which shows your projects in a beautiful masonry grid with a filter. This is a great way to show to your visitors what you have done in the past by highlighting previous projects.

To start using portfolio, please install the Jetpack plugin. This is a very popular plugin made by Automattic, the company behind WordPress. It allows you to create portfolio, testimonials, add related posts and much more.

Creating a portfolio project is as simple as creating a post. Go to Portfolio → Add New and add new project title, content and set featured image as follows:

add portfolio

In the portfolio project content, you can put anything about the project such as project description, client name, date, etc. Remember to use HTML elements and custom CSS classes to style the content beautifully.

Do not forget to add project types on the right. It’s used to filter the projects on the portfolio page.

After finishing adding basic content for projects, please fill in all the information about the project in the Project Settings meta box:

edit project

Now go to the frontend and view all projects at http://yourdomain.com/portfolio/

Custom sidebar for page content

You already see how to setup the homepage with a custom sidebar and widgets. This is a very flexible way to add and organize content to a special page like the homepage.

This section shows you how to do the same for other pages, not just the only homepage.

Basically it requires 3 steps:

Create a custom sidebar

To create a new custom sidebar, go to Appearance → Sidebars:

sidebars

On this page, you will see a list of created sidebar. If you want to create a new sidebar, simply enter new sidebar name in the input box. Click Add more button if you want to add multiple sidebars. Then click Save changes to submit the changes.

Finishing this step, you will see all custom sidebars listed in the beginning of the page.

Add widgets to the sidebar

After creating custom sidebars, go to Appearance → Widgets and you will see new sidebars listed as a widgetized area.

widgets

Now you can drag and drop any widget to the new sidebar. There’s nothing different between custom sidebar and normal WordPress sidebar.

Assign sidebar to a page

After done adding widgets to the new custom sidebar, now go to edit a page that you want to use the custom sidebar for its content.

On the right of the editing page, you will see a box Custom sidebar content where you can select a custom sidebar for the page content:

sidebar content

After selecting the sidebar, go to the frontend and you will see the widgets of that sidebar is added below the main content of the page.

Widgets

TheM plays nicely with default WordPress widgets. Besides that the theme has some additional widgets that might be useful for you. In order to add widgets to your website, simply go to Customizer → Widgets or Appearance → Widgets and select widgets begin with TheM to your website. All the options of the widgets are self-explained.

TheM: About

This widget shows your personal information in a beautiful format. To start using it, just drag and drop the TheM: About widget into the primary sidebar or any sidebar you want to show (we recommend Primary sidebar and Mobile sidebar). This widget has the following options:

about widget

Options Description
Title The widget title
Image Your image. Click the Select button to upload or choose an image from the Media Library
Intro Intro text about yourself
Show social links from Social Links menu Display links to your social profiles. Links are get from Social Links Menu.
Social links If you don’t check the checkbox for “Show social links from Social Links menu”, then you can enter custom links in each input below.
Signature Your signature in the text. It will be displayed beautifully with a custom Google Font
Signature Image If you don’t want to display signature with text, then upload your signature image here. Click the Select button to upload or choose an image from the Media Library.

This widget shows 3 featured blocks in a grid which you can use to display links to your most favorite content. See Girl demo to understand how we use it.

This widget has the following options for each block:

block

Options Description
Image The block background image. Click the Select button to upload or choose an image from the Media Library
Text The text displayed in the center of the block (with white background)
Link Where do you want the block link to?

TheM: Featured Post

This widget displays a specific post in an attractive way. It’s very useful when you want to highlight a post on the homepage. See Creative demo understand how it works.

The widget has the following options:

featured post

Options Description
Select post Select the post you want to feature
Thumbnail Select the thumbnail position. See Creative demo understand how it works.
Show date Do you want to show post date? We recommend enabling this.
Date format The date format. See this link for a full list of supported date formats
Show excerpt Whether or not show post excerpt
Excerpt length The number of words of post content will be displayed
Show read more button Whether or not show read more button
Read more text The read more text

This is the most important widget in TheM. It displays your featured posts in the home page flexibly. All our demos use this widget to show featured posts.

We already talked about this widget when we setup the homepage above. Here are some more details for you.

featured posts

The widget has several options for you to adjust:

Option Description
Number of posts The number of posts you want to show
Category Which category you want to get posts from. Select All if you want to show posts in all categories.
Tag Which tag you want to get posts from. Select All if you want to show posts in all tags.
Show date Do you want to show post date?
Date format The date format. By default, it takes WordPress settings in Settings → General. See this link for a full list of supported date formats.
Show excerpt Do you want to show post excerpt? The post excerpt is taken from post excerpt and fallback to the post content.
Excerpt length The number of words of post excerpt you want to show. The recommended number is 40.
Show read more button Do you want to show read more button?.
Read more text The read more text.
Display as Choose which format you want to show the featured content. There are 4 styles that you can select from: creative slider (as shown in demo Creative, full-width slider – in demo Travel/Girl, single post slider – in demo Lifestyle/Minimal, grid – in demo Creative/Food
Slider speed (ms) The number of milliseconds between slides.
Hide these posts in the home page Whether to exclude these posts in the post list in the homepage to remove duplication?

Tip: To select specific posts for the slider, you can create a specific tag and add it to the posts you want to show. Then in this widget, select that tag.

TheM: Flickr

This widget displays your recent images from Flicker. It has the following options:

flickr

Option Description
Title The widget title
Flickr ID Your Flickr ID. Get it here
Type Get images from User or Group
Number of photos Number of photos you want to show
Display Display latest images or random images
Size Select image sizes

TheM: Instagram

This widget displays the recent images from your Instagram account or someone’s account. It has the following options:

instagram options

Option Description
Title The widget title
User ID Your user ID. Get it here
Access token Your access token. Get it here
Cache time (seconds) The number of seconds the widget store images in the cache.
Number of images Number of images you want to show
Other user ID Another person’s Instagram ID. Use this option if you want to display images from another account. Get another person’s ID here
Tag Use this to fetch recent images tagged with a specific tag.
Display as carousel slider? Do you want to display images in a carousel? See Creative demo.

TheM: Recent Posts

This widget simply displays recent posts in the sidebar. It has the following options:

recent posts

Option Description
Title The widget title
Number of posts The number of posts you want to show
Category Which category you want to get posts from. Select All if you want to show posts in all categories.
Display first post big Whether or not to show first post bigger than others. See Food demo
Show date Do you want to show post date?
Date format The date format. By default, it takes WordPress settings in Settings → General. See this link for a full list of supported date formats.
Show like number Do you want to show like the number? See Food demo

TheM: Latest Tweets

Before you use the Tweets widget, you have to create a Twitter app. Go to https://dev.twitter.com/apps and click Create a new application button.

twitter app

Fill in all information needed for the app. The name and description can be anything, it does not have to be a certain name. You can leave the Callback URL field empty.
After creating the app, click Create My Access Token button to generate the necessary codes. Now go to app Dashboard and select Keys and Access Token tab and copy the following fields:

  • Consumer key
  • Consumer secret
  • Access token
  • Access token secret

These fields will be used in the tweets widget.

app

Now go to your website admin area, then Appearance → Widgets, drag and drop TheM: Latest Tweets widget into a sidebar that you want it to show there. You’ll see these fields like this:

tweets

You also need to enter Cache time – which is the time your tweets will be temporarily stored in WordPress cache, Twitter username and Number of tweets.

After filling all information, just click Save.

Shopsters

Welcome! First of all we want to thank you for purchasing our Shopsters WordPress Theme.

In the following sections we will show you how to set up and use Shopsters theme the easiest way possible. Although there’re a lot of things written in this documentation, the theme itself is not very hard to use. You can go to the Theme Options page and discover everything yourself. This file is more of a reference if you do not know what to do, or if you are not familiar with WordPress.

If you have any questions that are beyond the scope of this help file, please feel free to ask your questions at the support ticket system.

Files included

The download package (.zip) that you get from ThemeForest contains the following files and folder:

  • shopsters.zip: main theme file that need to be uploaded to host to install Shopsters theme.
  • shopsters-child.zip: the basic child theme for Shopsters.
  • Documentation: folder of documentation files.
  • Plugins:
    • codecanyon-2751380-slider-revolution-responsive-wordpress-plugin.zip: Slider Revolution Responsive WordPress Plugin. Completed download package from Codecanyon.net. It’s FREE for you to use with Shopsters theme.
    • codecanyon-242431-visual-composer-page-builder-for-wordpress.zip: Visual Composer plugin. Completed download package from Codecanyon.net. It’s FREE for you to you with Shopster theme.
    • shopsters-demo-import.zip: a plugin which helps you to import the demo content by just 1 click.

Installation

Step 1: Install Theme

We have written a very detailed guide on how to download and install a WordPress theme from ThemeForest, please follow the instruction in that article.

 

Step 2: Install plugins

After installing Shopsters, you’ll see a notification in the top of the page that says the theme needs some plugins to function properly.

Shopsters theme requires follow plugins:

  • Meta Box
  • WooCommerce
  • WPBakery Visual Composer
  • Shopsters VC Addon

Shopsters theme recommends follow plugins:

  • Slider Revolution ($18 on CodeCanyon, included in download package for free)

Shopsters is working perfectly with these plugins. It automatically adds more styles to them to make the design match the theme.
To install these plugins:

  • Click Begin installing plugins
  • You’ll be redirect to a page where all needed plugins are listed. Just click on Install below each plugin’s name
  • After installing, if it’s required to activate the plugin, just activate.

install plugins

Step 3: Config plugins

After finish installing plugins, you need to config image sizes for product.

  • Go to Woocommerce > Settings > Products > Display, under the Product Images section, you will find Catalog Images, Single Product Images, and Product Thumbnails.
  • Catalog Image is for your images on the shop page and for shortcodes. Single Product Image is for your images on the single product pages. Product Thumbnail is for your smaller product thumbnails for widgets.
  • Change the size of Catalog Image to 263 x 300, Single Product Image to 555 x 633, Product Thumbnail to 180 x 180.

woocommerce settings

Step 4: Install demo content plugin

Firstly, install all required and recommended plugins as we wrote above Install Theme. But they not all, there is still a plugin we have to install, it is Shopsters Demo Import plugin.

Now go to Plugins > Add New then click to Upload Plugin button on the top.

upload plugin

Click to button Choose File then select shopsters-demo-import.zip file in Plugins folder, then lick Install Now button. After finish installing plugin, click to Active Plugin on the next screen.

**Note**: You have to disable plugin **WordPress Importer** before install and active **Shopsters Demo Import** to avoid error while installing it.

Step 5: Import demo content

Go to Appearance > Import Demo. You can select what content do you want to import or don’t change anything to import all demo data. Finally, click Import Demo Content button to finish.

1 click import demo

Theme Options

The Shopsters theme comes with unique, creative and easy-to-use Theme Options page. You can change all theme options in one place!

With Shopsters’s advanced theme options panel, you can customize just about any part of your site quickly and easily. Every element on the site can have the color changed to your liking. Choose a color scheme for website, select fonts for all headings and body copy, change sizes, colors and line-heights of all fonts, select different footer column layouts, enable or disable several options, upload your own custom favicon, select from various site/page layouts, input custom CSS, set hundreds of other options to easily customize your site!

All options have full description so you can know what you are doing. Just click and save!

Page Templates

Shopsters has some build-in page templates that can help you create special pages easier:

  • Homepage: template to display page content without header title.

When you edit a page, look at on the right, find Page Attributes meta box and select a template from the dropdown Template
Width Homepage template, there’s no configurations at all. After select page template from the meta box on the right, you just need to save the page and see it in action in the frontend.

Widgets

Shopsters plays nicely with default WordPress widgets. Besides that the theme has some additional widgets that might be useful for you:

[FitWP] Flickr

This widget displays list of photos which is get from a user or group on Flickr.

This widget has the following options:

  • Title: widget title
  • Flickr ID: this is ID (not username) of user or group on Flickr. You can go to http://idgettr.com to get the ID.
  • Type: select type of above ID is User or Group
  • Number of photos: how many photos you want to display
  • Display: which photos you want to display, latest or random photos.
  • Size: select size of photos

[FitWP] Latest Tweets

Before you use this widget, you have to create a Twitter app. Following these steps:

twitter app

  • Fill in all information needed for the app. The name and description can be anything, it does not have to be a certain name. You can leave the Callback URL field empty.
  • After creating the app, go to API Keys tab then click Create My Access Token button at the bottom to generate the necessary codes. It usually take 10 – 15 seconds to generate these codes, you have to reload that page to see your code in Your Access Token seciton.

twitter app

  • Now you can copy the following fields for setting up Latest Tweets widget:
    • API key -> Consumer Key
    • API secret -> Consumer Secret
    • Access token -> Access token
    • Access token secret -> Access token secret

These fields will be used in the tweets widget.

Now go to your website admin area, then Appearance > Widgets, drag and drop [FitWP] Latest Tweets widget into a sidebar that you want it to show there. You’ll see these fields this:

tweets

(1): You also need to enter Cache time, which is the time your tweets will be temporarily stored in WordPress cache,

(2): Twitter username which you want to get from

(3): Number of tweets you want to get

After filling all information, just click Save.

[FitWP] Recent Posts

This widget replaces default WordPress recent posts widget. It displays recent posts in much more beautiful way and gives you more control to what will be shown.

The widget has the following options:

  • Title: widget title
  • Number Of Posts: how many posts you want to displayed
  • Category: you can choose to display posts from all categories, or a specific category or multiple categories
  • Show Comment Number: whether or not show comment number
  • Show Thumbnail: whether or not show thumbnail
  • Default Thumbnail: if post doesn’t have thumbnail, this default thumbnail will be used
  • Show Date: whether or not show post date
  • Date Format: date format. See this link for a full list of supported date formats
  • Show Excerpt: whether or not show post excerpt
  • Excerpt Length: the number of words of post content will be displayed
  • Show Readmore Text: whether or not show read more text
  • Readmore Text: Read more text

[FitWP] Tabs

This widget displays popular posts, recent posts and recent comments in a tabbed widget. Each tab has its own options. For popular posts and recent posts, the options are similar to the Recent Posts widget above.

Note that popular posts is counted based on number of comments.

This widget shows links (with icons) to your social network profiles. All you need to do is just enter URL to your social network profiles and optionally title for each link.

Constructent

Welcome! First of all, we want to thank you for purchasing our Constructent WordPress Theme.

In the following sections, we will show you how to set up and use Constructent theme the easiest way possible. Although there’re a lot of things written in this documentation, the theme itself is not very hard to use. You can go to the Theme Options page and discover everything yourself. This file is more of a reference if you do not know what to do, or if you are not familiar with WordPress.

FILE INCLUDED

The download package (.zip) that you get from ThemeForest contains the following files and folder:

  • Constructent.zip: main theme file that needs to be uploaded to host to install the Constructent theme
  • demo-content.xml: demo content file, which contains all pages and posts from live preview website. It will help you to have a first look at how we use Constructent theme
  • docs.html: theme documentation (this file)
  • theme-options.txt: theme option backup file. You’ll need this to restore the default theme options that setup for demo website.
  • Plugins:
    codecanyon-2751380-slider-revolution-responsive-wordpress-plugin.zip: Slider Revolution Responsive WordPress Plugin. Completed download package from Codecanyon.net. It’s FREE for you to use with Constructent theme
    constructent-demo-import.zip: a plugin which helps you to import the demo content by just 1 click.
    home-page-slider.zip: Demo slider that exported from our demo, but with placeholder images

INSTALLATION

Install Theme

We have written a very detailed guide on how to download and install a WordPress theme from ThemeForest, please follow the instruction in that article.

Also, please follow the guide to import the demo content if you want to have the site looks exactly like our demos.

In order to build the homepage the same as in the demo, you need to follow the instruction to create a static front page.

Setup the top bar

The top bar has 2 parts: left and right. Each part is a widget area. In our theme, we support (and recommend) adding text, links or social links to the top bar only.

To setup the top bar, please go to Appearance → Widgets, and drag and drop a widget to Topbar Left or Topbar Right sidebar. In our demo, we use a text widget for the top bar left and [FitWP] Social Links for the top bar right. Here is the content for top bar left (contact info with social icon):

<div class="contact-font-icon">
<span class="contact-info phone-info"><i class="fa fa-phone"></i>+ 1 123 456 789</span>
<span class="contact-info email-info"><i class="fa fa-envelope-o"></i>info@fitwp.com</span>
<span class="contact-info time-info"><i class="fa fa-clock-o"></i>Sun - Sat ( 9 am - 5pm )</span>
</div>

You can use any HTML here. In order to add icons, please add the code from Font Awesome.

For other elements on the website such as Menu, Widgets, please just go to the corresponding section in the Appearance menu.

THEME OPTION

The Constructent theme comes with unique, creative and easy-to-use Theme Options page. You can change all theme options in one place!

With Constructent’s advanced theme options panel, you can customize just about any part of your site quickly and easily. Every element on the site can have the color changed to your liking. Choose a color scheme for website, select fonts for all headings and body copy, change sizes, colors and line-heights of all fonts, select different footer column layouts, enable or disable several options, upload your own custom favicon, select from various site/page layouts, input custom CSS, set hundreds of other options to easily customize your site!

All options have the full description so you can know what you are doing. Just click and save!

Let’s go through each section.

General

General Options

This sections contains:

  • (1): favicon upload, allows you to upload favicon for you website
  • (2): touch icon, allows you to upload icon for mobile devices and tablets
  • (3): show comment on page
  • (4): backup – restore, allows you to backup Constructent options and restore them later, or transfer the saved options between different installs.

Note: From WordPress version 4.3, you can setup favicon and touch icon in Appearance > Customize. The options (1) and (2) in theme is used if your website is running on older version of WordPress.

Here are the explanations of some options that can help you understand and use them better:

Favicon Upload

Favicon (short for Favorite icon), also known as a shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar (sometimes in the history as well) and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab, and site-specific browsers use the favicon as a desktop icon.
This is how favicon appears

Constructent lets you upload favicon or enter favicon URL in the input box:

  • If you have a favicon uploaded, or you store the favicon somewhere out of the Media Library, you can just put the URL of the favicon into the input box, or
  • If you want to upload favicon for your website, click the upload button (the green one near input box) and upload it to Media Library as a normal image, then click Select.

The favicon should be in one of the following formats:.ico, .png, .gif Usually, we should use .ico.

When you’re done, you can click Save Changes button to save your data.

Touch Icon

Touch icons are the favicons of mobile devices and tablets. Each mobile devices and tablets have its own standards for displaying the touch icon (read this article to have a better understanding about touch icon and supported devices) and require various icon sizes. But for best compatibility and simplicity, an image with size 152×152 is enough.

To specify a touch icon for your website, just do the same as for favicon: you can either put the URL of the touch icon into the input box or upload the icon to Media Library.
The icon must be PNG image

When you’re done, you can click Save Changes button to save your data.

Show comments on page

This option allows you to show/hide comments and comment form on pages. By default, Constructent doesn’t display comments and comment form on pages.

Important: In case this option is set to “ON”, to display comments on pages, you still have to allow comments for pages when you edit pages.

By default, this checkbox is checked (meaning comments are allowed on pages). But in case you want to show comments on all pages, except some specific pages, you can use this checkbox to hide comments for those pages only.

Backup – Restore

Constructent allows you to backup theme options and restore them later. You can also transfer the saved options data between different installs.

To backup theme options, just copy the text inside the text box and save it into a file on your computer. To import data, replace the data in the text box with the one from the saved file and click Import Options button.

After clicking Import Options, Constructent will automatically setup all options and refresh the current theme options page, so you can see the options immediately.

Design

This sections contains:

  • Color Scheme: allows you to change color scheme of the whole website
  • Layout: allows you to change layout style and layout for the whole website, for blog posts and pages
  • Typography: allows you to change font family, styles, size, line height, color for body text and headings
  • Custom CSS: allows you to add your custom CSS

Color Schemes

Color Schemes

Constructent theme has 5 predefined color schemes to choose from: yellow (default), red, orange, green and blue. When you change the color scheme of the theme, all links, button background and other elements will change their color or background accordingly.

The default color scheme is yellow, but you can select any from 5 colors here. After selecting, click Save Changes button to save your data. Now go to the frontend and check the colors of links, buttons, etc.

When you select Color Scheme section, you’ll see the following options:

(1): select built-in color scheme. These are 5 predefined color schemes. When you select one of them, your website elements will change color accordingly.

(2): enable/disable custom color scheme. This option allows you create a custom color scheme, and you can build unlimited color schemes here! Just enable this and you’ll see options below.

(3): primary color. This is primary color for your custom color scheme, used for links, overlay, button background on hover, badges, etc.

Background

Background

This section allows you to setup background for the whole site. But please remember, background only works with Boxed layout. (We will talk about layouts in next section)

When you select Background section, you’ll see the following options:

(1): background patterns. We have 5 predefined background patterns. They are repeatable images. You just need to select on of theme. If you don’t like any, you can use option (3).

(2): Background color. Pick any color you want to be the background color of the whole site.

(3): Background image. Upload any image you want to use, or you can pick it from the list of uploaded images.

(4): Background position in horizontal. You can leave it as the default of select either left, center or right.

(5): Background position in vertical. You can leave it as the default of select either top, center or bottom.

(6): Background repeat. You can leave it as default (repeat) or select either no repeat, repeat horizontally or repeat vertically.

(7): Background attachment. You can select either scroll or fixed. The default is the scroll.

Layout

Layouts

This section helps you to select which layout will be used in the whole website.

(1): select layout style for your website. You can select a boxed or wide layout.

(2): sidebar layout for the blog, single posts, and other archive pages. You can select sidebar position here: left, right or none (don’t display sidebar).

(3): sidebar layout for pages. Same meaning as for blog above.

(4): sidebar layout for WooCommerce pages. Same meaning as for blog above but only applied for WooCommerce pages: shop page, single products, product tag archive, product category archive.

Examples: sidebar left – sidebar right

These options is site-wide, meaning for whole website. But you still
can set custom layout for single post and page when edit (We’ll
explore it later).

By default: Constructent uses wide layout style with a right sidebar for both blog and pages.

Typography

Typography

This section helps you to customize fonts for body text and headings on your website. For each element, you can customize:

(1): font family. Just select from the drop-down font family you like. Constructent supports 3 normal fonts (Arial, Verdana and Times).

(2): font size. Adjust font size for better look here. Just remember the unit for font size is px.

(3): line height. Adjust line height for better look here. The unit for line height is also px.

For better readability, good value for line height is about 1.4-1.5 x font size.

(4): font styles. You can choose bold, italic, underline or any combination of them.

(5): font color. Click on the button, a color picker will appear and you can now select any color.

Important: before customizing fonts, remember the default values for fonts. You should customize fonts around these values.

Element Font Family Font Size Line Height Styles Color
Body Text Ubuntu 14px 22px None 999999
Heading 1 Ubuntu 45px 72px None 261e4c
Heading 2 Ubuntu 36px 58px None 261e4c
Heading 3 Ubuntu 30px 48px None 261e4c
Heading 4 Ubuntu 24px 38px None 261e4c

Custom CSS

Custom CSS

This section allows entering custom CSS that will be output in the “. This will overwrite CSS of theme, so please be careful!

Custom CSS is useful when you want to adjust small things for your website. If you have to adjust a lot of things in the website, please use Child Themes.

Header

This sections contains:

(1): show or hide top bar. Turn on this option to show topbar.

(2): logo upload, allows you to upload the logo for your website. You can either put the URL of the logo into the input box or upload the logo to Media Library. The live preview of the logo will appear below the inputs.

(3): logo size. Specify logo size in px here. It will help you resize the logo to correct dimensions.

(4): logo margin. Specify logo margin in px here. This is useful when you upload the logo with a different size than recommended. You can move logo a little, adjust space to make it look good.

You should resize the logo to correct size in Photoshop or any image editor before upload. It will keep your logo not resized and small size.

(5): This option allow you to select the type of header. Available options:

  • Normal: header displays normally.
  • Absolute: header will display over the right bellow section.
  • Sticky: header will always stays on the top of the screen when scrolling.

(6): If you select Absolute header style, this option will be appear. It allows you to upload an alternative logo image. This option will be useful when you have a light version of the logo. Because when header layout is set as absolute, its background will be a dark color.

(7): If you select Absolute header style, this option will appear. It allows you to set the background of the header to be transparent.

(8): Menu hover. Easily select hover effect for menu items.

(9): Turn it on if you want to show shop cart icon on your header, at the end of the menu. Remember your site have to install WooCommere plugin if you want to make it work.

(10): Turn it on if you want to show search icon at the end of the menu.

(11): header scripts. Enter scripts or code you would like the output to &lt;head&gt;. It can be:

  • <link> tag for the custom font (from Google Fonts maybe)
  • Any meta tag: to show the designer, copyright, etc. in meta tag
  • Google Analytics code
  • Any Javascript code that needs to be executed in &lt;head&gt;

If you want to put custom CSS here, you’re doing wrong. There’s a section for Custom CSS under Design, use it instead.

Title Area

Title Area

This section contains:

(1): Hide breadcrumb. Turn on this option if you don’t want to show breadcrumbs in the title area.

(2): Turn off parallax. By default, title area has parallax effect when you scroll website. Turn on this option if you don’t want that effect.

(3): Custom background. Upload background image for title area here. Title area only displays when has a background image.

Blog

This section contains options which help you to change something about displaying posts archive pages (blog, category, tag, date)

blog

(1): what type of post content will be displayed. Available options are Post excerpt, Post content or Post content before more tag.

To understand what those values mean, take a look at the screenshot bellow:

post

Where:

  • (A): Whole post content, this is what you enter in the editor.
  • (B): Post excerpt, which is optional hand-crafted summaries of your content. If you don’t enter anything in the excerpt box, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
  • (C): The post content before more tag
  • (D): The more tagReturn to blog option: if you choose
  • Post excerpt: Constructent will get post excerpt and display it. Remember: if you don’t enter excerpts for the post, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
  • Post content: Constructent will get whole post content and display it. This is the default value.
  • Post content before more tag: Constructent will get only the post content before more tag and display it.

(2): post content limit. Sometimes you enter a very long text for post excerpt or post content, display such long text in blog and archive pages is not good and harm your website beauty. So we need a way to truncate text to make it shorter. This option is created for that purpose.

Simply specify the number of words will be displayed here. Post content or excerpt will be truncated to an exact number of words. You should try changing this value and preview your blog to see what is best for you.

The default value is 55 words.

Important: this option affects only when you NOT choose Post Content from the Display option above

(3): read more text. The default value is Continue reading.

Footer

This section gives you options to customize footer area on your website.

(1): enable or disable footer widgets area.

(2): number of columns in the footer. It also is the number of footer sidebars (widget areas). The default is 3.

(2): copyright text. You can enter text, HTML, and shortcodes here. To make you easier to display copyright text, Constructent has default shortcodes that you can enter here:
[year]: display current year
[site_link]: display link to your website with text is the website title. For example, if you have a website at http://example.com and title Example, this will display a link like this:

html
<a href="http://example.com">Example</a>

[bloginfo]: display blog information. This is the wrapper of bloginfo() function. Default it will display blog name (e.g. website title), but you can use it with parameter name to display more information, for example:
+ [bloginfo name="name"]: display blog name (default)
+ [bloginfo name="description"]: display blog description (tagline)
+ [bloginfo name="version"]: display WordPress version
+ [bloginfo name="rss2_url"]: display RSS2 feed link
+ [bloginfo name="home"]: display home link
+ For more value of name, please see bloginfo() function

(4): footer scripts. Enter scripts or code you would like output before &lt;/body&gt;. It can be Google Analytics code or any Javascript code.

Post/Page Display Settings

We’ve seen how to change featured title area, sidebar layout for the whole website. Constructent also supports customizing these things for specific pages.

When you edit a page, you’ll see this meta box below the content editor:

display settings

  • (1): hide the title area. Select this box if you want to hide the title area on this page.
  • (2): Custom Title. Sometimes you want to display different title instead of original page title, you can enter that title here.
  • (3): enter subtitle here. Subtitle will be displayed bellow the page title in the title area.
  • (4): change default title area’s background image.
  • (5): select this box if you want to hide breadcrumbs on the current page.
  • (6): whether to use custom page layout. If you check this box, you’re able to set custom layout style and sidebar layout below. If you don’t, the page will use default layout set in Theme Options.
  • (7): custom sidebar layout. Choose custom sidebar layout for the page. If you don’t choose anything, Constructent will use default sidebar layout set in Theme Options.
  • (8): you can enter custom CSS code here. It will be applied for current page only.

Post Formats

Post Formats is theme feature which is a piece of meta information that can be used by a theme to customize its presentation of a post.

In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list.

Constructent theme supports the following post formats:

  • gallery – A gallery of images, which will be displayed in a responsive image slider, powered by Flexslider.
  • link – A link to another site.
  • image – A single image, which will be shown above post title.
  • quote – A quotation.
  • video – A single video, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed above post title.
  • audio – An audio file, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed using a powerful HTML5 audio player – jPlayer.

Each post format will have an icon near post title which tells you what post format is. Using post format in Constructent lets you differentiate post from each other and make the blog page / single page looks more beautiful.

Setup Post Formats

When you edit a post, select a format you want to apply to that post on the Format meta box on the right:

formats

When you choose a format, a corresponding meta box will appear below the content editor, here’s the list of them:

formats

All you need to do is just enter all information in fields in these meta boxes. This information will be used to decorate the post. For example, gallery post format will use uploaded images to show a slider above post title, a video post will display a video player above post title, etc.

Page Templates

Constructent has some built-in page templates that can help you create special pages easier:

  • Deals: template to display deal products.
  • Homepage: template to display sections with normal products and deal products are inside.

When you edit a page, look at on the right, find Page Attributes meta box and select a template from the drop-down Template:

page-templates

Width Homepage template, there’s no configurations at all. After select page template from the meta box on the right, you just need to save the page and see it in action in the frontend.

Width Contact template, after selecting it, you will see a new meta box appear. It contains options which allow you to enter contact information for the contact page.

Contact settings

Widgets

Constructent plays nicely with default WordPress widgets. Besides that the theme has some additional widgets that might be useful for you:

[FitWP] Flickr

This widget displays the list of photos which is got from a user or group on Flickr.

This widget has the following options:

  • Title: widget title
  • Flickr ID: this is ID (not username) of user or group on Flickr. You can go to http://idgettr.com to get the ID.
  • Type: select type of above ID is User or Group
  • Number of photos: how many photos you want to display
  • Display: which photos you want to display, latest or random photos.
  • Size: select size of photos

[FitWP] Latest Tweets

Before you use this widget, you have to create a Twitter app. Following these steps:

twitter app

  • Fill in all information needed for the app. The name and description can be anything, it does not have to be a certain name. You can leave the Callback URL field empty.
  • After creating the app, go to API Keys tab then click Create My Access Token button at the bottom to generate the necessary codes. It usually take 10 – 15 seconds to generate these codes, you have to reload that page to see your code in Your Access Token section.

twitter app

  • Now you can copy the following fields for setting up Latest Tweets widget:
    • API key -> Consumer Key
    • API secret -> Consumer Secret
    • Access token -> Access token
    • Access token secret -> Access token secret

These fields will be used in the tweets widget.

Now go to your website admin area, then Appearance > Widgets, drag and drop [FitWP] Latest Tweets widget into a sidebar that you want it to show there. You’ll see these fields this:

tweets

(1): You also need to enter Cache time, which is the time your tweets will be temporarily stored in WordPress cache,

(2): Twitter username which you want to get from

(3): Number of tweets you want to get

After filling all information, just click Save.

[FitWP] Recent Posts

This widget replaces default WordPress recent posts widget. It displays recent posts in the much more beautiful way and gives you more control to what will be shown.

The widget has the following options:

  • Title: widget title
  • Number Of Posts: how many posts you want to displayed
  • Category: you can choose to display posts from all categories, or a specific category or multiple categories
  • Show Comment Number: whether or not show comment number
  • Show Thumbnail: whether or not show thumbnail
  • Default Thumbnail: if post doesn’t have thumbnail, this default thumbnail will be used
  • Show Date: whether or not show post date
  • Date Format: date format. See this link for a full list of supported date formats
  • Show Excerpt: whether or not show post excerpt
  • Excerpt Length: the number of words of post content will be displayed
  • Show Readmore Text: whether or not show read more text
  • Readmore Text: Read more text

[FitWP] Tabs

This widget displays popular posts, recent posts and recent comments in a tabbed widget. Each tab has its own options. For popular posts and recent posts, the options are similar to the Recent Posts widget above.

Note that popular posts are counted based on a number of comments.

This widget shows links (with icons) to your social network profiles. All you need to do is just enter URL to your social network profiles and optionally title for each link.

[FitWP] Projects

This widget shows projects as thumbnails. All you need to do is enter a number of projects you want to show then select which projects you want to show. You can choose either All projects, completed projects or under construction projects.

Galaticos

Welcome! First of all we want to thank you for purchasing our Galaticos WordPress Theme.

In the following sections we will explain how to set up and use Galaticos theme the easiest way possible. Although there’re a lot of things written in this documentation, the theme itself is not hard to use. You can go to the Theme Options page and explore everything yourself. This file is more of a reference if you do not know what to do, or if you are not familiar with WordPress.

Files Included

The download package (.zip) that you get from ThemeForest contains the following files and folder:

  • galaticos.zip: main theme file that need to be uploaded to host to install Galaticos theme
  • demo-content.xml: demo content file, which contains all pages and posts from live preview website. It will help you to have a first look of how we use Galaticos theme
  • docs.html: theme documentation (this file)
  • theme-options.txt: theme option backup file. You’ll need this to restore the default theme options that setup for demo website.
  • Plugins:
    • codecanyon-2751380-slider-revolution-responsive-wordpress-plugin.zip: Slider Revolution Responsive WordPress Plugin. Completed download package from Codecanyon.net. It’s FREE for you to use with Galaticos theme
    • home-page-slider.zip: Demo slider that exported from our demo, but with placeholder images

Installation

Install Theme

We have written a very detailed guide on how to download and install a WordPress theme from ThemeForest, please follow the instruction in that article.

Install plugins

After installing Galaticos, you’ll see a notification in the top of the page that says the theme needs some plugins to function properly.

Galaticos theme requires follow plugins (all are free and available on WordPress.org):

Galaticos theme recommends follow plugins:

Galaticos is working perfectly with these plugins. It automatically adds more styles to them to make the design match the theme.

To install these plugins:

  • Click Begin installing plugins
  • You’ll be redirect to a page where all needed plugins are listed. Just click on Install below each plugin’s name
  • After installing, if it’s required to activate the plugin, just activate

plugins

Install demo content

If you are new to WordPress and have problems with setting up the theme you might want to import the demo content file that comes with the theme. The following actions will import some dummy posts and pages from the live preview:

  • Go to Tools > Import
  • Select WordPress from the list
  • If you haven’t installed the WordPress import plugin, a popup window will appears and ask you to install it. Just click Install Now. When the installation progress is completed, click Activate Plugin & Run Importer. If you have installed this plugin, skip to next step.
  • Click Browse and select demo-content.xml file from the download package
  • Click Upload file and import
  • When you are asked to import author, you can create new author or import to existing author. You also should check the checkbox Download and import file attachments.

import

After completing all above steps, go to Posts, Pages, Products, Collections to see imported data.

Important: Due to license of images, we have to remove images in distributed demo content and replace them with placeholers. All images get from placehold.it, if you have any download errors when import demo-content.xml, problem can be speed of internet connection. Don’t worry about that, you can replace with your own images.

Setup homepage and blog page

After install demo content, you’ll see a page Homepage. This page will be used as the homepage of the website. To set it as homepage, please go to Settings \ Reading, under Front page displays, please chose A static page (select below) and select Front Page for Front page and Full Width page for Posts page.

homepage

Setup Menu

Although the theme is working now and it shows menu, but because we haven’t created a menu for primary location, the theme will display all pages by default. As the number of pages is large, displaying all of them in the menu is a bad idea.

Create or edit a menu

Following these steps to create a menu:

  • Go to Appearance > Menus
  • Select an existing to edit, or click create a new menu. **Note:**Select one of menu from menu list if you want to have same menu as in live preview.
  • Select pages from the left meta box and click Add to Menu
  • On the right, feel free to drag and drop menu items to organize them
  • When you’re done moving menu items, check Primary Menu for Theme locations at the bottom of the page
  • Click Save Menu

menu

Setup widget areas

Galaticos theme has 4 widget areas (sidebars) by default:

  • Blog Sidebar: main website sidebar which will be displayed on all blog posts, archive pages, etc.
  • Page Sidebar: will be displayed on all WordPress pages.
  • Shop Sidebar: will be displayed on all WooCommerce pages: Products, Product category, Single Product, etc.
  • Home Sidebar: will be displayed on Homepage template (we’ll talk about this template later in Page Templates section).
  • Footer Sidebars: there are 4 default sidebars for footer, each sidebar is a column in the footer. You can change number of columns in footer in Theme Options page (in that case number of footer sidebars will increased or decreased acccordingly).

To setup a sidebar, select it from the right by clicking its title or the arrow down. Then drag and drop widgets from the left to the sidebar area.

sidebar

That’s all! Now you have the website up with all basic elements!

Theme Options

theme options

The Galaticos theme comes with unique, creative and easy-to-use Theme Options page. You can change all theme options in one place!

With Galaticos’s advanced theme options panel, you can customize just about any part of your site quickly and easily. Every element on the site can have the color changed to your liking. Choose a color scheme for website, select fonts for all headings and body copy, change sizes, colors and line-heights of all fonts, select different footer column layouts, enable or disable several options, upload your own custom favicon, select from various site/page layouts, input custom CSS, set hundreds of other options to easily customize your site!

All options have full description so you can know what you are doing. Just click and save!

Let’s go through each section.

General

general

This sections contains:

  • (1): favicon upload, allows you to upload favicon for you website
  • (2): touch icon, allows you to upload icon for mobile devices and tablets
  • (3): show comment on page
  • (4): backup – restore, allows you to backup Galaticos options and restore them later, or transfer the saved options between different installs.

Here are the explanations of some options that can help you understand and use them better:

Favicon Upload

Favicon (short for Favorite icon), also known as a shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar (sometimes in the history as well) and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab, and site-specific browsers use the favicon as a desktop icon.

This is how favicon appears:

favicon

Galaticos lets you upload favicon or enter favicon URL in the input box:

  • If you have a favicon uploaded, or you store the favicon somewhere out of the Media Library, you can just put the URL of the favicon into the input box, or
  • If you want to upload favicon for your website, click the upload button (the green one near input box) and upload it to Media Library as a normal image, then click Select.
The favicon should be in one of the following format: `.ico`, `.png`, `.gif`. Usually we should use `.ico`.

When you’re done, you can click Save Changes button to save your data.

Touch Icon

Touch icons are the favicons of mobile devices and tablets. Each mobile devices and tablets has its own standards for displaying the touch icon (read this article to have a better understanding about touch icon and supported devices) and requires various icon sizes. But for best compatibility and simplicity, an image with size 152×152 is enough.

To specify a touch icon for you website, just do the same as for favicon: you can either put the URL of the touch icon into the input box or upload the icon to Media Library.

The icon must be an PNG image

When you’re done, you can click Save Changes button to save your data.

Show comments on pages

This option allows you to show/hide comments and comment form on pages. By default, Galaticos doesn’t display comments and comment form on pages.

Important: In case this option is set to “ON”, to display comments on pages, you still have to allow comments for pages when you edit pages.

allow comments

By default, this checkbox is checked (meaning comments are allowed on pages). But in case you want to show comments on all pages, except some specific pages, you can use this checkbox to hide comments for those pages only.

Backup – Restore

Galaticos allows you to backup theme options and restore them later. You can also transfer the saved options data between different installs.

To backup theme options, just copy the text inside the text box and save it into a file on your computer. To import data, replace the data in the text box with the one from the saved file and click Import Options button.

After clicking Import Options, Galaticos will automatically setup all options and refresh the current theme options page, so you can see the options immediately.

Design

This sections contains:

  • Color Scheme: allows you to change color scheme of whole website
  • Layout: allows you to change layout style and layout for whole website, for blog posts and pages
  • Typography: allows you to change font family, styles, size, line height, color for body text and headings
  • Custom CSS: allows you to add your custom CSS

Color Scheme

Galaticos theme has 5 predefined color schemes to choose from: blue, red, green, violet and orange. When you change color scheme of the theme, all links, button background and other elements will change their color or background accordingly.

The default color scheme is red, but you can select any from 5 colors here. After selecting, click Save Changes button to save your data. Now go to the frontend and check the colors of links, buttons, etc.

When you select Color Scheme section, you’ll see the following options:

color schemes

(1): select built-in color scheme. These are 5 predefined color schemes. When you select one of them, your website elements will change color accordingly.

(2): enable/disable custom color scheme. This option allow you create custom color scheme, and you can build unlimited color schemes here! Just enable this and you’ll see options below.

(3): primary color. This is primary color for your custom color scheme, used for links, overlay, button background on hover, badges, etc.

Layout

This section helps you to select which layout will be use in whole website.

layout

(1): sidebar layout for blog, single posts and other archive pages. You can select sidebar position here: left, right or none (don’t display sidebar)

(2): sidebar layout for WooCommerce pages. Same meaning as for blog above but only applied for WooCommerce pages: shop page, single products, product tag archive, product category archive.

(3): sidebar layout for pages. Same meaning as for blog above.

Examples: sidebar leftsidebar-right

These options is site-wide, meaning for whole website. But you still can set **custom layout for single post and page when edit** (We’ll explore it later).

By default: Galaticos uses wide layout style with right sidebar for both blog and pages.

Typography

typography

This section helps you to customize fonts for body text and headings on your website. For each element, you can customize:

(1): font family. Just select from the dropdown font family you like. Galaticos supports 3 normal fonts (Arial, Verdana and Times).

(2): font size. Adjust font size for better look here. Just remember the unit for font size is px.

(3): line height. Adjust line height for better look here. The unit for line height is also px.

For better readability, good value for line height is about 1.4-1.5 x font size.

(4): font styles. You can choose bold, italic, underline or any combination of them.

(5): font color. Click on the button, a color picker will appear and you can now select any color.

Important: before customize fonts, remember the default values for fonts. You should customize fonts around these values.

Element Font Family Font Size Line Height Styles Color
Body Text Open Sans 12px 20px None 777
Heading 1 Open Sans 20px 20px None 444
Heading 2 Open Sans 18px 20px None 444
Heading 3 Open Sans 16px 20px None 444
Heading 4 Open Sans 15px 20px None 444
Heading 5 Open Sans 14px 20px None 444
Heading 6 Open Sans 13px 20px None 444

Custom CSS

custom css

This section allows to enter custom CSS that will be output in the </head>. This will overwrite CSS of theme, so please be careful!

Custom CSS is useful when you want to adjust small things for your website. If you have to adjust a lot of things in website, please use Child Themes.

header

This sections contains:

(1): logo upload, allows you to upload logo for you website. You can either put the URL of the logo into the input box or upload the logo to Media Library. The live preview of the logo will appear below the inputs.

(2): logo size. Specify logo size in px here. It will help you resize the logo to correct dimensions. By default, the good size is 201×39.

(3): logo margin. Specify logo margin in px here. This is useful when you upload logo with different size than recommended. You can move logo a little, adjust space to make it look good.

You should **resize the logo to correct size** in Photoshop or any image editor before upload. It will keep your logo not resized and small size.

(4): sticky header. This option allow you to make the header sticky, i.e. always stays on the top of the website when scrolling.

(5): show shop cart icon. This option allow you show a shop cart icon on header. This option effects only when WooCommerce plugin is installed.

(6): show search icon. This option allow you show search icon.

(7): header scripts. Enter scripts or code you would like output to &lt;head&gt;. It can be:

  • <link> tag for custom font (from Google Fonts maybe)
  • Any meta tag: to show the designer, copyright, etc. in meta tag
  • Google Analytics code
  • Any Javascript code that need to be execute in &lt;head&gt;
  • Anything else
If you want to put custom CSS here, you’re doing **wrong**. There’s a section for **Custom CSS** under **Design**, use it instead.

featured title area

Featured Title Area is the highlighted area in the screenshot above. This area shows you an attractive title area with this information:

  • (1): Breadcrumbs
  • (2): Background image

Galaticos uses a default image for background and show breadcrumbs.

In theme options page, you can change the background image and show/hide breadcrumbs for whole website:

featured title area

(1): show/hide breadcrumbs. Default is OFF (show breadcrumbs). If you want to hide breadcrumbs, just turn it on.

(2): custom background image. You can either put the URL of the image into the input box or upload the image to Media Library. The live preview of the background will appear below the inputs.

Tips: [Subtle Patterns](http://subtlepatterns.com/) is a good resource to find background patterns!
These options is site-wide, meaning for whole website. But you still can set **custom featured title area for single post and page when edit** (We’ll explore it later).

Blog

blog

This section helps you to change the display options for posts in blog page (and other archive pages). This section contains:
(1): Exclude categories
(2): what type of post content will be displayed. Available options are Post excerpt, Post content or Post content before more tag.

To understand what those values mean, take a look at the screenshot bellow:

post

Where:

  • (A): Whole post content, this is what you enter in the editor.
  • (B): Post excerpt, which is optional hand-crafted summaries of your content. Learn more about manual excerpt.. If you don’t enter anything in the excerpt box, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
  • (C): The post content before more tag
  • (D): The more tag

Return to blog option: if you choose

  • Post excerpt: Galaticos will get post excerpt and display it. Remember: if you don’t enter excerpts for post, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
  • Post content: Galaticos will get whole post content and display it. This is the default value.
  • Post content before more tag: Galaticos will get only the post content before more tag and display it.

(3): post content limit. Sometimes you enter a very long text for post excerpt or post content, display such long text in blog and archive pages is not good and harm your website beauty. So we need a way to truncate text to make it shorter. This option is created for that purpose.

Simply specify number of words will be display here. Post content or excerpt will be truncated to exact number of words. You should try changing this value and preview your blog to see what is best for you.

Default value is 55 words.

**Important**: this option affects only when you **NOT** choose `Post Content` from the Display option above

(4): readmore text. Default value is Continue reading.

(5): Show Socials Sharing.

Shop

This section give you options to customize shop page on your website.

shop

(1): Default product image. This image will be used when product has no image to display as thumbnail.
(2): Default Products View. Select the default view for products
(3): Number of products. Set default number of products to display in the shop page.
(4): Number of products. Set default number of products to display in the shop page
(5): Show featured badge. Display a badge for featured products.If you choose show featured badge, on the shop page will display like this:

featured badge

(6): Show new badge. Display a badge for new products.
(7): Badge display duration. The number of days a product will be set as new product, since the published date.

Portfolio

This section give you options to customize portfolio page on your website.

portfolio

(1): portfolio category view. Select the default view for Portfolio category page.

(2): number of projects. Set number of Portfolio projects to display in the Portfolio category page

(3): portfolio single view. Select the default view for Portfolio single page

404 page

This section give you 1 option to customize 404 page on your website.

404 page

(1): Select background image for 404 page page.

This section give you options to customize footer area on your website.

footer-frontend

(1): footer ads. Allow Html and shortcode

(2): footer widgets. Enable to display widgets in footer.

(3): number of columns in footer. It also is the number of footer sidebars (widget areas). Default is 4.

(4): copyright text. You can enter text, HTML and shortcodes here. To make you easier to display copyright text, Galaticos has default shortcodes that you can enter here:

  • [year]: display current year
  • [site_link]: display link to your website with text is the website title. For example, if you have a website at http://example.com and title Example, this will display a link like this:
<a href="http://example.com">Example</a>
  • [bloginfo]: display blog information. This is the wrapper of bloginfo() function. Default it will display blog name (e.g. website title), but you can use it with parameter name to display more information, for example:
    • [bloginfo name="name"]: display blog name (default)
    • [bloginfo name="description"]: display blog description (tagline)
    • [bloginfo name="version"]: display WordPress version
    • [bloginfo name="rss2_url"]: display RSS2 feed link
    • [bloginfo name="home"]: display home link
    • For more value of name, please see bloginfo() function

The default value for copyright text is Copyright ©[year] [site_link]. All rights reserved..

(5): footer scripts. Enter scripts or code you would like output before &lt;/body&gt;. It can be Google Analytics code or any Javascript code.

Customizer

Customizer is a feature of WordPress that allows us to tweak a theme’s settings and see a preview of those changes in real time. And since version 2.0, Galaticos supports Customizer, which means you can change theme options and preview those changes in real time! You even don’t need Theme Options page, unless you want something more advanced like footer scripts!

To start with Customizer, please go to Appearance \ Customize, you’ll see the following screen:

customizer

(1): there are some sections that you can change and live preview it. These sections have [Galaticos] in their title.

(2): click on each section title will show options for that section. These options are the same as in Theme Options, so it’s easy to understand (please refer to Theme Options in this documentation to know exactly each detail).

(3): this is the panel where you’ll see your website in real time whenever you change anything.

Remember to click the Save & Publish on the top of left panel when you’re done tweaking themes!

Post/Page Display Settings

We’ve seen how to change featured title area, layout style, sidebar layout for whole website. Galaticos also supports customizing these things for specific posts and pages.

When you edit a page or a post, you’ll see this meta box below the content editor:

display settings

This meta box contains 3 main parts:

  1. Featured Title Area Settings
  2. Breadcrumb
  3. Custom Layout Settings

Each parts contains some settings as shown in the screenshot above. Let’s go through it:

This is the featured title area which is displayed in the frontend

featured title area

where:

  • (1): Breadcrumbs
  • (2): Background image
  • (3): Page title
  • (4): Page subtitle

Let’s go back to the page display settings above, we have these settings:

(1): hide featured title area. Check this box if you want to hide the featured title area. This option should be used in special pages like homepage.

(2): hide text. Allow to hide both title and subtile.

(3): custom title. Enter the custom page title here. By default Galaticos displays post/page title, but you can customize the real title shown in Featured Title Area. It is useful when you have a very long title.

(4): subtitle. Enter subtitle for page here. Leave this empty if you don’t want to show subtitle.

(5): custom background. If you choose an image, it will be used as the background for Featured Tittle Area. If you do not, Galaticos will use default image set in Theme Options.

(5): hide breadcrumbs. The theme already has settings to show/hide breadcrumbs side-wide. But if you want to hide breadcrumbs for a specific post/page, you can select this option.

This part contains only 1 input field (6), hide breadcrumbs. The theme already has settings to show/hide breadcrumbs side-wide. But if you want to hide breadcrumbs for a specific post/page, you can select this option.

Custom Layout

In this part, you can change:

(7): whether to use custom page layout. If you check this box, you’re able to set custom layout style and sidebar layout below. If you don’t, page will use default layout set in Theme Options.

(8): custom sidebar layout. Choose custom sidebar layout for page. If you don’t choose anything, Galaticos will use default sidebar layout set in Theme Options.

Add/Edit Portfolio

When you add or edit a portfolio, you need to fill in some required information to make it displays correctly. Look at 3 meta boxes:

(1)Portfolio Settings: portfolio main information
(2)Portfolio Categories: portfolio categories
(3)Featured Image: portfolio featured image

portfolio

In the (1) meta box, you have to:

  • Select or upload portfolio images, these images will be used in the portfolio slider
  • Clients: name of clients
  • Skills

In the (Portfolio categories) meta box, you can select or create new categories for portfolio. Note that the categories will be used to filter portfolios in Portfolios archive page.

In the (2) meta box, simply select featured image for the portfolio as a normal post. You can choose the same image that you have uploaded in (1) meta box or a new one. This image will be used to display as portfolio thumbnail.

Post Formats

Post Formats is theme feature which is a piece of meta information that can be used by a theme to customize its presentation of a post.

In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list.

Galaticos theme supports the following post formats:

  • gallery – A gallery of images, which will be displayed in a responsive image slider, powered by Flexslider.
  • link – A link to another site.
  • image – A single image, which will be shown above post title.
  • quote – A quotation.
  • video – A single video, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed above post title.
  • audio – An audio file, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed using a powerful HTML5 audio player – jPlayer.

Each post format will have an icon near post title which tells you what post format is. Using post format in Galaticos lets you differentiate post from each other and make the blog page / single page looks more beautiful.

See blog page to see how post formats look.

Setup Post Formats

When you edit a post, select a format you want to apply to that post on the Format meta box on the right:

formats

When you choose a format, a corresponding meta box will appear below the content editor, here’s the list of them:

formats

All you need to do is just enter all information in the fields in these meta boxes. This information will be used to decorate the post. For example: gallery post format will uses uploaded images to show a slider above post title, a video post will display a video player above post title, etc.

Page Templates

Galaticos has some build-in page templates that can help you create special pages easier:

  • Blog: template to display blog posts
  • Portfolio: display portfolios

When you edit a page, look at on the right, find Page Attributes meta box and select a template from the dropdown Template:

page-templates

For Blog, Portfolio there’s no configurations at all. After select page template from the meta box on the right, you just need to save the page and see it in action in the frontend.

Widgets

Galaticos plays nicely with default WordPress widgets. Besides that the theme has some additional widgets that might be useful for you:

[FitWP] Flickr

This widgets displays list of photos which is get from a user or group on Flickr.

This widget has the following options:

  • Title: widget title
  • Flickr ID: this is ID (not username) of user or group on Flickr. You can go to http://idgettr.com to get the ID.
  • Type: select type of above ID is User or Group
  • Number of photos: how many photos you want to display
  • Display: which photos you want to display, latest or random photos.
  • Size: select size of photos

[FitWP] Latest Tweets

Before you use this widget, you have to create a Twitter app. Following these steps:

twitter app

  • Fill in all information needed for the app. The name and description can be anything, it does not have to be a certain name. You can leave the Callback URL field empty.
  • After creating the app, go to API Keys tab then click Create My Access Token button at the bottom to generate the necessary codes. It usually take 10 – 15 seconds to generate these codes, you have to reload that page to see your code in Your Access Token seciton.

twitter app

  • Now you can copy the following fields for setting up Latest Tweets widget:
    • API key -> Consumer Key
    • API secret -> Consumer Secret
    • Access token -> Access token
    • Access token secret -> Access token secret

These fields will be used in the tweets widget.

Now go to your website admin area, then Appearance > Widgets, drag and drop [FitWP] Latest Tweets widget into a sidebar that you want it to show there. You’ll see these fields this:

tweets

(1): You also need to enter Cache time, which is the time your tweets will be temporarily stored in WordPress cache,

(2): Twitter username which you want to get from

(3): Number of tweets you want to get

After filling all information, just click Save.

[FitWP] Recent Posts

This widget replaces default WordPress recent posts widget. It displays recent posts in much more beautiful way and gives you more control to what will be shown.

The widget has the following options:

  • Title: widget title
  • Number Of Posts: how many posts you want to displayed
  • Category: you can choose to display posts from all categories, or a specific category or multiple categories
  • Show Comment Number: whether or not show comment number
  • Show Thumbnail: whether or not show thumbnail
  • Default Thumbnail: if post doesn’t have thumbnail, this default thumbnail will be used
  • Show Date: whether or not show post date
  • Date Format: date format. See this link for a full list of supported date formats
  • Show Excerpt: whether or not show post excerpt
  • Excerpt Length: the number of words of post content will be displayed
  • Show Readmore Text: whether or not show read more text
  • Readmore Text: Read more text

[FitWP] Tabs

This widget displays popular posts, recent posts and recent comments in a tabbed widget. Each tab has its own options. For popular posts and recent posts, the options are similar to the Recent Posts widget above.

Note that popular posts is counted based on number of comments.

This widget shows links (with icons) to your social network profiles. All you need to do is just enter URL to your social network profiles and optionally title for each link.

[FitWP] Social Feed

This widget shows items from the feed of creative social networks: Pinterest, Deviant Art, Flickr, Dribbble, Youtube, Instagram and Newsfeed (RSS). It uses [social_feed] shortcode to display items.

The configuration for this widget is simple:

  • Choose a network that you want to display items from
  • Enter your username
  • And enter the number of items will be displayed

Shortcodes

The Galaticos theme is bundled with powerful shortcodes that you can customize your page content in thousand ways!

With Galaticos Shortcode Generator, there is a shortcode for anything you need, and they allow you to create so many different page layouts. Users can quickly and easily built their own custom pages using all the various shortcodes that Galaticos includes. Just about any element you see on our demo is a shortcode that you can insert on any page. Several shortcodes have numerous options for customization. There are endless options to choose from! Easily create your own pages by using our shortcodes, tons of possibilities and we add more all the time!

Good samples of shortcodes are homepages and other pages in the live preview demo. They’re all created with shortcodes! No need to remember shortcode attributes, all is done via a friendly interface.

When you edit a post or a page, click on Shortcodes button above the content editor to show the shortcodes menu.

shortcode menu

Select a shortcode from the menu, a popup will appear that lets you add more settings for shortcodes.

Each popup will have 3 parts:

  • Shortcode configuration on the left: which lets you edit shortcode attributes
  • Shortcode preview on the right: which show you preview of the shortcode
  • Insert button: insert shortcode to the editor when you’re done configuring it

Let’s go one by one:

Highlight

This shortcode highlights a word, sentence or any text in post content.

Attributes:

[highlight]Lorem ipsum dolor sit amet[/highlight]
[highlight background="pink"]Lorem ipsum dolor sit amet[/highlight]
[highlight custom_background="#c9c9c9"]Lorem ipsum dolor sit amet[/highlight]
  • background (optional): Background color for highlighted text. Galaticos has built-in 24 colors for you to choose from (see the screenshot below). If you don’t choose background color, Galaticos will use default color – yellow.
  • custom_background (optional): custom background color. If you don’t like any color from the predefined set, you can specify your custom background color here.

Popup:

highlight

(1): choose background color for highlighted text.

(2): custom background color.

(3): this is a preview of shortcode, which will show you all shortcode attributes.

(4): when you’re done, click Insert button to insert shortcode to the editor.

Superscript

Simply choose a text and select superscript, the text will be displaylike this. There’s no config for this.

Subscript

Simply choose a text and select subcript, the text will be displaylike this. There’s no config for this.

Button

This shortcode displays a beautiful button on your page. See demo.

Attributes:

[button link="#" color="pink" background="pink"]Click me[/button]
[button link="#" color="pink" icon="serviceicon-power" background="pink"]Click me[/button]
[button link="#" color="pink" icon="serviceicon-power" icon_position="right" align="left" full="1" background="pink" target="_blank" nofollow="1" id="myid" class="myclass"]Click me[/button]
  • link (required): button URL
  • color (required): button color name. You can choose from 24 predefined colors (see popup below)
  • size (optional): button size, can be small, medium (default) or large
  • icon (optional): button icon. You can select from 140+ premium font icons from iconsweets2 (see popup below).
  • icon_position (optional): icon position, can be left (default) or right.
  • align (optional): you want to float the button to the left, right, center or none (default)?
  • full (optional): display the button full-width (block) (value 1) or not (empty). Default is empty.
  • background (optional): if you don’t like the 24 predefined button colors, you can choose custom background and custom text color. This option is for custom background color.
  • text_color (optional): custom text color for button.
  • target (optional): link target, can be empty (default) – open link in same window or _blank – open in new window.
  • nofollow (optional): link will be nofollowed (value 1) or not (empty). Default is empty.
  • id (optional): button ID, in case you want a custom HTML ID attribute for the button. It is useful when you need it for CSS or Javascript.
  • class (optional): button CSS, in case you want a custom HTML CSS attribute for the button. It is useful when you need it for CSS or Javascript.

Popup:

button

In the popup, there’re some advance options hidden by default. You need to click the Advanced Button to show them all.

Box

Also called alert box, information box or styled box.

This shortcode displays an alert, success, error or information box with a close icon or not.

Attributes:

[box]Lorem ipsum dolor sitamet[/box]
[box type="success" close="1"]Lorem ipsum dolor sitamet[/box]
  • type (optional): box type, can be empty (or alert), success, error, info. Default is empty.
  • close (optional): display close icon (value 1) or not. Default is 1.

Popup:

box

Toggles

These shortcodes will display a panel of content which can be hide/show when you click on the panel title. See demo.

This is a combination of 2 shortcodes: [toggles] and [toggle]. [toggles] is a wrapper and doesn’t have any attributes, while [toggle] is a shortcode to display each panel and has the following attributes:

Attributes:

[toggles]
[toggle title="1st panel"]Lorem ipsum dolor sitamet[/toggle]
[toggle title="2nd panel"]Lorem ipsum dolor sitamet[/toggle]
[/toggles]
  • title: panel title.

Popup:

toggles

In the popup, do add more toggle panel, just click the button Add Toggle and fill in the title and content.

Accordions

These shortcodes will display a panel of content which can be hide/show when you click on the panel title. Similar to toggles, the difference here is when a panel is opened, other panels are closed (in toggles, they still can be opened). See demo.

This is a combination of 2 shortcodes: [accordions] and [accordion]. [accordions] is a wrapper and doesn’t have any attributes, while [accordion] is a shortcode to display each panel and has the following attributes:

Attributes:

[accordions]
[accordion title="1st panel"]Lorem ipsum dolor sitamet[/accordion]
[accordion title="2nd panel"]Lorem ipsum dolor sitamet[/accordion]
[/accordions]
  • title: panel title.

Popup:

accordions

In the popup, do add more accordion panel, just click the button Add Accordion and fill in the title and content.

Tabs

These shortcodes will display tabs of content which can be switched when you click on the tab title. See demo.

This is a combination of 2 shortcodes: [tabs] and [tab]. [tabs] is a wrapper, while [tab] is a shortcode to display each tab content.

Attributes:

[tabs]
[tab title="1st tab" icon="serviceicon-user2"]Lorem ipsum dolor sitamet[/tab]
[tab title="2nd tab" icon="serviceicon-home"]Lorem ipsum dolor sitamet[/tab]
[/tabs]

[tabs type="vertical"]
[tab title="1st tab" icon="serviceicon-user2"]Lorem ipsum dolor sitamet[/tab]
[tab title="2nd tab" icon="serviceicon-home"]Lorem ipsum dolor sitamet[/tab]
[/tabs]

For [tabs]:

  • type (optional): tabs style, can be empty (or horizontal) or vertical. Default is empty.

For [tab]:

  • title: tab title.
  • icon (optional): tab icon. You don’t need to remmember icon name, just select from the list of icons (see popup below).

Popup:

tabs

In the popup, do add more tab, just click the button Add Tab and fill in the title, content and select tab icon.

Progress Bar

This shortcode will display a progress bar with title and percentage. See demo.

Attributes:

[progress_bar text="Web Development" percent="80" type="block"]
  • type (optional): can be empty or block. If empty, the label will display above the progress bar, while block will display the label inside the progress bar.
  • text: text label
  • percent: the percentage without %

Popup:

progress bar

Promotion Box

This shortcode will display a promotion box that helps you to get people attraction and improve click through rate (CTR). It’s also called Call To Action box.

Attributes:

[promo_box heading="We'll tell you why you should buy Galaticos!" text="We are constantly improving Galaticos for our beloved users." button1_text="Purchase Now" button1_link="#" button1_color="red" button1_nofollow="1"]

[promo_box type="two-buttons" heading="We'll tell you why you should buy Galaticos!" text="We are constantly improving Galaticos for our beloved users." button1_text="Purchase Now" button1_link="#" button1_color="red" button1_nofollow="1" button2_text="Learn More" button2_link="#" button2_color="green" button2_nofollow="1"]
  • type (optional): promotion box type. Can be empty (displays 1 button) or two-buttons (displays 2 buttons).
  • heading: box heading text
  • text: box text content
  • button1_text: button 1 text
  • button1_link: button 1 link
  • button1_color: button 1 color, you can choose from 24 predefined colors (see popup below)
  • button1_nofollow (optional): set this value to 1 if you want the button link is nofollowed
  • button2_text (optional): button 2 text
  • button2_link (optional): button 2 link
  • button2_color (optional): button 2 color, you can choose from 24 predefined colors (see popup below)
  • button2_nofollow (optional): set this value to 1 if you want the button link is nofollowed

Note all the attributes for 2nd button are used only when you choose the promotion box type two-buttons.

Popup:

promotion box

Map

This shortcode will display a Google Maps in your pages. See demo.

Attributes:

[map map_type="satellite" marker_title="Hanoi" info_window="This is Hanoi" zoom="14" scrollwheel="1" address="Hanoi, Vietnam" width="100%" height="400px" controls="zoom,pan,scale"]

[map type="latlng" map_type="satellite" marker_title="Hanoi" info_window="This is Hanoi" zoom="14" scrollwheel="1" latitude="10.0" longtitude="0.10" width="100%" height="400px" controls="zoom,pan,scale"]
  • type (option): display map using address or latitude and longtitude. Values can be empty (use address) or latlng (use latitude and longtitude).
  • map_type (optional): Google Maps type, can be road map (empty value), satellite, terrain or hybrid. Learn more about Google Map types.
  • address: map address, used only when you set type empty.
  • latitude: latitude, used only when you set type to latlng.
  • longtitude: longtitude, used only when you set type to latlng.
  • width (optional): map width. You can set it using % or px. Default value is 100% which means the map is displayed full width.
  • height (optional): map height. You can set it using % or px. Default value is 400px.
  • marker_title (optional): the marker title when you move the mouse over the marker.
  • info_window (optional): the info window content when you click on the marker.
  • zoom (optional): map zoom level, default is 8.
  • scrollwheel (optional): allow scrollwheel when seeing the map. Values can be empty (no scrollwheen – default) or 1.
  • controls (optional): a comma-separated list of map controls. Each control can be one of the following value: zoom,pan,scale,map_type,street_view,rotate,overview. Learn more about Google Maps controls.

Popup:

map

Row

Galaticos theme comes with a 12-grid columns (960.gs). This shortcode lets you display content in a row and column.

Attributes:

[row background="http://demo2.fitwp.com/galaticos/wp-content/uploads/sites/3/2011/05/best-twitter-wallpaper.jpg" parallax="1" fluid="1" class="promotion"]
[column span="8"]Lorem ipsum dolor sitamet[/column]
[column span="4"][button link="#" color="black" type="rounded" size="small"]PURCHASE NOW[/button][/column]
[/row]
  • background (optional): background of row.
  • parallax: allow to on/off parallax
  • fluid: display full width.
  • class (optional): custom CSS class. It might be useful if you need to customize the look of the row content.

Popup:

column

Column

This shortcode lets you display content in a column. See demo.

Attributes:

[column span="3" class="myclass" total="12"]Lorem ipsum dolor sitamet[/column]
  • span: number of span columns. Can be from 1 to 12.
  • class (optional): custom CSS class. It might be useful if you need to customize the look of the column content.
  • total (optional): total column of the grid. By default it’s 12. But if you need to display a nested grid, you should set this value to total column of the nested grid.
WordPress does not support nested shortcode with **same name**, so if you want to display nested column (grid), you have to use HTML, like this:
<div class="grid_8">
[column span="3" class="myclass" total="8"]Lorem ipsum dolor sitamet[/column]
[column span="5" class="myclass" total="8"]Lorem ipsum dolor sitamet[/column]
</div>

Note that in this example the total equals to number of columns of the div.

Popup:

column

Icon

Galaticos has 140+ premium font icons from iconsweets2 that you can select from to make your content more attractive.

Attribute:

[icon class="serviceicon-tools" size="64"]
  • class: icon class. You can use the popup to pick the icon, you don’t need to remmember its class.
  • size: icon size in px (but don’t enter px here). Optional. If not specified, the icon will take the font size of current element.

Popup:

icon

Icon List

Galaticos has 140+ premium font icons from iconsweets2 that you can select from to make your content more attractive.

Attribute:

[list icon="gala-airplane64" icon_color="yellow"]%SELECTION%[/list]
  • icon: you can choose icon from icon list.
  • icon_color: icon color.

Popup:

icon

Icon Box

Icon box is a way of displaying main information in a “box”, which is usually used in homepage, landing pages.

Attributes:

[icon_box type="big" url="http://google.com" title="Configure" icon="serviceicon-tools"]Lorem ipsum dolor sit amet.[/icon_box]
[icon_box type="hex" url="http://google.com" title="Support" icon="serviceicon-group"]Lorem ipsum dolor sit amet.[/icon_box]
[icon_box type="small" title="Design" icon="serviceicon-brush"]Lorem ipsum dolor sit amet.

<a class="more-link" href="#">Continue reading <span>&gt;</span></a>[/icon_box]
  • type: big, hex, small, simple. Type of icon box. See demo to know how they look like.
  • title: icon box title (heading)
  • icon: icon class. Same as for icon shortcode above. Just pick from the popup, or manually enter it if you remember 😉
  • url: URL that the icon box links to. This parameter is not available for small type.
You always **can** enter HTML into shortcode content. In the 3rd example above, you see how we used a link with class `more-link` and a `span` tag inside it to make a beautiful readmore link.
You should use icon box type `hex` and `small` within `[column]` shortcode to make the icon box same width. This is **NOT** applied to `big` type as it always takes 25% width.

Popup:

icon-box

Testimonials

This shortcode allow you config type and number of testimonials.

Attributes:

			

I really appreciate the good work that FitWP did to make NOISE happen. Everything works like a charm and the theme is really, really well documented. Thumps up!

Web Design ETC avatar2

This theme has it all. Works great & very easy to customize. Comprehensive functionality means it will last a long time. Good support too!

Club Ware 3 avatar1
  • type: big or small. Default is big.
  • number: number of testimonials.

Popup:

note-box

Portfolios

This shortcode display latest portfolios from your blog on your pages in a grid.

Attributes:

[portfolios title_wrap="1" title="My Works" number="3" format_icon="1" total_columns="9"]
  • title_wrap: show a title for the shortcode or not? Value can be empty (not display) or 1 (display).
  • title: the title of the shortcode. Used only when title_wrap is set to 1
  • number: number of blog posts to show
  • format_icon: show post format icon (value 1) or not (empty value). Default is empty.
  • total_columns: the total columns of all postfolios will display. This value is used to calculate the column of each post.

For example: if you want to display 2 postfolios in a grid 8 columns (like page content), each postfolio will be 4 columns, then use:

[portfolios title_wrap="1" title="My Works" number="2" format_icon="1" total_columns="8"]

If you want to display 4 portfolios, each post is 3 columns, then total columns is 12:

[portfolios title_wrap="1" title="My Works" number="4" total_columns="12"]

Popup:

portfolios

In the popup, click Advanced Button to show more options for the shortcode.

Posts

This shortcode display latest posts from your blog on your pages in a grid.

Attributes:

[posts title_wrap="1" title="Blog Posts" number="3" category="company-news" content_limit="25" more="Continue Reading" total_columns="12"]
[posts title_wrap="1" title="Blog Posts" number="3" content_limit="30" more="Read more" total_columns="9"]
  • title_wrap: show a title for the shortcode or not? Value can be empty (not display) or 1 (display).
  • title: the title of the shortcode. Used only when title_wrap is set to 1
  • number: number of blog posts to show
  • category: slug (not name or ID) of category where do you want to get posts from. If empty, then posts will be get from all categories.
  • content_limit: number of words of post content will be displayed.
  • more: read more link text
  • total_columns: the total columns of all blog posts will display. This value is used to calculate the column of each post.

For example: if you want to display 2 blog posts in a grid 8 columns (like page content), each post will be 4 columns, then use:

[posts title_wrap="1" title="Blog Posts" number="2" content_limit="30" more="Read more" total_columns="8"]

If you want to display 4 posts, each post is 3 columns, then total columns is 12:

[posts title_wrap="1" title="Blog Posts" number="4" content_limit="30" more="Read more" total_columns="12"]

Popup:

posts

In the popup, click Advanced Button to show more options for the shortcode.

Team Member

This displays a team member profile on your website.

Attributes:

[team_member name="Mathew Parkson" position="Senior Manager" photo="http://themes.fitwp.com/whisper/wp-content/uploads/sites/3/2013/12/team-1.jpg" phone="+00 123 4567" email="mathewp@business.com"]It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.[/team_member]
  • name: member name
  • position: member position
  • photo: URL to member’s image. You should use Media Library to upload image and then paste image URL here.
  • phone: phone number
  • email: email address
  • Content of the shortcode: member’s biography

Popup:

team-member

Clients

This shortcode displays a list of your clients in a carousel slider. See demo.

This shortcode actually contains 2 shortcodes: [clients] is a wrapper and [client] is the shortcode that contains each client’s information.

Attributes:

[clients title=Our Clients]
[client name="FitWP" url="http://fitwp.com" image="http://fitwp.com/avatar"]Building premium WordPress themes.[/client]
[client name="Deluxe Blog Tips" url="http://dbt.com" image="http://dbt.com/avatar"]WordPress tips.[/client]
[/clients]

For [clients]:

  • title (optional): the title of the carousel slider.

For [client]:

  • name: client’s name
  • url: client’s URL
  • image: client’s image
  • The content of the shortcode: client’s description
Althought this shortcode is called **Clients**, you can use it to display **testimonials**!

Popup:

clients

In the popup, when you need to add more client, just click Add Client button.

Counter

This shortcode allow you config counter.

Attributes:

[counter number="5" icon="gala-airplane51"]counter[/counter]
  • number: number of counter.
  • icon: you can choose icon in icon list.

Popup:

social-media

Pie Chart

This shortcode allow you config pie chart.

Attributes:

[pie_chart dimension="200" color="yellow" width="10" percent="100"]Chart 1[/pie_chart]
  • dimension: pie dimension.
  • width: bar width.
  • color: color of line.
  • percent: percentage of the pie chart.
  • width: width of the line border.

Popup:

social-media

Pricing table

This shortcode allow you config pricing table. See demo.

Attributes:

[pricing name="price-table" price="$50" link="http://demo2.fitwp.com/galaticos/" button="Purchase" highlight="1"]

Feature 1
Feature 2
[/pricing]
  • name: name of item
  • price: price of item.
  • link: link when you click on button

Popup:

pricing-table

Glamo

Welcome! First of all, we want to thank you for purchasing our Glamo WordPress Theme.

In the following sections, we will explain how to set up and use Glamo theme the easiest way possible. Although there’re a lot of things written in this documentation, the theme itself is not hard to use. You can go to the Theme Options page and explore everything yourself. This file is more of a reference if you do not know what to do, or if you are not familiar with WordPress.

Files Included

The download package (.zip) that you get from ThemeForest contains the following files and folder:

  • glamo.zip: main theme file that need to be uploaded to host to install Glamo theme
  • demo-content.xml: demo content file, which contains all pages and posts from live preview website. It will help you to have a first look at how we use Glamo theme
  • demo-product.xml: demo products file, which contains default products of Woocommerce
  • docs.html: theme documentation (this file)
  • theme-options.txt: theme option backup file. You’ll need this to restore the default theme options that setup for demo website.
  • Plugins:
    • codecanyon-2751380-slider-revolution-responsive-wordpress-plugin.zip: Slider Revolution Responsive WordPress Plugin. Completed download package from Codecanyon.net. It’s FREE for you to use with Glamo theme
    • demo-slide.zip: Slider for business, wedding, bakery page

Installation

Install Theme

We have written a very detailed guide on how to download and install a WordPress theme from ThemeForest, please follow the instruction in that article.

Install demo content

If you are new to WordPress and have problems with setting up the theme you might want to import the demo content file that comes with the theme. The following actions will import some dummy posts and pages from the live preview:

  • Go to Tools > Import
  • Select WordPress from the list
  • If you haven’t installed the WordPress import plugin, a popup window will appears and ask you to install it. Just click Install Now. When the installation progress is completed, click Activate Plugin & Run Importer. If you have installed this plugin, skip to next step.
  • Click Browse and select demo-content.xml file from the download package
  • Click Upload file and import
  • When you are asked to import author, you can create new author or import to existing author. You also should check the checkbox Download and import file attachments.

import

After completing all above steps, go to Posts, Pages, Products, Collections to see imported data.

Important: Due to license of images, we have to remove images in distributed demo content and replace them with placeholers. All images get from placehold.it, if you have any download errors when import demo-content.xml, problem can be speed of internet connection. Don’t worry about that, you can replace with your own images.

Install demo products

Please follow above steps to import file demo-product.xml from download package.

You should to add category image and description to have best display in Homepage, please go to `Products -> Category` and edit categories you want. You can see the detail guide in Building Homepage/ Featured Categories below.

Setup homepage and blog page

After install demo content, you’ll see a page Homepage. This page will be used as the homepage of the website. To set it as homepage, please go to Settings \ Reading, under Front page displays, please chose A static page (select below) and select Homepage for Front page and Blog page for Posts page.

homepage

Setup Menu

Although the theme is working now and it shows menu, but because we haven’t created a menu for primary location, the theme will display all pages by default. As the number of pages is large, displaying all of them in the menu is a bad idea.

Create or edit a menu

Following these steps to create a menu:

  • Go to Appearance > Menus
  • Select an existing to edit, or click create a new menu. Note: when you import theme data, WordPress automatically create a 3 menus for you: (Menu Left, Menu Right, Main Menu), so select one of them if you want to have same menu as in live preview.
  • Select pages from the left meta box and click Add to Menu
  • On the right, feel free to drag and drop menu items to organize them
  • When you’re done moving menu items, check Main Menu for Theme locations at the bottom of the page
  • Click Save Menu

menu

Add Description And Icon To Menu Item

Follow these steps to show description for one menu item as live demo:

  • Click on Screen Options tab at the top-right corner to open Screen Options panel.
  • Select 2 checkboxes CSS Classes and Description.
  • Click on Screen Options tab again to close options panel.
  • Now you click on the menu item that you want to add a description to, an options panel for this item will show.
  • Enter CSS class of icon in CSS Classes (optional) text field. You can find all icon classes in the FontAwesome reference page. For each icon, you have to enter fa icon_class (where icon_class is provided in FontAwesome reference page, e.g. fa fa-home) to make it work.
  • Enter a short description for that item in Description textarea
  • After add icons or descriptions or both to all menu items, click Save Menu button.

menu screen options

Note that the menu icon and description are **optional**. You can use them to decorate your menus or leave them empty to use the default clean look.

Menu Locations

Glamo have 5 locations for Menu by default:

  • Primary Menu Left and Primary Menu Right are used as default locations. They are used to display your menus when you set Logo Position center in Theme Options page (we’ll talk about this later in Theme Options section).
  • Primary Menu will be used when you set Logo Position left or right in Theme Options page.
  • Secondary Menu is an additional menu that displays right bellow the logo. By default, there are no menus in this location.
  • Footer Menu is used to display a small menu on the footer.

Beside displaying menus on other locations, you can display them inside widget areas which we are going to talk about in next section.

You can create many styles of menu by combining menu and logo locations, these are some examples:

  • Logo center + Primary Menu Left + Primary Menu Right

logo center primary menu left right

  • Logo left + Primary Menu

logo center primary menu left right

  • Logo center + Secondary Menu

logo center primary menu left right

Setup widget areas

Glamo theme has 8 widget areas (sidebars) by default:

  • Topbar Sidebar Left and Topbar Sidebar Right: they are created to display small widgets in topbar of the website.
**NOTE**: On mobiles and tablets, all widgets in Topbar Sidebars will be hidden, but [Glamo] Mini Cart.
  • Header Sidebar: will display widgets in the header only when set Logo Position left or right and no menu is set for Primary Menu location.
  • Blog Sidebar: main website sidebar which will be displayed on all blog posts, archive pages, etc.
  • Page Sidebar: will be displayed on all WordPress pages.
  • Shop Sidebar: will be displayed on all WooCommerce pages: Products, Product category, Single Product, etc.
  • Home Sidebar: will be displayed on Homepage template (we’ll talk about this template later in Page Templates section).
  • Footer Sidebars: there are 4 default sidebars for footer, each sidebar is a column in the footer. You can change number of columns in footer in Theme Options page (in that case number of footer sidebars will increased or decreased acccordingly).

To set up a sidebar, select it from the right by clicking its title or the arrow down. Then drag and drop widgets from the left to the sidebar area.

sidebar

That’s all! Now you have the website up with all basic elements!

Theme Options

theme options

The Glamo theme comes with unique, creative and easy-to-use Theme Options page. You can change all theme options in one place!

With Glamo’s advanced theme options panel, you can customize just about any part of your site quickly and easily. Every element on the site can have the color changed to your liking. Choose a color scheme for website, select fonts for all headings and body copy, change sizes, colors and line-heights of all fonts, select different footer column layouts, enable or disable several options, upload your own custom favicon, select from various site/page layouts, input custom CSS, set hundreds of other options to easily customize your site!

All options have a full description so you can know what you are doing. Just click and save!

Let’s go through each section.

General

general

This sections contains:

  • (1): favicon upload, allows you to upload favicon for you website
  • (2): touch icon, allows you to upload icon for mobile devices and tablets
  • (3): load Bootstrap from CDN. Bootstrap is a part of Glamo theme and loaded within theme’s stylesheet, but you can load it from CDN to save the bandwidth and improve performance.
  • (4): load FontAwesome Icons from CDN. FontAwesome is a part of Glamo theme and loaded within theme’s stylesheet, but you can load it from CDN to save the bandwidth and improve performance.
  • (5): show comments on pages, allows you to show/hide comments and comment form on pages.
  • (6): enable or disable breadcrumb.
  • (7): when breadcrumb is enabled, this option will appear and let you choose which pages breadcrumb will be displayed.
  • (8): backup – restore, allows you to backup Glamo options and restore them later, or transfer the saved options between different installs.

Here are the explanations of some options that can help you understand and use them better:

Favicon Upload

Favicon (short for Favorite icon), also known as a shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar (sometimes in the history as well) and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab, and site-specific browsers use the favicon as a desktop icon.

This is how favicon appears:

favicon

Glamo lets you upload favicon or enter favicon URL in the input box:

  • If you have a favicon uploaded, or you store the favicon somewhere out of the Media Library, you can just put the URL of the favicon into the input box, or
  • If you want to upload favicon for your website, click the upload button (the green one near input box) and upload it to Media Library as a normal image, then click Select.
The favicon should be in one of the following formats: `.ico`, `.png`, `.gif`. Usually, we should use `.ico`.

When you’re done, you can click Save Changes button to save your data.

Touch Icon

Touch icons are the favicons of mobile devices and tablets. Each mobile devices and tablets has its own standards for displaying the touch icon (read this article to have a better understanding about touch icon and supported devices) and requires various icon sizes. But for best compatibility and simplicity, an image with size 152×152 is enough.

To specify a touch icon for your website, just do the same as for favicon: you can either put the URL of the touch icon into the input box or upload the icon to Media Library.

The icon must be a PNG image

When you’re done, you can click Save Changes button to save your data.

Show comments on pages

This option allows you to show/hide comments and comment form on pages. By default, Glamo doesn’t display comments and comment form on pages.

Important: In case this option is set to ON, to display comments on pages, you still have to allow comments for pages when you edit pages.

allow comments

By default, this checkbox is checked (meaning comments are allowed on pages). But in case you want to show comments on all pages, except some specific pages, you can use this checkbox to hide comments for those pages only.

Backup – Restore

Glamo allows you to backup theme options and restores them later. You can also transfer the saved options data between different installs.

To backup theme options, just copy the text inside the text box and save it into a file on your computer. To import data, replace the data in the text box with the one from the saved file and click Import Options button.

After clicking Import Options, Glamo will automatically setup all options and refresh the current theme options page, so you can see the options immediately.

Design

This sections contains:

  • Color Scheme: allows you to change color scheme of whole website
  • Layout: allows you to change layout style and layout for whole website, for blog posts and pages
  • Typography: allows you to change font family, styles, size, line height, color for body text and headings
  • Custom CSS: allows you to add your custom CSS

Color Scheme

Glamo theme has 5 predefined color schemes to choose from: blue, red, green, violet and orange. When you change color scheme of the theme, all links, button background and other elements will change their color or background accordingly.

The default color scheme is red, but you can select any from 5 colors here. After selecting, click Save Changes button to save your data. Now go to the frontend and check the colors of links, buttons, etc.

When you select Color Scheme section, you’ll see the following options:

color schemes

(1): select built-in color scheme. These are 5 predefined color schemes. When you select one of them, your website elements will change color accordingly.

(2): enable/disable custom color scheme. This option allows you create custom color scheme, and you can build unlimited color schemes here! Just enable this and you’ll see options below.

(3): primary color. This is primary color for your custom color scheme, used for links, overlay, button background on hover, badges, etc.

(4): secondary color. This is the color used in button background, tag, etc.

(5): this is just some examples of using custom colors to built your own color scheme. These are real example which are used to build 5 predefined color schemes. You should start with these values and adjust them.

Layout

This section helps you to select which layout will be used in the whole website.

layout

(1): site layout for blog, single posts and other archive pages. You can select sidebar position here: left, right or none (don’t display sidebar).

(2): sidebar layout for pages. Same meaning as for blog above.

These options is site-wide, meaning for whole website. But you still can set **custom layout for single page when edit** (We’ll explore it later).

(3): sidebar layout for WooCommerce pages. Same meaning as for blog above but only applied for WooCommerce pages: shop page, single products, product tag archive, product category archive.

Typography

typography

This section helps you to customize fonts for body text and headings on your website. For each element, you can customize:

(1): font family. Just select from the drop-down font family you like. Glamo supports 3 normal fonts (Arial, Verdana and Times) and 2 Google Fonts (Audiowide and Roboto).

(2): font size. Adjust font size for better look here. Just remember the unit for font size is px.

(3): line height. Adjust line height for better look here. The unit for line height is also px.

For better readability, good value for line height is about 1.4-1.5 x font size.

(4): font styles. You can choose bold, italic, underline or any combination of them.

(5): font color. Click on the button, a color picker will appear and you can now select any color.

Important: before customizing fonts, remember the default values for fonts. You should customize fonts around these values.

Element Font Family Font Size Line Height Styles Color
Body Text Roboto 13px 20px None 3d3d3d
Heading 1 Audiowide 20px 20px None 414141
Heading 2 Audiowide 18px 20px None 414141
Heading 3 Audiowide 16px 20px None 414141
Heading 4 Audiowide 15px 20px None 414141
Heading 5 Audiowide 14px 20px None 414141
Heading 6 Audiowide 13px 20px None 414141

Custom CSS

custom css

This section allows entering custom CSS that will be output in the </head>. This will overwrite CSS of theme, so please be careful!

Custom CSS is useful when you want to adjust small things for your website. If you have to adjust a lot of things in the website, please use Child Themes.

Header

header

This sections contains:

(1): enable/disable topbar. By default, topbar is enabled.

(2): logo upload, allows you to upload the logo for your website. You can either put the URL of the logo into the input box or upload the logo to Media Library. The live preview of the logo will appear below the input.

(3): logo size. Specify logo size in px here. It will help you resize the logo to correct dimensions. By default, the good size is 180×180 (it is good if Center is set as logo position in the bellow option).

(4): logo margin. Specify logo margin in px here. This is useful when you upload logo with different size than recommended. You can move logo a little, adjust space to make it look good.

You should **resize the logo to correct size** in Photoshop or any image editor before upload. It will keep your logo not resized and small.

(5): Specify logo position. By default, logo position set as center.

**Note**: When logo position is not Center, Glamo will not use Primary Menu Left and Primary Menu Right locations to display menu, you need to place a menu to Primary Menu location if want to have menu displayed on header, or use Secondary Menu location instead.
**Tip**: Use this option with Topbar option and place Menus in locations, you can create 24 difference header styles. And with Color Scheme you are ready to build unique shops!

(6): header scripts. Enter scripts or code you would like output to &lt;head&gt;. It can be:

  • <link> tag for custom font (from Google Fonts maybe)
  • Any meta tag: to show the designer, copyright, etc. in meta tag
  • Google Analytics code
  • Any Javascript code that need to be execute in <head>
  • Anything else
If you want to put custom CSS here, you’re doing **wrong**. There’s a section for **Custom CSS** under **Design**, use it instead.

Shop

shop options

This section contains only one option to set the default image for products. This image will be used for products which don’t have the thumbnail.

You can paste image URL here or upload the image to Media Library by clicking the upload button (green button).

Blog

blog

This section helps you to change the display options for posts in blog page (and other archive pages). This section contains:

(1): what type of post content will be displayed. Available options are Post excerpt, Post content or Post content before more tag.

To understand what those values mean, take a look at the screenshot bellow:

post

Where:

  • (A): Whole post content, this is what you enter in the editor.
  • (B): Post excerpt, which is optional hand-crafted summaries of your content. Learn more about manual excerpt.. If you don’t enter anything in the excerpt box, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
  • (C): The post content before more tag
  • (D): The more tag

Return to blog option: if you choose

  • Post excerpt: Glamo will get post excerpt (B) and display it. Remember: if you don’t enter excerpts for post, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
  • Post content: Glamo will get whole post content (A) and display it. This is the default value.
  • Post content before more tag: Glamo will get only the post content before more tag (C) and display it.

(2): post content limit. Sometimes you enter a very long text for post excerpt or post content, display such long text in blog and archive pages is not good and harm your website beauty. So we need a way to truncate text to make it shorter. This option is created for that purpose.

Simply specify the number of words will be displayed here. Post content or excerpt will be truncated to an exact number of words. You should try changing this value and preview your blog to see what is best for you.

The default value is 55 words.

**Important**: this option affects only when you **NOT** choose `Post content before More tag` from the Display option above

(3): read more text. The default value is Continue reading.

Footer

This section gives you options to customize footer area on your website.

footer options

footer

(1): number of columns in footer. It also is the number of footer sidebars (widget areas). The default is 4.

(2): copyright text. You can enter text, HTML and shortcodes here. To make you easier to display copyright text, Glamo has default shortcodes that you can enter here:

  • [year]: display current year
  • [site_link]: display link to your website with text is the website title. For example, if you have a website at http://example.com and title Example, this will display a link like this:
<a href="http://example.com">Example</a>
  • [bloginfo]: display blog information. This is the wrapper of bloginfo() function. Default it will display blog name (e.g. website title), but you can use it with parameter name to display more information, for example:
    • [bloginfo name="name"]: display blog name (default)
    • [bloginfo name="description"]: display blog description (tagline)
    • [bloginfo name="version"]: display WordPress version
    • [bloginfo name="rss2_url"]: display RSS2 feed link
    • [bloginfo name="home"]: display home link
    • For more value of name, please see bloginfo() function

The default value for copyright text is Copyright ©[year] [site_link]. All rights reserved.

(3): footer information. Specify some information about your website here, such as allowed payment methods.

(4): footer scripts. Enter scripts or code you would like output before </body>. It can be Google Analytics code or any Javascript code.

WooCommerce Settings

WooCommerce plugin almost works after activated, you just have to edit settings about image size to make sure products are displayed correctly with Glamo.

Here we will show you where to edit these settings.

woocommerce settings

(1): go to WooCommerce > Settings then click to Products tab, the fields we have to edit are located there.

(2): change product image sizes as the screenshot.

  • Catalog Image: 231×266
  • Single Product Image: 410×410
  • Product Thumbnails: 50×50

Page Display Settings

We’ve seen how to change featured title area, layout style, sidebar layout for the whole website. Glamo also supports customizing these things for specific posts and pages.

When you edit a page, you’ll see this meta box below the content editor:

display settings

This meta box contains 2 main parts:

  1. Import slider
  2. Display Settings
  3. Layout Settings

Each parts contains some settings as shown in the screenshot above. Let’s go through it:

Import slider

After setting up the page, you need to setup the slider for page like business, bakery, wedding to make it display the same as in live preview.

The download package contains exported slider (Revolution Slider) that help you easier to create sliders. Following the steps below:

(1): Go to Revolution Slider.
(2): Click Import Slider button.
(3): When a popup appear, click Browse and select demo-slide.zip file.
(4): Click Import Slider button to start import the selected slider.

import slider

Display Settings

(1): Hide breadcrumb. If you enable Breadcrumb and allow it to be showed on pages in Theme Options, this option allow you to hide Breadcrumb on this page only when you enable it.

(2): Hide page title. As posts, the title of the page is showed at top of page content. If you want to hide the title of current page, just select this option.

This is useful if you want to setup landing pages or special pages.

(3): This option allow you to remove spacing between header and content, content and footer. This option is useful for creating some special pages, such as homepage (when using page builder – we will show you bellow), or insert a full-width slider / background image at the top of the page.

Layout Setitngs

By default, default layout of pages is set in Theme Options > Design > Layout, but in each page Glamo have Layout Settings to allow you to select difference layout and choose which sidebar will be showed within it.

(4): enable/disable custom layout. By default, every page uses default layout. You can select a difference layout for current page when to enable this option.

(5): select a specific layout for current page. When you enable custom layout option, this option will be showed to allow you to select a difference layout for the current page. There are 3 layouts you can choose: Sidebar left, Sidebar right or Full Content.

(6): select a sidebar. By default, Glamo use Page Sidebar for pages, but you can choose another sidebar for a page if you want. When you enable custom layout option and select a layout which has sidebar (Sidebar Left or Sidebar Right), this options will appear and allow you to select difference sidebar for current page.

Building Homepage

There are 3 ways to build a homepage in Glamo: use Homepage template which is provided by Glamo theme or uses WR Pagebuilder plugin or use Visual Composer Plugin .

This section will show you how we build our home page using the page template Homepage, using WR Pagebuilder plugin and using Visual Composer.

Using Homepage template

We use Homepage template to build Demo 1.

homepage

When you add or edit a page, look at on the right, find Page Attributes meta box and select a template Homepage from the dropdown Template (1), a meta box called Homepage Settings appear (2).

homepage template

You can drag sections to change their order. Now let’s go through each section follow the order in homepage.

Slider

section slider

(1): enable/disable slider section.
(2): which type of slider you want to use, default slider (collections slider – we’ll show you how to add/edit collections later) or custom slider. If you choose custom slider, options (3) and (4) bellow will disappear and a text field will display for you to enter shortcode of any slider (like Revolution Slider, Layer slider, … )
(3): select 3 collections to display on section slider like on live demo.
(4): select effect for collection slider

Promotion

section promotion

(1): enable/disable promotion section.
(2): enter the content for this section, HTML and shortcodes are allowed.

This section is similar to Custom Content section but it is displayed in the frontend with beautiful fonts to attract visitors.

Featured Products

section featured products

(1): enable/disable featured products section.
(2): section title. It’s Featured Products by default.
(3): enter number of featured products will be displayed.

Featured Categories

section featured categories

(1): enable/disable featured categories section.
(2): select product categories will be displayed. You should select an even number of categories to has the best view.

In order to add or change product category image, please go to `Products -> Category` and edit categories you want.

Edit catergory image and description

(1): Add the description.
(2): Upload image.
(3): Click Update button.

Recent Products

section recent products

(1): enable/disable recent products section.
(2): section title. It’s Recent Products by default.
(3): intro message. It allow you to show a custom content before list of recent products (HTML and shortcodes are allowed)
(4): enter number of featured products will be displayed.
(5): enable/disable sidebar in this section.
(6): select position for sidebar.

If you enable sidebar on this section, the number of products should be 3, 6, 9… to has the best view. If you don’t, a number of products should be 4, 8, 12… And remember to go to `Appearance > Widgets` to add or edit widgets in `Home Sidebar`.

Logos

section logos

(1): enable/disable logos section.
(2): edit or delete uploaded logos.
(3): add new logos to this section. Click the button Select or Upload Images, a modal window will display. There you can upload images or choose images from the Media Library.

Custom Content

section custom content

(1): enable/disable custom content section.
(2): enter the content for this section, HTML and shortcodes are allowed.

Using WR Pagebuilder

Glamo supports building pages by using page builder plugins: Visual Composer and WR PageBuilder.

We use this plugin to build demo 2 Mobile. You can download sample data of Glamo Mobile demo here: http://docs.fitwp.com/glamo/demo-mobile.zip.

If you want to build the home page like Mobile demo, you should import demo-content-mobile.xml from demo-mobile.zip instead of demo-content.xml. After successful importing, you go to Pages, chose Homepage to edit. Remember to set that page as front page in Setting -> Reading.

We include an export of slider that we use in live demo Mobile in demo-mobile.zip a file, you can import it in Revolution Slider in admin area.

Although Glamo supports both WR Pagebuilder and Visual Composer plugins, but using them is NOT required. You still can use Glamo for a dedicated shop and it functions just well. But if you need more fancy pages or write beautiful blog posts, using page builder plugins is a good choice.

Here we will show you how to use WP PageBuilder which included in Glamo theme to build a page.

Open page builder

open wr pagebuilder

When to add or edit pages, you will see 2 tabs Classic Editor and Page Builder right bellow page title, click to Page Builder open page builder screen add start adding content.

Note: Before adding elements to the page, you should know that WR PageBuilder organizes content in a grid using rows and columns. Each row can contain some columns and each column can contain some elements.

Now let’s see how to add rows, columns, and elements to page content.

Add Row

WR pagebuilder add row

(1): Click the Add Row button to add new row.

(2): You can drag and drop a row in the vertical direction to change its order.

(3): You can delete a row by clicking the recycle icon on the right side of the row. If that row contains elements, an alert box will appear and ask you to confirm that you want to delete that row and all elements inside it.

(4): Edit row. When you click the Edit Row icon (above delete row icon), a modal box will appear with options to edit row, let’s see what it is:

wr pagebuilder edit row

  • Width: select the width of row, boxed or full width. By default it is boxed.
  • Background: select background type of row: none, solid color, gradient, pattern or image, then set it up.
  • Border: specify row border. It contains border with, border type and border color.
  • Padding: edit padding of the row in px. By default, all values are set to 10px
  • CSS Class: add a css class to row. It is useful when you want to add special style to a row by using Custom CSS feature in Theme Options.
  • ID: Set CSS id to row. As the same purpose as CSS Class, you can add style to a row by adding ID to it.

Add Columns

ig pagebuilder add columns

There is 2 way to add columns into a row: add them manually or user pre-defined layout.

(1): add columns manually by clicking the Add Column button on the right side of row. You can add maximum 12 columns.

(2): you can resize the column by clicking on 3 dots icon between columns and drag it to left or right side.

(3): add column by using pre-defined layout. When you hover your mouse over the Add Row button, a list of pre-defined layout will appear, just click on a layout and you have a new row with columns inside.

Add Elements

ig pagebuilder add elements

Inside each row, you will see Add Element button at the bottom, just click on it, a modal box appear, it contains all available elements that supported by IG Pagebuilder plugin.

ig pagebuilder elements

The Select element you want to add by clicking it, a new modal box will appear. It allows you to setup the element with many options. After done, click Save button to add the configured element into the column.

Note: To know in details how to setup/configure each element, please see the WR PageBuilder documentation from included package or use online documentation here.

Using Visual Composer

Note: Visual Composer is not included in Glamo. To use Visual Composer, you have to purchase the plugin at CodeCanyon.

We use this plugin to build demo 3 Restaurant. You can download sample data of Glamo Restaurant demo here: http://docs.fitwp.com/glamo/demo-restaurant.zip.

If you want to build the home page like it, you should import demo-content-restaurant.xml instead of demo-content.xml. After successful importing, you go to Pages, chose Homepage to edit. Remember to set that page as front page in Setting -> Reading.

You can see the detail how to use Visual Composer in this very detailed documentation.

We include an export of slider that we use in live demo Restaurant in demo-restaurant.zip file, you can import it in Revolution Slider in admin area.

**Important:** At this time, plugin WR Pagebuilder is not competible with Visual Composer, so please deactive WR Pagebuilder if you want to use Visual Composer.

Add/Edit Collection

Glamo has a custom post type called Collection to show photos as a slider (we talked about that slider above, in Homepage template section). When you add or edit a collection, you will see following options:

collection

(1): edit or delete image from gallery.

(2): add new images to gallery. Click the button Select or Upload Images, a modal window will display. There you can upload images or choose images from the Media Library.

(3): featured image. It is optional options, you can set the featured image for current collection here. By default, it uses the first image from the gallery.

Post Format

Post Formats is theme feature which is a piece of meta information that can be used by a theme to customize its presentation of a post.

In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list.

Glamo theme supports the following post formats:

  • gallery – A gallery of images, which will be displayed in a responsive image slider, powered by Flexslider.
  • link – A link to another site.
  • image – A single image, which will be shown above post title.
  • quote – A quotation.
  • video – A single video, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed above post title.
  • audio – An audio file, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed using a powerful HTML5 audio player provided by WordPress as default player.

Using post format in Glamo lets you differentiate post from each other and make the blog page / single page looks more beautiful.

See blog page to see how post formats look.

Setup Post Formats

When you edit a post, select a format you want to apply to that post on the Format meta box on the right:

formats

When you choose a format, a corresponding meta box will appear below the content editor, here’s the list of them:

formats

All you need to do is just enter all information in the fields in these meta boxes. This information will be used to decorate the post. For example, gallery post format will use uploaded images to show a slider above post title, a video post will display a video player above post title, etc.

Widgets

Glamo plays nicely with default WordPress widgets. Besides that the theme has some additional widgets that might be useful for you:

[FitWP] Flickr

This widget displays the list of photos which is get from a user or group on Flickr.

This widget has the following options:

  • Title: widget title
  • Flickr ID: this is ID (not username) of user or group on Flickr. You can go to http://idgettr.com to get the ID.
  • Type: select type of above ID is User or Group
  • Number of photos: how many photos you want to display
  • Display: which photos you want to display, latest or random photos.
  • Size: select size of photos

[FitWP] Latest Tweets

Before you use this widget, you have to create a Twitter app. Following these steps:

twitter app

  • Fill in all information needed for the app. The name and description can be anything, it does not have to be a certain name. You can leave the Callback URL field empty.
  • After creating the app, go to API Keys tab then click Create My Access Token button at the bottom to generate the necessary codes. It usually take 10 – 15 seconds to generate these codes, you have to reload that page to see your code in Your Access Token section.

twitter app

  • Now you can copy the following fields for setting up Latest Tweets widget:
    • API key -> Consumer Key
    • API secret -> Consumer Secret
    • Access token -> Access token
    • Access token secret -> Access token secret

These fields will be used in the tweets widget.

Now go to your website admin area, then Appearance > Widgets, drag and drop [FitWP] Latest Tweets widget into a sidebar that you want it to show there. You’ll see these fields this:

tweets

(1): You also need to enter Cache time, which is the time your tweets will be temporarily stored in WordPress cache,

(2): Twitter username which you want to get from

(3): Number of tweets you want to get

After filling all information, just click Save.

[FitWP] Recent Posts

This widget replaces default WordPress recent posts widget. It displays recent posts in the much more beautiful way and gives you more control to what will be shown.

The widget has the following options:

  • Title: widget title
  • Number Of Posts: how many posts you want to displayed
  • Category: you can choose to display posts from all categories, or a specific category or multiple categories
  • Show Comment Number: whether or not show comment number
  • Show Thumbnail: whether or not show thumbnail
  • Default Thumbnail: if post doesn’t have thumbnail, this default thumbnail will be used
  • Show Date: whether or not show post date
  • Date Format: date format. See this link for a full list of supported date formats
  • Show Excerpt: whether or not show post excerpt
  • Excerpt Length: the number of words of post content will be displayed
  • Show Readmore Text: whether or not show read more text
  • Readmore Text: Read more text

[FitWP] Tabs

This widget displays popular posts, recent posts and recent comments in a tabbed widget. Each tab has its own options. For popular posts and recent posts, the options are similar to the Recent Posts widget above.

Note that popular posts are counted based on a number of comments.

[Glamo] Account Links

This widget shows links to the login page and register page. We created this widget with the main purpose is help administrators display login link or register link or both in top bar easily.

[Glamo] Social Links

This widget shows links (with icons) to your social network profiles. All you need to do is just enter URL to your social network profiles and optionally title for each link.

[Glamo] Mini Cart

This widget shows the shopping cart in minimized size. We prefer you to use it instead of WooCommerce Cart widget when you want to show shopping in Topbar or Header Sidebar.

NOISE

Welcome! First of all, we want to thank you for purchasing our Noise WordPress Theme.

In the following sections, we will explain how to set up and use Noise theme the easiest way possible. Although there is a lot of information in this documentation, the theme itself is not hard to use. You can go to the Theme Options page and explore the ease of using yourself. This file is more of a step by step reference if you do not know what to do, or if you are not familiar with WordPress.

Files Included

The download package (.zip) that you get from ThemeForest contains the following files and folder:

  • noise-wp.zip: main theme file that needs to be uploaded to your host to install the Noise theme
  • demo-content.xml: demo content file, which contains all pages and posts from live preview website. It will help you to have a first look at how we use Noise theme
  • theme-options.txt: theme option backup file. You’ll need this to restore the default theme options that setup for demo website.
  • docs.html: theme documentation (this file)
  • PSD.zip: zip file of all PSDs of Noise. You might want to use it to change the design

Installation

Install theme

We have written a very detailed guide on how to download and install a WordPress theme from ThemeForest, please follow the instruction in that article.

Install demo content

If you are new to WordPress and have problems with setting up the theme, it is because you will need to import the demo content file that comes with the theme. The following actions will import some dummy posts and pages from the live preview:

  • Go to Tools > Import
  • Select WordPress from the list
  • If you haven’t installed the WordPress import plugin, a popup window will appear and ask you to install it. Just click Install Now. When the installation progress is completed, click Activate Plugin & Run Importer. If you have installed this plugin, skip to the next step.
  • Click Browse and select demo-content.xml file from the download package
  • Click Upload file and import
  • When you are asked to import author, you can create new author or import to existing author. You also should check the checkbox Download and import file attachments.

import

After completing all above steps, go to Track, Artist, Album to see imported data.

Important: Due to the license of images (http://www.shutterstock.com/), we have had to remove images in the distributed demo content and replace them with placeholders instead. You should get a demo site looks like this http://themes.fitwp.com/noise-demo/

Setup homepage and blog page

After installing demo content, you’ll see a page Onepage. This page will be used as the homepage of the website. To set it as homepage, please go to Settings \ Reading, under Front page displays, please chose A static page (select below) and select Onepage for Front page and Blog page for Posts page.

homepage

Restore Theme Options

To make your website looks exactly like the demo website, you need to import theme options.

The download package contains a file called theme-options.txt. Please open it with a text editor (like Notepad in Windows) and copy the content.

Then go to Appearance \ Theme Options \ Backup and Restore, you’ll see this:

backup

Paste the content of theme-options.txt that you’ve just copied into the textarea (1), then click button (2) to import the theme options.

That’s all!

Setup menu

Because we haven’t created a menu for primary location, the theme will display WordPress pages by default, which is not correct.

The following steps will guide you in assigning a menu:

  • Go to Appearance > Menus
  • Select an existing to edit, or click create a new menu. Note: when you import theme data, WordPress automatically create a menu Main for you, so select it if you want to have same menu as in live preview.
  • Select items in Noise Sections from the left meta box and click Add to Menu.
  • On the right, feel free to drag and drop menu items to organize them.
  • When you’re done moving menu items, check Primary Menu for theme locations at the bottom of the page
  • Click Save Menu

menu

Note 1: This only changes the order of menu items, not the order of sections. To change the order of sections, please go to Theme Options.

Note 2: If you use the imported menu (e.g. the Main menu which is automatically created), you have to change the URL of menu item. It is currently pointed to the demo website, and you will have to change the URL to view your website creation.

menu

Setup widget areas

The Noise theme has only 1 widget area (sidebar) for Blog page. By default, Noise works perfectly with all widgets, so you just need to drag and drop widgets from the left to the sidebar area. That’s all.

sidebar

To see options for each widgets, please read the Widgets section.

That is all! Now you have the website up with all basic elements needed for your build!

Theme Options

theme options

The Noise theme comes with a unique, creative and easy-to-use Theme Options page. This allows you to change all theme options in one place!

With Noise’s advanced theme options panel, you can customize just about any part of your site quickly and easily. You can change options for each section on the site. Upload your own custom favicon, input custom CSS. Change title, subtitle for each section. Upload background for parallax effect, etc.

All options have full descriptions to guide you along. Just click and save!
Let’s go through each section.

Let’s go through each section.

General

general

This sections contains:

  • (1): under construction mode. If you active this, your website will be put into construction mode. Note that, if you enable construction mode, you have to create a page using the “Under Construction” template to make this mode work correctly.- (2): autoplay, initiates (starts up) the automatic music player when the website is loaded
  • (3): enable autoplay of a track when website is loaded. To use this option also enable autoplay option.
  • (4): select which track plays when website is loaded.
  • (5): tick the box to show “Download” button on track
  • (6): number days that user can’t vote a track twice times in this range / Number of days to restrict multi-voting on tracks.
  • (7): favicon upload, allows you to upload favicon for you website
  • (8): touch icon, allows you to upload icon for mobile devices and tablets

After changing settings, click Save Changes.

Favicon Upload

Favicon (short for Favorite icon), also known as a shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar (sometimes in the history as well) and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab, and site-specific browsers use the favicon as a desktop icon.

This is how favicon appears:

favicon

Noise lets you upload favicon or enter favicon URL in the input box:

  • If you have a favicon uploaded, or you store the favicon somewhere out of the Media Library, you can just put the URL of the favicon into the input box, or
  • If you want to upload favicon for your website, click the upload button (the green one near input box) and upload it to Media Library as a normal image, then click Select.

The favicon should be in one of the following format: .ico, .png, .gif. Usually we should use .ico.

When you’re done, you can click Save Changes button to save your data.

Touch Icon

Touch icons are the favicons of mobile devices and tablets. Each mobile devices and tablets has its own standards for displaying the touch icon (read this article to have a better understanding about touch icon and supported devices) and requires various icon sizes. But for best compatibility and simplicity, an image with size 152×152 is enough.

To specify a touch icon for you website, just do the same as for favicon: you can either put the URL of the touch icon into the input box or upload the icon to Media Library.

Note: The icon must be an PNG image

When you’re done, you can click Save Changes button to save your data.

Design

This sections contains:

  • Color Scheme: allows you to change color scheme of whole website
  • Background: allows you to select background pattern or image, and change how it appear
  • Custom CSS: allows you to add your custom CSS

Color Scheme

color sheme
color sheme
color sheme
color sheme
color sheme
color sheme
color sheme

Noise theme has 7 predefined color schemes to choose from: black, red, blue, orange, violet, Blue sky deep and sapphire. When you change color scheme of the theme, all links, icon boxes, button background and other elements will change their color or background accordingly.

The default color scheme is black, but you can select any from 7 colors here. After selecting, click Save Changes button to save your data. Now go to the frontend and check the colors of links, buttons, etc.

When you select Color Scheme section, you’ll see the following options:

color sheme

(1): select a built-in color scheme. These are 7 predefined color scheme. When you select one of them, your website elements will change color accordingly.

(2): enable/disable custom color scheme. This option allows you create a custom color scheme, and you can build unlimited color schemes variations here! Just enable this and you’ll see options below.

(3): primary color. This is the primary color for your custom color scheme.

(4): secondary color. This is the color used in the border and the element’s background color

(5): Here are some examples of using custom colors to built your own color scheme. These are real example which are used to build 7 predefined color schemes. You should start with these values and adjust them

Background

This section helps you to select background pattern or image and change how it appears.

background

(1): background color.

(2): background image. You can paste image URL here or upload the image to Media Library by clicking the upload button (the green one).

(3): background position X, can be Left, Center or Right.

(4): background position Y, can be Top, Center or Bottom.

(5): background repeat, can be Repeat, Repeat Horizontally, Repeat Vertically or No Repeat

(6): background attachment, can be scrolled (will scroll when you scroll the content) or Fixed (will stay fixed when you scroll the content)

(7): parallax pattern. This is used as a overlay of the background image. It’s for better eye catching effect. You can leave it empty if you don’t like the effect.

**Tips**: A lot of background patterns can be found at [Subtle Patterns](http://subtlepatterns.com/).

After it’s done, click Save Changes button to save your data. Now go to the frontend and check the background.

The options 3-6 are similar to CSS properties for background and a little technical. If you don’t understand what they mean, just change the values, save and preview changes!

Custom CSS

custom css

This section allows entering custom CSS that will be output in the </head>. This will overwrite CSS of theme, so please be careful!

Custom CSS is useful when you want to adjust small things for your website. If you have to adjust a lot of things in the website, please use Child Themes.

Header

header

This sections contains:

(1): logo upload, allows you to upload a logo for your website. You can either put the URL of the logo into the input box or upload the logo to the Media Library. The live preview of the logo will appear below the inputs.

(2): logo size. Specify logo size in px here. It will help you resize the logo to the correct dimensions. By default, the best size is 200×40.

You should **resize the logo to correct size** in Photoshop or any image editor before upload. It will keep your logo not resized and correct.

(3): header scripts. Enter scripts or code you would like output to <head>. It can be:

  • <link> tag for custom font (from Google Fonts maybe)
  • Any meta tag: to show the designer, copyright, etc. in meta tag
  • Google Analytics code
  • Any Javascript code that needs to be executed in the <head> script.
  • Anything else
If you want to put custom CSS here, you’re doing **wrong**. There’s a section for **Custom CSS** under **Design**, use it instead.

Sections

This menu will let you reorder sections of Noise, as well as configure each section. Let’s go to each submenu to see how it works.

Order Sections

order

Here you can look at all sections available for Noise. You can also drag and drop each section to reorder them as you want.

Note that you cannot disable sections here. Only reorder. Enable/disable sections will be different options in each section settings.

Opener

opener

Opener is the screen you see when the preloader has finished (100%). It mimics the “Slide to Unlock” effect on iOS. This part allows you to configure the opener with the following options:

  • (1): enable/disable opener. If you don’t like the opener at all, you can disable it here. Note the opener is shown only once when users first go to website, e.g. they don’t have to “unlock” when they go through all pages on the website.
  • (2): opener logo. This option allows you to select a logo for the opener page. You can paste image URL here or upload it by clicking the green button.
  • (3): unlock text. Put the text “Slide to Unlock” here.
  • (4): background image. You can paste image URL here or upload it by clicking the green button.

Top Slider

slider

This is the configuration for the top slider. From version 2.2.1 theme sliders have three types for you are: Static Background, Slider Background, and Video Background

This section has the following options:

  • (1): enable/disable slider. If you don’t like the slider at all, you can disable it here.
  • (2): types of the slider that you can use. with any types of slider you have other settings as following:
    Static Background

slider

This option helps you can set a background image for Top Slider and captions appearing on it.

  • (1): background image. You can paste image URL here or upload it by clicking the green button.
  • (2): captions will be showed above the slider, you can move to next caption by clicking the arrow next or prev on the slider.
    Slider Background

slider

This option helps you can set a slider as background for Top Slider and captions appearing on it.

  • (1): captions will be showed above the slider, you can move to next caption by click arrow next or prev on the slider.
  • (2): images will be showed in the slider. You can paste image URL here or upload it by clicking the green button.
    Video Background

slider

This option helps you can set a video as background for Top Slider and captions appearing on it.

  • (1): your video Url, you can copy link on youtube then paste into this field.
  • (2): captions will be showed above video, you can move to next caption by click arrow next or prev on slider.

Latest Tracks

latest

This section allows you to display all tracks of your website in a vertical slider.In the frontend you can scroll vertically to see all tracks. The configuration of this section is very simple:

  • (1): enable/disable the section. If you don’t like the latest tracks section at all, you can disable it here.
  • (2): section title.
  • (3): title suffix. This is a small letter after the section title. It’s used for a better eye-catching effect.
  • (4): subtitle.
  • (5): number of tracks you want to display on website. Please note that the larger number of tracks, the slower website!

Like & Follow

like

This section displays beautiful Facebook like and Twitter follow buttons in the frontend. It has the following options:

  • (1): enable/disable the section. If you don’t like this section to be shown, you can disable it here.
  • (2): background image. You can paste image URL here or upload it by clicking the green button.
  • (3): message. This is the text that tells people to like/follow you. You can put text in multiple lines, which will be displayed the same in the frontend.
  • (4): text displays on Facebook button.
  • (5): Facebook fan page URL.
  • (6): text displays on Twitter button.
  • (7): Twitter username. Twitter is more easier than Facebook, you just need to put your Twitter username here.

Note: Since version 1.1.1, NOISE does not use Facebook App ID, instead of that – Facebook Fan page URL. It’ll make you easier to setup the theme (don’t need to create Facebook App)

Popular

popular

This section displays popular tracks (based on votes) in the latest week and in the latest month. The options for this section is very simple:

  • (1): enable/disable the section. If you don’t like to display this section at all, you can disable it here.
  • (2): section title.
  • (3): title suffix. This is a small letter after the section title. It’s used for a better eye-catching effect.
  • (4): subtitle.
  • (5): number of tracks to display.

Please see the screenshot in Latest Tracks section to know where these texts are displayed.

Quotes

testimonials

This section allows you to display a maximum of 5 quotes in the frontend. It has the following options:

  • (1): enable/disable the section. If you don’t like to display this section at all, you can disable it here.
  • (2): enable/disable sliding quotes automatically.
  • (3): background image. You can paste image URL here or upload it by clicking the green button.
  • (4): author name
  • (5): quote content

The (4) and (5) is repeated the same for all testimonials.

Media

gallery

This section displays photo and video galleries in the latest month. The options for this section is very simple:

  • (1): enable/disable the section. If you don’t like to display this section at all, you can disable it here.
  • (2): section title.
  • (3): title suffix. This is a small letter after the section title. It’s used for a better eye-catching effect.
  • (4): subtitle.
  • (5): number of photo galleries to display.
  • (6): number of video galleries to display

Please see the screenshot in Latest Tracks section to know where these texts (2), (3), (4) are displayed.

Latest Tweets

tweets

This section displays latest tweets in the frontend. It has the following options:

  • (1): enable/disable the section. If you don’t like the latest tracks section at all, you can disable it here.
  • (2): background image. You can paste image URL here or upload it by clicking the green button.
  • (3): API keys from Twitter App. Please read below to know it.
  • (4): Twitter username
  • (5): number of tweets to displayed
  • (6): cache time (in seconds). Twitter limits number of requests to retrieve tweets in short time. To make sure we always get tweets, Noise has a feature that store tweets in local cache, which will reduce the chance of blocking by Twitter and also improve web performance.

Before you use the Tweets section, you have to create a Twitter app. Following these steps:

twitter-app

  • Fill in all information needed for the app. The name and description can be anything, it does not have to be a certain name. You can leave the Callback URL field empty.
  • After creating the app, click Create My Access Token button to generate the necessary codes.
  • Now go to app Dashboard and select API Keys tab and copy the following fields:
    • Consumer key
    • Consumer secret
    • Access token
    • Access token secret

These are needed fields in theme options we’ve just talked about.

Releases

release

This section displays latest releases (album) in the latest month. The options for this section is very simple:

  • (1): enable/disable the section. If you don’t like the latest tracks section at all, you can disable it here.
  • (2): section title.
  • (3): title suffix. This is a small letter after the section title. It’s used for a better eye-catching effect.
  • (4): subtitle.
  • (5): number of releases (albums) to be displayed. Enter -1 to show all.

Please see the screenshot in Latest Tracks section to know where these texts (2), (3), (4) are displayed.

Subscribe

subscribe

This section displays a subscribe to newsletter form. The form itself is created by another plugin. We recommended Send Poet (formerly WYSIJA) plugin, which you should have installed in the beginning of this documentation. But you can use any other plugin which supports shortcode like Gravity Forms.

This section has the following options:

  • (1): enable/disable the section. If you don’t like the latest tracks section at all, you can disable it here.
  • (2): background image. You can paste image URL here or upload it by clicking the green button.
  • (3): form shortcode. Just paste the shortcode from the plugin here.
  • (4): form title.
  • (5): form description.

Events

events

This section displays upcoming and past events in the frontend. The options for this section is very simple:

  • (1): enable/disable the section. If you don’t like to display this section at all, you can disable it here.
  • (2): section title.
  • (3): title suffix. This is a small letter after the section title. It’s used for a better eye-catching effect.
  • (4): subtitle.
  • (5): number of events to be displayed. Enter -1 to show all.

Please see the screenshot in Latest Tracks section to know where these texts (2), (3), (4) are displayed.

Special Event

countdown

This section displays an important event with countdown style in the frontend. It has the following options:

  • (1): enable/disable the section. If you don’t like the latest tracks section at all, you can disable it here.
  • (2): types of background that you can use. with any type of setting, you have other settings as the description below.
  • (3): event title.
  • (4): event description.
  • (5): event time. You have to enter correct format of the date time: yyyy-mm-dd h:i:s
    Image option

    countdown

    This option will show an image as background in section.

  • (1): background image. You can paste image URL here or upload it by clicking the green button.
    Video option

    countdown

    This option will play a video as background in section.

  • (1): background video. You can paste video URL on youtube here.

Artists

artists

This section displays all artists in a vertical slider in the frontend. The options for this section is very simple:

  • (1): enable/disable the section. If you don’t like the latest tracks section at all, you can disable it here.
  • (2): section title.
  • (3): title suffix. This is a small letter after the section title. It’s used for a better eye-catching effect.
  • (4): subtitle.
  • (5): choose which artists will be displayed.

Please see the screenshot in Latest Tracks section to know where these texts (2), (3), (4) are displayed.

Blog Parallax

blog_parallax

This section displays information to introduce your blog. It has options following:

  • (1): enable/disable the section. If you don’t like the latest tracks section at all, you can disable it here.
  • (2): background image. You can paste image URL here or upload it by clicking the green button.
  • (3): blog’s description.
  • (4): URL to your blog.
  • (5): text displays for the link to your blog.

Latest News

latest_news

This section displays three latest posts with image and excerpt. The options for this section is very simple:

  • (1): enable/disable the section. If you don’t like the latest tracks section at all, you can disable it here.
  • (2): section title.
  • (3): title suffix. This is a small letter after the section title. It’s used for a better eye-catching effect.
  • (4): subtitle.
  • (5): change “Read more” text on a post that to show all post’s description.

Shop Section

Shop_section

This section displays information to introduce your shop page in the frontend. It has the following options:

  • (1): enable/disable the section. If you don’t like this section to be shown, you can disable it here.
  • (2): background image. You can paste image URL here or upload it by clicking the green button.
  • (3): title. This is the text header.
  • (4): description. This is the text content.
  • (5): shop URL. Link to shop page.
  • (6): the content of button.

Products

Product_section

This section allows you to display products of your website in a vertical slider. In the frontend you can scroll vertically to see all products. The configuration of this section is very simple:

  • (1): enable/disable the section. If you don’t like the products section at all, you can disable it here.
  • (2): section title and title suffix. This is a small letter after the section title. It’s used for a better eye-catching effect.
  • (4): you can choose kind of products to show.
  • (5): number of products you want to display on website.

Woocommerce Setting: WooCommerce plugin almost works after activated, you just have to edit settings about image size to make sure products are displayed correctly with Noise.

Here we will show you where to edit these settings.
woocommerce_setting

You can import products sample of WooCommerce. To assist you, follow these steps here

Connect

connect

This section displays a Google Maps and links to your social profiles in the frontend. It has the following options:

  • (1): enable/disable the section. If you don’t like to display this section at all, you can disable it here.
  • (2): contact section title.
  • (3): contact information. You can put address, phone, fax, … in this textarea box. Put each info in one line to display them beautifully.
  • (4): contact email.
  • (5): address. Used for Google Maps.
  • (6): zoom level for Google Maps.
  • (7): list of links to your social profiles

Custom Content

custom

This section displays custom content in your onepage page. Custom content can be HTML and you can also use shortcodes here. This is useful if you want to show “About” text on your homepage.

It has the following options:

  • (1): enable/disable the section. If you don’t like the latest tracks section at all, you can disable it here.
  • (2): section title.
  • (3): title suffix. This is a small letter after the section title. It’s used for a better eye-catching effect.
  • (4): subtitle.
  • (5): custom content. You can enter any shortcodes here.

Blog

blog

This part will show you all options for your blog. Although Noise is a “one-page” theme, you still can create multi-page for your website. The blog is one of the “multi-page” features.

This section has following options:

  • (1): blog layout. Noise supports 2 layout: left sidebar and right sidebar
  • (2): enable/disable blog header. Blog header here is similar to the Top Slider, it will have same background, but only 1 caption text. By choosing enable, you’ll show the blog header in Blog page, disable – hide blog header.
  • (3): blog header caption.
  • (4): except length for blog posts.
  • (5): show/hide read more text.
  • (6): the read more text
  • (7): pagination style. Noise supports 3 pagination style: Ajax load (click on the button in the bottom of Blog page will load more posts via ajax), Next/Prev (go to next/prev pages), Numeric Buttons (display pages 1, 2, 3, …)

Footer

footer

This is the configuration part for the footer. It has only 3 options:

(1): footer logo. You can paste URL of the logo image in the text box, or click the green button to upload/select an image from the Media Library.

(2): copyright text. You can enter text, HTML and shortcodes here. To make you easier to display copyright text, Noise has default shortcodes that you can enter here:

  • [year]: display current year
  • [site_link]: display link to your website with text is the website title. For example, if you have a website at http://example.com and title Example, this will display a link like this:
<a href="http://example.com">Example</a>
  • [bloginfo]: display blog information. This is the wrapper of bloginfo() function. Default it will display blog name (e.g. website title), but you can use it with parameter name to display more information, for example:
    • [bloginfo name="name"]: display blog name (default)
    • [bloginfo name="description"]: display blog description (tagline)
    • [bloginfo name="version"]: display WordPress version
    • [bloginfo name="rss2_url"]: display RSS2 feed link
    • [bloginfo name="home"]: display home link
    • For more value of name, please see bloginfo() function

The default value for copyright text is Copyright ©[year] [site_link]. All rights reserved..

(3): footer scripts. Enter scripts or code you would like output before &lt;/body&gt;. It can be Google Analytics code or any Javascript code.

Backup – Restore

Noise allows you to backup Noise options and restores them later. You can also transfer the saved options data between different installs.

To backup theme options, just copy the text inside the text box and save it into a file on your computer. To import data, replace the data in the text box with the one from the saved file and click Import Options button.

After clicking Import Options, Noise will automatically setup all options and refresh the current theme options page, so you can see the options immediately.

Add/Edit Album

Noise has some custom post types, one of them is “Album”. When you add or edit an album, you need to fill in some required information to make it display correctly.

Look at the 2 meta boxes generated:

  • Album Information: album main information
  • Featured Image: album featured image

album

Let’s go through each items:

  • (1): album released date. When click on that field, you’ll see a popup that show date picker, just pick one date.
  • (2): composer name.
  • (3): album genre.
  • (4): iTunes link of the album, in case you want to sell it on iTunes. Leave empty if you don’t want people to go to iTunes and buy it.
  • (5): Amazon link of the album, in case you want to sell it on Amazon. Leave empty if you don’t want people to go to Amazon and buy it.
  • (6): Spotify link of the album, in case you want to sell it on Spotify. Leave empty if you don’t want people to go to Spotify and buy it.
  • (7): album review. Maybe a short review of the album, how is it, etc.
  • (8): album featured image (cover image). Simply select featured image for the album as a normal post. This image will be used to display as album thumbnail.

Add/Edit Artist

Another post type that Noise has is “Artist”. When you add or edit an artist, you need to fill in some required information to make it display correctly.Look at the 2 meta boxes generated:

  • Artist Information: artist main information
  • Featured Image: artist featured image

artist

Let’s go through each items:

  • (1): artist’s full name.
  • (2): artist’s nickname.
  • (3): date of birth. Just click on the text box, a date picker will be shown and you just need to select a date.
  • (4): place of birth
  • (5): occupation, like: singler, musician, etc.
  • (6): what’s the artist best known for? You should put a paragraph here that highlights artist’s career.
  • (7): synopsis. A paragraph for short introduction to artist.
  • (8)-(12): link to artist’s social profiles.
  • (13): artist’s images (gallery). You just need to click the button Select or Upload Images, a modal window will display. There you can upload artist’s images or choose images from the Media Library. When uploaded, you can drag images to reorder them. These images will be display in a lightbox window in the frontend.
  • (14): artist’s featured image. Simply select featured image for the artist as a normal post. This image will be used to display as a thumbnail in the frontend.

Add/Edit Track

“Track” is the main post type in Noise. When you add or edit a track, you will need to fill in some required information to make it display correctly. Look at the 2 meta boxes generated for an idea of the layout:

  • Track Information: track main information
  • Featured Image: track featured image

track

Let’s go through each of the items:

  • (1): track description.
  • (2): track album. You only need to select album from the dropdown list. Note that you have to create albums first.
  • (3): artist. Same here, you just need to select artist from the dropdown. Note that you have to create artists first.
  • (4): composer.
  • (5): track release date. Simply click on the text box, a date picker will be shown. You just need to select a date.
  • (6): track genre.
  • (7): track length.
  • (8): track upload. This is the hotlink (direct link) to the track. You can enter the URL of the track here or click on the button to upload the track to the Media Library. Note: you must provide a direct link to the track for the player to play it in the frontend.
  • (9): SoundCloud URL of the track. If you upload the track to SoundCloud, you can enter its URL here so people can play the song on SoundCloud through your website using the SoundCloud player.
  • (10): track lyrics.
  • (11): track images (gallery). You just need to click the button Select or Upload Images, a modal window will display. There you can upload track images or choose images from the Media Library. When uploaded, you can drag images to reorder them. These images will be displayed in a lightbox window in the frontend.
  • (12): track videos. If the track has videos (like live show videos, etc.), you can put video URLs here. Videos can be Youtube videos, Vimeo videos or self-hosted videos. For self-hosted videos, please click the “Upload” button to upload videos to Media Library. You can also add as many videos as you want by clicking the “+” button.
  • (13): track cover image (optional). This image will be used in the extended player. If you don’t set any image here, the first image in the gallery will be used.
  • (14): track featured image. Simply select featured image for the track as a normal post. This image will be used to display as a thumbnail in the frontend.

Add/Edit Gallery

Noise allows you to show your photo gallery or video gallery. When you add or edit a gallery, you’ll see the following options:

gallery

  • (1): gallery type: ‘Photos’ or ‘Videos’. If you choose ‘Photos’, then you have to uploads images, otherwise, you have to upload videos.
  • (2): gallery images. Click the button Select or Upload Images, a modal window will display. There you can upload images or choose images from the Media Library. Note: you only to do this if you choose gallery type ‘Photos’.
  • (3): gallery videos. If you choose gallery type ‘Video’, you can put video URLs here. Videos can be Youtube videos, Vimeo videos or self-hosted videos. For self-hosted videos, please click the “Upload” button to upload videos to Media Library. You can also add as many videos as you want by simply clicking the “+” button.
  • (4): gallery featured image. Simply select featured image for the gallery as a normal post. This image will be used to display as a thumbnail in the frontend.

Add/Edit Event

Noise allows artists/singles to put their events on the website so fans can see and buy tickets. When you add or edit an event, please fill in the information below:

event

  • (1): event date/time. Simply click on the text box, a date/time picker will popup and you just need to select correct date and time.
  • (2): event information (description).
  • (3): place of the event.
  • (4): event status. This can be “Cancel”, “Sold Out”, “Buy” and often used for tickets.
  • (5): buy link. If you choose event status “Buy”, please enter the link to buy page here.
  • (6): event images. Click the button Select or Upload Images, a modal window will display. There you can upload images or choose images from the Media Library.
  • (7): event videos. You can put video URLs here. Videos can be Youtube videos, Vimeo videos or self-hosted videos. For self-hosted videos, please click the “Upload” button to upload videos to Media Library. You can also add as many videos as you want by simply clicking the “+” button.

Post Formats

Post Formats is theme feature which is a piece of meta information that can be used by a theme to customize its presentation of a post.

In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list.

Noise theme supports the following post formats:

  • gallery – A gallery of images, which will be displayed in a responsive image slider, powered by Flexslider.
  • link – A link to another site.
  • image – A single image, which will be shown above post title.
  • quote – A quotation.
  • video – A single video, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed above post title.
  • audio – An audio file, which can be any video from Youtube, Video or other video websites. The video will be displayed using a powerful HTML5 audio player – MediaElements.

Each post format will have an icon near the post title which will tell you what post format is. Using the post format in Noise lets you differentiate posts from each other and make the blog page / single page look more beautiful.

See blog page to see how post formats can look.

Setting up Post Formats

When you edit a post, select a format you want to apply to that post in the Format meta box on the right:

formats

When you choose a format, a corresponding meta box will appear below the content editor, here is the list of them:

formats

All you need to do is just enter all required information in the fields in these meta boxes. This information will be used to decorate the post.

Page Templates

Noise has 4 page templates:

  • Onepage: displays one-page layout (same as demo)
  • Blog: displays blog posts.
  • Under Construction: display under construction page.
  • Full Width Page: build pages with full width.

When you edit a page, look at on the right, find Page Attributes meta box and select a template from the dropdown Template:

page-templates

View the page to see the result!

Note: if you want to make the under construction page work (e.g. your site is under construction mode), after creating a page with the page template Under Construction, please go to General tab in theme option and enable the Under Construction Mode.

For the Under Construction page template, you’ll see this box below the main editor:

underconstruction

This page template requires the following information:

  • (1): page heading, this will show a big notice to users.
  • (2): description, text to describe the construction mode.
  • (3): end date, i.e. when the website is done.
  • (4): background image. This allows you to upload or select any image in Media Library as background for construction page.

For Full Width Template page template, you can combine with WR PageBuilder to create many kinds of different pages.

Here we will show you how to use WP PageBuilder to build a page.

Open page builder

open wr pagebuilder

When you add or edit pages, you will see 2 tabs Classic Editor and Page Builder right below page title, click on Page Builder to open the page builder screen and add start adding your content.

Note: Before adding elements to the page, you should know that WR PageBuilder organizes content in a grid using rows and columns. Each row can contain some columns and each column can contain some elements.

Now let’s see how to add rows, columns, and elements to page content.

* Add Row *

WR pagebuilder add row

(1): Click the Add Row button to add a new row.

(2): You can drag and drop a row in the vertical direction to change its order.

(3): You can delete a row by clicking the recycle icon on the right side of the row. If that row contains elements, an alert box will appear and ask you to confirm that you want to delete that row and all elements inside it.

(4): Edit row. When you click the Edit Row icon (above delete row icon), a modal box will appear with options to edit row, let’s see what it is:

wr pagebuilder edit row

  • Width: select the width of row, boxed or full width. By default it is boxed.
  • Background: select background type of row: none, solid color, gradient, pattern or image, then set it up.
  • Border: specify row border. It contains a border with, border type and border color.
  • Padding: edit padding of row in px. By default all values are set to 10px
  • CSS Class: add css class to row. It is useful when you want to add special styles to a row by using Custom CSS feature in Theme Options.
  • ID: Set css id to row. The same purpose as CSS Class, you can add style to a row by adding an ID to it.

* Add Columns *

ig pagebuilder add columns

There is 2 way to add columns into a row: add them manually or with the user pre-defined layout.

(1): add columns manually by clicking the Add Column button on the right side of the row. You can add maximum 12 columns.

(2): you can resize a column by clicking the 3 dots icon between columns and dragging it to left or right side.

(3): add a column by using the pre-defined layout. When you hover your mouse over the Add Row button, a list of pre-defined layouts will appear, just click on a layout and you have a new row with columns inside.

* Add Elements *

ig pagebuilder add elements

Inside each row, you will see Add Element buttons at the bottom, just click on it and a modal box will appear,which contains all available elements that are supported by IG Pagebuilder plugin.

ig pagebuilder elements

Select the element you want to add by clicking on it, a new modal box will appear. It allows you to setup the element with many options. After you are done, click the Save button to add the configured element into the column.

Note: To know in detail how to setup/configure each element, please use the online documentation here.

Widgets

Noise works very well with default WordPress widgets. Besides which the theme has some additional widgets that might be useful for you:

Noise – Featured Tracks

This widget allows you to display featured tracks in your sidebar. Featured tracks can be latest tracks or highest rated tracks.

This widget has the following options:

  • Title: widget title
  • Number Of Tracks: how many tracks do you want to display
  • Show Order Number: this option shows order number before track icon (ie 1, 2, 3, …)
  • Show Thumbnail: whether or not display track thumbnails
  • Show Track Artist: do you want to show artist name.
  • Show Rating: show how many votes tracks have
  • Order By: order tracks (descending) by date (ie show latest tracks) or rating (show highest rated tracks)

Noise – Tweets

Before you use the Tweets widget, you have to fill in all information for your Twitter app in Theme Options \ Section Latest Tweets.

After that, go to Appearance > Widgets, drag and drop Noise – Tweets widget into a sidebar that you want it to show in. The widget has the following options:

  • Title: widget title
  • Number of Tweets: how many tweets you want to display

After filling all information, just click Save.

Noise – Recent Posts

This widget replaces default WordPress recent posts widget. It displays recent posts in the much more beautiful way and gives you more control over to what will be shown.

The widget has the following options:

  • Title: widget title
  • Number Of Posts: how many posts do you want to display
  • Category: you can choose to display posts from all categories, or a specific category or multiple categories
  • Show Comment Number: whether or not show comment number
  • Show Thumbnail: whether or not show thumbnail
  • Default Thumbnail: if the post doesn’t have a thumbnail, this default thumbnail will be used
  • Show Date: whether or not to show post date
  • Date Format: date format. See this link for a full list of supported date formats
  • Show Excerpt: whether or not to show post excerpt
  • Excerpt Length: the number of words of the post content to be displayed
  • Show Readmore Text: whether or not to show read more text
  • Readmore Text: Read more text

Noise – Tabs

This widget displays popular posts, recent posts and recent comments in a tabbed widget. Each tab has its own options. For popular posts and recent posts, the options are similar to the Recent Posts widget above.

Note that popular posts are counted based on a number of comments.

Custom image sizes

  • (1):Track Thumbnail (70×70): This type is used in section : Popular track

custom img

  • (2):Track Preview (530×250)
  • (3):Album Thumbnail (1150×430): this type used in the section: Latest releases

custom img

  • (4):Album Preview (525×200): this type is used in the section: Latest releases. When showing an album’s information

custom img

  • (5):Player Expanded (240×280): this type used when showing the player expanded

custom img

  • (6):Artist Thumbnail (350×450): this type used in the section : Artists

custom img

  • (7):Blog Thumbnail (690×330): this type is used in the blog page

custom img

  • (8):Widget Thumb (60×60): this type is used in the widgets from noise for Noise-Artists, Noise-Recent Posts.

Couponia

Welcome! First of all, we want to thank you for purchasing our Couponia WordPress Theme.

In the following sections, we will explain how to set up and use Couponia theme the easiest way possible. Although there’re a lot of things written in this documentation, the theme itself is not hard to use. You can go to the Theme Options page and explore everything yourself. This file is more of a reference if you do not know what to do, or if you are not familiar with WordPress.

Files Included

The download package (.zip) that you get from ThemeForest contains the following files and folder:

  • couponia.zip: main theme file that needs to be uploaded to host to install Couponia theme
  • demo-content.xml: demo content file, which contains all pages and posts from live preview website. It will help you to have a first look at how we use Couponia theme
  • theme-options.txt: theme option backup file. You’ll need this to restore the default theme options that setup for demo website.
  • Documentation: this folder the offline version of the theme’s documentation
  • docs.html: the online version of this documentation

Get Started

Couponia is the best solution for selling coupons or any kind of goods. It can be used as coupon website (such as groupon.com) and also as an online store. Modern, simple and unique design. It will amaze your clients and users. A huge amount of demo homepages, and lost of features will help you to make your website really unique. It also can support different layouts (boxed and wide) with background images and patterns. Many header layouts, 15+ product thumbnail layouts, quick view support, different sliders, 18 color schemes and more. Just pick it up and make it yours. Everything builds under latest bootstrap 3 framework.

What is deal product

This is an important definition for this theme. The couponia is an e-commerce WordPress theme that requires the Woocommerce plugin has to be installed to works. So in fact, a deal product is a Woocommerce product, but it is On Sale and scheduled to the end date. You can see the bellow image to understand what make a deal product:

deal product settings

Installation

Install Theme

We have written a very detailed guide on how to download and install a WordPress theme from ThemeForest, please follow the instruction in that article.

 

Config plugins

After plugins are installed. You need change some options to make it work perfectly with the theme. They are image sizes of products.

  • Go to Woocommerce > Settings > Products > Display, under the Product Images section, you will found Catalog Images, Single Product Images, and Product Thumbnails.
  • Catalog Image is for your images on the shop page and homepage. Single Product Image is for your images on the single product pages. Product Thumbnail is for your smaller product thumbnails for widgets.
  • Change the size of Catalog Image to 360 x 270, Single Product Image to 800 x 600, Product Thumbnail to 180 x 180.

WC Settings

Install demo content

If you are new to WordPress and have problems with setting up the theme you might want to import the demo content file that comes with the theme. The following actions will import some dummy posts and pages from the live preview:

  • Go to Tools > Import
  • Select WordPress from the list
  • If you haven’t installed the WordPress import plugin, a popup window will appears and ask you to install it. Just click Install Now. When the installation progress is completed, click Activate Plugin & Run Importer. If you have installed this plugin, skip to next step.
  • Click Browse and select demo-content.xml file from the download package
  • Click Upload file and import
  • When you are asked to import author, you can create new author or import to existing author. You also should check the checkbox Download and import file attachments.

import

After completing all above steps, go to Posts, Pages, Products to see imported data.

Important: Due to license of images, we have to remove images in distributed demo content and replace them with placeholers. All images get from placehold.it, if you have any download errors when import demo-content.xml, problem can be speed of internet connection. Don’t worry about that, you can replace with your own images.

Setup homepage and blog page

After install demo content, you’ll see a page Homepage. This page will be used as the homepage of the website. To set it as homepage, please go to Settings \ Reading, under Front page displays, please chose A static page (select below) and select Front Page for Front page and Full Width page for Posts page.

homepage

Setup Menu

Although the theme is working now and it shows menu, but because we haven’t created a menu for primary location, the theme will display all pages by default. As the number of pages is large, displaying all of them in the menu is a bad idea.

Create or edit a menu

Following these steps to create a menu:

  • Go to Appearance > Menus
  • Select an existing to edit, or click create a new menu. **Note:**Select one of menu from menu list if you want to have same menu as in live preview.
  • Select pages from the left meta box and click Add to Menu
  • On the right, feel free to drag and drop menu items to organize them
  • When you’re done moving menu items, check Primary Menu for Theme locations at the bottom of the page
  • Click Save Menu

menu

Setup widget areas

Couponia theme has 10 widget areas (sidebars) by default:

  • Blog Sidebar: main website sidebar which will be displayed on all blog posts, archive pages, etc.
  • Page Sidebar: will be displayed on all WordPress pages.
  • Shop Sidebar: will be displayed on all WooCommerce pages: Products, Product category, Single Product, etc.
  • Deals Sidebar: will be displayed on pages which use Deals template.
  • Home Sidebar: will be displayed on Homepage template
  • Header Sidebar: will display on right/left side of header when you select header’s layout is Layout 2 and logo position is not center in the Theme Options panel.
  • Footer Sidebars: there are 4 default sidebars for footer, each sidebar is a column in the footer. You can change number of columns in footer in Theme Options page (in that case number of footer sidebars will increased or decreased accordingly).

To setup a sidebar, select it from the right by clicking its title or the arrow down. Then drag and drop widgets from the left to the sidebar area.

sidebar

That’s all! Now you have the website up with all basic elements!

Theme Options

theme options

The Couponia theme comes with unique, creative and easy-to-use Theme Options page. You can change all theme options in one place!

With Couponia’s advanced theme options panel, you can customize just about any part of your site quickly and easily. Every element on the site can have the color changed to your liking. Choose a color scheme for website, select fonts for all headings and body copy, change sizes, colors and line-heights of all fonts, select different footer column layouts, enable or disable several options, upload your own custom favicon, select from various site/page layouts, input custom CSS, set hundreds of other options to easily customize your site!

All options have full description so you can know what you are doing. Just click and save!

Let’s go through each section.

General

general

This sections contains:

  • (4): show advanced search form right bellow the menu.
  • (5): change the background color of advanced search form.
  • (6): show breadcrumb after the menu. If advanced search is enabled, breadcrumb will display bellow it.
  • (7): backup – restore, allows you to backup Couponia options and restore them later, or transfer the saved options between different installs.

Here are the explanations of some options that can help you understand and use them better:

Backup – Restore

Couponia allows you to backup theme options and restores them later. You can also transfer the saved options data between different installs.

To backup theme options, just copy the text inside the text box and save it into a file on your computer. To import data, replace the data in the text box with the one from the saved file and click Import Options button.

After clicking Import Options, Couponia will automatically setup all options and refresh the current theme options page, so you can see the options immediately.

Design

This sections contains:

  • Color Scheme: allows you to change color scheme of whole website
  • Background: setup background for whole site
  • Layout: allows you to change layout style and layout for whole website, blog posts, pages, shop…
  • Typography: allows you to change font family, styles, size, line height, color for body text and headings
  • Custom CSS: allows you to add your custom CSS

Color Scheme

Couponia theme has 17 predefined color schemes to choose. When you change color scheme of the theme, all links, button background and other elements will change their color or background accordingly.

The default color scheme is green, but you can select any from 17 colors here. After selecting, click Save Changes button to save your data. Now go to the frontend and check the colors of links, buttons, etc.

When you select Color Scheme section, you’ll see the following options:

color schemes

  • (1): select built-in color scheme. These are 17 predefined color schemes. When you select one of them, your website elements will change color accordingly.
  • (2): enable/disable custom color scheme. This option allow you create custom color scheme, and you can build unlimited color schemes here! Just enable this and you’ll see options below.
  • (3): primary color. This is primary color for your custom color scheme.

Background

This section contains options which help you to setup background for your website.

Background only displays when you select layout style as `box`. We will talk about layouts in next section.

background

  • (1): select background pattern image. It is pre-provided image which is repeatable.
  • (2): select background color.
  • (3): upload your own background image.
  • (4): select custom background’s horizontal position.
  • (5): select custom background’s vertical position.
  • (6): select custom background’s repeat property.
  • (7): select custom background’s attachment property.

Layout

This section helps you to select which layout will be use in whole website.

layout

  • (1): select layout style. You can choose either boxed or wide style. Couponia theme allows you to change layout style of whole website to boxed or wide (full width). When you change layout style, it doesn’t affect style of your content, sidebar, header or footer. All these elements still keep their looks and feel.
  • (2): select layout for blog, single posts and other archive pages. You can select sidebar position here: left, right or none (don’t display sidebar)
  • (3): select layout for WooCommerce pages. Same meaning as for blog above but only applied for WooCommerce pages: shop page, single products, product tag archive, product category archive.
  • (4): select layout for Deals template pages. Same meaning as for shop above but only applied for pages which use page template Deals.
  • (5): select layout for pages. Same meaning as for blog above but only applied for normal pages.
These options is site-wide, meaning for whole website. But you still can set **custom layout for single post and page when edit** (We’ll explore it later).

By default: Couponia uses wide layout style with the left sidebar for both blog and pages.

Typography

typography

This section helps you to customize fonts for body text and headings on your website. For each element, you can customize:

(1): font family. Just select from the drop-down font family you like. Couponia supports 3 normal fonts (Arial, Verdana and Times).

(2): font size. Adjust font size for better look here. Just remember the unit for font size is px.

(3): line height. Adjust line height for better look here. The unit for line height is also px.

For better readability, good value for line height is about 1.4-1.5 x font size.

(4): font styles. You can choose bold, italic, underline or any combination of them.

(5): font color. Click on the button, a color picker will appear and you can now select any color.

Important: before customizing fonts, remember the default values for fonts. You should customize fonts around these values.

Element Font Family Font Size Line Height Styles Color
Body Text Open Sans 14px 20px None 666666
Heading 1 Lato 36px 40px None 4d4d4d
Heading 2 Lato 30px 33px None 4d4d4d
Heading 3 Lato 24px 26px None 4d4d4d
Heading 4 Lato 18px 19px None 4d4d4d

Custom CSS

custom css

This section allows to enter custom CSS that will be output in the </head>. This will overwrite CSS of theme, so please be careful!

Custom CSS is useful when you want to adjust small things for your website. If you have to adjust a lot of things in website, please use Child Themes.

header

This sections contains:

  • (1): logo upload, allows you to upload logo for you website. You can either put the URL of the logo into the input box or upload the logo to Media Library. The live preview of the logo will appear below the inputs.
  • (2): logo size. Specify logo size in px here. It will help you resize the logo to correct dimensions. By default, the good size is 201×39.
  • (3): logo margin. Specify logo margin in px here. This is useful when you upload logo with different size than recommended. You can move logo a little, adjust space to make it look good.
    You should **resize the logo to correct size** in Photoshop or any image editor before upload. It will keep your logo not resized and small size.
  • (4): sticky header. This option allow you to make the header sticky, i.e. always stays on the top of the website when scrolling.
  • (5): select header’s layout. You can choose either Layout 1 or Layout 2.Header layout 1
    Header Layout 1

    Header layout 1

    Header Layout 2
  • (6): Logo position. Select position of the logo
  • (7): Menu color. Select background color for the menu. You can choose either Dark, Light or Primary Color.
  • (8): Menu extra. Select what do you want to display on the right side of the menu. You can select nothing to reject it or choose either Search Form or Cart and User Links.
If you want to put custom CSS here, you’re doing **wrong**. There’s a section for **Custom CSS** under **Design**, use it instead.

Blog

This section contains options which help you to change something about displaying posts archive pages (blog, category, tag, date)

blog

  • (1): what type of post content will be displayed. Available options are Post excerpt, Post content or Post content before more tag.To understand what those values mean, take a look at the screenshot bellow:postWhere:
    • (A): Whole post content, this is what you enter in the editor.
    • (B): Post excerpt, which is optional hand-crafted summaries of your content. Learn more about manual excerpt.. If you don’t enter anything in the excerpt box, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
    • (C): The post content before more tag
    • (D): The more tag

    Return to blog option: if you choose

    • Post excerpt: Couponia will get post excerpt and display it. Remember: if you don’t enter excerpts for post, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
    • Post content: Couponia will get whole post content and display it. This is the default value.
    • Post content before more tag: Couponia will get only the post content before more tag and display it.
  • (2): post content limit. Sometimes you enter a very long text for post excerpt or post content, display such long text in blog and archive pages is not good and harm your website beauty. So we need a way to truncate text to make it shorter. This option is created for that purpose.Simply specify number of words will be display here. Post content or excerpt will be truncated to exact number of words. You should try changing this value and preview your blog to see what is best for you.Default value is 55 words.
    **Important**: this option affects only when you **NOT** choose `Post Content` from the Display option above
  • (3): read more text. Default value is Continue reading.

Shop

This section gives you options to customize shop page.

shop

  • (1): Default product image. This image will be used when product has no image to display as thumbnail.
  • (2): Product hover. Select what will be displayed when you hover mouse over a product on the shop page. You can choose either Select (disable), Show Quick View Button or Show Secondary Image.
  • (3): Default Products View. Select the default view for products
  • (4): Number of products. Set default number of products to display in the shop page.
  • (5): Single deal images display. Select how to show images (gallery) of a deal product. You can choose either Slider or Gallery.
  • (6): Show featured badge. Display a badge for featured products.
  • (7): Show new badge. Display a badge for new products.
  • (8): Badge display duration. The number of days a product will be set as new product, since the published date.

This section gives you options to customize footer area on your website.

footer-frontend

  • (1): number of columns in footer. It also is the number of footer sidebars (widget areas). Default is 4.
  • (2): copyright text. You can enter text, HTML and shortcodes here. To make you easier to display copyright text, Couponia has default shortcodes that you can enter here:
    • [year]: display current year
    • [site_link]: display link to your website with text is the website title. For example, if you have a website at http://example.com and title Example, this will display a link like this:
    <a href="http://example.com">Example</a>
    • [bloginfo]: display blog information. This is the wrapper of bloginfo() function. Default it will display blog name (e.g. website title), but you can use it with parameter name to display more information, for example:
    • [bloginfo name="name"]: display blog name (default)
    • [bloginfo name="description"]: display blog description (tagline)
    • [bloginfo name="version"]: display WordPress version
    • [bloginfo name="rss2_url"]: display RSS2 feed link
    • [bloginfo name="home"]: display home link
    • For more value of name, please see bloginfo() function
  • (3): Footer right info. This information will be displayed on the right side of Footer Copyright Text. You can enter text, HTML and shortcodes here.

Post/Page Display Settings

We’ve seen how to change featured title area, layout style, sidebar layout for whole website. Couponia also supports customizing these things for specific posts and pages.

When you edit a page or a post, you’ll see this meta box below the content editor:

display settings

  • (1): hide the page title. Select this box if you want to hide the title of this page.
  • (2): whether to use custom page layout. If you check this box, you’re able to set custom layout style and sidebar layout below. If you don’t, page will use default layout set in Theme Options.
  • (3): custom layout style for this page. You can select Box or Wide layout for this page and it will override the default option in Theme Options.
  • (4): custom sidebar layout. Choose custom sidebar layout for page. If you don’t choose anything, Couponia will use default sidebar layout set in Theme Options.

Post Formats

Post Formats is theme feature which is a piece of meta information that can be used by a theme to customize its presentation of a post.

In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list.

Couponia theme supports the following post formats:

  • gallery – A gallery of images, which will be displayed in a responsive image slider, powered by Flexslider.
  • link – A link to another site.
  • image – A single image, which will be shown above post title.
  • quote – A quotation.
  • video – A single video, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed above post title.
  • audio – An audio file, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed using a powerful HTML5 audio player – jPlayer.

Each post format will have an icon near post title which tells you what post format is. Using post format in Couponia lets you differentiate post from each other and make the blog page / single page looks more beautiful.

Setup Post Formats

When you edit a post, select a format you want to apply to that post on the Format meta box on the right:

formats

When you choose a format, a corresponding meta box will appear below the content editor, here’s the list of them:

formats

All you need to do is just enter all information in the fields in these meta boxes. This information will be used to decorate the post. For example: gallery post format will uses uploaded images to show a slider above post title, a video post will display a video player above post title, etc.

Page Templates

Couponia has some built-in page templates that can help you create special pages easier:

  • Deals: template to display deal products.
  • Homepage: template to display sections with normal products and deal products are inside.

When you edit a page, look at on the right, find Page Attributes meta box and select a template from the drop-down Template:

page-templates

Width Deals template, there’s no configurations at all. After select page template from the meta box on the right, you just need to save the page and see it in action in the frontend.

Width Homepage template, after select it, you will see sections and the default editor will be hidden. Each section will has it own options to config how to display on the frontend. They are described very detail, just following it you can create your own homepage.

homepage-sections

Widgets

Couponia plays nicely with default WordPress widgets. Besides that the theme has some additional widgets that might be useful for you:

[Couponia] Cart & Account

This widget have no option. It was built to display shopping cart and sign up/sign in link to the header sidebar, as you can see on the live demo.

[FitWP] Flickr

This widget displays list of photos which is get from a user or group on Flickr.

This widget has the following options:

  • Title: widget title
  • Flickr ID: this is ID (not username) of user or group on Flickr. You can go to http://idgettr.com to get the ID.
  • Type: select type of above ID is User or Group
  • Number of photos: how many photos you want to display
  • Display: which photos you want to display, latest or random photos.
  • Size: select size of photos

[FitWP] Latest Tweets

Before you use this widget, you have to create a Twitter app. Following these steps:

twitter app

  • Fill in all information needed for the app. The name and description can be anything, it does not have to be a certain name. You can leave the Callback URL field empty.
  • After creating the app, go to API Keys tab then click Create My Access Token button at the bottom to generate the necessary codes. It usually take 10 – 15 seconds to generate these codes, you have to reload that page to see your code in Your Access Token section.

twitter app

  • Now you can copy the following fields for setting up Latest Tweets widget:
    • API key -> Consumer Key
    • API secret -> Consumer Secret
    • Access token -> Access token
    • Access token secret -> Access token secret

These fields will be used in the tweets widget.

Now go to your website admin area, then Appearance > Widgets, drag and drop [FitWP] Latest Tweets widget into a sidebar that you want it to show there. You’ll see these fields this:

tweets

(1): You also need to enter Cache time, which is the time your tweets will be temporarily stored in WordPress cache,

(2): Twitter username which you want to get from

(3): Number of tweets you want to get

After filling all information, just click Save.

[FitWP] Recent Posts

This widget replaces default WordPress recent posts widget. It displays recent posts in much more beautiful way and gives you more control to what will be shown.

The widget has the following options:

  • Title: widget title
  • Number Of Posts: how many posts you want to displayed
  • Category: you can choose to display posts from all categories, or a specific category or multiple categories
  • Show Comment Number: whether or not show comment number
  • Show Thumbnail: whether or not show thumbnail
  • Default Thumbnail: if post doesn’t have thumbnail, this default thumbnail will be used
  • Show Date: whether or not show post date
  • Date Format: date format. See this link for a full list of supported date formats
  • Show Excerpt: whether or not show post excerpt
  • Excerpt Length: the number of words of post content will be displayed
  • Show Readmore Text: whether or not show read more text
  • Readmore Text: Read more text

[FitWP] Tabs

This widget displays popular posts, recent posts and recent comments in a tabbed widget. Each tab has its own options. For popular posts and recent posts, the options are similar to the Recent Posts widget above.

Note that popular posts is counted based on number of comments.

This widget shows links (with icons) to your social network profiles. All you need to do is just enter URL to your social network profiles and optionally title for each link.

Shortcodes

The Couponia theme is bundled with powerful shortcodes that you can customize your page content in thousand ways!

With Couponia Shortcode Generator, there is a shortcode for anything you need, and they allow you to create so many different page layouts. Users can quickly and easily built their own custom pages using all the various shortcodes that Couponia includes. Just about any element you see on our demo is a shortcode that you can insert on any page. Several shortcodes have numerous options for customization. There are endless options to choose from! Easily create your own pages by using our shortcodes, tons of possibilities and we add more all the time!

Good samples of shortcodes are home pages and other pages in the live preview demo. They’re all created with shortcodes! No need to remember shortcode attributes, all is done via a friendly interface.

When you edit a post or a page, click on Shortcodes button above the content editor to show the shortcodes menu.

shortcode menu

Select a shortcode from the menu, a popup will appear that lets you add more settings for shortcodes.

Each popup will have 3 parts:

  • Shortcode configuration on the left: which lets you edit shortcode attributes
  • Shortcode preview on the right: which show you preview of the shortcode
  • Insert button: insert shortcode to the editor when you’re done configuring it

Let’s go one by one:

Highlight

This shortcode highlights a word, sentence or any text in post content.

Attributes:

[highlight]Lorem ipsum dolor sit amet[/highlight]
[highlight background="pink"]Lorem ipsum dolor sit amet[/highlight]
[highlight custom_background="#c9c9c9"]Lorem ipsum dolor sit amet[/highlight]
  • background (optional): Background color for highlighted text. Couponia has built-in 24 colors for you to choose from (see the screenshot below). If you don’t choose background color, Couponia will use default color – yellow.
  • custom_background (optional): custom background color. If you don’t like any color from the predefined set, you can specify your custom background color here.

Popup:

highlight

(1): choose background color for highlighted text.

(2): custom background color.

(3): this is a preview of shortcode, which will show you all shortcode attributes.

(4): when you’re done, click Insert button to insert shortcode to the editor.

Superscript

Simply choose a text and select superscript, the text will be display like this. There’s no config for this.

Subscript

Simply choose a text and select subcript, the text will be display like this. There’s no config for this.

Drop cap

Simply choose a text and select Drop Cap, the text will begin with a first letter in very big size. There’s no config for this. You will see an option to select the color for that big letter.

Tooltip

This shortcode will display a link with the tooltip when hover mouse over it.

[tooltip link="#" position="top" text="Tooltip content here"]Anchor Text[/button]

Attributes:

  • position: select the position of the tooltip
  • Tooltip Text: enter the content of tooltip
  • Link: enter link of this text

Button

This shortcode displays a beautiful button on your page. See demo.

Attributes:

[button link="#" color="pink" background="pink"]Click me[/button]
[button link="#" color="pink" icon="fa fa-star" background="pink"]Click me[/button]
[button link="#" color="pink" icon="fa fa-star" icon_position="right" align="left" full="1" background="pink" target="_blank" nofollow="1" id="myid" class="myclass"]Click me[/button]
  • link (required): button URL
  • color (required): button color name. You can choose from 24 predefined colors (see popup below)
  • size (optional): button size, can be small, medium (default) or large
  • icon (optional): button icon. You can select from 140+ premium font icons from iconsweets2 (see popup below).
  • icon_position (optional): icon position, can be left (default) or right.
  • align (optional): you want to float the button to the left, right, center or none (default)?
  • full (optional): display the button full-width (block) (value 1) or not (empty). Default is empty.
  • background (optional): if you don’t like the 24 predefined button colors, you can choose custom background and custom text color. This option is for custom background color.
  • text_color (optional): custom text color for button.
  • target (optional): link target, can be empty (default) – open link in same window or _blank – open in new window.
  • nofollow (optional): link will be no followed (value 1) or not (empty). Default is empty.
  • id (optional): button ID, in case you want a custom HTML ID attribute for the button. It is useful when you need it for CSS or Javascript.
  • class (optional): button CSS, in case you want a custom HTML CSS attribute for the button. It is useful when you need it for CSS or Javascript.

Popup:

button

In the popup, there’re some advanced options hidden by default. You need to click the Advanced Button to show them all.

Box

Also called alert box, information box or styled box.

This shortcode displays an alert, success, error or information box with a close icon or not.

Attributes:

[box]Lorem ipsum dolor sitamet[/box]
[box type="success" close="1"]Lorem ipsum dolor sitamet[/box]
  • type (optional): box type, can be empty (or alert), success, error, info. Default is empty.
  • close (optional): display close icon (value 1) or not. Default is 1.

Popup:

box

Accordions

These shortcodes will display a panel of content which can be hide/show when you click on the panel title. Similar to toggles, the difference here is when a panel is opened, other panels are closed (in toggles, they still can be opened). See demo.

This is a combination of 2 shortcodes: [accordions] and [accordion]. [accordions] is a wrapper and doesn’t have any attributes, while [accordion] is a shortcode to display each panel and has the following attributes:

Attributes:

[accordions]
[accordion title="1st panel"]Lorem ipsum dolor sitamet[/accordion]
[accordion title="2nd panel"]Lorem ipsum dolor sitamet[/accordion]
[/accordions]
  • title: panel title.

Popup:

accordions

In the popup, do add more accordion panel, just click the button Add Accordion and fill in the title and content.

Tabs

These shortcodes will display tabs of content which can be switched when you click on the tab title. See demo.

This is a combination of 2 shortcodes: [tabs] and [tab]. [tabs] is a wrapper, while [tab] is a shortcode to display each tab content.

Attributes:

[tabs]
[tab title="1st tab" icon="serviceicon-user2"]Lorem ipsum dolor sitamet[/tab]
[tab title="2nd tab" icon="serviceicon-home"]Lorem ipsum dolor sitamet[/tab]
[/tabs]

[tabs type="vertical"]
[tab title="1st tab" icon="serviceicon-user2"]Lorem ipsum dolor sitamet[/tab]
[tab title="2nd tab" icon="serviceicon-home"]Lorem ipsum dolor sitamet[/tab]
[/tabs]

For [tabs]:

  • type (optional): tabs style, can be empty (or horizontal) or vertical. The default is empty.

For [tab]:

  • title: tab title.
  • icon (optional): tab icon. You don’t need to remember icon name, just select from the list of icons (see popup below).

Popup:

tabs

In the popup, do add more tab, just click the button Add Tab and fill in the title, content and select tab icon.

Progress Bar

This shortcode will display a progress bar with title and percentage. See demo.

Attributes:

[progress_bar text="Web Development" percent="80" type="block"]
  • type (optional): can be empty or block. If empty, the label will display above the progress bar, while block will display the label inside the progress bar.
  • text: text label
  • percent: the percentage without %

Popup:

progress bar

Promotion Box

This shortcode will display a promotion box that helps you to get people attraction and improve click through rate (CTR). It’s also called Call To Action box.

Attributes:

[promo_box heading="We'll tell you why you should buy Couponia!" text="We are constantly improving Couponia for our beloved users." button1_text="Purchase Now" button1_link="#" button1_color="red" button1_nofollow="1"]

[promo_box type="two-buttons" heading="We'll tell you why you should buy Couponia!" text="We are constantly improving Couponia for our beloved users." button1_text="Purchase Now" button1_link="#" button1_color="red" button1_nofollow="1" button2_text="Learn More" button2_link="#" button2_color="green" button2_nofollow="1"]
  • type (optional): promotion box type. Can be empty (displays 1 button) or two-buttons (displays 2 buttons).
  • heading: box heading text
  • text: box text content
  • button1_text: button 1 text
  • button1_link: button 1 link
  • button1_color: button 1 color, you can choose from 24 predefined colors (see popup below)
  • button1_nofollow (optional): set this value to 1 if you want the button link is no followed
  • button2_text (optional): button 2 text
  • button2_link (optional): button 2 link
  • button2_color (optional): button 2 color, you can choose from 24 predefined colors (see popup below)
  • button2_nofollow (optional): set this value to 1 if you want the button link is no followed

Note all the attributes for 2nd button are used only when you choose the promotion box type two-buttons.

Popup:

promotion box

Map

This shortcode will display a Google Maps in your pages. See demo.

Attributes:

[map map_type="satellite" marker_title="Hanoi" info_window="This is Hanoi" zoom="14" scrollwheel="1" address="Hanoi, Vietnam" width="100%" height="400px" controls="zoom,pan,scale"]

[map type="latlng" map_type="satellite" marker_title="Hanoi" info_window="This is Hanoi" zoom="14" scrollwheel="1" latitude="10.0" longtitude="0.10" width="100%" height="400px" controls="zoom,pan,scale"]
  • type (option): display map using address or latitude and longitude. Values can be empty (use address) or latlng (use latitude and longitude).
  • map_type (optional): Google Maps type, can be roadmap (empty value), satellite, terrain or hybrid. Learn more about Google Map types.
  • address: map address, used only when you set type empty.
  • latitude: latitude, used only when you set type to latlng.
  • longtitude: longitude, used only when you set type to latlng.
  • width (optional): map width. You can set it using % or px. Default value is 100% which means the map is displayed full width.
  • height (optional): map height. You can set it using % or px. Default value is 400px.
  • marker_title (optional): the marker title when you move the mouse over the marker.
  • info_window (optional): the info window content when you click on the marker.
  • zoom (optional): map zoom level, default is 8.
  • scrollwheel (optional): allow scroll wheel when seeing the map. Values can be empty (no scroll wheel – default) or 1.
  • controls (optional): a comma-separated list of map controls. Each control can be one of the following value: zoom,pan,scale,map_type,street_view,rotate,overview. Learn more about Google Maps controls.

Popup:

map

Row

Couponia theme comes with a 12-grid column (960.gs). This shortcode lets you display content in a row and column.

Attributes:

[row background="http://demo2.fitwp.com/couponia/wp-content/uploads/sites/3/2011/05/best-twitter-wallpaper.jpg" parallax="1" fluid="1" class="promotion"]
[column span="8"]Lorem ipsum dolor sitamet[/column]
[column span="4"][button link="#" color="black" type="rounded" size="small"]PURCHASE NOW[/button][/column]
[/row]
  • background (optional): background of row.
  • parallax: allow to on/off parallax
  • fluid: display full width.
  • class (optional): custom CSS class. It might be useful if you need to customize the look of the row content.

Popup:

column

Column

This shortcode lets you display content in a column. See demo.

Attributes:

[column span="3" class="myclass" total="12"]Lorem ipsum dolor sitamet[/column]
  • span: number of span columns. Can be from 1 to 12.
  • class (optional): custom CSS class. It might be useful if you need to customize the look of the column content.
  • total (optional): total column of the grid. By default it’s 12. But if you need to display a nested grid, you should set this value to total column of the nested grid.
WordPress does not support nested shortcode with **same name**, so if you want to display nested column (grid), you have to use HTML, like this:
<div class="grid_8">
[column span="3" class="myclass" total="8"]Lorem ipsum dolor sitamet[/column]
[column span="5" class="myclass" total="8"]Lorem ipsum dolor sitamet[/column]
</div>

Note that in this example the total equals to a number of columns of the div.

Popup:

column

Icon

Couponia has 140+ premium font icons from iconsweets2 that you can select from to make your content more attractive.

Attribute:

[icon class="serviceicon-tools" size="64"]
  • class: icon class. You can use the popup to pick the icon, you don’t need to remember its class.
  • size: icon size in px (but don’t enter px here). Optional. If not specified, the icon will take the font size of current element.

Popup:

icon

Icon Box

Icon box is a way of displaying main information in a “box”, which is usually used in the homepage, landing pages.

Attributes:

[icon_box type="big" url="http://google.com" title="Configure" icon="serviceicon-tools"]Lorem ipsum dolor sit amet.[/icon_box]
[icon_box type="hex" url="http://google.com" title="Support" icon="serviceicon-group"]Lorem ipsum dolor sit amet.[/icon_box]
[icon_box type="small" title="Design" icon="serviceicon-brush"]Lorem ipsum dolor sit amet.

<a class="more-link" href="#">Continue reading <span>&gt;</span></a>[/icon_box]
  • icon: icon class. Same as for icon shortcode above. Just pick from the popup, or manually enter it if you remember 😉
  • icon_psoition: select the position of the icon.
  • title: icon box title (heading)
  • url: URL that the icon box links to.
  • more_text: enter the anchor text for the more link.
You always **can** enter HTML into shortcode content. In the 3rd example above, you see how we used a link with class `more-link` and a `span` tag inside it to make a beautiful read more link.
You should use icon box within `[column]` shortcode to make the icon box same width.

Testimonials

This shortcode allows you config type and number of testimonials.

Attributes:

[testimonial name="Blake Abraham" avatar_author="http://demo2.fitwp.com/couponia/wp-content/uploads/sites/10/2015/05/gamer_chick_50x50.jpg"]Neque orci porta maecenas odio hendrerit senectus sociosqu convallis nam[/testimonial]
  • name: the testimonial’s author name.
  • avatar_author: the avatar link of the author.
  • type: select the style for displaying a single testimonial: normal or color.

Team Member

This displays a team member profile on your website.

Attributes:

[team_member name="Mathew Parkson" job="Senior Manager" photo="http://themes.fitwp.com/whisper/wp-content/uploads/sites/3/2013/12/team-1.jpg" phone="+00 123 4567" email="mathewp@business.com"]It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.[/team_member]
  • name: member name
  • job: the job name
  • photo: URL to member’s image. You should use Media Library to upload an image and then paste image URL here.
  • Content of the shortcode: member’s biography
  • Social URLs: the URL to the social media of this member