9. Using the Upfront Builder
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 RequirementsLink 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 OptionsLink 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.
Choose an installed Upfront child theme to modify, or to create a brand-new child theme from scratch.
9.3 Modify Existing ThemeLink 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.
9.4 Create New Upfront ThemeLink 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.
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:
- 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.
- Layouts – Layouts are the core pages of your site-i.e. About, 404, single and archive pages.
- Fonts – Choose from 750+ Google fonts to make your text sparkle. Pick fonts before you begin adding elements for best results.
- 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.6 Save Your New ThemeLink 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.