Get Started

Introduction

Thank you for purchasing our theme.

This guide provides instructions for installation, help on getting started and extensive documentation of features. It is recommended you read it thoroughly to fully leverage the theme's capabilities. Please also make sure to check out our Video Tutorials as they explain everything covered in here in greater depth. We hope you enjoy building with the theme as much as we enjoyed developing it and continue to develop with new features!

WPFelix has supports for popular Jetpack plugin, and also provide free-customization if you don't want to use built-in Jetpack supports.

WPFelix require at least Wordpress version 4.5

Pages

Page Templates

WPFelix comes with 5 pre-defined page templates.

  1. Default Template: The default, it's full width layout.
  2. Full Width Alternate: Full width with smaller container.
  3. Sidebar Left: Page with left sidebar.
  4. Sidebar Right: Page with right sidebar.
  5. No title: Page without title.
  6. About: Optional pre-defined about page template

Widgets

Widgets

WPFelix supports 8 widget areas.

  1. Sidebar: Default widget area. Shows on Home / Search / Archive and single post.
  2. Pages: Widgets in this area will show on Pages.
  3. Aside Top: Widgets in this area will show on the top of Side Panel on the right side.
  4. Aside Bottom: Widgets in this area will show on the bottom of Side Panel on the right side. This area always be at the bottom, if Aside Top is too high or too short or even has nothing.
  5. Lower area Col 1 to 3: WPFelix also supports 3 lower areas before footer seperated by columns. You can put anything here.
  6. Footer Instagram: An optional widget area for instagram widget, which is cover full width of the site, shows at very bottom of the page, just before footer.

Adding Widgets to Widget Area

  1. Navigate to Appearance > Widgets to access the list of widgets and widget areas that they can be added. The left hand side show all widgets you can use. The right hand side shows all different areas you can add widgets to.
  2. Simply drag and drop the widget you want into the area you want to the right hand side.
  3. When you finished, you can visit the site to see results.

Additional information

You can show/hide sidebars in some particular situations just by visiting Customize, of course you will need to login and have permission for it.

Customize

Start Customize

You can access Customizer in two ways.

  1. From admin dashboard, go to Appearance > Customize.

  2. From admin bar in front-end view.

After Customizer has been started, you will see it on the left hand side of the screen.

Site Indentity

Changing logo.

Just click on Select logo and the upload frame will shows up. Choose your logo image from library or upload new one. Then click Select. You will be promted to crop it, if your image size if smaller than 480x240 the Skip cropping button will shows up just in case you don't want to crop. Otherwise, you will have to crop, we don't want 1Mb logo, don't we? :-)

The results

You will want to hide text, just simply uncheck Display Site Title and Tagline. Or if you just don't want a logo, then check this and remove logo :-). Title and tagline can also be changed via these two fields as you can see bellow.

Site Icon

Favicon for the site. You will need to select image and crop just like above, image must be square and at least 512 pixels wide and tall as it already recommened

Header

  • Main navigation position: Make the main menu bar ( with social icons and stuffs ) shows before logo or after it.
  • Main navigation alignment: Controls alignment of the main menu items container.
  • Enable Social Icons: Show/hide social icons on the main menu bar. You will need to configure social profile links on the next section.
  • Enable Search: Show/hide search form toggle on the main menu bar.
  • Enable Side Navigation: Show/hide side panel area on the right side of the screen. If you enable this, all widgets on Aside Top, Aside Bottom area and Side menu location will shows up there.
  • Enable Search on Side Navigation: Add search form to the top of side panel area.
  • Sticky navigation: The main menu bar will stick on the top of screen if you enable this. However this only work on desktop screen.
  • Sticky navigation on Mobile: There you go, make main menu bar stick on the top for mobile screen.
  • Extra Navigation Alignment: Controls search toggle and side navigation toggle buttons on main menu bar.
  • Social Icons Alignment: Controls social icons container.
  • Padding Top and Bottom: If you want to strink logo area or expand it then change values here. Note that values must be integer number, and unsigned.

Social Media

Here you can add your social network profile links and icons will shows up. Both at header/footer and social icon widget. Just simply enter links ( URLs ) into the fields.

Hold on, there's something more at the bottom. Scroll down and set your sharing options. This will allows people to share your writings on social networks.

Check out posts list view ( home, archive ) or single view. Please note that sharing buttons only available for full/Grid with full style on posts list view, you can easily configure it in next section.

Featured Area

