0

I created a "WordPress customizer custom tinymce control" and it appears on the customizer page, but I can't show the content where it's needed on the frontend.
I tried to use **get_theme_mod()** but to no avail.
how can I do that? Used Codes Below Thank You

HTML Code:

<div class="bottom-footer">
  <div class="container">
    <div class="copyright">
      <p>&copy; 2020 <a href="/">CONSULTY</a> - Business & Consulting. All rights reserved.</p>
    </div>
  </div>
</div>

Custom TinyMCE Class for Custom Control WP CUSTOMIZER

<?php
/**
* TinyMCE Custom Control
*/
if (class_exists('WP_Customize_Control')) {
    class TinyMCE_Editor_Custom_Control extends WP_Customize_Control
    {
        public $type = 'textarea';
        /**
        ** Render the content on the theme customizer page
        */
        public function render_content() { ?>
<label>
    <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    <?php
                $settings = array(
                    'media_buttons' => false,
                    'quicktags' => false
                );
                $this->filter_editor_setting_link();
                wp_editor($this->value(), $this->id, $settings );
            ?>
</label>
<?php
            do_action('admin_footer');
            do_action('admin_print_footer_scripts');
        }
    
        private function filter_editor_setting_link() {
            add_filter( 'the_editor', function( $output ) { return preg_replace( '/<textarea/', '<textarea ' . $this->get_link(), $output, 1 ); } );
        }
    }
    
    function editor_customizer_script() {
        wp_enqueue_script( 'wp-editor-customizer', CONSULTY_THEME_DIR_URI . '/inc/customizer/assets/consulty-customize.js', array( 'jquery' ), rand(), true );
    }
    add_action( 'customize_controls_enqueue_scripts', 'editor_customizer_script' );
}

Customizer JS Code

(function ($) {
  //
  wp.customizerCtrlEditor = {
    init: function () {
      $(window).load(function () {
        $("textarea.wp-editor-area").each(function () {
          var tArea = $(this),
            id = tArea.attr("id"),
            editor = tinyMCE.get(id),
            setChange,
            content;

          if (editor) {
            editor.onChange.add(function (ed, e) {
              ed.save();
              content = editor.getContent();
              clearTimeout(setChange);
              setChange = setTimeout(function () {
                tArea.val(content).trigger("change");
              }, 500);
            });
          }

          tArea
            .css({
              visibility: "visible",
            })
            .on("keyup", function () {
              content = tArea.val();
              clearTimeout(setChange);
              setChange = setTimeout(function () {
                content.trigger("change");
              }, 500);
            });
        });
      });
    },
  };

  wp.customizerCtrlEditor.init();
  //
})(jQuery);

Customizer Setting & Control

<?php
/**
 * TintMCE Editor
 */

$wp_customize->add_setting( 'theme[editor_content]', array(
    'default'           => '',
    'transport'         => 'postMessage',
    'sanitize_callback' => 'wp_kses_post'
) );

$wp_customize->add_control( new TinyMCE_Editor_Custom_Control( 
        $wp_customize, 'editor_content', array(
            'label'     => 'CopyRights Text',
            'section'   => 'footer_options',
            'settings'  => 'theme[editor_content]',
            'type'      => 'textarea',
        ) 
    ) 
);

Please How I can Show the Content in The Footer?
enter image description here

Hatem Frere
  • 65
  • 1
  • 10

0 Answers0