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

5
  • 2
    How exactly do you add the editor? Please add that code to your question. And welcome to WordPress Stack Exchange.
    – fuxia
    Oct 19, 2013 at 11:32
  • Thanks Toscho. You can find my code here pastebin.com/xTKB3g7z
    – Pietro
    Oct 19, 2013 at 17:48
  • Please put your code in the question by selecting "edit".
    – Wyck
    Oct 19, 2013 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 Oct 19, 2013 at 19:57
  • 1
    You must have wp_head() and wp_footer().
    – user116058
    Mar 23, 2017 at 6:50

4 Answers 4

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.

8
  • 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, 2013 at 7:35
  • Where are you trying to add this? To a template file?
    – josh
    Oct 20, 2013 at 14:24
  • yes I am trying to add this on a template file
    – Pietro
    Oct 20, 2013 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, 2013 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, 2013 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.

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

1
  • 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, 2017 at 14:31
0

For those who can instantiate the editor but don't get the textarea updated on submitting the form sometimes there is incompatibility issues.

In this case you can trigger the save method before posting. Here is an example using jQuery:

$("#saveBtn").on("click",function(e){
                    
        e.preventDefault();
                    
        if( tinyMCE.editors.length > 0 ){
                        
            $.each(tinyMCE.editors,function(i,editor){
                            
                editor.save();

                // do something else

            });
        }
                    
        $("#savePostForm").trigger("submit");
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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