There's an easier way, don't bother with the page at all.
Instead, store the content inside an option or theme mod, and use the settings API/customiser to edit the content.
To turn the textarea
holding the content in your form into a full editor, use the wp_editor
function to get a wysiwyg editor that looks and works like the edit page screen. Use get_option
or get_theme_mod
to retrieve the content on the frontend, and pass it through the the_content
filter for oembeds shortcodes and paragraphs to work.
For example, here is how to add an editable footer content area to the customizer ( taken from here )
add_action( 'customize_register', 'your_customizer' );
function your_customizer( $wp_customize ) {
$wp_customize->add_section(
'appearance_settings',
array(
'title' => __('Appearance Settings'),
'description' => __('Modify design options'),
'priority' => 120,
)
);
$wp_customize->add_setting( 'footer_content',
array(
'default'=>'default text'
));
$wp_customize->add_control(
new Example_Customize_Editor_Control(
$wp_customize,
'footer_content',
array(
'label' => 'Footer content',
'section' => 'appearance_settings',
'settings' => 'footer_content'
)
)
);
}
Here's the editor content control:
if(class_exists('WP_Customize_Control')){
class Example_Customize_Editor_Control extends WP_Customize_Control {
public $type = 'textarea';
public function render_content() {
?>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<?php
$content = $this->value();
$editor_id = $this->id;
$settings = array( 'media_buttons' => true, 'drag_drop_upload'=>true );
wp_editor( $content, $editor_id, $settings );
?>
</label>
<?php
}
}
}
Here's some JS to update the preview pane:
jQuery(document).ready(function($){
$('textarea[name="footer_content"]').attr('data-customize-setting-link','footer_content');
setTimeout(function(){
var editor2 = tinyMCE.get('footer_content');
if(editor2){
editor2.onChange.add(function (ed, e) {
// Update HTML view textarea (that is the one used to send the data to server).
ed.save();
$('textarea[name="footer_content"]').trigger('change');
});
}
},1000);
})
And here's some PHP to load the js:
function your_customize_backend_init(){
wp_enqueue_script('your_theme_customizer', get_template_directory_uri.'/customizer/customizer.js');
}
add_action( 'customize_controls_enqueue_scripts', 'your_customize_backend_init' );