Call For Testers: Front-end UI

Introduction

The second most requested feature on our roadmap is support for a front-end UI. In WPCD V 4.16 and prior, admins and end-users both use the wp-admin area to manage their servers and sites. Role-based security combined with wpcd-specific WordPress capabilities is used to restrict end users to their own servers and sites.

With this update we’re pleased to report that a beta of the front-end UI is now available. It is designed to be used by your end customers, not necessarily by your admins.

If you’re looking to get your customers away from wp-admin and use a highly customizable front-end UI instead, we need your help to test and stabilize this feature.

What Can You Expect?

Site & Server Lists

Your server and site lists on the front-end will be rendered as double-rows of cards by default. Don’t worry if this is not your preference – it’s easily customizable with a little css to change the number of cards, rows, colors etc. We even have a document we’re working on that will show you how to take our default ‘light theme’ and turn it into a dark theme as shown above.

We chose the cards UI because we expect that most of your end-users will only have a few sites. And it renders nicely on mobile devices.

Still, with a tiny amount of CSS and flipping some new toggles inside WPCD, you can easily get to a single-row list:

Site and Server List Features

The key thing about the site and server list is that the rows and columns are based on CSS GRID. This means that it’s super easy to change columns and apply styling.

It also means that things will render nicely on mobile devices.

As with anything related to WordPress, your theme will play a role. For example, the color of the page background for your theme will matter if you want a true dark mode. By default most WordPress themes include a light background for pages so you’ll likely need to apply some CSS to change that.

Site and Server Detail

When your users open up a server or site, they will be greeted with the same tab-based interface that is shown in wp-admin.

The tabs shown or hidden on the detail screens are still subjected to the security applied in settings or otherwise restricted by role.

Default Pages

When the plugin is activated, three default pages are added:

• Cloud Apps
• Cloud Servers
• Deploy Server

These pages should not be deleted – they are where your front-end data will be rendered.

However, you should probably change the page template to something that is full width – our lists take up a maximum of 1400px which is larger than the default content area in most themes.

You should also consider reducing the header and footer area of these pages so that more data can be shown on the screen. If you’re using a page-builder, most of them allow you to do this relatively easily.

The short-codes on these pages can theoretically be used on other pages. BUT, navigation and other connected actions will not work. So it’s important that these pages are not deleted since they are linked behind the scenes.

Showing & Hiding Data

We have created an extensive set of options to allow you to show and hide the cards. For example, you can hide cards if you want to reduce the number of rows that each server and site take up in the lists.

Any card we show by default can be hidden and any that we hide by default can be shown.

(If you look closely you’ll see that each card correspond to a column in wp-admin.)

In a small number of cases we allow individual elements on a card to be hidden or shown. For example we allow you to hide the provider name without hiding the entire card.

Changing Colors

You don’t have to use CSS to change the colors used on the front-end. You can customize them directly in the WHITE LABEL tab in settings.

The full documentation for these are not available yet so you’ll need to play around with them to see what elements each color affects.

The key thing here though is that the front-end colors are separate from the wp-admin colors (unless you use custom CSS of course.)

Custom CSS

You can use a number of techniques to apply custom CSS. But we include a simple text editor in the WHITE LABEL settings area that will allow you to inject any custom CSS you enter there onto the WPCD pages.

We have carefully constructed a set of classes that allow for each card and each element to be individually targeted. This should allow for most use-cases.

Other

Only the primary metabox is shown on the front-end with this release. All other metaboxes are NOT included. We will not be including those with this release.

The wp-admin UI will still be the primary area that admins will work in. It has a lot of functionality that the front-end does not. For example, most of our micro-crm features can only be used in wp-admin. And a lot of the sophisticated searching and filtering you expect will only be available there.

How To Get It

You can download a version with front-end support from our dev branch on github and upload to your plugins folder.

Reporting Issues

We’ll be tracking issues on the WPCloudDeploy GITHUB issue tracker. Please report issues there instead of using a support ticket.

Release Date

As you might already know we don’t comment on release dates – we tend to release things when they’re ready instead of forcing an arbitrary date. You can track our progress on Github and keep taking new versions out for a spin at any time.

Thank You

Thank you in advanced for assisting us with testing this! We know that we can’t get this important feature out the door without your help and feedback.