wordpress how to add wp_editor in an array

Question

I had a small problem in my wordpress code I need to show a wordpress wp_editor in my page where it has array of values.the values are defined like the following

    $fields[] = array(
        'name' => __('Class', 'my-theme'),
        'desc' => __('', 'my-theme'),
        'id' => 'class'.$n,
        'std' => ( ( isset($class_text[$n]['class']) ) ? $class_text[$n]['class'] : '' ),
        'type' => 'text');

When I define my wp_editor like the above array it doesn't display where I want. Instead all the editors displayed at the top before any content in all pages.

I tried like the following set of array for the editor:

    $fields[] = array(
        'name' => __('My Content', 'my-theme'),
        'id' => 'sectioncontent'.$n,
        'std' => ( ( isset($class_text[$n]['content']) ) ? $class_text[$n]['content'] : '' ),
        'type' => wp_editor( '', 'sectioncontent'.$n ));

Attached the image of my problem:

Answer 1

Cause

By default wp_editor prints the textarea that's why you cannot assign it to any variable or array.

Solution

you can use output buffering of php to get printed data in variable like this:

ob_start(); // Start output buffer

// Print the editor
wp_editor( '', 'sectioncontent'.$n );

// Store the printed data in $editor variable
$editor = ob_get_clean();

// And then you can assign that wp_editor to your array.

$fields[] = array(
        'name' => __('My Content', 'my-theme'),
        'id' => 'sectioncontent'.$n,
        'std' => ( ( isset($class_text[$n]['content']) ) ? $class_text[$n]['content'] : '' ),
        'type' => $editor); // <-- HERE

Answer 2

Looks to me like you're using Redux Framework to set up your theme/plugin option page - If you are looking to add the default Wordpress WYSIWYG (What You See Is What You Get - the same editor from the edit post page in the backend) editor in there you'll need to use the type: 'editor'.

It can be confusing - the wp_editor() function you are using is the right place to start if you were setting up this options page from scratch, but you'd need to do quite a bit of work to have it display where and how you want it. Redux et al make this quite a bit easier for you by generating the editor for you, so instead of you using the wp_editor function at all you just tell Redux that you want an editor field called 'My Content' to be one of the fields on the page.

The documentation for the editor field is here: https://docs.reduxframework.com/core/fields/editor/

If I am correct that you are using redux, the correct code to replace what you have is:

 $fields[] = array(
        'name' => __('My Content', 'my-theme'),
        'id' => 'sectioncontent'.$n,
        'std' => ( ( isset($class_text[$n]['content']) ) ? $class_text[$n]['content'] : '' ),
        'type' => 'editor');

To explain the other parts of this field array:

• 'Name' will be what shows up in the label for this field. In this case you are using the localization functions in wordpress (__()) to get a phrase from the local dictionary in the 'my-theme' domain.
• 'id' is what you will use to retrieve what has been entered into this field. It will also affect the ID attribute assigned to the HTML elements in the options page.
• 'std' is the default for the field, which will be the value of the field when the options page is first displayed, before the user has set any options

On the editor documentation page linked above, you'll see the details of various other options you can define, like whether to show Media Upload buttons, and whether to run the input through wpautop to replace line breaks in the editor with <p> tags (by default both of these are true).