Flexr Installation & Setup

Last updated by David Gwyer on March 8, 2017 15:53

On this page you’ll find all the information you need to get started using Flexr, including installation and setup. If there is anything you’re still unsure of then please contact us for help. That’s what we’re here for!

Let Us Setup Your Site!

Before getting started, if you don’t want the hassle of installing and setting up everything yourself, or just don’t have the time, then we can do it for you. We have services available to quickly install, setup and configure both WordPress and your theme without you having to lift a finger!

So, if you want us to do all the hard work for you then click here to find out more. If you’ve already purchased an installation and setup service then you can submit an installation request here.

Getting Started

To successfully setup your site you’ll need to source web hosting, as well as complete installation of WordPress and the Flexr theme. These tasks are covered in the following sections.

Web Hosting

Web Hosting by TerraNetworkBefore you can install WordPress and Flexr you’ll need to source your own web hosting. You can choose from any web host that supports WordPress (which is nearly all web hosts these days). If you don’t already have hosting then we recommend TerraNetwork web hosting. Click the banner image to the right to get started.

If you don’t go with TerraNetwork then please make sure your web host meets the minimum requirements for running WordPress.

Installing WordPress

If you don’t already have WordPress installed on your site then you’ll need to do this before you can install the Flexr theme. Most web hosts allow you to install WordPress directly from your website control panel – which is the easiest method by far. Contact your web host to see if they support this.

If your host does not allow you to install WordPress from the control panel then you’ll have to install it yourself manually. Fortunately it is a simple process and there are a few steps involved. Click here for instructions on installing WordPress manually.

If you have existing website content (i.e. images and text) prior to installing WordPress then you’ll need to fully back-up this data, otherwise it could get overwritten during the installation process. Once this is done it’s a good idea to delete all site files before installing WordPress so you don’t have any conflicts between your old and new site.

Installing Flexr

  • Note: Please install the WPGO Metro plugin (download from your WPGO Themes account), as described in your purchase email, BEFORE working through this document as it includess all the custom post types, widgets, and shortcodes described below.

Once WordPress has been installed it’s time to get Flexr installed and activated. You’ll be glad to know that this only needs to be done manually once, as future theme updates occur via automatic notifications in your WordPress admin (see the section Flexr Automatic Updates below for more details).

To install Flexr manually for the first time please complete the following steps:

  1. Download the theme zip file from your wpgothemes.com account page to your computer.
  2. Log into your WordPress site and go to Appearance > Themes.
  3. Click on the Add New button to go to the Add Themes page, then click the Upload Theme button.
  4. Follow the prompts to upload the theme zip file you downloaded to your computer in step 1.
  5. Once successfully uploaded, activate your theme.

What Next?

Working through the rest of this document will help you to get to grips with customizing Flexr. If you have ANY questions, suggestions, or general comments we would love to hear from you. Your feedback is very important to us!

Customizing Flexr

There are various ways you can customize Flexr, which are described in the following sections:

Adding a Logo

Include the new logo placement customizer settings.

One of the first things you’ll want to do is to add a logo to your site. To do this go to Appearance > Customize. Expand the Site Identity section and click on Add Logo to select your logo image. You can add a logo from the WordPress media library or upload an image from your computer. Once selected, your logo will automatically appear in the preview window.

You can also customize how the logo is rendered in relation to the site title, and tagline via the Logo Placement drop down box. The default is to display the logo above the site title, and tagline (if they are defined). You can change this so that the logo is placed next to the site title (but still above the tagline), or is placed next to site title and tagline.

Click on Save & Publish if you want to make the change publicly viewable.

Retina Images

Flexr fully supports the use of Retina images, including using a Retina image for your logo. Simply make sure that you upload two images for the Retina image you want to display. The only two caveats are the images MUST be in the same folder on your server, and the Retina image has to have an identifier in the filename. e.g. logo.png, and logo@2x.png.

If you make sure to always upload the normal and Retina images at the same time then you won’t run into any problems.

The Retina.js script included with Flexr will auto detect the device Flexr is being viewed on and display the Retina image version where appropriate. If no Retina image exists then the normal image is displayed.

Setting up Navigation Menus

Go to Appearance > Menus to create your custom menus. You can create as many menus as you wish, but they will only appear on the front end of your site if they are assigned to a theme location.

Look for the check boxes underneath your custom menu to assign menus to specific locations, or click the Manage Locations tab at the top of the page.

Adding Menu Icons

Each item added to a menu can also be prefixed with an icon. Go to Appearance > Menus and expand an individual menu item. In the Specify Menu Icon Name text box enter a valid font icon name.