Featured area only shows at home page. You can configure it here.

  1. For it to work, firstly you need to enable it by check on Enable Featured Area
  2. Choose a Featured category
  3. WPFelix supports 4 styles for this area, just choose one and check it out.
  4. Choose how many items you want to show by enter Number of Slides
  5. Choose button style.
  6. Excerpt length in words count.
  7. Space before the slider, just in case you don't want it to be too close to main menu.
  8. If you don't want featured category name appears on any post info ( post meta ) then check this.

General

This section contains configurations for general posts and some site's behaviors

Before we start, let's take a look at posts list layouts.

Full

Grid

Grid with Full Style

List

List with odd/even Style

Configurations

You can have different layout for home and archive page. Just check the radio button and checkboxes

  1. Home Posts Layout: Layout for home only
  2. First full post for Home: The first post on home will be Full style
  3. Archive Posts Layout: Layout for all archive page like month, year, author, category, tags...
  4. First full post for Archive: The first post on archive will be Full style
  5. Posts navigation type: Wordpress default is Older Posts and Newer Posts for pagination. WPFelix provides additional page number style for it.
  6. Grid Columns: Work for all grid-related posts list style.
  7. Posts Summary: Posts list summary type. We strongly recommended the following:
    • Full: Uses default read more behaviour by Insert Read More Tag at admin post edit screen.
    • Grid: Excerpt or custom excerpt
    • Grid will full style: Any type will work but disable sidebar for best view result.
    • List: Excerpt or custom excerpt
    • List with odd/even style: Excerpt or custom excerpt and also disable sidebar for best view result.
  8. Custom Excerpt Length: If you choose summary type to custom excerpt then enter number of words to show on posts list here.
  9. Show Post Date: Show/hide post date on post info (post meta) on all posts
  10. Show Post Categories: Show/hide post date on post info (post meta) on all posts.
  11. Show Post Author Name: Show/hide post author on post info (post meta) on all posts. Note that full and grid with full style also have this too. But grid and list style don't. Single post will also affected.
  12. Show Post Sharing Icons: Show/hide post date on post info (post meta) on all posts. Note that full and grid with full style also have this too. But grid and list style don't. Single post will also affected.
  13. Show Post Comments Count: Show/hide post date on post info (post meta) on all posts. Note that full and grid with full style also have this too. But grid and list style don't. Single post will also affected.
  14. Show Post Format Icon: Work for all posts layout styles exerpt the Full one.
  15. Built-in Post Views Count (Removed from 2.0): If you enable this, you will have an additional widget to show most viewed posts. You can also use plugin for that, just disable this and download a plugin that you need. From 2.0, the popular posts widget now require JetPack to be installed and connected. Wordpress.com will take care of your site stats as well as the widget.
  16. Back To Top Button: A button for quickly go to the top of page when scrolling down.
  17. Jetpack styles support: If you want to style your own jetpack modules then disable this.

Single Post

  • Post layout: If Full is selected then all sidebar option will be passed, and single post will show at full width but smaller container.
  • Show Tags: Show/hide post tags
  • Show Author Info Box: Show/hide author info as well as author social profiles. This can be configured through Dashboard/Users
  • Show Related Posts: Built-in related posts based on categories and tags, if you prefer to use plugin instead then uncheck this

Sidebar

  • Sticky Sidebar: Sidebar will be sticked when you reach the end of it but not end of main content area. Or top of it but not top of main content area.
  • Sidebar Position: Left or right sidebar.
  • Sidebar Size: WPFelix supports two sizes for sidebar, just make change and check it out.
  • Disable Home Sidebar: Show/hide Sidebar on home.
  • Disable Archive Sidebar: Show/hide Sidebar on archive ( category, author, month, year... )
  • Disable Search Results Sidebar: Show/hide sidebar on search results page.
  • Disable Post Sidebar: Show/hide sidebar on single post. Alternatively you can use Full layout for post. See previous section
  • Disable Lower Area on Home: Show/hide three columns lower area on home
  • Disable Lower Area on Archive: Show/hide three columns lower area on archive ( category, author, month, year... )
  • Disable Lower Area on Post: Show/hide three columns lower area on single post
  • Disable Lower Area on Page: Show/hide three columns lower area on pages

Sidebar for pages, you can simply use page template

Footer

Please note that, the footer does not contain Instagram Widget, it's seperated from footer area.

  • Footer Logo: Logo to be appear at the left hand side of the footer. This logo contains link to homepage.
  • Footer Intro Text: Intro text appears at center of the footer.
  • Copyright Info: Copyright info appears at very bottom of the footer.
  • Show social icons: Show/hide Social icon at right hand side of the footer. You can customize social links at Social Media section.
  • Footer padding top: Add padding top for the footer.
  • Footer padding bottom: Add padding bottom for the footer.

