Adding a Help Button in the Customizer

Hello!

I hope you are doing great!

I would like to add a Help button in the Customizer Header, next to the “Save changes” button, but I have no idea how to do it.

Could you please point me in the right direction?

Thank you!

  • Milan

    Hello @Carlos,

    I hope you are having a good day and thanks for asking us. :slight_smile:

    I've just confirmed with our developer that this isn't going to be easy task. This will require custom coding to be done as customizer is not providing any hooks or filter to extend itself. However you can always post your this requirement on our Job Portal where developer will try to do this customization for you if its possible or you can hire good experienced developer.

    I hope this helps you.

    Please let me know if there is anything else I can help you with.

    Cheers,
    Milan.

  • Rupok

    Hi Carlos

    Hope you had a wonderful day.

    You can add custom text/button etc beside the save button in WordPress customizer with MU Plugin. For creating a mu plugin, create a folder named "mu-plugins" inside your "wp-content" folder. Then inside that "mu-plugins" folder, create a file with any name and with a .php extension. Now paste the code inside that file and save.

    <?php
    add_action('customize_controls_print_scripts', 'customizer_help', 9999);
    function customizer_help() {
    	echo '<div style="position: absolute; z-index: 999999; margin-left: 180px;"><h3><a href="http://www.google.com">Help</a></h3></div>';
    }
    ?>

    Please change "http://www.google.com" to your desired URL and "<h3>Help</h3>" to your desired HTML content.

    For getting more idea on mu plugins, you can go through this article: https://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    Let us know if you have any confusion. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Adam Czajczyk

    Hello Carlos,

    I hope you're well today!

    I think this can be fixed with a an additional piece of JS code that would show/hide the button depending on whether the Customizer sidebar is collapsed or expanded. Would you please give this code a try?

    <?php
    add_action('customize_controls_print_scripts', 'customizer_help', 9999);
    function customizer_help() {
    	echo '<div class="customizer-help-button" style="position: absolute; z-index: 999999; margin-left: 180px;"><h3><a href="http://www.google.com">Help</a></h3></div>';
    	?>
    	<script type="text/javascript">
    		jQuery(function($) {
    			var task = setInterval(function() {
    				if ($('.wp-full-overlay').hasClass('collapsed')) {
    					$('.customizer-help-button').hide();
    				}
    				else {
    					$('.customizer-help-button').show();
    				}
    			}, 500);
    		});
    	</script>
    	<?php
    }
    ?>

    That's the same code that my colleague @Rupok provided you with but I've added jQuery snippet that monitors the state of Customizer toolbar/sidebar.

    I hope that helps!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.