Some themes have that premium button with HTML items in the editor, like this:

How did they managed to do that? I tried to look inside the functions.php of Zerif Lite (A theme who also uses HTML inside the customizer) and I couldn't find anything.

1 Answer 1


I've had a look inside of the theme you've mentioned that does this. It seems like the code below (inside the zerif_customizer.js) file is what is making this button.

jQuery('.preview-notice').append('<a class="zerif-upgrade-to-pro-button" href="http://themeisle.com/themes/zerif-pro-one-page-wordpress-theme/" class="button" target="_blank">{pro}</a>'.replace('{pro}',zerifLiteCustomizerObject.pro));

This can be found in the themes js file. They've then hooked this file onto the customizer in the functions.php file using this code

function zerif_registers() {

    wp_enqueue_script( 'zerif_customizer_script', get_template_directory_uri() . '/js/zerif_customizer.js', array("jquery"), '20120206', true  );

    wp_localize_script( 'zerif_customizer_script', 'zerifLiteCustomizerObject', array(

        'documentation' => __( 'View Documentation', 'zerif-lite' ),
        'pro' => __('View PRO version','zerif-lite')

    ) );
add_action( 'customize_controls_enqueue_scripts', 'zerif_registers' );

Hopefully this gives you something to go on.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.