A Look At The Upcoming WordPress Front-End Editor
The cool folks that build WordPress are always working on new features. These future-features are first packaged as plugins so they can develop them outside of the WordPress core. One of the cool features on the horizon for WordPress is the Front-end Editor.
To give you a taste of what’s to come, in this article I take the front-end editor for a spin. I’ve created both pages and posts in both WordPress 4.1 and 4.0.1. I’ll show some of the problems that I had, what I like, and what I’d like to see added.
First, let’s answer the question: why do we need the front-end editor in the first place? That question is best answered by looking at the current visual editor.
Current Visual Editor
The current method of creating a post or a page is to select New at the top of the screen, and then choose Post or Page. This takes you to the visual editor where you can create to your heart’s content.
There are a few issues with this. For one you have to leave your current screen and load another screen. For another, the visual editor doesn’t look like your website. The content within the visual editor might be considered WYSIWYG (what you see is what you get), but you still don’t get to see what it will actually look like on your website – within the framework of your theme.
To see what it will actually look like you have to hit Preview, which opens up another page where you can view what it looks like on your actual site. Then, you have to make any adjustments blindly on the back-end and then preview it again until it looks the way you want it to.
None of this is hard to do, but it can be time consuming. If you have to do this a lot it can be very time consuming. The folks at WordPress are hard at work on a solution to this, however: the Front-end Editor.
The Front-end Editor lets you create your pages from the front-end of your site. You no longer have to navigate to the back-end, create a page that you’re not sure how it’s going to look on your site, preview it before you publish, and then publish. Now you can create the page directly on the front of your site so you see exactly how it looks on your site as you go.
After installing, there are no instructions on using it. Also, my screen didn’t show the features that appear in the image on the download screen. Here’s a look at how I used it and what I found.
Taking the WordPress Front-end Editor for a Test Drive
I installed the plugin on a test site with WordPress 4.1 and Divi, and WordPress 4.0.1 with several other themes.
Creating a New Page
Normally, clicking New would take you to the visual editor. The front-end editor leaves you on the home page and gives you fields for the title and content, so you can create the page on the front end instead of the back end. I just typed a title for the page where it says Title.
Under the title it will show you the permalink. I can click on it if I want and make any changes right on the screen.
Clicking Add a block brings up several things that I can place on the screen. They are:
- Audio Playlist
- Video Playlist
- Horizontal Line
- Read More
- Page Break
If I don’t want to place any blocks I can just start typing. After I type what I want, I can type in the area under the start of my text and the option to add a block appears.
Formatting the Text
I could edit my text any way I want to by double clicking on the words. My choices to edit were:
I didn’t see the choices for paragraph, address, pre, or header 1. Since this is still in development, I’m assuming a lot has changed since they took the screenshot for the plugin page.
Clicking on any of the media options opens the media library where you can choose from your library or upload to the library. This is the regular Insert Media screen, so all of the features you expect are here: Create Gallery, Set Featured Image, Insert from URL, Upload Files, Media Library, Attachment Details, and Attachment Display Settings.
For media, I uploaded some pictures that I took with my cell phone. I had some trouble getting my media to show up where I could select it after it uploaded if I chose Image. Choosing Gallery worked perfectly.
I uploaded images on another test site that used WordPress 4.0.1 and had no issues with images. You can click on the images to set the alignment, or click the pencil to go to the edit screen. The edit screen will appear as an overlay over the page.
Updating the gallery is simple. Just click on the gallery itself and select the edit button. This takes you back to the Edit Gallery screen where you can upload new images.
Adding a Block
I wanted to add a block after the gallery. I clicked under the gallery, but the option to add a block didn’t appear. I went back to the first block and placed my cursor at the end of the last sentence and hit enter several times. This moved the gallery down and created three more areas that I could add content to.
I added new content in one of the blocks. I then cut the gallery and pasted it in one of the blocks above the content. This essentially did what I wanted to accomplish, but I wanted to be able to click under the gallery and start typing.
After a few minutes of toying with it, I figured out the problem. The Add a Block area appears when you hit the enter key. I placed my cursor at the end of the gallery and boom! I could add a block after the gallery.
Tip – if you want to add a block and the option doesn’t appear, place your cursor after the last item before the area you want it to appear and hit enter.
You can go back and delete any of the blocks you want. If it has content, you can cut it and paste it somewhere else or just delete it. For empty content blocks you can just delete them. If you choose to leave empty content blocks they will leave blank spaces within your content just like hitting enter in the visual editor.
Edit in Admin
Selecting Edit in Admin takes you to the visual editor in the back-end. You can edit just like any post. I selected the Add Media button and I could add images as normal. So, the problem I had on the front-end with adding images didn’t happen on the back-end.
You’ll have to go to the back-end to make adjustments to page attributes and make any SEO changes you want to make. Everything else can be adjusted from the front-end.
Save or Publish
Scrolling to the bottom or top of the screen brings up a tab at the bottom of the screen. From here you can save as draft, pending review, or publish the page. Whichever you choose, you will stay on the screen you’re currently on and you can continue your edits. In other words, you stay in edit mode. Hit Edit Page at the top of the screen and you’re placed in regular view mode. Select Edit Page again to go back to edit mode.
Creating a New Post
Creating a post works the same as creating a page, but with the addition of categories. You can choose from categories that you already have or you can create new categories and place them under a parent category.
Everything else you can do with Pages is available for Posts including adding and editing media, adding and editing text, changing the post title, changing the post permalink, and changing the post author.
You can open the category selection popup by clicking on the category name under the post title or by clicking the category symbol on the bar at the bottom of the screen.
You have to go to the back-end in order to add tags, handle SEO adjustments, or make adjustments to the post date and time. Just like Pages, you can make any changes in the back-end you want because it works just like a regular post.
Switching from the Back-end to the Front-end
If you select to add a new post or page while you’re in the back-end you’ll be taken to the visual editor in the back-end. If at any time you want to switch from the back-end to the front-end, select the Preview button. It will take you to the front-end, but you’re not in edit mode. Simply select Edit Post at the top of the screen and you’ll immediately be placed into edit mode and you can continue your edits on the front-end.
This method works, but it does open up in a new window and you have to select to switch to edit mode. I’d like to see a button added that would make the switch instantly in the same window and place you in edit mode.
What the Future Holds
What could this mean for the future of WordPress? For one thing, we will have true WYSIWYG within the theme of our WordPress websites. We would see how the post or page would look as we develop it because we are creating it directly on the home page. You create the title of your post or page in your theme where your readers actually see it. This will show you how it fits and looks on your screen (of course it will be different for many readers, but still), you can see how your images and text look without having to hit preview and look at it in another window. It will generally speed up the posting process.
I can see where they’re going with this and I like it. These kinds of features have been available for other platforms (such as Weebly), and there have been some plugins (albeit expensive) that accomplish this for WordPress. But soon it will be a free built-in feature for all to use.
For now this is working in plugin form. Eventually it will be built into WordPress as a core feature.
They’re still working the bugs out. For example, there are a few issues with images on WordPress 4.1. So it might be a little while before we see the front-end editor integrated into WordPress core. When it is implemented, I believe it will be a welcome addition to the WordPress feature set. Posting will be faster and smoother, and WordPress will have a true WYSIWYG editor for the front end.
Have you tried the WordPress Front-end Editor plugin? Was you experience like mine? I’d like to hear your thoughts in the comments below!
Article thumbnail image by astudio / shutterstock.com