WordPress.org

Make WordPress Core


Ignore:
Timestamp:
02/24/2015 08:30:22 PM (6 years ago)
Author:
markjaquith
Message:

Add theme browsing and theme switching to the Customizer

  • Brings into core the Customizer Theme Switcher feature plugin
  • You can now browse, preview, and activate themes right from the Customizer

fixes #31303.
props celloexpressions, afercia, westonruter, folletto, designsimply

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/theme.php

    r31363 r31533  
    487487    return array_values( $prepared_themes );
    488488}
     489
     490/**
     491 * Print JS templates for the theme-browsing UI in the Customizer.
     492 *
     493 * @since 4.2.0
     494 */
     495function customize_themes_print_templates() {
     496    ?>
     497    <script type="text/html" id="tmpl-customize-themes-details-view">
     498        <div class="theme-backdrop"></div>
     499        <div class="theme-wrap">
     500            <div class="theme-header">
     501                <button type="button" class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
     502                <button type="button" class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
     503                <button type="button" class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close details dialog' ); ?></span></button>
     504            </div>
     505            <div class="theme-about">
     506                <div class="theme-screenshots">
     507                <# if ( data.screenshot[0] ) { #>
     508                    <div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div>
     509                <# } else { #>
     510                    <div class="screenshot blank"></div>
     511                <# } #>
     512                </div>
     513
     514                <div class="theme-info">
     515                    <# if ( data.active ) { #>
     516                        <span class="current-label"><?php _e( 'Current Theme' ); ?></span>
     517                    <# } #>
     518                    <h3 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{ data.version }}' ); ?></span></h3>
     519                    <h4 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.authorAndUri }}}' ); ?></h4>
     520                    <p class="theme-description">{{{ data.description }}}</p>
     521
     522                    <# if ( data.parent ) { #>
     523                        <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), '<strong>{{{ data.parent }}}</strong>' ); ?></p>
     524                    <# } #>
     525
     526                    <# if ( data.tags ) { #>
     527                        <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{ data.tags }}</p>
     528                    <# } #>
     529                </div>
     530            </div>
     531
     532            <div class="theme-actions">
     533                <# if ( ! data.active ) { #>
     534                    <div class="inactive-theme">
     535                        <a href="<?php echo add_query_arg( 'theme', '{{ data.id }}', remove_query_arg( 'theme' ) ); ?>" target="_top" class="button button-primary"><?php _e( 'Live Preview' ); ?></a>
     536                    </div>
     537                <# } #>
     538            </div>
     539        </div>
     540    </script>
     541    <?php
     542}
     543add_action( 'customize_controls_print_footer_scripts', 'customize_themes_print_templates' );
Note: See TracChangeset for help on using the changeset viewer.