Upfront Review: Customize Everything Through a Front End Editor

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.

Upfront Review Child Themes

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.

Upfront Review Spirit Starter Theme

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.

Upfront Review Text Editing

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.

Upfront Review Dragable Elements

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.

Upfront Review Region Settings

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.

Upfront Review Grid Layout

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.

Upfront Theme Installation

Clicking on the ‘Customize Theme Using Upfront’ button on the front end view of your website launches the editing interface.

Upfront Review User 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.

Upfront Review Inspect Element

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.

Upfront Review Swap Image

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.

Upfront Review Post List Settings

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.

Upfront Review Select a Post

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.

Upfront Review Post Editor Small

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.

Upfront Review Post Editor

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.

Upfront Review Typography

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.

Upfront Review Colour Settings

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.

AuthorJoe Fylan

Joe enjoys sharing what he's learnt from using WordPress, in order to help others build the websites they need. If you want more helpful content, check out his blog, or visit his freelance writing services portfolio.

3 replies to Upfront Review: Customize Everything Through a Front End Editor

  1. I have used WPMUDEV Professional for one year and I have been left exasperated by their incredibly bad service.

    They have a couple of great plugins, they also offer themes which for me look awful, but that’s not a compliant, because I wasn’t after themes from them.

    The main reason to subscribe to their services, in my opinion, is the prospect and promise of a support facility for when your WordPress website goes wrong. But unfortunately, that’s where they really go wrong too because the service they offer is truly awful.

    I’ve had several instances where I’ve required assistance including two emergency situations where they really let me down.

    To explain further, imagine you have a really important fault with your website that needs to be fixed fast because your website users are really affected and complaining to you constantly via email. You raise a support issue with WPMUDEV and you hear nothing for 24 hours. After that 24 hours someone comes back to you with a question – you answer it immediately but it’s another 24 hours before they respond with another question.

    If this is what you are looking for in a paid support service, then you will be happy, otherwise, you would get almost the same support from the WordPress Support forums for free. The only and important difference I should point out is WPMU DEV can log in to your website to investigate problems, they’ll just take as long as they like to get around to it.

    The concept of what they proffer is compelling from the support perspective but the service level they provide is simply dire. They offer you no turnaround times, no guarantee by when someone will respond to you.

    My hosting company @Siteground’ (whom I couldn’t recommend enough) resolved all of the issues that WPMUDEV didn’t promptly.

    I really recommend not using this company.

  2. Not sure what “Dice” above was expecting from the support systems at WPMUDEV. Looks more like someone that doesn’t know what they are doing expecting a subscription plugin service to fix all manner of WordPress mistakes (probably caused by him??)

    IT support is extremely hard to measure in terms of time (especailly when they are still troubleshooting).

    Generally, I am really pleased with the support they give, but can understand amateurs might be frustrated when problems aren’t resolved instantly.

    I have had a number of config issues with their plugins that have always been resolved promptly, which to me, isn’t always instant 🙂

    Also, not sure what this guy’s problem is, the Upfront framework is extremely good and our company is in the process of moving over to it for a number of larger projects.

  3. Dice, I can understand – it is a real problem when you are running a website which people are paying you to use and then you cannot sort out hassles quickly.
    I am also not particularly impressed with the Upfront themes. …
    And I look at the two sites in the Showcase and quite frankly I am appalled. Not only are both of the sites very simple but I find them loose, scrappy and unprofessional. (And this is the best that they have to show?)
    I am currently a WPMUDev member and have been so for over five years now. I have had service which has ranged from pretty good to absolutely appalling (with queries not being addressed for weeks through to about a 36-hour response time).
    I have always used a Genesis theme in the past and of course am now looking at Upfront – but I am really battling with it for a few reasons:
    1. The starter themes are sooo simplistic that I basically have to completely design a theme from scratch to allow me to run even a basic magazine website. This is a huge undertaking.
    2. I have tried to add in a few extra columns with duplicates of a module and it just does not go there.
    3. I have not seen any examples of the really useful modules being added into Upfront: Membership Pro, MarketPress, BuddyPress, particularly – which ARE the main reason to go with WPMUDev in the first place.
    4. I am really battling to find ready-made Upfront on the open market to form at least a basis to start working from.
    5. I am worried that if I build the new sites I am currently looking at still using a Genesis theme, that the new WPMUDev modules will not work very well.
    Overall, besides for very simple, flimsy websites with some nice graphics, a gallery, slider and a few pages of really spread out text which makes it very difficult to read quickly – then these sites are not for you.

Leave a Reply

Your email address will not be published. Required fields are marked *