Make sure the icon name is the same as it appears on the Font Awesome site. Hit the Enter key or click the Save Menu button to save your changes.

You can even hide menu labels if you want to show icons only. To do this simply prefix a menu label with a double underscore. e.g. If you had a menu item with the label Home then replace this with __Home to hide it on the front end.

  • When hiding menu labels make sure you enter a valid icon name in the Specify Menu Icon Name field otherwise your menu item won’t be visible. Also, menu labels must never be blank or the whole menu item will be deleted when you try to save the menu!

Adding Widgets

There are several widgets you can add to your site to add functionality. The available widgets are:

  1. Content Slider – Add a content slider to your site
  2. Email Opt-In – Easily add user sign-ups to an email list
  3. Testimonials – Display user testimonials
  4. WPGO Connect – Display social media icons
  5. Recent Posts – Show your latest posts

You can add widgets to sidebars, the header, the footer, or to pages that use the “Widgetized Page” page template.

Go to Appearance > Widgets and drag the widgets (on the left) to widget areas (on the right). You will need to expand a widget area before you can drag a widget into it.

Once added to a widget area, you can edit the widget settings to your requirements. View the relevant area on the front end of your site to see the widget in action!

Header Templates

A brand new feature available in all our themes apart from Minn is Header Templates. This allows you to specify exactly how the header is rendered on your site for every page. Please click here for full details.

Footer Templates

Also a brand new feature available in all our themes apart from Minn is Footer Templates. This allows you to specify exactly how the footer is rendered on your site for every page. Please see here for full details. [coming soon]

Customizing Colors

Go to Customizer > Colors and use the color pickers to alter color settings. Click on the default button for each color picker to revert to the default value.

Theme Options

Go to Appearance > Flexr Options to view the theme options page. Here you can see links to theme support, this setup page, our Twitter account, and your WPGO Themes account area.

You can also add styles to the “Custom CSS” text box to customize your site. This is a very convenient way to quickly add CSS customizations without having to use a WordPress child theme.

Add your theme license key to actively receive automatic theme update notifications.

Misc Features

The following section covers some misc features.

  • Favicon support. Go to Customizer > Site Identity > Site Icon to select a favicon image.
  • Header/footer code insertion (e.g. to insert Google Analytics code). Go to Settings > WPGO Metro to add code that will be added to your site header/footer.

Theme Customizer

Since version 3.4, WordPress has included a very cool feature called the WordPress customizer. For themes that support it the customizer allows you to quickly make design changes in real-time and preview them prior to making them publicly viewable.

You’ll be glad to know that Flexr fully supports the theme customizer, which can be accessed by doing one of the following:

  1. On the front end of your site (when logged in as admin) click the ‘Customize’ drop down menu link from the WordPress toolbar.
  2. By clicking on Appearance > Customize in the WordPress admin.

You can use the theme customizer for many things including:

  • Upload a logo to the site header.
  • Edit the site title and tagline.
  • Toggle the visibility of the site title and tagline.
  • Change sites colors via multiple color picker controls.
  • Set global column layout for all pages (can be overridden on individual pages).
  • Set global sidebar width for all pages.
  • Choose any Google font and apply it to CSS selector(s) of your choice.
  • Set the site background image.
  • Set the custom menus for the Main, and Top menu locations.
  • Set the static pages used for the homepage and the blogs page.
  • Customize the links displayed in the footer.
  • Customize your site’s widgets.

Child Theme

If you plan to make significant changes to theme styles or need to implement PHP/JS code modifications then using a child theme is the recommended way to customize your site. The main advantage of using a child theme is to protect your customizations during theme updates. Otherwise, if you only altered the main theme files then all changes would be lost during theme updates.

Note: Changes to your site made via the theme customizer or theme options won’t be affected during a theme update.

We provide a sample Flexr child theme to get you started, which you can download via your wpgothemes.com account page. The child theme is installed and activated in exactly the same way as the Flexr parent theme.

Once your child theme is installed and activated, go to Appearance > Editor to make CSS customizations in style.css, and add custom PHP code in functions.php. It is also possible to accomplish more advanced tasks by copying theme template files from the parent theme to the child theme. This forces WordPress to use the template file in your child theme instead of the parent theme, so you are safe to make modifications to it that won’t be lost during theme updates. To copy a theme template file you will need to do it via your web host control panel or FTP software. As mentioned earlier, any changes to your site you make via the child theme will be preserved during updates to the parent Flexr theme.

