1. 1. Upfront Installation and Overview
    1. 1.1 Upfront Basics
    2. 1.2 Choosing and Installing an Upfront Starter Theme
    3. 1.3 Installing the Upfront Builder Plugin
  2. 2. Upfront Admin Settings
    1. 2.1 General Settings
    2. 2.2 User Restrictions
    3. 2.3 Experimental Settings
  3. 3. Upfront Editor Tour
    1. 3.1 Activating the Upfront Editor
    2. 3.2 Basic Editor Tools
    3. 3.3 Media Management
    4. 3.4 Manage Posts and Pages
    5. 3.5 Drag and Drop Elements Toolbox
    6. 3.6 Global Theme Settings
    7. 3.7 How to Enable and Disable Responsive Mode
    8. 3.8 Toggling the Grid View
    9. 3.9 Saving and Exiting the Upfront Edtior
  4. 4. Upfront Theme Global Settings
  5. 5. Upfront Regions and Backgrounds
    1. 5.1 Editing, Adding, and Deleting Regions
    2. 5.2 Region Types
    3. 5.3 Region Backgrounds
    4. 5.4 Custom Region CSS
  6. 6. Upfront Elements
    1. 6.1 Using Drag & Drop
    2. 6.2 Text Element
    3. 6.3 Image and Gallery Elements
    4. 6.4 Slider Element
    5. 6.5 Map Element
    6. 6.6 Menu Element
    7. 6.7 Widget Element
    8. 6.8 YouTube and Like Box Elements
    9. 6.9 Contact Element
    10. 6.10 Code Element
    11. 6.11 Tab and Accordion Elements
    12. 6.12 Button Element
    13. 6.13 Login Element
    14. 6.14 Posts Element
  7. 7. Upfront Presets
    1. 7.1 Default Presets
    2. 7.2 Creating, Selecting, Editing and Deleting Presets
    3. 7.3 Appearance Settings and Preset CSS
  8. 8. Upfront Pages and Posts
    1. 8.1 Create A New Post
    2. 8.2 Create a New Page
  9. 9. Using the Upfront Builder
    1. 9.1 Requirements
    2. 9.2 Options
    3. 9.3 Modify Existing Theme
    4. 9.4 Create New Upfront Theme
    5. 9.5 Make Your Masterpiece
    6. 9.6 Save Your New Theme
  10. 10. Upfront MarketPress and WooCommerce Integration
    1. 10.1 Getting Started with MarketPress and WooCommerce and Upfront
    2. 10.2 Creating Upfront Store Pages with MarketPress or WooCommerce
    3. 10.3 MarketPress and WooCommerce Store Pages in the Upfront Editor
    4. 10.4 Preview of WooCommerce Pages in Upfront Starter Themes
    5. 10.5 Preview of MarketPress Pages in Upfront Starter Themes

Welcome to Upfront!

This guide will introduce you to Upfront as a theme framework. It will instruct you on how to install Upfront core, Upfront starter themes and the Upfront Builder Plugin.

1.1 Upfront Basics

Link to chapter 1

Upfront is a revolutionary theme framework that makes creating beautiful, sophisticated websites intuitive and fun! Our Upfront team has combined the ease of drag-and-drop for beginners with an advanced feature set perfect for professional designers and developers alike.

Upfront Components

Upfront has key three components:

  • Upfront core — This is the framework itself. Upfront core must be installed to use any of our Upfront starter themes or the Upfront Builder plugin.
  • Upfront starter themes — This is our growing library of pre-built Upfront themes. Chapter two explains how to install an Upfront starter theme.
  • Upfront Builder Plugin — The Builder plugin allows you to create your own Upfront themes from scratch or modify an existing theme you’d like to use on multiple sites. The Builder plugin has its own document, “Using Upfront Builder”, where you can learn a lot more about how the plugin works alongside Upfront. Chapter three of this document explains how to install the Upfront Builder plugin.

Upfront Structure

uf-layers-800x581

