Skip to content

Instantly share code, notes, and snippets.

@timelsass
Created September 10, 2018 00:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timelsass/d7c0ca7d50a7b92681e9936adbba423a to your computer and use it in GitHub Desktop.
Save timelsass/d7c0ca7d50a7b92681e9936adbba423a to your computer and use it in GitHub Desktop.
Add a custom message to the customizer's main panel above the controls.
#customize-theme-controls .control-panel-themes.wpse313731-has-custom-message {
margin-bottom: 15px;
}
#customize-theme-controls .control-panel-themes.wpse313731-has-custom-message > .accordion-section-title {
margin-bottom: 0;
}
#customize-theme-controls .control-panel-themes.wpse313731-has-custom-message .wpse313731-custom-message {
background: white;
border-bottom: 1px solid #ddd;
padding: 10px 12px 10px 12px;
}
( function( $ ) {
'use strict';
wp.customize.bind( 'ready', function () {
wp.customize.panel( 'themes', function( panel ) {
panel.deferred.embedded.done( function() {
var customMessage;
panel.headContainer.addClass( 'wpse313731-has-custom-message' );
customMessage = $( wp.template( 'wpse313731-custom-message' )() );
panel.headContainer.append( customMessage );
} );
} );
} );
} )( jQuery );
<?php
/**
* Plugin Name: WPSE313731 Custom Message
* Description: Add a custom message to the customizer's main panel above the controls.
* Plugin URI: https://gist.github.com/timelsass/d7c0ca7d50a7b92681e9936adbba423a
* Author: Tim Elsass
* Author URI: tim.ph
*/
/**
* Enqueue CSS and JS for customizer pane.
*/
function wpse313731_enqueue_scripts() {
$handle = 'wpse313731-custom-message';
wp_enqueue_script( $handle, plugins_url( "$handle.js", __FILE__ ), array( 'customize-controls' ) );
wp_enqueue_style( $handle, plugins_url( "$handle.css", __FILE__ ) );
}
add_action( 'customize_controls_enqueue_scripts', 'wpse313731_enqueue_scripts' );
/**
* Print custom message template.
*/
function wpse313731_print_templates() {
?>
<script type="text/html" id="tmpl-wpse313731-custom-message">
<p class="wpse313731-custom-message"><?php esc_html_e( 'This is a custom message being added to the WordPress Customizer.' ) ?></p>
</script>
<?php
}
add_action( 'customize_controls_print_footer_scripts', 'wpse313731_print_templates' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment