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_ed_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.
Can you give an example for or else ?
Or if some people made thier fields, thre could be a place where they share snippets of code…
I don’t understand.
You could use Pastebin: http://fronted.pastebin.ca
sorry, formatting has disappeared.
I meant : php is something too technical for me (now) to contribute, like it will be for a lot of users.
Then an exemple for a class or a html tag would help to see how to extend on a non-wordpress element. Then, if people create some, they could send those to you, to make a repository, or for contributing to the option page !
I will try by my side, I’ll send you the result if I finally understand and make it work.
The HTML doesn’t matter. That’s what I’m trying to tell you.
To make a custom editable field, you have to know PHP so that you can save and retrieve the edited text. Otherwise, you get a form that just sits there and looks pretty.
Like I said in the post, thake a look at the existing fields to get an ideea of what I’m talking about.
First thanks for your awesome plugin. But I also struggle to bulit a custom function for a Custom Field.
Can you give me an example, how to make a custom field editable ?
Thanks
Steffen
Ok, stay tuned.
Thanks. I really appreciate it.
I think I get it : you made title, content or tag editable…and you explain how to make it for other wordpress features, like excerpt, categories, date…
Ok
Yes, that’s the ideea.
The plug-in works like a champ. I was curious if there was a easy way to change out the current jquery.jwysiwyg with something like tinyMCE or nicEdit. I really just need a button on the editor to allow for file upload. I am guessing an alternative option would be to make a custom control for the current editor. Just wondering your thoughts on which would be the optimal solution.
tinyMCE is not tiny at all. nicEdit seems promising, though. Thanks for the tip.
By the way, why would you need front-end image uploading? You’re not meant to write posts using this plugin, just to edit them.
I guess he means to change the image without having to write an URL.
I think at my clients, that are unable to use an ftp program (and coming back in medai manager to copy url is not really the spirit of front end).
But where this uploded image will be saved ?
Actually, I’m using wordpress as a CMS. I have a static six pages and I don’t want content editors allowed in the admin area. So I am using this plugin to have them edit content, but they can not create new pages/posts. So I want them to be able to upload images/pdfs to add to a page with out entering the admin area.