The diagram above illustrates the structure of an Upfront theme using the Panino theme’s homepage as an example. The structure comprises three layers: Global Theme BG, Regions and Elements. Global Theme BG layer cannot be seen on the Panino homepage. However, if one of the Regions were to be set to a solid color of 0% opacity, Global Theme BG would be visible.

The diagram below is a shortcut, it describes where each of the aforementioned layers can be accessed and edited.

updated_areas-access-800x392

Upfront Behind the Scenes

Upfront works a little differently depending on which method you’re using to modify your theme.

  • Modifying your theme with the Upfront editor, accessed by clicking the Upfront link in your WordPress admin bar, saves all changes to your WordPress database.
  • Modifying a starter theme or creating a new theme from scratch from within the Upfront Builder creates PHP files and a folder structure mirroring average WordPress themes. This method is needed for users who want to distribute the Upfront starter themes they create.

 

1.2 Choosing and Installing an Upfront Starter Theme

Link to chapter 2

We’ve created several amazing starter themes to help you get started with Upfront. Each one was designed for a specific niche, and the beauty of our starter themes lies in their flexibility. If there isn’t a starter theme that fits your particular need, it’s simple to find a theme with elements you enjoy and modify it to fit your needs.

For a general overview on installing plugins and themes, take a look at our Installing WPMU DEV Plugins and Themes doc.

To install a starter theme, you’ve got three options:

  1. Install a starter theme via the WPMU DEV dashboard. This will automatically download Upfront core and install both in your /wp-content/themes folder.
  2. Download Upfront Core and your starter theme of choice from the project pages here on WPMU DEV (links follow each preview picture, below) and upload via Themes > Add New > Upload on your WordPress admin area.
  3. Download as above, unzip the files, and upload the upfront and starter theme folders to your wp-content/themes/ directory via FTP.

Fixer

Fixer is a bold, fun theme ready to entice customers to buy your services.

Fixer Upfront theme preview

Download Fixer

Play with the Fixer Demo

Gillie

Gillie is a theme created for YouTube users who’d like to have a web page to promote their channel, with a hint of the avant-garde.

Gillie Upfront theme preview

Download Gillie

Play with the Gillie Demo

Issue

Issue is a bloggers dream, with a front page your readers won’t be able to resist clicking on.

Issue Upfront theme preview

Download Issue

Play with the Issue demo

Luke & Sara

Luke & Sara was built for photographers, it’s an ideal theme for making photos pop.

Luke and Sara Upfront theme preview

Download Luke & Sara

Play with the Luke & Sara demo

Panino

Panino was built for restaurants, and has been known to make several WPMU DEV team members hungry while working on it. Panino balances a rich use of color with gorgeous imagery and trendy typography.

Panino Upfront theme preview

Download Panino

Play with Panino demo

Parrot

Parrot is designed to help you sell your app. Straightforward and minimalist, Parrot helps present an app in a clean and efficient manner sure to attract attention.

Parrot Upfront theme preview

Download Parrot

Play with Parrot demo

Scribe

Writers and typography lovers will delight in Scribe’s elegant and sophisticated tone.

scribe700x448-1

Download Scribe

Play with Scribe demo

Spirit

Spirit is a soothing, uplifting theme perfect for yoga and dance studios. It will allow you to showcase your space and classes beautifully.

Spirit Upfront theme preview

Download Spirit

Play with Spirit demo

 

1.3 Installing the Upfront Builder Plugin

Link to chapter 3

As its name suggests, the Upfront Builder will not be installed alongside your Upfront themes or Upfront core in wp-content/themes/. It’s installed in /wp-content/plugins/.

Like our other products, you can install via our Dashboard plugin on your site, or by downloading from the Upfront Builder product page and uploading via FTP or via Plugins > Add New > Upload.

Activate the plugin via your WPMU DEV dashboard Plugins page, or via the Installed Plugins tab in your WordPress admin.

If installation was successful, you’ll see an expanded Upfront tab in the admin menu of your WordPress admin area. 

Refer to our Using Upfront Builder Plugin document for more information on using Upfront Builder.