Version 2.2

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!

Version 2.1

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.

Version 2.0

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.

Version 1.9.3

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.

Version 1.9.2

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

Version 1.9

WordPress 3.0 is here, and so is a new version of Front-end Editor.

Fully editable widgets

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.

Version 1.8

Tooltip

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.

Restyled buttons

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.

Common Mistakes In Themes

Although Front-end Editor tries to be compatible with as many themes as possible, there’s only so much it can do.

No wp_footer() call

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 href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>

This causes all sorts of problems. You should use the_title_attribute() instead:

<a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>

No id & class attributes for dynamic sidebars

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".

Version 1.7

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

Version 1.6

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