Billed by its creators as “the future of WordPress” Upfront is a new website builder and content editor tool that was launched in early 2015 by WPMU DEV.
Upfront includes a selection of starter themes for your WordPress website. After you’ve made a choice, you can then begin customizing almost every element of your website, all through a visual, front end, drag and drop interface.
Upfront also replaces the default WordPress post and page editor screens to bring point and click, in line editing to WordPress. So whether you want to completely redesign the starter themes to build your own custom website, or you just want to make adding new content to WordPress more intuitive, Upfront could be the tool you’ve been waiting for.
To find out if this is the best builder tool for WordPress, read on for our full Upfront review. Alternatively, jump straight to the demo to experience it for yourself.
Upfront Review: What This Site Builder Tool Can Do
Upfront works on the parent child theme relationship. This means Upfront is installed on your WordPress website as the core, parent theme, and then you can choose from one of the child themes that have been built for it.
These child themes then work as the foundation of your website. At the time of writing, there are just three child themes to choose from: Fixer, Scribe, and Spirit. Although, more designs will be added in the future.
They all look good and would work equally well as a standalone theme, without any customization required.
Front End Drag and Drop Editing
Once you’ve chosen a child or starter theme, you can get down to customizing it.
As mentioned, all the editing and design work takes place through an intuitive front end, drag and drop, visual editor. This means what is you see is really what you get. There is no need to edit any of the underlying code yourself or switch windows to get a preview of your work.
Floating Regions, Unlimited Page Elements
When it comes down to building your custom page layouts, Upfront makes use of regions and elements. The available elements – 16 at the time of writing – can be dragged and dropped onto your website pages. Not only can you drag and drop page elements, such as images, into place, but you can also edit text in line.
This in line editing takes place simply by double clicking on the text, and then starting to type. You also get access to a good set of formatting controls while adding and editing the text through the front end editor.
As well as being able to drag and drop text areas and images into place, and then move them around through the visual interface, there are plenty of other page elements to choose from. At the time of writing, these draggable page elements include: sliders, tabs, accordions, image galleries, videos, forms, buttons, and maps. You can also use the code element to add custom code to your design.
Furthermore, any of the widgets that are active on your website, whether from third party plugins, WordPress core, or custom built options, can be inserted into your page designs. This really gives you an almost unlimited amount of scope as to what can be included in your website layouts.
Full Region Customizability
Each of the regions that make up your page, and the elements they contain can be further customized. This includes changing the size; position; background type – including video, slider, map; and other appearance settings related to the type of region being edited. By clicking on the edit icon, a context sensitive panel is displayed, through which you can make your changes.
The changes are all applied in real time. There is no need to refresh your page, thanks to the live preview effect of this front end editor.
As you drag and move the regions around the page, you will notice that they float, rather than being fixed to a grid. This means you are able to create some truly free flow designs, rather than being constrained by arbitrary boundaries.
However, for the pixel pushers out there, Upfront does include an optional, handy visual grid to help you align your page elements more precisely.
Custom Front End Post and Page Editing
With Upfront, each post and page on your website can have its own custom design and layout. All of which can be built through the visual, front end, drag and drop interface.
By removing the need to create posts in the back end of your site, then switch back and forth between the front end preview and the core editor, in order to get the look right, Upfront has already solved one major area holding back WordPress. Thanks to the additional customization and content options, such as the widgets and elements, a whole other realm of possibility has been opened up too.
While you can customize the global header and footer areas that are used site wide, you can also customize those areas on an individual post and page basis for a more custom look for a single page.
Other notable features of Upfront include a fully responsive layout for the growing army of mobile users accessing websites through their smartphones and tablets. As you would expect from the WPMU DEV team, this theme is fully Multisite ready.
Custom post types are also supported, and can be edited in the same way as the regular blog post type. There is also a handy, but brief, tour to help you get started when you first launch the customizer interface.
The key feature of Upfront is that all the work and content editing takes place through the front end editor. This is what the developers of the project hope will separate it from the competition. While some other WordPress page builders do offer a front end editor for customizing your website, Upfront seems to be the only one where all of the action takes place through the front end, visual interface, including blog post content creation.
Upfront Review: the User Experience
After you’ve uploaded Upfront to your website and chosen one of the starter, child themes for it, you can begin working on your website.
Clicking on the ‘Customize Theme Using Upfront’ button on the front end view of your website launches the editing interface.
Taking the optional tour walks you through the main features of the plugin. Alternatively, you can just jump straight in and get started. As the starter themes are populated with all the features of a modern WordPress theme, you can begin by inspecting and customizing the existing elements.
Swapping out the images for your own is as easy as clicking on them, and then dragging and dropping the new image into your media library. However, you are free to delete as much of the pre-existing content you like. This allows you to get really creative with Upfront.
When it comes to adding the available elements into your page layout, it really is just a case of dragging and dropping them anywhere on the page. Once added to the page, each element can be customized in its own way. For example, the posts element can be modified to display single, or lists of posts, in your layout.
This is great for creating a custom post archive page, or highlighting your best posts on the home page of your website. The settings for the post element gives you a lot of flexibility for how that content is displayed. This covers not only which posts to display, but also which parts of the posts to include. This covers: the post date, comment count, featured image, and much more.
As well as using Upfront to design and customize the home page of your starter theme, it is also used when working on posts and pages. This is great as it creates a seamless and consistent interface for designing the website and creating content.
To switch to the post and page view, simply click on the Posts / Page link, and then select which existing piece of content you want to edit, or create a new item.
The chosen post then opens up in the Upfront editor. This allows you to simply add content to it, or give its design an overhaul. Replacing the clunky WordPress post editing system of having to switch windows to preview your work delivers an immediate upgrade to the core software.
Most of what you can do through the default WordPress post edit screen, such as add a featured image, editing the post title, and adding the post content, can be done through the visual interface of Upfront.
If you want to make changes to the typography of your website, Upfront gives you an easy way to do so. Through the theme settings panel you can choose a type element, such as Heading 2, and then edit the font used. This is then applied globally, throughout your site.
You can still customize the appearance of the text in individual elements. However, by using the theme settings you can quickly apply the changes to your entire site. The same applies to the site colours, although the interface doesn’t make it clear which element of your website, each of the colour settings apply to.
For making quick changes to the appearance and content of the starter themes, Upfront is very easy to pick up. However, when it comes to making more far reaching customizations, or building your own page layouts from scratch, it will require a larger time investment to get to grips with.
This is pretty reasonable. Especially considering the scope and functionality of this tool. Like other WordPress themes and plugins of this type, the more you put into it, the more you will get out of it in the long run.
Pricing
Upfront can be yours by joining the WPMU DEV membership club. This gives you access to Upfront, as well as over 350 plugins and other themes. Membership fees start from $24.50 per month on the annual plan and go up to $99 on the pay monthly option.
After signing up, and for as long as you are a member, you get access to the 24/7 support forum and the daily live chat sessions. To get the full pricing options for Upfront, visit the WPMU DEV website.
Conclusion
WPMU DEV was quiet for a while when it came to releasing new WordPress themes. With the release of Upfront, it’s easy to see why. With over two years in the making and “over a million bucks spent” Upfront is certainly an important project for the WPMU DEV team, and perhaps WordPress itself.
In the announcement of Upfront, its creators make an interesting point about the competition of this tool and of WordPress in general. While services like Squarespace, Wix, and Weebly currently offer less development and bespoke customization and expansion opportunities than WordPress, they do offer a more user friendly interface for publishing content and making your website look the way you want.
Upfront aims to bring this type of customization interface to WordPress. Overall it does a pretty good job. If you want to make WordPress more user friendly, either for yourself, your clients, or those you recommend this software to, Upfront is one option available to you.
Choosing Upfront does involve tying yourself into a third party solution; and while it would be nice if WordPress could offer this sort of editing experience – either as part of core, or through an ‘official’ add-on, for the time being there is Upfront.
While coders and developers who are able to design their own themes, or customize off the shelf products won’t have much need for Upfront, anyone else who has ever wanted to create their own custom page layouts and designs should definitely take the online Upfront demo for a test drive.
It’s still early days for Upfront, but they’ve gotten off to a good start. As more starter themes come online, and additional elements are introduced, this user friendly editor should really come into its own.
Find out more about Upfront or try the demo now
Disclaimer: I do write posts for the WPMU DEV blog – the creators of Upfront – on a freelance basis; however the opinions in this article are all my own and are not influenced by this relationship at all.