1

I am developing a theme where I would like to have a front-end area, but when I try to include the wp_editor() in the page template I am getting this result:

wp_editor() problem

P.S. The wordpress editor works fine in the dashboard.

wp editor in the dashboard works fine

Pietro

  • 2
    How exactly do you add the editor? Please add that code to your question. And welcome to WordPress Stack Exchange. – fuxia Oct 19 '13 at 11:32
  • Thanks Toscho. You can find my code here pastebin.com/xTKB3g7z – Pietro Oct 19 '13 at 17:48
  • Please put your code in the question by selecting "edit". – Wyck Oct 19 '13 at 18:04
  • 2
    You should call wp_enqueue_media() before to let wordpress add the necessary scripts and files to the page... codex.wordpress.org/Function_Reference/wp_enqueue_media – ungestaltbar Oct 19 '13 at 19:57
  • 1
    You must have wp_head() and wp_footer(). – user116058 Mar 23 '17 at 6:50
2

You need to first define the $settings and the $editor_id and the $content variables. Then you can call wp_editor().

Something like this should work for you:

// default settings
$content = 'This content gets loaded first.';
$editor_id = 'my_frontend_editor';
$settings =   array(
    'wpautop' => true, // use wpautop?
    'media_buttons' => true, // show insert/upload button(s)
    'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
    'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
    'tabindex' => '',
    'editor_css' => '', // intended for extra styles for both visual and HTML editors buttons, needs to include the <style> tags, can use "scoped".
    'editor_class' => '', // add extra class(es) to the editor textarea
    'teeny' => false, // output the minimal editor config used in Press This
    'dfw' => false, // replace the default fullscreen with DFW (supported on the front-end in WordPress 3.4)
    'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
    'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()
);
wp_editor( $content, $editor_id, $settings );

Remember, variables have to be defined before you can use them.

| improve this answer | |
  • Thanks @josh for your support, but I have just tested your code, but it does not work for me. I still have the same result. – Pietro Oct 20 '13 at 7:35
  • Where are you trying to add this? To a template file? – josh Oct 20 '13 at 14:24
  • yes I am trying to add this on a template file – Pietro Oct 20 '13 at 14:33
  • Oops, try it again. I accidentally typed a hyphen that should have been an equals sign. (Fixed above). Just tested it in my template and works fine. NOTE: Be careful loading a full-fledged editor on your front-end! Make sure you trust the people using it... or perform proper validations before saving it's content to the database. – josh Oct 20 '13 at 14:53
  • Thanks again for your reply. It does not work with wordpress 3.6.1 (may be your wp version is different). Please note that I have uninstalled all plugins. Here you can find my page template: pastebin.com/EgxCUX27 – Pietro Oct 20 '13 at 15:54
2

Wild guess, are you using _ (underscore) in your editor ID? If yes, try removing them and use only lowercase letters.. Something like thisismyeditorid.

From the Codex..

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

| improve this answer | |
0

To display it in a template, use this:

<?php
/*
Template Name: Template-Editor */
?>

//have to load all the scripts and header info
<?php get_header(); ?>

<?php 
$content = 'Initial content for the editor.';
$editor_id = 'editor';
$settings =   array(
    'wpautop' => true, //Whether to use wpautop for adding in paragraphs. Note that the paragraphs are added automatically when wpautop is false.
    'media_buttons' => true, //Whether to display media insert/upload buttons
    'textarea_name' => $editor_id, // The name assigned to the generated textarea and passed parameter when the form is submitted.
    'textarea_rows' => get_option('default_post_edit_rows', 10), // The number of rows to display for the textarea
    'tabindex' => '', //The tabindex value used for the form field
    'editor_css' => '', // Additional CSS styling applied for both visual and HTML editors buttons, needs to include <style> tags, can use "scoped"
    'editor_class' => '', // Any extra CSS Classes to append to the Editor textarea
    'teeny' => false, // Whether to output the minimal editor configuration used in PressThis
    'dfw' => false, // Whether to replace the default fullscreen editor with DFW (needs specific DOM elements and CSS)
    'tinymce' => true, // Load TinyMCE, can be used to pass settings directly to TinyMCE using an array
    'quicktags' => true // Load Quicktags, can be used to pass settings directly to Quicktags using an array. Set to false to remove your editor's Visual and Text tabs.
    'drag_drop_upload' => true //Enable Drag & Drop Upload Support (since WordPress 3.9) 
);
wp_editor( $content, $editor_id, $settings );

 ?>

//have to include the footer info
<?php get_footer(); ?>

Or you can Display an empty editor on its own using the default settings:

<?php

$content = '';
$editor_id = 'mycustomeditor';

wp_editor( $content, $editor_id );

?>

Documentation: https://codex.wordpress.org/Function_Reference/wp_editor

| improve this answer | |
  • I added wp_editor as a custom field. But it doesn't editable. I can't write anything. Media and other buttons work. – sakarya Sep 12 '17 at 14:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.