Since the initial 2.0 release, the editing UI has gone through constant improvements.
As you can see in the screenshot above, the Save/Cancel buttons now appears in place of the Edit button. This provides a consistent, easy to reach location and makes the UI more uniform in general.
As a side-effect, you can have multiple elements open for editing at the same time again.
JavaScript API
Besides the PHP hooks, Front-end Editor also has a JavaScript API, which you can use to customize the editing experience further.
Vulnerability Fix
There was a demo file bundled in Aloha Editor which allowed arbitrary file uploads. The offending file has been removed in the current release of Front-end Editor.
Therefore, updating is highly encouraged!
Editable groups
It’s now possible to create arbitrary groups of editable elements. This opens the door for a lot of possibilities. For example, you can now edit all fields of a post at once, instead of one at a time. Go to the FEE settings page to enable it.
Post creation
One feature that was often requested was the ability to create posts from the front-end, not just to edit them. This is now possible by using the fee_inject_dummy_post() template tag.
Aloha 0.20
This release features the most recent version of Aloha Editor available, 0.20.0-RC9. This fixes the jQuery compatibility issues, as well as a bunch of other bugs. Thanks again to Jotschi for lending a hand with this.
Thanks to AppThemes and Jason Buksh for supporting this release financially.
Happy holidays!
This version integrates Aloha Editor, a rising star on the wysiwyg editor scene. Unlike other established editors like TinyMCE, it makes the content editable inline, rather than using an iframe, which means that all the theme styles are preserved.
Also, unlike the rich-text editors previously integrated into Front-end Editor, Aloha is being developed by a whole bunch of contributors and is also backed by Gentics, the company that originally wrote and subsequently open-sourced it.
Jotschi, one of the Aloha developers, was working on a similar WordPress plugin; it just made sense for the two of us to combine our efforts. This release wouldn’t have happened without his help.
This is just the beginning. We have a lot of ideas related to Aloha Editor that we haven’t implemented yet. So, try it out and let us know what you think.
If you’re having trouble seeing the video, try the no sound version.
In previous versions, you entered editing mode by double-clicking on the element. This required all sorts of hacks to make single-clicking on the same element to work.
In the new version, there’s a slick overlay with an edit button that you only have to click once.
Also, as you can see in the video, categories – and hierarchical taxonomies, in general – are now editable via a dropdown, instead of the usual auto-suggest field.
Let me know what you think about the new interface in the comments.
For other support questions, please use the support forums.
This version uses an even better WYSIWYG editor, namely CLEditor:
CLEditor is built on top of jQuery, so it’s more light-weight. Also, it has better controls and is easier to extend. nicEdit hasn’t been updated in 2 years.
The localization files are now split in two: CLEditor strings and plugin strings.
This release also includes a number of bugfixes:
- fixed encoding issues with paragraph editing
- fixed image fields handling
- fixed typo which made spinner not show
- check ‘edit_theme_options’ capability instead of ‘edit_themes’
Also take a look at the new plugin wiki.
Thought I’d do another release before year’s end. It is focused on improving the existing features rather than adding new stuff.
The tooltip looks sexier now. It resembles the one on the iPhone:
When you click a link inside the rich editor, a gmail-like tooltip will appear:
Another usability improvement is limiting the maximum height of the wysiwyg editor to the window height, so that the controls are always visible. This way, you don’t have to constantly scroll up and down from the text you’re editing.
For developers: I’ve moved plugin development to github:
https://github.com/scribu/wp-front-end-editor
WordPress 3.0 is here, and so is a new version of Front-end Editor.
Previously, you could only edit widget titles and text widgets. Now you can edit any widget. You will see the same controls as on the widget management screen.
Custom Post Type Support: Front-end Editor can now handle any post type, not just posts and pages.
Configurable editor buttons: You can now add or remove buttons to the nicEdit panel from the settings page. Props go to lostingraphics.
Improved Overlay Compatibility: No matter what overlay script you use to display your images (Lightbox, Shutter etc.), double-clicking on thumbnails will just work.
Editable term descriptions: You can now edit individual term descriptions, besides titles. See category_description().
Removed “Reset post date” option
I removed it because it wasn’t related to front-end editing per-se. It was a business rule that very few users needed to enforce.
If you were one of them, here is some code you can use to reset the post date, each time you edit a published post:
function reset_post_date($post) {
if ( 'post' == $post['post_type'] && 'publish' == $post['post_status'] ) {
$post['post_date'] = current_time('mysql');
$post['post_date_gmt'] = current_time('mysql', 1);
}
return $post;
}
add_filter('wp_insert_post_data', 'reset_post_date');
Just drop it in your theme’s functions.php file and you’re done.
The new tooltip appears whenever you hover over an editable area.
Jason G. Lemieux was kind enough to help position it and define it’s appearance.
If you don’t need it, you can disable it from the settings page.
This is also Jason’s doing. Aren’t they pretty? :)
Extendable JavaScript
The ability to define your own editable fields was present from the beginning. However, you weren’t able to extend the built-in field types, since they were defined in JavaScript.
Developers now have access to the FrontEndEditor JavaScript object which contains all the field type definitions, as well as additional data.
Although Front-end Editor tries to be compatible with as many themes as possible, there’s only so much it can do.
Lots of plugins, including this one, rely on the wp_footer() call to include their JavaScript files. Open your theme’s footer.php file and make sure you have this line somewhere:
<?php wp_footer(); ?>
Using custom versions of jQuery
Some themes, for one reason or another, use their own jQuery file. When a new version of WordPress is launched, the bundled jQuery library is also updated, but the theme is stuck using it’s own, outdated version.
View the HTML source and make sure the path to jQuery looks like this: wp-includes/js/jquery/jquery.js.
Using the_title() in the wrong places
A mistake I see in a lot of themes is code like this:
<a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink() ?>"><?php the_title(); ?></a>
This causes all sorts of problems. You should use the_title_attribute() instead:
<a title="Permanent Link to <?php the_title_attribute(); ?>" href="<?php the_permalink() ?>"><?php the_title(); ?></a>
If you want to have editable widgets, you’ll have to change code like this:
register_sidebar(array('name' => 'My Sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>
',
'after_title' => '
</h4>',
));
to this:
register_sidebar(array('name' => 'My Sidebar',
'before_widget' => '<div id="%1$s" class="widget %2$s">
',
'after_widget' => '
</div>',
'before_title' => '
<h4>
',
'after_title' => '
</h4>',
));
The important part is id="%1$s" class="widget %2$s".
Let’s get right into it:
Post thumbnail switching
If your theme supports native thumbnails (introduced in WordPress 2.9), you will be able to change them by double-clicking on them.
Editable options
Similarly to editable_images(), you can now have editable bits of text anywhere in your theme. For example:
<?php editable_option('blurb'); ?>
[...]
Today's mood:
<?php editable_option('mood'); ?>
It’s like text widgets, without the widgets. :-)
No more autogrow
If you’ve been using the basic text editor, you’ve probably had your share of frustration with the autogrow script. After switching from Autogrow to Growfield without much improvement, I’ve decided to stick to a normal textarea with a scrollbar.
The rich editor is not affected by this.
Configurable nicEdit
I’ve added two buttons to the rich editor panel: font-family and font-color. More importantly, you can now select which buttons you want to use. Just paste this code in your theme’s functions.php:
function configure_fee_nicedit($config) {
$config['buttonList'] = array(
'bold', 'italic', 'strikethrough',
'left','center', 'right',
);
return $config;
}
add_filter('front_end_editor_nicedit', 'configure_fee_nicedit');
See the available configuration options.
Upgrade instructions
If you have custom code written for the plugin, read on:
Renamed hooks:
front_ed_fields -> front_end_editor_fields
front_ed_allow -> front_end_editor_allow
front_ed_disable -> front_end_editor_disable
Renamed CSS classes:
.front-ed -> .fee-field
.front-ed-{filter} -> .fee-filter-{filter}
.front-ed-container -> .fee-form
The number of editable elements continues to grow with this version of your favourite inline editor for WordPress:
Besides tags and terms, you can now edit categories as well, using the same interface. They all have autosuggest enabled, to make it easier to work with.
Custom fields with multiple values can also be edited now. Here’s a code example:
<ul>
<?php
$values = get_editable_post_meta(get_the_ID(), 'my_key');
foreach ( $values as $value )
echo '<li>' . $value . '</li>';
?>
</ul>
Finally, you can now edit all widget titles, not just titles of text widgets.
Other enhancements:
- optimized script loading
- fixed issue with Internet Explorer
- fixed issue with comment paragraphs
- fixed issues with the
$post global
Straight from the lab, we bring you the latest and greatest in front-end editing:
Swap theme images
Currently, there is no easy way to change an image from your theme. You have to either override the image file through FTP or locate the code in your theme and modify it.
Wouldn’t it be nice if you could just double-click on the image you want to change and then just do it, without leaving the page you’re on?
Good news: now you can, with a little bit of tweaking. To make an image editable, you have to make a one-time edit to your theme.
I chose the Cutline theme as an example:
In header.php, I replaced this:
<img src="<?php bloginfo('template_url'); ?>/images/header_1.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 1" title="<?php bloginfo('name'); ?> header image 1" />
with this:
<?php editable_image('header-1',
get_bloginfo('template_url') . '/images/header_1.jpg',
array('width' => 970, 'height' => 140, 'alt' => get_bloginfo('name')));
?>
The first argument is the image name
The second argument is the default URL
The third argument is optional and it’s used for adding extra attributes to the ![]()
element.
Now, when I double-click on the header image, the Media Library box pops up. From there, I can choose any image I want to put instead of the current one:
NicEdit is in, jWYSIWYG is out
NicEdit is a more mature visual editor than jWYSIWYG, but still lightweight.
Two important benefits:
- more inline than ever: when editing the post content, the editor preserves all the styles from your theme, making it even more seamless
- autogrow for all: autogrow is native to NicEdit, which means that it should work reliably in all browsers
Other improvements
- improved single paragraph editing
- better handling of text widgets
- compress JS & CSS for faster loading
- compatibility with Ajaxed WordPress plugin
- added Estonian translation, by Aivar Luht
If you’re having trouble with the new version or have a feature request, hit the support forums.
Over the last several weeks, there has been a steady stream of improvements going into Front-end Editor, largely as a result of your feedback. I’m happy to see people are using the plugin in interesting ways.
First of, several users requested a way to allow only certain posts to be editable. This is easily done now, with a few lines of code. See examples here.
Secondly, there are two new editable fields: If you’re on a category archive and your theme uses single_cat_title(), you will be able to edit the category title on the spot. The same goes for tags.
Other improvements:
- added $echo parameter to
editable_post_meta()
- don’t load CSS or JS if the current user can’t edit any of the fields
- switched from Autogrow to Growfield (fixes IE compatibility)
- added Georgian translation (thanks to Levani Melikishvili)
Thanks to those who suggested improvements and did beta testing.
A new release with a lot of small but noticeable improvements:
Two new editable fields
In version 1.3, you can also edit your site’s title and description. You won’t go changing those very often, but it’s nice to know you can. :)
Skinable WYSIWYG editor
The rich text editor now respects image alignment. What’s more, you can make the editor window look however you want. Just add your own CSS into a file named front-end-editor.css and place it in your theme’s directory.
If you’re a JavaScript ninja, you can go even further and tweak it’s behaviour using event triggers baked into the new version. See /inc/editor/editor.js.
Slug updating
When you edit a post, the post’s slug will also be updated, when appropriate. For example, say you have a post titled “My Greatest Post Ever”.
If the slug is the default one - “my-greatest-post-ever” – and you change the title, the slug will also be updated.
But, if you had previously set the slug to “greatest-post”, it will remain unchanged when you edit the title.
Other improvements
- option to disable highlighting
- compatibility with the postThumbs plugin
- added Polish translation
- better XHTML markup
As you might have noticed, a lot of work is going into this plugin:
Version 1.2 adds another editable field – the author description. It works if you have this somewhere in your theme:
the_author_meta('description');
Or, if you’re on an older version of WordPress:
the_author_description();
Besides that, several other improvements have been included:
- while hovering over editable field, it will be highlighted
- added experimental wysiwyg autogrow
- it should generate valid xHTML
- html code is cleaned up before saving
- added Portuguese translation
Version 1.1 adds a few usability improvements:
- a spinner is displayed while loading and saving data
- pressing escape while editing will remove the form
- pressing enter while editing a text input will submit the form
Also, it allows you to edit custom taxonomies, just like you would edit post tags. I recommend the Simple Taxonomies plugin for creating custom taxonomies.
Here is a code example:
<?php the_terms($post->ID, 'mytax'); ?>
To make it work in WP 2.8 *, you have to open wp-includes/category-template.php and find the_terms() function. Then, you have to make it look like this:
function the_terms( $id, $taxonomy, $before = '', $sep = ', ', $after = '' ) {
$term_list = get_the_term_list( $id, $taxonomy, $before, $sep, $after );
if ( is_wp_error( $term_list ) )
return false;
echo apply_filters('the_terms', $term_list, $taxonomy, $before, $sep, $after);
}
___|_
* You don’t have to do this if you’re using WordPress 2.9 or newer (see #10600).
Here is a foolproof way to make only parts of your site editable:
function front_editor_disable() {
if ( ! is_single() )
return true;
}
add_filter('front_end_editor_disable', 'front_editor_disable');
Just add that code in your theme’s functions.php file and you’re good to go: the plugin will work only on single posts.
Feel free to replace is_single() with whatever condition you need.
The new feature in this release is the possibility of editing a single paragraph in a post, instead of the whole post. If you want to go back to the old behaviour, you can uncheck the new checkbox from the settings page.
Speaking of which, the settings page is now split into two dashboard-like boxes.
This version adds post meta editable fields. These are a little different from the others. To add a custom field editable meta, you have to add something like this inside The Loop in you WordPress theme:
<?php editable_post_meta($post->ID, 'my_key', 'textarea'); ?>
The first argument is the current post id, the second is the custom field key and the third is the type of field you want (input, textarea or rich).
Version 0.8 includes the jWYSIWYG editor for the content. If you don’t like it, you can disable it from the options page.
Also, the plugin is translatable now. See Localization.
This version adds a Settings page under Settings -> Front-end Editor. There you can choose which editable fields are active and which aren’t.
Also, double-clicking should work now for Internet Explorer users.
This version makes it possible to also edit tags inline. However, due to a bug* in WordPress, it won’t work on most themes. If you want this feature you will have to make the following modification to your theme:
Replace the_tags() with echo get_the_tag_list().
Some fixes for the autogrow script have also been added. Props Jean-Paul Horn.
It’s now a lot easier to add new editable fields. I will be writing a post for developers on how to add new editable fields using this plugin.
___|_
* I’ve submitted a ticket, so the bug will hopefully be fixed in WP 2.8.
Front-end Editor is a plugin that lets you edit posts or pages directly from your site. No need to load the admin backend just to correct a typo.
To edit something, just double-click it.
Current Features
- edit title or content
- works for posts and pages
- should work with any theme
- lightweight
This is just the first version and more features are still to come. What I have in mind:
- include WYSIWYG editor
- edit tags and/or categories