Even with a child theme active you can still use the Custom CSS text box in Flexr theme options to make tweaks to your site styles. These Custom CSS style rules are rendered AFTER the parent/child theme styles, and so will ALWAYS have priority. This is done on purpose to allow you to use the Custom CSS theme option to tweak styles on your site whether you are using a child theme or not.

Flexr Automatic Updates

Once Flexr has been installed and activated you’ll see an update notice appear every so often in WordPress admin prompting you to install the latest version. Before you proceed with the update you can optionally view details about the new version first to decide whether you wish to install it.

In general, it is recommended that you ALWAYS update to the latest theme version when available, for security reasons.

By the same token, you should always update other plugins you have installed to the latest versions, as well as WordPress itself whenever updates become available.

Note: You’ll only be prompted to update Flexr if you have first entered an active theme license key in theme options. You can find your license key via your wpgothemes.com account page.

WPGO Metro Theme Add-on

The WPGO Metro add-on is a plugin you can install to enhance the functionality of your theme. Features include the following:

  • Custom Post Types – Enable a range of powerful WordPress custom post types such as testimonials, portfolios, and slides.
  • Several widgets and shortcodes to enhance functionality.
  • Sidebar Manager – Create custom sidebars to display on specific pages.

Note: WPGO Metro works with ANY WPGO theme so if you have installed it before for another WPGO theme then you do not need to install it again. Once installed, and the license key entered, WPGO Metro will receive update notifications automatically.

The sections below give more details about WPGO Metro features.

Custom Post Types

There are four powerful WordPress custom post types including Slides, Portfolio, Documents, and Testimonials. The slides CPT, for example, allows you easily build flexible custom slides for use in the content slider widget. There are also various associated shortcodes to accompany these Custom Post Types.

Sidebar Manager

Create unlimited custom sidebars for your site, and display them in any order on posts/pages. This plugin makes it easy to have unique sidebars on every page on your site!

Widgets & Shortcodes

Widgets include:

  • Content and portfolio sliders
  • Recent posts
  • Social media icons
  • Opt-in sign-up form

Shortcodes include:

  • Year: Displays current year
  • Site URL: Displays current site URL
  • Box: Displays a ‘box’ in various styles to highlight content
  • Button: Displays text inside a button
  • Loginout: Displays a login or logout link depending on current user status
  • Various column shortcodes to display content in different column layouts

You can use shortcodes in any post or page. Take a look at this Flexr demo page to see examples of how to use the available shortcodes.

Page Templates

Flexr includes several page templates to customize how pages appear on the front end. These can be selected via the WordPress admin on the page editor. In the Page Attributes meta box select the ‘Template’ drop down to choose your page template. Flexr includes the following page templates:

  • Default Template
  • Blog Posts
  • Contact Form
  • FAQ Page
  • Hero Page
  • Portfolio
  • Sitemap
  • Widgetized Page

Default Template

Displays the main content and sidebar according to your chosen layout.

Blog Posts

Displays your latest posts.

Contact Form

Displays a contact form. The form will be sent to the e-mail address in Settings > General.

FAQ Page

Adds styles and functionality for a FAQ page.

Hero Page

Create any landing page you like with this page template as it collapses all margins and padding to give you full control over the page layout.

Portfolio

Displays your portfolio items. Includes options for small, medium, or large images, plus a choice of portfolio group display. You will first need to specify at least one portfolio item and one portfolio group.

Sitemap

Displays a sitemap of your pages in a single list.

Widgetized Page

Allows widgets to be displayed inside a WordPress page. To use this effectively you will need to use sidebar manager to select which sidebars (and in what order) are displayed.

Page Column Layouts

With Flexr you can easily manage the number of columns displayed on any page. In the theme customizer you can specify the ‘global’ column layout that will be used for EVERY page by default (the default setting is 2-columns, with sidebar on the right of the page). You can also select a different column layout for each individual page if you need to. On the page editor select the ‘Column Layout’ dropdown in the ‘Page Display Options’ meta box and choose a new column layout.

Hiding Page Titles

Sometimes it is handy to be able to hide page titles (the title displayed on the page, not the browser page title). This is easily done in Flexr. In the ‘Page Display Options’ meta box select the ‘Hide single Page title’ check box and click the update button to save changes. When you view the page the title will now be hidden.

Need More Help?

If any of the above doesn’t make much sense then please let us know! We want the documentation to be as helpful as possible. And we can’t do that without your feedback! So please do contact us with any comments about this document. 🙂

Don’t forget if you start to install Flexr but then decide you’d prefer us to do all the work, then we can do that for you.

First published November 30, 2016