Initial issue:
My client wanted an custom HTML rendering sidebar widget for their wordpress site. I created a simple one that allows them to choose the color (class switching) and gives them a textarea to put their HTML into. Now they have requested a basic WYSIWYG interface attached to it (CKEditor or TinyMCE) but I dont know how to add it to the textarea inside the widget code. Does anyone know how, have an example, or a place to see how it can work? Thanks!
EDIT (After use of wp_editor):
So I have my code to this point but the editor is disabled and not able to be used. Any ideas why?
<fieldset>
<label>Enter your HTML</label>
<?php
$settings = array(
'wpautop' => true,
'media_buttons' => false,
'tinymce' => array(
'theme_advanced_buttons1' => ',bold,italic,underline,|,link,unlink',
),
'quicktags' => false
);
$bodyID = $this->get_field_id('body');
$content = '';
wp_editor($content, $bodyID, $settings );
?>
</fieldset>
Use wp_editor function, your code will look something like this:
http://codex.wordpress.org/Function_Reference/wp_editor
<fieldset>
<label> Your label for the text area </label>
<?php
$settings = array(
'wpautop' => true,
'media_buttons' => false,
'tinymce' => array(
'theme_advanced_buttons1' => 'formatselect,|,bold,italic,underline,|,' .
'bullist,blockquote,|,justifyleft,justifycenter' .
',justifyright,justifyfull,|,link,unlink,|' .
',spellchecker,wp_fullscreen,wp_adv ',
),
'quicktags' => false
);
wp_editor('initial content', 'id of textarea', $settings );
?>
</fieldset>
Note that if you want to put the content in the WP database from front end you should use in addition wp_insert_post function and a POST varible as a link.
Related
I have custom plugin that adds Customizer sections and options.
The sections can be seen briefly on the customizer screen but then disappear. This behavior is happening on all themes (I am using my plugin on other sites).
Maybe it might be because the setting fields are not used in the theme yet, but even if I create my own theme (for which this plugin is mainly used) and add echo get_theme_mod('setting-key') somewhere in the themes code, the sections are still being hidden by wordpress.
I have clean Wordpress install version 5.2.2, using default Twenty Nineteen theme with only jQuery updater plugin active. I have checked all JS code for potential errors and any hiding happening, but nothing on my part can be causing this.
This is how I am adding sections, in customize_register hook:
add_action('customize_register', 'setup_section');
function setup_section($wp_customize){
// Add section
$wp_customize->add_section('section_id', array(
'title' => 'Section Title',
'priority' => 160,
));
// Add settings for a field
$wp_customize->add_setting('setting_id', array(
'default' => '',
'transport' => 'refresh',
));
// Add the field into a section and assign setting id
$wp_customize->add_control('setting_id', array(
'label' => 'Option Label',
'section' => 'section_id',
'settings' => 'setting_id',
'type' => 'text',
));
}
The PHP code is working as expected, but after the page loads, all my custom sections get display: none; inline css added and the sections disappear.
Any help is appreciated.
Another reason why the custom sections kept hidden is when they don't have any controls. When a section is empty WordPress hides it by default.
Here's a full working piece of code for adding a section within Customizer with one control:
function mytheme_customize_register( $wp_customize ) {
$wp_customize->add_section('footer_settings_section', array(
'title' => 'Footer Text Section'
));
$wp_customize->add_setting('text_setting', array(
'default' => 'Default Text For Footer Section',
));
$wp_customize->add_control('text_setting', array(
'label' => 'Footer Text Here',
'section' => 'footer_settings_section',
'type' => 'textarea',
));
}
add_action( 'customize_register', 'mytheme_customize_register' );
I have searched a lot about it but didn't find any answer.I am using wp_editor on frontend but its printed outside the div element.
below is a screenshot
And below is my codes
wp_editor(
$content = '',
$editor_id = 'ec_frontend_editor',
$settings = array(
'wpautop' => false, // 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' => '', // extra styles for both visual and HTML editors buttons,
'editor_class' => '', // add extra class(es) to the editor textarea
'teeny' => false, // output the minimal editor config used in Press This
'dfw' => true, // 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()
)
)
it's been too late but it will be helpful for someone in future. I got same problem because of I am taking string:
$html = '';
$html .= wp_editor( $real_value, 'gg_contact_html_wp_editor', $wp_editor_settings );
echo $html;
then I replaced my code with this code:
<div class="container">
wp_editor( $real_value, 'gg_contact_html_wp_editor', $wp_editor_settings );
</div>
I have created a new TinyMCE layout for Advanced Custom Fields called "Very Simple" that I want to use on specific WYSIWYG fields. I've managed to add the buttons I want and I'm now looking for a way to add a list of custom style formats as a dropdown, but I can't really figure out how to do this.
The code I have right now is the following:
// Customize ACF MCE
add_filter( 'acf/fields/wysiwyg/toolbars' , 'new_toolbars' );
function new_toolbars( $toolbars )
{
// - this toolbar has only 1 row of buttons
$toolbars['Very Simple' ] = array();
$toolbars['Very Simple' ][1] = array('bold' , 'italic' , 'underline', 'link', 'unlink' );
$style_formats = array(
// These are the custom styles
array(
'title' => 'Red Button',
'block' => 'span',
'classes' => 'red-button',
'wrapper' => true,
),
array(
'title' => 'Content Block',
'block' => 'span',
'classes' => 'content-block',
'wrapper' => true,
),
array(
'title' => 'Highlighter',
'block' => 'span',
'classes' => 'highlighter',
'wrapper' => true,
),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$toolbars['Very Simple'][1]['styleselect'] = json_encode( $style_formats );
// return $toolbars - IMPORTANT!
return $toolbars;
}
The style format dropdown is not showing. Any ideas why?
The styleselect dropdown is hidden by default, so to get any registered formats/styles will show, you'll just need to activate the styleselect dropdown menu in the Visual editor.
The below function (from the WordPress Codex) filters the array of buttons loaded by TinyMCE, so just add this to your functions.php. I'm using the mce_buttons_2 filter to make it appear in the second row of my toolbar.
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
I'm trying to use wp_editor in a simple PHP page (not a plugin, not in the admin section) :
define('WP_USE_THEMES', false);
require('wp-blog-header.php');
$editor_id = 'mycustomeditor';
wp_editor( "My content", $editor_id );
I got the field and the Visual/HTML buttons but that's all, I don't have any other buttons or toolbar.
Do I need to load other WP library before calling wp_editor ?
Thank you !
You can pass some settings variable to editor as well. Without passing it, it will take default values.
Another thing I have noticed that, If I do exit(); anywhere in my page before loading footer, it will not display any buttons in toolbar as it loads some of the scripts from footer. So If you have exit() or die() before loading footer it will not load the toolbar.
Here I have passed it to my editor and its working fine.
define('WP_USE_THEMES', false);
require('wp-blog-header.php');
$editor_id = 'mycustomeditor';
$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' => '', // extra styles for both visual and HTML editors buttons,
'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( "My content", $editor_id, $settings );
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:
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
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).