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 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 text 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>',
));

You can use <li>s instead of <div>s. The important part is id="%1$s" class="widget %2$s".

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

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

This post contains technical information for developers who want to add their own editable fields.

We’re going to enable any option to be editable from the front-end.

The filter

The essential element of each editable field is a WordPress filter. You can use either an existing filter, or a custom one.

We’re going to use a new one:

function editable_option($key) {
	echo apply_filters('editable_option', get_option($key), $key);
}

As you can see, editable_option() simply wraps the value returned by get_option() in a filter.

In your theme, you can now write:

<p><?php editable_option('my_option'); ?></p>
 
<p><?php editable_option('my_other_option'); ?></p>

The class

Each editable field needs a class to handle retrieving and saving the edited content.

class My_Editable_Option extends FEE_Field_Base {
	/**
	 * The type of object we're editing
	 * @return string
	 */
	static function get_object_type() {
		return 'option';
	}
 
	/**
	 * Called when generating the HTML on the front-end
	 * Wraps the $content in special markup, if the user has the right permissions
	 * @return string
	 */
	function wrap($content, $key = 0) {
		if ( ! $this->check($key) )
			return $content;
 
		if ( empty($content) )
			$content = $this->placeholder();
 
		return parent::wrap($content, $key);
	}
 
	/**
	 * Called when a user double-clicks on an editable field
	 * Fetches the content to be edited
	 * @return string
	 */
	function get($key) {
		return get_option($key);
	}
 
	/**
	 * Called when a user clicks the "Save" button
	 * Saves the modified content and then returns it
	 * @return string
	 */
	function save($key, $content) {
		update_option($key, $content);
 
		if ( empty($content) )
			$content = $this->placeholder();
 
		return $content;
	}
 
	/**
	 * Called at each step
	 * Confirms that the current user has the right permissions to edit the field
	 */
	function check($key = 0) {
		return current_user_can('manage_options');
	}
}

As you can see, it’s pretty easy. There are a few other aspects that you can learn by looking at the built-in classes as reference. They can be found in the fields folder.

Connecting the dots

Now all we need to do is to connect the class to the filter. Here’s how you do this:

function register_my_field() {
	register_fronted_field('editable_option', array(
		'class' => 'My_Editable_Option',
		'title' => 'My Option',
		'type' => 'input',
		'argc' => 2
	));
}
add_action('front_end_editor_fields', 'register_my_field');

Here are the arguments you can set for register_fronted_field():

• class – the class which will handle the editing (mandatory)
• title – the field title (mandatory)
• type – input | textarea | rich (default: input)
• priority – the filter priority (default: 11)
• argc – number of args the filter accepts (default: 1)

Putting it all together

Here’s all the code put together. Add it to your theme’s functions.php and ‘My Option’ should appear in the list of fields on the plugin settings page:

function editable_option($key) {
	echo apply_filters('editable_option', get_option($key), $key);
}
 
 
class My_Editable_Option extends FEE_Field_Base {
	/**
	 * The type of object we're editing
	 * @return string
	 */
	static function get_object_type() {
		return 'option';
	}
 
	/**
	 * Called when generating the HTML on the front-end
	 * Wraps the $content in special markup, if the user has the right permissions
	 * @return string
	 */
	function wrap($content, $key = 0) {
		if ( ! $this->check($key) )
			return $content;
 
		if ( empty($content) )
			$content = $this->placeholder();
 
		return parent::wrap($content, $key);
	}
 
	/**
	 * Called when a user double-clicks on an editable field
	 * Fetches the content to be edited
	 * @return string
	 */
	function get($key) {
		return get_option($key);
	}
 
	/**
	 * Called when a user clicks the "Save" button
	 * Saves the modified content and then returns it
	 * @return string
	 */
	function save($key, $content) {
		update_option($key, $content);
 
		if ( empty($content) )
			$content = $this->placeholder();
 
		return $content;
	}
 
	/**
	 * Called at each step
	 * Confirms that the current user has the right permissions to edit the field
	 */
	function check($key = 0) {
		return current_user_can('manage_options');
	}
}
 
 
function register_my_field() {
	register_fronted_field('editable_option', array(
		'class' => 'My_Editable_Option',
		'title' => 'My Option',
		'type' => 'input',
		'argc' => 2
	));
}
add_action('front_ed_fields', 'register_my_field');

Giving back

If you write a new editable field that you think will be useful for other users, post it in the support forum. I might include it in a future release of the plugin, giving you credit for it, of course.

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

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.

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

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

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

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.