Front-end editor in WordPress 3.3 is easy

Update: Things will have to change, TinyMCE 4.0 is in core:

  • New UI and UI API.
  • New theme.
  • Revamped events system/API.
  • Better code quality, readability and build process.
  • Lots of (inline) documentation.
  • And generally many improvements everywhere.

TinyMCE 4.0

  1. Highlights
  2. Demos

Thanks to sushkov, WordPress 3.4 adds support for DFW (Distraction Free Writing) on the front-end. See the example below.

Thanks to the work done by Andrew Ozz et al., adding a front-end editor in WordPress 3.3 is very simple. If you’re not into creating your own plugins, head over to, they have a great list of 10 front-end editing plugins.


So the simplest one is:

Want better control?:

Don’t want the quick tags?:

Or you can do:

DFW (Distraction Free Writing) demo:

Save the code above as dfw-demo.php in your (child) theme folder (tested with the Twenty Eleven template). Create a page, using the DFW Demo Template. Note, you must be running WordPress 3.4.

Notes (from the codex)

Note that the ID that is passed to the wp_editor() function can only be comprised of lower-case letters. No underscores, no hyphens. Anything else will cause the WYSIWYG editor to malfunction.

Once instantiated, the WYSIWYG editor cannot be moved around in the DOM. What this means in practical terms, is that you cannot put it in meta-boxes that can be dragged and placed elsewhere on the page

More information
wp_editor() is located in wp-includes/general-template.php
The default settings are defined in wp-includes/class-wp-editor.php
I’ve also added several examples in the comments below

86 thoughts on “Front-end editor in WordPress 3.3 is easy

  1. shawn

    Thank you for the tutorial, it gave me a great head start.

    Do you know if there is currently a way of using this when editing a post?

    For some reason when I create a post on the front end with the editor it works great, but when I click to edit the post I created I see the editor box, but the post content is not included so that I can edit it

      1. Von Eric Ferrer

        i used this it wordks! thanks but if added another textarea, the textarea twoo doesn’t get the content instead the content of text area one… but in the database it ahs different content.. how to do that? thanks in advance

  2. shawn

    the above snippet works and does indeed populate the editor. However when in visual mode it shows the html code for images instead of displaying them visually like it does on the admin side. Even crazier, if you use the editor to edit a post with images and click save, the post is updated showing the html code instead of the images.

    Is there a specific way of passing data to the editor where it will still work in visual mode?

    1. create post on front end of the website using the snippet and insert images –works
    2. edit the post on the front end, you no longer see images in visual but code
    3. click update/save now instead of seeing images on the post you see the html code on the front end.

    strange indeed, but very close I think

      1. shawn

        OK, got it working following your advice. It turned out I had a js conflict behind the scenes with bbPress.
        thank you for all the help, it is much appreciated

  3. shawn

    That was the first thing I tried. My best guess is that somehow wp_editor is not ‘properly’ accepting the formatted input data?

  4. Andrew Bailey

    awesome. that was extremely useful!

    I got shocked when I was testing my plugin on the 3.3 beta 1 because it uses the tinymce editor in one my pages.

    now the new 3.3 compatible version is much better and has the visual/html tabs too. sweet


  5. sbriz

    it looks like this code does exactly what I was looking for…Great!
    But, can someone please explain me how I should use the above pieces of code? Is it not clear to me…
    Thanks a lot for the help!!!

  6. Peter Knight

    Have you actually tried applying above code on the front-end? I’m getting a lot of buggy behavior on two separate installs I’ve tried so far, namely issues with full screen mode and display problems with the visual editor when trying to insert a picture/media.

  7. Mirza Khurram Baig

    i am new to wordpress and wants to know that is this code work for theme option page, i tried this one but it throws a call to undefined function error.

    i have three textarea on the option page, and wants the post editor there to easily format the content and uplaod the images, or files like post editor work. for theme option i used the code from, but here is no example to add editor on the theme option page.

    plz help me.
    Thanx in advance.

    1. PerS Post author

      Hi Mirza,

      Haven’t tested this myself, but try this. In step 7, in the Nettuts example, replace the textarea in code line 41 with:

  8. Evan

    I’m trying to get the content from the editor without actually submitting the page (so the edits can be made via ajax), any suggestions?

  9. jrav

    Has anyone figured out how to attach the uploaded image to the post created with this method as a front-end editor? All my images are “unattached”.

  10. maatwerk

    Hi, I’ve implemented this fairly easy, but the language files doesnt seem to get loaded… when you hover over a button it says {{something}}, and all the image-upload-menus are the same. Fairly annoying and I can’t seem to solve it. Did anyone else notice this?


      1. maatwerk

        But I guess you only use this on the back side (dashboard side) of wordpress? I’m using it on the front end… perhaps that’s causing the problem?

        Can you try how to solve this?

        1. PerS Post author

          I’m using it only on the front-end. I need a copy of your code to be able to help you, I sent you an email.

  11. Christian C. Onah

    First, thanks for sharing!

    Though your note is interesting, I was compelled to say that “it lack clear details.” Or is it only for the big guys? LOL!!!

    I intend to use this for a multipurpose blogging. And as such I should be able to call it from both within the home page and the archive. So, I need to know, what goes in where. Is the function affected? Do I need to install extra plugin? Or any other helpful tips.

    Andrew Ozz and co are not an option here, so pls don’t refer me there!

    Thanks once again!

  12. Pingback: How to edit posts with the new wp_editor api? | Q&A System

  13. Pingback: wp_editor:in käyttö WordPress 3.3 versiossa

  14. Deryk Wenaus

    I was having a lot of trouble with this until I realized that the theme I was working with did not have the wp_footer action in it! so I added

    just before the body tag and voila!

  15. PerS Post author

    Sorry for not approving comments until now, been on vacation and offline for the last couple of weeks .. btw, everyone should be offline now and then, it’s a nice experience ;)

  16. Pingback: wp_editor() - What's new in WordPress 3.3

  17. Pingback: Introducing WordPress 3.3.1 - WP Austin

  18. Matthew Fries

    This method of including the text editor in plugins makes things SOOOOO much easier (now that I’ve found how it works!). Thanks!!!

    Question – the media uploader works – files are uploaded and placed into the editor – but it doesn’t include the image resize options (you only get full size or thumbnail). I assume this is something that needs to be loaded in the head or in the editor settings somehow but haven’t figured that part out yet and haven’t found any information about it. Any ideas how to get the media uploader completely working in a plugin?

    1. PerS Post author

      In my test bed everything, including editing images, works fine. Make sure your theme has wp_footer() and that you’re running WordPress 3.3.1. Also see the notes in the post above (editor id can’t have underscore etc). I’m using the following settings array:

  19. Matthew Fries

    Never mind! I had old code in the head using wp_tiny_mce() that was causing parts of the editor to not work. Stripped that out and using the default settings. It’s all there! Great – thanks for the article.

  20. Derk

    Great article .. took me a while to figure out but i got it working with my custom page metabox!

    1 question though: my new field has a grey background instead of a normal white background (like all text editors in WordPress). Any idea whats causing this?

        1. PerS Post author

          Ref grey background. I suspect that wp_editor inherits the background from its parent tag (the table you’ve wrapped it in, i.e. class=”form-table”). Use firebug and see if that’s the case. Btw, the closing TD after wp_editor is missing.

          Ref showing markup, try this: wp_editor(esc_html($meta),$field[‘id’], $settings );, also check what $meta really contains, is it html or is it &ltTAG>

          .. sorry for the hasty answer, got to run .. bbl

          1. Derk


            Thanks for your feedback!

            The htmlspecialchars line fixed the output issue, bold text is now display as bold text (without the strong tags).

            In the admin however i still see tags instead of the actual mark-up!

            Any ideas on that?

  21. Derk

    It seems i got it working: wp_editor($meta, $field[‘id’], $settings ); did the trick! (After removing the htmlspecialchars)

  22. Tuomas

    This is good stuff, I’ve been reading and searching about the wp_editor a lot lately.

    Anyway, I’m having trouble taking the next step with the editor.I’ve designed several sites with the WP but I wouldn’t consider my self as a coder, so ANY help would be greatly appreciated.

    What I’m trying to do is to be able to write a new post from the frontend, and I’ve got a snippet like this:

    it works as it should.. Just create a new page and paste it in.

    Now the question is.. How can I edit a post with the wp_editor.
    Each post on the front page should have a edit button, that leads to editing that post, so I should write some code to a loop I guess?

    I’ve been trying to do this for the last 2 weeks without getting even close to the answer :| I think the functionality would be a bit like in Facebook, author could write and edit posts straight from the homepage.

    Any help would be great :)


    1. PerS Post author

      Tuomas, note that this is “pseudo code”, i.e. I’ve tested it, but it needs tweaks and polishing if you’re going to use it (and please feel free to do so):

          1. Towfiq I.

            yeah I looked into that plugin earlier. but I like this one better. Is there a way to put up a update button anyhow?

            Thanks :)

          2. cR0Ck

            Yeah I would like to know also, how can i actually ‘edit’ the post i’m looking at?

            I can surely modify the content on the fly but cannot submit to modify the post in the database.

            A little help would be greatly appreciated, very thanks!

  23. Mac

    Thank you so much for this. Have a question for you though; I am creating a front end admin system for my theme, and i have managed to implement the tinyMce on a textarea for editing the post content, but I also have a timyMce plugin for adding shortcodes that I am not managing to add to the tinymce on the front end.

    Any ideas on how I can register the tinyMce plugin in wp_editor?

    1. PerS Post author

      Haven’t tested this myself (I seem to say that a lot lately), but the mce_buttons and mce_external_plugins filters still exists (see wp-includes/class-wp-editor.php).

      Have your tried something like (code adapted from the Loading a TinyMCE Plugin example) this?:

  24. Stefan

    Hi PerS,

    i found your example of code by searching the web for “wordpress front end post” and the code looks good, but i can not get this to work. I failed every time i tried it out, to include the code from you into my twentyten theme.

    i use the original TwentyTen Theme from WordPress, no mods or something and i have no more idea in witch file i had to include your code example. Hope you understand me, because my english is not the best.

    Can you show me the right place in the files of the TwentyTen Theme, where i had to insert your lines of code? I tried to include it in the “loop.php” or “index.php” but nothing works, i get only a blank site.

    And oh jear, i am a Rookie and not good in PHP and stuff like that. I do it like, trial and error. ;)

  25. Pingback: Front-End Editor für WordPress gibt es als Plugin oder als Code zum manuellen selbst einbauen. » Beitrag » YATTER

  26. Sola

    Hi PerS,

    Have you encountered any problem with user roles?

    I create a tinyMCE editor in the front end, the media upload button shows when I log in as an administrator, but the button disappears when log in as a subscriber, do you know how can I get the media upload button show for subscribers?

    Thanks in advance.

  27. Sagive

    Thanks a lot mate… i was stuck trying to get the frontend tinymce to work and the toolbar was empty and non-responsive -> saved my ass! thanks :)

  28. Amn

    I i want to validate the field generated by wp_editor() on click event using javascript, i get a null value for the field at first click even if it has input data. On second click it can see the input of the field. How can i get input of a field using javascript on first click of submit button?

  29. Pingback: Frontend publisering -

  30. Andreas

    Thanks for this, Per. I am having a small issue when saving the user input via ajax. It seems it only saves when the editor is in visual mode.

    I can still edit in html mode, but neet to switch to visual before saving the post.

    Anyone have any clue what may cause this?

    1. Andreas

      Btw: Here is my code:



    2. PerS Post author

      Hei Andreas

      I believe that tinymce.get(‘epicpagecontent’).getContent(); only find contents when, as you say, you’re in visual mode. When you’re in html mode test if you can get the content directly : $(‘.epicpagecontent’).html();

      1. Andreas

        Thanks. That seems to work. Much appreciated :-)

        Do you know how I can get the mode of the editor with jquery, so as it knows what data to use?

        1. Andreas

          Nevermind. Figured it out:

  31. Andrew

    Great article about the functionality of wp_editor(), thanks. I have implemented this in a couple places of my site’s frontend, and in most cases, it looks and works fantastically well. I do have a minor issue, however, which I was hoping someone might be able to shed some light on.

    For some users (including myself at the moment), the editor loads, but fails to initialize the “Visual” tab. The editor is there, the scripts are loaded, everything is in the browser, but the editor sticks on the HTML tab.

    In most cases, this is just a minor annoyance, users can easily tab over to visual before posting, however for some instances of TinyMCE, I prefer to keep quicktags (the HTML editor) disabled. In these cases, the editor loads, but gets stuck on the empty textarea that acts as its placeholder.

    Strangely, this issue seems to be intermittent, so I suspect it may be somehow related to caching, either browser-side or with w3 total cache. I know these types of issues are difficult to casually diagnose, but if anyone has a suggestion for “jumpstarting” my frontend tinyMCE to make sure it fires up the visual tab when it launches, I would definitely appreciate it.

    1. Andrew

      I made a further discovery. This seems to be a cookie related issue. It affects some user accounts and not others. On my PC I can replicate the problem using my administrator account (who frequently uses HTML editing) but both my testuser accounts get the visual editor straight away.

      Its useful information…but I have no clue what to do next.

      1. Andrew

        Aah, yes, of course, I should have specified my WP version. This is happening on either side of the update. Both for 3.4.1, and still under 3.4.2.

        I did a little bit more troubleshooting to try to isolate the problem…here’s the scenario. I have two machines, two user accounts, and three browsers; here’s what happens:

        Machine 1, Chrome:
        User 1: TinyMCE fails to initialize visual mode, gets stuck in HTML
        User 2: Everything works
        Guest: Everything works

        Machine 1, Firefox/IE:
        Everything works for all users

        Machine 2:
        Everything works for all users on all browsers

        Moral of the story, it must be a cookie issue, no? The problem is specific to a certain user, on a certain browser, for a certain machine, but doesn’t occur for the same user on a different browser or different machine (with the same browser).

        I know wordpress saves a cookie “wordpress_” plus some encoded information specific to your account. Deleting cookies doesn’t fix the problem, however. Somehow, wordpress thinks that a certain user/browser WANTS to use HTML editing, and it seems to *remembers* this choice even if the cookies are deleted.

        I suppose I need some way to force WP to “forget” this preference.

        1. PerS Post author

          For User 1 on Machine 1, in /wp-admin/profile.php, is “Disable the visual editor when writing” chosen ?

          If not, I agree, it must be a cookie or local caching issue. Please try to clear the browser cache for User 1 on Machine 1.

        2. Andrew

          Unfortunately, its not the “disable visual” checkbox, and the strangest thing is that even after completely purging the browser cache (which I have tried numerous times), the problem stays. It’s extremely bizarre.

          It seems like WordPress itself is saving some sort of cookie, but I’m not aware of any such behavior. Any other ideas? I’m worried about how many of my other users may be having this problem and I just don’t know about it.

          1. Andrew

            Per, thanks for your suggestions. I solved the problem!

            It was actually nothing related to browser caching or TinyMCE initialization.

            It turns out that wordpress saves user interface settings in the user_meta table named wp_user_settings.

            If you can access a php console from within WordPress (I highly recommend for all kinds of php troubleshooting):

            Will display the data saved in this entry. One of the keys in this settings array is ‘editor’, in my case, my user settings contained

            This key takes two values ‘html’ or ‘tinymce’. For some reason, this setting was not updating my “preference” whenever I switched to the visual tab. I had to manually override it with the function:

            And everything is perfect now! Now I just have to figure out if any of my users are having the same problem. Hopefully not!

  32. Zac Eckstein

    I am replacing a regular textbox:

    with the TinyMCE editor:

    It displays fine but the content I enter does not save and the validation I have in place isn’t recognizing the content. Here is my validation/error message:

    The error message is returned even if content has been entered. It worked fine when it was just a regular textbox.

    Here are the parameters for inserting and updating posts:

    Any idea how I can fix this?

    1. Zac Eckstein

      Quick edit: after playing for a couple minutes, I discovered that the content is sort of being saved but only shows up after I save the post twice. And, after that, it won’t update when I edit the post either.

      Very strange behavior…

  33. s sta

    Hi, I’m using this code you posted previously in the comments to add the tinymce content editor to my front-end pages/posts. The code works as expected, (thank you), but I can’t see how to save this post/page content once it has been updated. Any help/ideas greatly appreciated.

  34. Michael

    I’ve recently used WCK with Front-End Posting for our property listing website and it worked just fine. I liked the fact that’s it’s an all in one package, allowing you to create and manage custom fields, post types, taxonomies and providing front-end posting as well.

  35. Jonathan

    For what is “theme_advanced_buttons2 – theme_advanced_buttons4“? (Example: 'theme_advanced_buttons2' => '',)


Leave a Reply

Your email address will not be published. Required fields are marked *