Background Image

Set background image for the whole site. You select image by open Media Library or upload new, the process is just like selecting a logo.

You can choose to repeat all, repeat horizontally or vertically or no-repeat, set position of the image and image attachment.

Colors

Base Color Scheme - we built some presets for you to quickly get started. Choose one and start customize colors.

Note: When changing color scheme, all colors customization you have made before will be lost and color preset for that scheme will be loaded.

  • Background Color: Background color for the whole site.
  • Background Alternate: Weak background color for form field inputs, alternate background for some elements ( like posts list with odd/even style )...
  • Text: Main text color.
  • Highlight: Use for headings, some element backgrounds ( like subscription form, footer etc. ), and some other element text color.
  • Muted: Weak color, use for post meta text ( eg: "Posted on" ), Tag Cloud Widget, posts cound on category widget, archive widget and some other elements...
  • Accent: Accent color for the theme. Note post meta category, widget title will not use this color.
  • Border: General border color.
  • Button: Button text color, by default button background will use accent color.
  • Button Hover: Button text color on hover state.
  • Button Hover Background: Button background color on hover state.

Colors: Header

Note: When changing color scheme, all colors customization you have made before will be lost and color preset for that scheme will be loaded.

  • Header Background: Background color for the whole header area.
  • Navigation Background: Background color for menu bar...
  • Navigation Border: Border top/bottom color for menu bar.
  • Navigation Link: Menu item link color, affect both social icon colors and extra menu item colors.
  • Navigation Link Hover/Active: Active/current/hover color for top level menu items.
  • Sub Menu Border: Border color for dropdown menu Note that the top border color will always be "Navigation Link Hover/Active".
  • Sub Menu Background: Background color for dropdown menu.
  • Sub Menu link: Dropdown menu item link color.
  • Sub Menu link Hover/Active: Active/current/hover color for dropdown menu item link.
  • Sub Menu link Background Hover/Active: Active/current/hover background color for dropdown menu item link.

Colors: Extras

This section contain extra colors for some elements.

Note: When changing color scheme, all colors customization you have made before will be lost and color preset for that scheme will be loaded.

  • Categories Text: Text color for category link in post meta( under post title ).
  • Categories Border: Border color for category link in post meta( under post title ).
  • Categories Background: Background color for category link in post meta( under post title ), you can leave this blank for transparent color.
  • Widget Title Text: Widget title text color.
  • Widget Title Border: Widget title border color.
  • Widget Title Background: Widget title background color.
  • Footer Background: Footer background color.
  • Footer Text: Text color on footer.
  • Footer Highlight: Highlight color on footer.
  • Footer Muted: Weak color on footer.
  • Footer Border: Footer border color, used for both footer itself and footer elements with border.

Other Sections

Header Image

Add/remove header background image. This process is just like choosing a logo. See Site Indentity Section for more details.

Menus

Select nav menu and location for the theme, these configurations are just like creating menu, add menu locations... at admin interface. See Menu section for detailed instructions.

You will see these settings is pretty easy to work with, even though you are new to Wordpress. Because it's Wordpress's default customize section.

Widgets

Create, add, remove widget from widget area. These configurations are just like creating widget, add widget to widget area... at admin interface. See Widgets section for detailed instructions.

You will see these settings is pretty easy to work with, even though you are new to Wordpress. Because it's Wordpress's default customize section.

Tips and Tricks

Built-in Features

To get started, we need a child theme. Please follow instructions described here. Keep in mind that we are creating child theme for WPFelix, according to Wordpress Codex, it is recommended that the child theme directory should be wpfelix-child

To make it fast, we created one for you. Just open your purchased package and you will see it.

We need at lease style.css and functions.php inside child theme directory.

WPFelix has built-in instagram and latest tweets widget which allows you to display your instagram photos and latest tweets from your twitter. However you can also disable these and pick any other plugin to do it for you.

We also created few fields for user information to show user's social profile links. You could disable this with a function.

All you need is create functions, put it in functions.php (this file is located inside child theme directory) like so

<?php 
/**
 * WPFelix Child Functions and definitions
 */

/**
 * Remove built-in twitter widget
 */
function wpfelix_child_widget_latest_tweets_enabled()
{
    return false;
}
add_filter( 'wpfelix_widget_latest_tweets_enabled', 'wpfelix_child_widget_latest_tweets_enabled' );

/**
 * Remove built-in instagram widget
 */
function wpfelix_child_widget_instagram_enabled()
{
    return false;
}
add_filter( 'wpfelix_widget_instagram_enabled', 'wpfelix_child_widget_instagram_enabled' );

