Per Søderlind

I code for fun

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


Running WordPress locally on Mac OS X Lion, Mountain Lion and Mavericks


Modernizr 101


  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

    • PerS

      shawn, you need to get the post using something like this:

      get_post is documented at

      • 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

      • Von Eric Ferrer

        i forgot to mention, its a custom meta box..

  2. shawn

    Thank you very much! exactly what I was after… man this gonna be cool :)

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

    • PerS

      Try to remove the esc_htm() method from my example above

      • 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

  4. shawn

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

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


  6. 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!!!

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

  8. marikamitsos

    Hi all,
    We currently try out this plugin:
    that works really well.

    Will using your tutorial do any difference? Do you mean that the above mentioned plugin is no longer needed or that it is actually a replacement of it?


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

    • PerS

      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:

  10. 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?

  11. 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”.

  12. 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?


    • PerS

      Sorry, can’t help. On my test sites it works fine both in English and Norwegian (running WP 3.3.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?

        • PerS

          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.

  13. 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!

    • PerS

      No, it’s not only for the big guys, but you need some knowledge on plugin and / or theme development. I learned how to use wp_editor by reading the comments to ticket #17144 at WordPress Trac.

      Not sure what you mean by “is the function affected”, but you don’t need to install any plugins to use wp_editor, it’s part of WordPress 3.3 core (you’ll find it in wp-includes/general-template.php)

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

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

    • PerS

      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:

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

  18. 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?

    • Derk

      And for some reason my output doesnt print a bold word, instead it prints word

    • PerS

      Please post the code (settings array + wp_editor function) and I’ll have a look.

      The problem with grey background is mentioned in ticket 17144, but was solved,as I understand it, by using wp_editor() and not calling the WP_Editor class.

      Please check if you get a grey background using the test plugin attach to ticket 17144 (download link)

      • Derk

        Thats parts of the code i use .. it works .. only the editor shows strong tags instead of the actual mark-up .. and that counts for all sorts of mark-up! The grey background doesnt even bother me that much in comparison to not being able to use plain HTML.

        Help would be apriciated!

        • Derk

          The plugin doesnt give me a grey background!

        • PerS

          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

        • PerS

          htmlspecialchars in line 27 in might be the reason you get the tags back instead of the markup.

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

  19. Derk

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

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


    • PerS

      I’m on a business trip, but I’ll have a look at it this coming week-end.

    • PerS

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

      • Towfiq I.

        Nice plugin. but there is no “Update” button to update the post. Any insight?

        • PerS

          This is not a complete plugin. As I mention, it’s an example on how to add the editor to each post.

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

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

      • Tuomas

        Thank you so much!
        I will try that.

  21. 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?

    • PerS

      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?:

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

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

    • PerS

      You need to look at Roles and Capabilities. You’ll see that subscribers only have the read capability.

      To be able to upload (images etc), a user role need to have the upload_files capability. I would give the new user the contributor role (Settings->General->New User Default Role) and give the contributor role the upload_files capability.

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

  25. 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?

  26. 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?

    • Andreas

      Btw: Here is my code:



    • PerS

      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();

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

        • Andreas

          Nevermind. Figured it out:

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

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

    • PerS

      Hi Andrew, are you getting this error/bug/annoyance on WP 3.4.2 ?

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

        • PerS

          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.

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

  28. teei

    Does it include custom field meta boxes?

  29. 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?

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

  30. Question on wp_editor. How does it work with categories and tags? Can you assign posts to categories or add tags to posts using wp_editor?

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

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

  33. Jonathan

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

Leave a Reply

Powered by WordPress & Theme by Anders Norén