Front-end Editor

Front-end Editor: Version 2.3

Consistent Buttons

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!

Front-end Editor: 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!

Front-end Editor: 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.

Front-end Editor: 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.

Front-end Editor: Version 1.9.3

This version uses an even better WYSIWYG editor, namely CLEditor:

rich editing with 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:

Also take a look at the new plugin wiki.

Front-end Editor: 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:

tooltip

When you click a link inside the rich editor, a gmail-like tooltip will appear:

link tooltip

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

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.

Front-end Editor: 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.

Front-end Editor: 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 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>

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

Front-end Editor: 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

Front-end Editor: 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 . '&lt;/li>';
?>
</ul>

Finally, you can now edit all widget titles, not just titles of text widgets.

Other enhancements:

Front-end Editor: Version 1.5

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:

image swapping

NicEdit is in, jWYSIWYG is out

NicEdit is a more mature visual editor than jWYSIWYG, but still lightweight.

visual editing

Two important benefits:

Other improvements

If you’re having trouble with the new version or have a feature request, hit the support forums.

Front-end Editor: Version 1.4

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:

Thanks to those who suggested improvements and did beta testing.

Front-end Editor: Version 1.3

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

Front-end Editor: Version 1.2

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:

Front-end Editor: Version 1.1

Version 1.1 adds a few usability improvements:

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

Front-end Editor: Loading only on certain pages

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.

Front-end Editor: Version 1.0

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.

Front-end Editor: Version 0.9

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

Front-end Editor: Version 0.8

Front-end WYSIWYG Editor

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.

Front-end Editor: Version 0.7

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.

Front-end Editor: Version 0.6

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: Version 0.5

Front-end Editor in action

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

This is just the first version and more features are still to come. What I have in mind: