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

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

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

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

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)

(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:

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

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:

(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:

#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:

Go to https://apps.twitter.com/ and click Create New App button.

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.

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:

(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.

FitWP

Premium WordPress Themes

#FILE INCLUDED

#INSTALLATION

#Install Theme

#Import demo slider

#THEME OPTIONS

#General

#Favicon Upload

#Touch Icon

#Show comments on page

#Backup – Restore

#Design

#Color Schemes

#Layout

#Custom CSS

#Header

#Header options

#Hero Section

#Title Area

#Header Scripts

#Player

#Artists

#Albums

#Events

#Gallery

#Shop

#Blog

#Footer

#Page Display Settings

#Page Templates

#Widgets

#[FitWP] Flickr

#[FitWP] Latest Tweets

#[FitWP] Recent Posts

#[FitWP] Tabs

#[FitWP] Social Links

#<em>Related</em>