1. Getting Started - Installation

    Make sure you've got the current version of WordPress. In order to download the current version, please visit http://wordpress.org.

    Please check http://codex.wordpress.org/Installing_WordPress for information on how to install WordPress on your server.

    Once WordPress is successfully installed, you will have to upload the theme to your WordPress directory - there are two ways to do that:

    • Un-zip the theme main file and upload the folder via a FTP program to the /wp-content/themes/ folder on your server.
    • Use WordPress Theme Installer. Go to Appearance > Themes > Install Themes, and select the zipped theme file.
  2. Setting Up Your Site - Theme Options

    This theme comes with an easy Theme Options Panel divided into five tabs. Each field is accompanied by a short help text. Below we discuss the most important options.

    Options
    1. Basics

      In this tab set the logo images for page headers and site sidebar. For crispy look on retina screens make sure to upload also the double-sized versions.

      If you're using a logo image, you'll probably want to skip your site title and/or tagline.

      Upload your favicon and an apple-touch-icon.

      Upload a custom background image for your 404 Page Not Found error page. Choose a large horizontal image.

      Set some custom footer copyright info.

      Paste your Google Analytics (or any other) Tracking Code.

      Check here if you want the admin top bar to be displayed when you're logged in - It's disabled by default.

    2. Blog & Archives

      In this tab you can choose your blog (recent posts) layout and choose the pagination option.

      Options Blog
    3. Contact Options

      Set all your contact data (address, phone, email). You may also override the admin's email address by a custom one used for the contact form destination or disable the contact form.

      If you want to activate Google Maps on your site, you have to provide the longitude and latitude coordinates of your location at the bottom of the CONTACT tab. If you don't know your coordinates, find them with Google Maps, for example on http://itouchmap.com/latlong.html

      Options Contact

      The CONTACT tab settings will be used in your "Contact Page" - check the "Page Templates" part.

    4. Style Options

      The unique look of your site will be achieved thanks to the featured images displayed in each page header and two matching colors: one for your page background and one for the page footer section. Mixing these two together generates a "squares" effect at the bottom of your page. Set the default colors that will be used on all automatically generated pages (like archives, 404, etc.)

      Options Style

      You can easily replace the default Open Sans and Montserrat by some Google Fonts. Just paste the font name in the Body Font and/or Heading Font fields. Make sure to choose the font family that we'll be used as a replacement font in case if for some reason the google font can't be loaded.

      Body Font

      The body font is used within the template in three variants : Normal (weight 400), Italic (weight 400) and Bold (weight 700). For the proper rendering make sure to choose the body fonts that supports these three styles.

      Google Font

      You can disable the "squares" overlay in the header (this setting can be overridden for an individual post/page/project setting). You can also disable the "squares" effect in the footer.

      If you don't like the animations on image hover you can disable them here.

      Disable Effects

      You can also add some custom styles in the Custom Styles field.

    5. Meta Options

      In this tab you can disable/enable the date, author and category info in Posts, Projects and index pages (blog, archives, search).

      Options Meta
  3. Building Your Site

    1. POSTS

      Each post has 7 custom metabox blocks that are placed right below the Text Editor.

      Post Metaboxes All

      To enhance your posts take advantage of the original Flights headers by setting a featured image for each post. You can also choose custom colors that match your featured image and post content.

      Post Metaboxes

      Make sure to fill the user information in Settings > User if you want to include the "Author info" in your right sidebar.

      The "Video Post Format Settings" apply to the post that have format set to "Video", it allows you to display a video thumbnail in index pages - paste your video URL as in the screenshot below.

      Post Metaboxes Video Thumbnail

      The "Audio Post Format Settings" apply to the post that have format set to "Audio", it allows you to display an audio player in index pages - paste your audio URL as in the screenshot below.

      Post Metaboxes Audio Thumbnail
    2. PROJECTS

      Projects

      Projects are posts used to build your Portfolio pages. Projects have 6 custom metabox blocks, most metabox fields being exactly the same as for posts.Projects are the same as for posts.

      Project Metaboxes
    3. PAGES

      Flights comes with 6 page templates: Default, Contact, and 4 portfolio templates Portfolio 1 column, Paged Portfolio 2 columns, Filtrable Portfolio 2 columns and Filtrable Grid Portfolio.

      Page Templates

      There are two new important fields in the "General Page Settings" metabox: "Left Sidebar" and "Disable Wrap" checkbox.

      You can choose the behavior of the left sidebar (containing navigation and widgetable area). Note that the difference will be only visible on large screens.

      If you check the "Disable Wrap" option the custom content will be expanded to the full width - this together with the "Section" shortcode allows you to play with different backgrounds expanding to the full width while the content is wrapped.

      Page General

      For Pages, same as for posts and project the featured image is added to the header by default. Unlike for posts and projects you can replace the featured image with a video or a slider.

      The "Page Header Settings" metabox block are more complex than "Post Header Settings", see the screenshot below. Note that setting a Self-Hosted Video will override the Youtube Video settings and Slider will override the self-hosted video and youtube video.

      Page Video

      The last metabox "Portfolio Settings" applies only to the Portfolio pages (you have to choose one of the 4 portfolio templates).

      Portfolio Settings

      Portfolio pages use Projects custom posts. You can either choose all projects or select a subset to be displayed in a page by choosing a project category. If you choose a filtrable portfolio the direct child categories will be used as filters. In the screenshot below see an example of the project category hierarchy and filtering options

      Example
    4. PAGE HEADER SLIDERS

      You can create slides, assign them to Sliders and add a Slider to your page header. Slides are custom post types with reduced functionality. For each slide you have to set a featured image and a title as well as fill in the metabox fields: Subtitle, Button Label and Button Link. Note that slides will appear in the order of publication, so if you want to rearrange them you have to play with the publication dates.

      Slide

      You can add a slider to the page header in the Page Header Settings by choosing one of the sliders.

      Slider
    5. USER SETTINGS

      This theme comes with some optional custom settings for each user profile.

      User0

      You can also add an individual character to the user archive page (check our Demo Author Page).

      Author Page
    6. SHORTCODES

      There is a bunch of custom shortcodes added to the template. If you are using the Visual editor, click on the "[ ]" icon and select your desired shortcode from the dropdown menu - it will be added at your current cursor position. Check Our Shortcodes Demo Page for a sample what you can do with Flights custom shortcodes.

      Shortcodes
  4. Import the demo content

    For your convenience we put together all posts, projects and pages into a demo.xml file ready for importing into your WordPress installation.

    In order to import this sample data go to Tools > Import and choose "WordPress" from the list, upload the demo.xml file, make sure to check "Download and import file attachments".

    You will need assign the menu a theme location and configure widgets and theme options yourself.

  5. Child Theme

    The Flights Theme comes with a ready to use child-theme. You'll find the "flights-child-theme" folder in the theme package.

    Check WordPress Codex to learn how to use child themes.

  6. Translate Your Theme

    Download and open POEdit. Go to File > Open and choose the translation/default.po file in your theme folder. Line by line translate the theme to your language. Go to File > Save as.. and save your filed in the same subfolder. Name your file accordingly to WordPress language codes, you may find them here. For example the language code for French is fr_FR so you would save your file as fr_FR.po.

    Note that the fr_FR.po file will be automatically compiled to fr_FR.mo file.

    Open the wp-config.php file (in your WordPress install folder), find the line containing

    define ('WPLANG', '');
    and change it according to your language codes, eg.
    define ('WPLANG', 'fr_FR');
  7. Troubleshooting

    Icon Fonts:

    If the font icons don't display properly in Firefox and newer versions of Internet Explorer, probably you're running a in cross domain request issue. In these browsers your web fonts served from a different domain need to have the appropriate “Access-Control-Allow-Origin” response header. You'll have to modify the .htaccess file (see Icomoon documentation)

    
    	# For Apache
    	<FilesMatch ".(eot|ttf|otf|woff)">
    	Header set Access-Control-Allow-Origin "*"
    	</FilesMatch>
    
    	# For nginx
    	location ~* \.(eot|ttf|woff)$ {
    		add_header Access-Control-Allow-Origin *;
    	}
    
    

    Header Video:

    If the video don't display you might have to add the following in your .htaccess file (see Mediaelementjs documentation.)

    	AddType video/ogg .ogv
    	AddType video/mp4 .mp4
    	AddType video/webm .webm
    

    Featured Images:

    There are several image size variants used in this template, they are generated by WordPress during the image upload. If your images are already uploaded please use the Regenerate Thumbnails plugin, that will generate the missing sizes for you.

  8. Used assets

    Fonts :

    We use the Open Sans and Montserrat google fonts and a custom build of icon fonts from Icomoon.

    Images :

    This theme demo features the work of genious Zev aka Fiddle Oak. Other featured photographers are PinkOnHead, Veeo, Craig Garner, Luke Chesser, Alejandro Escamilla, Aleks Dorohovich and Pawel Wozniak. There are also some stock photos from Shutterstock. Images are not included in the download files.