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

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

Developer Guide

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>

Read on…

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.

Read on…

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:

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

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

• option to disable highlighting
• compatibility with the postThumbs plugin
• added Polish translation
• better XHTML markup

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:

• 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

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

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.