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
    1. 4.1 Global Background
    2. 4.2 Regions
    3. 4.3 Global CSS
    4. 4.4 Fonts
    5. 4.5 Theme Colors
  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

The Upfront Builder is a plugin which allows theme creators to export their customized Upfront starter themes, and build completely custom Upfront themes from scratch.

9.1 Requirements

Link to chapter 1

You will need to have Upfront core installed on your site to use Builder. Builder is a plugin, so it will not be installed in your themes directory with other upfront files. Instead, it will need to be installed in the plugins directory. If you’re downloading Builder via the WPMU DEV Dashboard, we’ll take care of this for you. Make sure your themes folder is writeable, so new themes you create can be added to your /wp-content/themes/ directory.

9.2 Options

Link to chapter 2

When Builder is installed and activated, you can access the settings and features in the Upfront tab in your WordPress admin area.

UFtab

Click Builder.
Choose an installed Upfront child theme to modify, or to create a brand-new child theme from scratch.

builder_ui

9.3 Modify Existing Theme

Link to chapter 3

Modifying an existing child theme is the process Upfront veterans are accustomed to. It’s ideal for users who like the layout or features included in one of our starter themes, but want to make some adjustments to add their own touch. You’ll find the Modify Existing Theme settings in the bottom pane of the main Builder screen. Any starter themes you have installed will show here, and if one of our starter themes is the active theme on your site, you’ll see a blue bar indicating as such. If you’ve already created your own modified or new theme, you’ll also see it listed here.

There are three options for working with your existing themes.  The first button you see on my Demo Theme below, with the download icon, allows you to download a .zip archive of the selected theme. This is handy when you want to use a theme you’ve modified on additional sites. The button in the center of the theme thumbnail will let you modify the theme information, including the theme thumbnail, author name, author URL, an option to include the theme’s images when you export it, and an opportunity to make your newly created theme the active theme on your site. The Edit in Builder button does just what it says, it opens the theme inside the Upfront Builder so it can be modified.

ModifyTheme

themeinfo

 

9.4 Create New Upfront Theme

Link to chapter 4

Creating a new theme only requires you to give the theme a name to get started. Later, you’ll be able to add all the standard theme information we covered above.

namenewtheme

When you’ve given your theme a title, click “Start Building” to load the Upfront Builder.

A short tour of Upfront Builder features displays the first time you run the editor from the Builder. You can revisit this tour at any time if you need a refresher.
The tour covers:

  1. Media and Sprites – images, video, audio, and other media files stored in the media library can be accessed here. Sprite management is an advanced feature for designers to create re-usable UI images stored outside the media library.
  2. Layouts – Layouts are the core pages of your site-i.e. About, 404, single and archive pages.  
  3. Fonts – Choose from 750+ Google fonts to make your text sparkle. Pick fonts before you begin adding elements for best results.  
  4. Saving – After building your masterpiece, the last step will be to save your new or newly modified Upfront theme. We’ll come back to this step after we revisit the Upfront design process, below.  

 

9.5 Make Your Masterpiece

Link to chapter 5

This is your blank canvas.
This is your blank canvas.

 

9.6 Save Your New Theme

Link to chapter 6

When the new or modified theme is complete,  you can download it to use on other sites. This process is very simple. When your new theme, or newly modified starter theme is complete, save it and exit the Upfront editor. Go to your wp-admin area, then to Upfront > Builder. You’ll now see your new theme listed in the bottom panel. Hover over the theme, then the click the download button. The theme will be saved as a .zip archive on your local device/computer, which can then be uploaded to any site with Upfront core installed.

You are free to do whatever you want with the new themes you create. You can install them on all your WordPress sites, all your client’s sites, all your mom’s friend’s sites, and you’re more than welcome to sell them as Upfront starter themes. If you decide to sell your themes, be sure to link your potential customers to WPMU DEV. Upfront core must be installed on any site where a starter or custom theme will be used.