/**
 * Remove user/author social profile links
 */
function wpfelix_user_contactmethods( $methods )
{
    // Just return the original
    return $methods;
}
                    

Change theme fonts using child theme

In this section, we're going to change theme fonts using child theme. Please follow instruction described at previous section to make a child theme.

Inside child theme directory, please open style.css and paste in following code. Make changes to suit your needs but keep Template as it is.

/*
Theme Name:   WPFelix Child
Theme URI:    http://farost.net/
Description:  WPFelix Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     wpfelix
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  wpfelix
*/
                    

Inside child theme directory. Open functions.php and create a function with content like bellow. Note that we are using Roboto Slab and Open Sans for our example and remember not to change the function name, this function is one of WPFelix theme plugable functions, that means you can override it without affecting original theme for future updates. You can get font name, weights, subsets, all here

<?php 
/**
 * WPFelix Child Functions and definitions
 */

/**
 * Register Google fonts for wpfelix.
 *
 * Create your own wpfelix_fonts_url() function to override in a child theme.
 *
 * @since wpfelix 1.1
 *
 * @return string Google fonts URL for the theme.
 */
function wpfelix_fonts_url()
{
    $fonts_url = '';
    $fonts     = array();
    $subsets   = 'latin,latin-ext';

    $fonts[] = 'Roboto Slab:300,700';
    $fonts[] = 'Open Sans:400,500,600';

    if ( $fonts ) {
        $fonts_url = add_query_arg( array(
            'family' => urlencode( implode( '|', $fonts ) ),
            'subset' => urlencode( $subsets ),
        ), 'https://fonts.googleapis.com/css' );
    }

    return $fonts_url;
}
                    

Now your fonts are ready, you just need to open style.css and append font-family to specified CSS selectors like bellow. In this example we already included all CSS selector for elements that use heading fonts.

body {
    font-family: "Roboto Slab";
}
h1, h2, h3, h4, h5, h6,
.font-alt, cite, .button,
ul.primary-menu, ul.side-menu, .more-link,
.nav-previous, .nav-next, a#cancel-comment-reply-link, .comment-reply-link,
.footer-copyright, .site-description, ul.post-categories,
.tag-links, .widget_meta ul li, .widget_rss .rsswidget,
.widget_tag_cloud,
.widget_newsletterwidget .newsletter-submit,
.widget_wpfelix_latest_tweets .user {
    font-family: "Open Sans";
}
                    

That's it, open your site and check.

Change theme fonts with Easy Google Fonts

In this section, we're going to change theme fonts using google fonts and a plugin.

We're recommended Easy Google Fonts plugin for this purpose. You can also find recommended plugins at Recomended Plugins notice or Appearance / Install Plugins after install the theme.

Easy Google Fonts information, FAQs, support can be found here

Translation

Translating the theme

The theme is compatible with WPML plugin, thus can be translated into multiple languages. Follow this link for guide. You can also use POEdit plugin for translation.

  1. Located the .po and .mo files in folder /languages.

  2. Select language in admin options.

  3. Find language code (save option and reload front-end view html).

  4. Copy two files .po & .mo and rename them with the code you've just get from previous step ( eg: en_CA.mo & en_CA.po ). Same for other languages.

  5. Open the file .po with POEdit and translate the texts into your preferred language.

  6. When complete, you’ll want to save the file twice, as two separate files – a .po file and a .mo file. When you save the files, you must name them according to your language code. Find a list of language codes at WordPress in your Language. As an example, the language code for English is en_EN, so you would save the translated files as en_EN.po first, then en_EN.mo.
  7. When you're done, simply upload the files to your theme's language folder.

SEO

SEO

Our themes are optimized by with H1, H2, H3, H4, H5 tags, clean code, HTML5 but if you want to get higher ranking on search engines, you must need some help from SEO plugins and Google Pagespeed Service:

  1. Yoast SEO plugin
  2. Google Pagespeed Service
  3. Smush.it ( Optimizing Images )
  4. SEO Friendly Images ( SEO Images )

Update

Updating the theme

You can update our theme using some ways bellow

  1. Update theme using Envato WordPress Toolkit
  2. Manual update

If you have any troubles while using auto update (It is likely to be a permissions issue) then you may want to manually update the theme via FTP or Cpanel.

Download the latest version of the theme on ThemeForest download page and simply replace with the old one via FTP or Cpanel.

Support

Support

The team at Farost are always happy to help you with any questions or recommendations you have about the theme.

If you need any help or support please contact us through:

  1. Themeforest Messaging system.
  2. Email: farost.agency@gmail.com