Flexform - Retina Responsive Multi-Purpose WordPress Theme

WordPress Installation

This theme requires a working version of WordPress to already be installed on your server. If you need to install WordPress then please visit: http://wordpress.org/download/. If you need any help with the installation, please refer to this guide: http://codex.wordpress.org/Installing_WordPress.

Here is a brief step by step on how to install WordPress:

1. Download and unzip the WordPress package if you haven't already.
2. Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it.
3. Upload the WordPress files in the desired location on your web server:
   • If you want to integrate WordPress into the root of your domain (e.g. http://example.com/), move or upload all contents of the unzipped WordPress directory (but excluding the directory itself) into the root directory of your web server.
   • If you want to have your WordPress installation in its own subdirectory on your web site (e.g. http://example.com/blog/), create the blog directory on your server and upload WordPress to the directory via FTP.
   Note: If your FTP client has an option to convert file names to lower case, make sure it's disabled.
4. Run the WordPress installation script by accessing wp-admin/install.php in a web browser.
   • If you installed WordPress in the root directory, you should visit: http://example.com/wp-admin/install.php
   • If you installed WordPress in its own subdirectory called blog, for example, you should visit: http://example.com/blog/wp-admin/install.php

Theme Installation

The theme files need to be uploaded before you can activate the theme for use. There are two ways you can do this, FTP upload or WordPress upload.

If you are uploading via FTP upload, then you need to upload the unzipped folder “flexform” to the /wp-content/themes folder of your WordPress installation.

If you are uploading via WordPress upload, then navigate within the WordPress admin area to Appearance > Add New Themes > Upload. Select the zipped file “flexform.zip” and then hit Install Now.

Activating Flexform

Once you have uploaded the theme, you need to activate it by going to Appearance > Themes, and activate “Flexform”.

Demo Content

NOTE: before importing the demo content, make sure you have installed & activated "Revolution Slider" and "Contact Form 7" from within Appearance > Install Plugins, and also installed WooCommerce if you want the demo shop content.

Both the theme content and theme options have been provided so that you can set up the theme to look exactly like the demo in a few minutes. You can find the main demo XML file, along with the demo content XML files for each of the example sites in the main download folder. This XML file is to use through the WordPress import tool, which can be found in Tools > Import > WordPress. Follow the steps to import the demo content and leave the final page to load with a confirmation that the content has been imported successfully (this may take some time).

Once you have imported the demo content XML, you will still need to set the home page by going to Settings > Reading, and under "Front page displays" select "A static page" and then select the one of the Home examples for the front page. Leave the Posts page blank.

You will also need to select the menu(s) in Appearance > Menus, for them to display on your site.

The theme options text file is to copy and paste the contents into the box provided within Flexform Options, under the Import/Export sub-menu.

If you want to import our revolution slider example. You will need to install the Revolution Slider plugin (Appearance > Install Plugins), and then open up the plugin from the left menu at the bottom. Create a slider, give it a title, and then give it an alias of "homeslider". Select the full width display option, the change the grid width to "1170" and height to "450". Click "create slider". Next you want to click "Edit slider", scroll down and select "Show Export/Import" and then import the "homeslider.txt" file that is included within the demo content folder.

NOTE: If you'd like to copy our revolution slider caption styling, we have included "captions.css" within the demo content folder. You will need to copy this this file to replace the file in /wp-content/plugins/revslider/rs-plugin/css.

If you have any issues with the import, i.e. any errors, then please contact your hosting to increase your php memory upload limit before contacting our support for help. You can see the recommended settings below:

Logo

You can change the theme’s logo by accessing the Flexform Options and uploading your logo with the uploader under the “Header Options” section.

There is also an option to upload a retina logo, and logo spacing controls if you would like to manually add padding the logo area.

Menus

By selecting the Appearance > Menus option from the WordPress admin sidebar, you can set the top navigation by creating a menu, and on the left under Theme Locations set the Main Menu dropdown to be your newly created menu and then click save. This will allocate your created menu to the header navigation of the theme.

You can also set the top bar menu here, so if you would like to use both make sure you create two menus, one for each area.

The theme supports two levels of drop-down, so you can manage your menu items and allow for deeper navigation.

Posts

The Posts menu option on the left is where you add blog posts. To add a new blog post, select the Posts > Add New option from the left hand WordPress menu.

You will then be able to set a title for the blog post, add the body content, and also provide all the meta information such as extra details and media. In the blog meta you can set the image for the thumbnail, and also the media type for the detail page.

You can use the Swift Page Builder to create the content of the item, which effectively allows you to have limitless possibilities for what you can display, and also how you can display it. If you do use the Page Builder to create the content, you will want to provide a custom excerpt (can be found in the item meta).

The item meta also contains post slider options, allowing you to set the image for the slide that will show if the item appears in a posts slider, and also the display for the caption.

To display your blog posts, you will then need to create a page that includes the "Blog" or "Recent Posts" page builder asset. The blog asset has the following options included, allowing you to customise the output to your liking:

NOTE: DO NOT set the posts page in Settings > Reading, as this will force your page to show the archive layout, and not follow your created page.

Portfolio

The Portfolio menu option on the left is where you add Portfolio items. To add a new portfolio item, select the Portfolio > Add New option from the left hand WordPress menu.

You will then be able to set a title for the portfolio item, add the body content, and also provide all the meta information such as extra details and media. In the portfolio meta you can set the image for the thumbnail, and also the media type for the detail page.

You can add categories for each portfolio item's which act as the filters in the filtering system, and also a way to create multiple portfolio pages. You can have subcategories for filtering on a category Portfolio page, so none of the functionality is lost. When setting up categories, it is important that you name the slugs correctly. The slug of each category should be the same as the name, but all lowercase. If the category name contains spaces, then these should be represented in the slug with a '-'.

You can use the Swift Page Builder to create the content of the item, which effectively allows you to have limitless possibilities for what you can display, and also how you can display it. If you do use the Page Builder to create the content, you will want to provide a custom excerpt (can be found in the item meta).

To display your portfolio items, you will then need to create a page that includes the "Portfolio" page builder asset. The portfolio asset has the following options included, allowing you to customise the output to your liking:

Sliders

The Sliders menu option on the left is where you add slides to create groups of sliders which you can then use wherever you like within your content. To add a new slider, select the Sliders > Slide Groups option from the left hand WordPress menu. Here you can add a new group, where each group is taken as an individual slider.

You can then go to Sliders > Add New Slide. To create a slide you will want to follow the following steps:

1. Give the slide a title.
2. Select a group for the slide in the right column (Slide Groups). This will add it to that slider group.
3. You'll then want to add your media, so click the Add Media button. You can then choose to either upload an image, provide a URL, or select an existing image.
4. Once you have the image you want to use, click "Insert to post".
5. If you'd like to instead use a Vimeo/YouTube video embed for the slide, simply post the iframe embed code into the "Text" tab of the editor.
6. Enter an excerpt in the box below for if you choose to display an excerpt over the top of the slide.
7. Publish your slide.

To display a slider in the content of posts or pages, you will find that we have conveniently added a new tab in the "Add Media" popup window tited "Sliders". Inside this tab, you can setup your slider with settings specific to the type of slider selected, as well as override any of the "Advanced Settings" specified on the main "Settings" screen. To add a slider, please use the following steps:

1. Click the "Add Media" button above the WYSIWYG editor when editing your page/post/post type.
2. Select the "Sliders" tab.
3. Choose your desired slideshow type and setup the options pertaining to the selected type (all fields are optional).
4. If you'd like to override any of the global slideshow settings, click the "Advanced Settings" button and make any adjustments you'd like (only the modified items will be added to the shortcode).
5. Click the "Insert Slider" button.

NOTE: To add a slider in a Page Builder page, just insert a text block to the size you want it to be on the page, then add the slider to the content of that text block.

Team

The Team menu option on the left is where you add team members. To add a new team member, select the Team > Add New option from the left hand WordPress menu.

You will then be able to provide all the details for the team member through the team member meta box.

To show your team members, you will need to create a page that includes either the "Team" or "Team Carousel" page builder assets.

Clients

The Clients menu option on the left is where you add clients. To add a new client, select the Clients > Add New option from the left hand WordPress menu.

You will then be able to provide an image for the client, and a link if you'd like through the client meta box.

To display your clients, you will then need to create a page that includes either the "Clients" or "Clients (Featured)" page builder assets.

Testimonials

The Testimonials menu option on the left is where you add testimonials. To add a new testimonial, select the Testimonials > Add New option from the left hand WordPress menu.

You will then be able to provide the testimonial in the post content, and then the testimonial cite in the testimonial meta box.

To display your testimonials, you will then need to create a page that includes either the "Testimonails", "Testimonials Carousel", or "Testimonials Slider" page builder assets.

Jobs

The Jobs menu option on the left is where you add job listings. To add a new job listing, select the Jobs > Add New option from the left hand WordPress menu.

You will then be able to enter the content for the job in the post content editor.

To display your job listings, you will then need to create a page that includes either the "Jobs" or "Jobs Overview" page builder asset.

FAQs

The FAQS menu option on the left is where you add faqs. To add a new faq, select the FAQs > Add New option from the left hand WordPress menu.

You will then be able to enter the question (the title of the faq), and the answer in the the post content editor. You will also need to add a topic for each faq.

To display your faqs, you will then need to create a page that includes the "FAQs" page builder asset.

Widget Areas

There are up to 13 widget areas that can be viewed under the Appearance > Widgets menu, eight sidebar areas, and four footer column widget areas. You can select which sidebars appear on the page through the page/post editor. The number of footer sidebars depends on the footer setup that you choose within Flexform Options.

Child Theme

We have provided a child theme package ready for you to use if you wish to make changes to files, while keeping them through updates. The child theme is included within the main download folder, and is named "flexform-child" all you need to do is upload this as well as the standard "flexform" folder, and then activate the child theme in Appearance > Themes from the WordPress menu.

Color Customizer

The color customizer can be accessed by pressing the "Color Customizer" button within the WordPress admin bar, or through the Appearance > Themes menu. From the color customizer you can preview the themes color/skin changes as you make them.

Flexform Options

The theme options can be used to customise the theme to suit your needs, including backgrounds, layouts and much more. You should take the time to go through all of these options to ensure that you are getting the most out of the theme.

Font Options

Flexform allows you to use either Web Standard, Font Deck, or Google Fonts - separately for both Body & Headings text. If you are using Web Standard, or Google Fonts, then all you need to do is select the type from the button set, and then select the font family from the provided dropdowns. If you are using Font Deck, then please follow the instructions that are provided in the description underneath the option title. You can also find the instructions here:

STEP ONE

Go to https://fontdeck.com/account, and add a website if you haven't already. If you have, then click on this website. You will then proceed to a page where you can see your font choices. In another browser tab, open up Flexform Options > Font Options within your WordPress dashboard.

STEP TWO

At the bottom of the Flexform Options > Font Options panel, you will find an option with a text area, with the option being named "FontDeck JS Code". In this text area paste the code that you can find from Step 1 of the FontDeck install options.

STEP THREE

In the Body/Heading sections of Flexform Options > Font Options panel, you will find an option with a text area, with the option being named "Standard FontDeck Font" or "Heading FontDeck Font". In this text area paste the code that you can find from Step 2 of the FontDeck install options.

Meta Options

Flexform uses meta options to allow you to upload images, provide information, and set up the way the page/post displays. You can find these below the content editor on Pages/Posts/Portfolio Items. Please spend some time exploring these, as knowing what they control will be very helpful in ensuring you are efficient with your content input. Below you can see an overview of each set of meta options.

Page Meta Options

Post Meta Options

Portfolio Meta Options

Swift Slider

On every page you create, you can optionally include the Swift Slider at the top of the page, with options for the number of posts to show, and what category to show posts from. You can select whether the slider pulls in posts, portfolio items, or both - the "Hybrid" option.

Revolution Slider

The theme includes the premium plugin - Revolution Slider. You can find documentation for this included within the Documentation > Revolution Slider Documentation folder.

Once you've installed and activated the Revolution Slider plugin (by going to Appearance > Install Plugins), you will then see the menu item appear at the bottom of the WordPress menu, as below:

Custom Widgets

Flickr - This flickr widget shows off your flickr photos. You can get the required API Key from this link: http://www.flickr.com/services/api/misc.api_keys.html.

Video - The Video widget embeds a video from a url that you enter into the input field within the widget options. You can find out what type of video you can embed here.

Recent Posts - A custom widget to show recent posts with an image.

Recent Portfolio - A custom widget to show recent portfolio items with an image.

Advert Grid - A custom widget to show an advert grid of up to 4 125 x 125 adverts in a single block.

InFocus Post - A custom widget to show a focus of a single post.

Shortcode Generator

Flexform includes the Swift Framework Shortcode Generator, which is a custom built feature for our themes. The generator allows you to embed shortcodes within your content quickly without having to remember the syntax. The generator allows you to select the type from the list, and provide parameters (if needed).

You can find the shortcode generator within the WordPress WYSIWYG editor. The button looks like this:

Translation

Flexform is 100% translation and multi-lingual ready, and we recommend that you use the very popular WPML plugin.

To translate the static strings, if you aren't using WPML then I recommend downloading PO Edit, from http://www.poedit.net/. Once you have installed please follow the steps below:

1. Open the /flexform/languages/ folder and duplicate the en_US.po file, then rename it to your desired language code. For example; for German you need to re-name it as de_DE.po for Spanish es_ES.po for Turkish tr_TR.po etc. You can find all the codes from this link http://codex.wordpress.org/WordPress_in_Your_Language
2. Then you will need to open the .po file in PO Edit. Once opened, you will see all strings that needs to be translated. Type the translation of a string into the "Translation" column. Do not delete or edit "Original string" part.
3. When you finish translating, save the file. This will create an .mo file in the same directory.
4. Upload the new files into the languages folder of the theme /wp-content/themes/flexform/languages/ and then follow this guide: http://codex.wordpress.org/Installing_WordPress_in_Your_Language#Single-Site_Installations

WooCommerce

We have provided compatibility pre-built into Flexform for WooCommerce. There is a special sidebar for the WooCommerce pages in Appearance > Widgets, that appears only on WooCommerce pages.

NOTE: You will need to edit and save each of the individual WooCommerce pages to enable the page headings.

Custom Login Logo

You can change the login logo by replacing the image in the theme’s /images/ folder. The image is named “custom-login-logo.png”. You can replace it by uploading the image via your chosen method (e.g. FTP). You can also replace this image through the Flexform Options menu under General Options.

OVERVIEW

The Swift Page Builder (SPB) allows you to create unique and amazing pages, exactly the way you want them! The SPB is powered by shortcodes, which are embedded when you select the content elements you want, and edit them. You can see the source by going back to the classic editor, although you shouldn't ever need to do this and you should only make changes to this if you know what you're doing.

To add a content element to the page, all you need to do is drag the element from the dropdown into the content area, or simply click on it to have it added automatically. You can then edit the column width (on applicable elements) by pressing the left/right arrows in the top left of the content element, and also edit the asset (the pencil), duplicate the element, or delete the element.

When you click on the edit button, you will be given the option of specifying a number of parameters based on the content element. Below is a screenshot from the edit screen of the Portfolio content element. As you can see there are a wide number of options for you to choose from.

VIDEO DEMO

Please watch the video below to get an idea of how to use the Page Builder:

ADVANCED TIPS

The SPB includes a Blank Spacer element, which allows you to add spacing in between your content elements, to suit your needs. We decided on making this user controlled, so that there is never a case where you don't have the spacing you need.

We have added a field in most page builder assets called "extra class". This can be used to style a particular asset differently, or you can use our handy custom classes to remove default styling such as margins or paddings. Below is a list of our custom classes.

NOTE: Make sure you only enter "pb0" for example, you do not need to include the period in front of the class.

CSS Files

bootstrap-responsive.min.css - Sleek, intuitive, and powerful front-end framework for faster and easier web development.. More info: Twitter Bootstrap.

bootstrap.min.css - Sleek, intuitive, and powerful front-end framework for faster and easier web development.. More info: Twitter Bootstrap.

styles.css - The main css for the theme, which includes the layout and styling for all aspects of the theme.

editor-styles.css - Contains styles that are used within the content editor.

font-awesome.css - Font Awesome icon font. More info: Font Awesome.

JavaScript Files

bootstrap.min.js - Sleek, intuitive, and powerful front-end framework for faster and easier web development.. More info: Twitter Bootstrap.

excanvas.compiled.js - Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. More info: Explorer Canvas.

functions.js - This is where all the custom magic happens. Feel free to edit any of this code, but make sure to keep a backup in case anything goes wrong!

jquery.carouFredSel-6.2.0-packed.js - jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. More info: carouFredSel.

jquery.prettyPhoto.js - prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox. You can find out more here: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/.

jquery.fitvids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.. You can find out more here: http://fitvidsjs.com/.

jquery.flexslider.min.js - an awesome, fully responsive jQuery slider plugin.. You can find out more here: http://www.woothemes.com/flexslider/.

jquery.hoverIntent.min.js - hoverIntent is a plug-in that attempts to determine the user's intent. You can find out more here: http://cherne.net/brian/resources/jquery.hoverIntent.html.

jquery.isotope.js - Isotope: An exquisite jQuery plugin for magical layouts. You can find out more here: http://isotope.metafizzy.co/index.html.

respond.min.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more). You can find out more here: https://github.com/scottjehl/Respond.

view.min.js - PREMIUM PLUGIN. A simple, lightweight, jQuery photo viewer for the web. You can find out more here: http://finegoodsmarket.com/view/.