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
Built from https://develop.svn.wordpress.org/trunk@31533


git-svn-id: http://core.svn.wordpress.org/trunk@31514 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Mark Jaquith
2015-02-24 20:31:24 +00:00
parent 0d9275930b
commit 8b180b9a46
13 changed files with 1028 additions and 46 deletions

View File

@@ -1100,6 +1100,101 @@ class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
}
}
/**
* Customize Theme Control Class
*
* @package WordPress
* @subpackage Customize
* @since 4.2.0
*/
class WP_Customize_Theme_Control extends WP_Customize_Control {
public $type = 'theme';
public $theme;
/**
* Refresh the parameters passed to the JavaScript via JSON.
*
* @since 4.2.0
* @uses WP_Customize_Control::to_json()
*/
public function to_json() {
parent::to_json();
$this->json['theme'] = $this->theme;
}
/**
* Don't render the control content from PHP, as it's rendered via JS on load.
*
* @since 4.2.0
*/
public function render_content() {}
/**
* Render a JS template for theme display.
*
* @since 4.2.0
*/
public function content_template() {
?>
<div class="theme<# if ( data.theme.active ) { #> active<# } #>" tabindex="0" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
<# if ( data.theme.screenshot[0] ) { #>
<div class="theme-screenshot">
<img src="{{ data.theme.screenshot[0] }}" alt="" />
</div>
<# } else { #>
<div class="theme-screenshot blank"></div>
<# } #>
<span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Theme Details' ); ?></span>
<div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.theme.author }}' ); ?></div>
<# if ( data.theme.active ) { #>
<h3 class="theme-name" id="{{ data.theme.id }}-name"><span><?php _ex( 'Previewing:', 'theme' ); ?></span> {{ data.theme.name }}</h3>
<# } else { #>
<h3 class="theme-name" id="{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
<# } #>
<# if ( ! data.theme.active ) { #>
<div class="theme-actions">
<a class="button" href="<?php echo add_query_arg( 'theme', '{{ data.theme.id }}', remove_query_arg( 'theme' ) ); ?>" target="_top"><?php _e( 'Live Preview' ); ?></a>
</div>
<# } #>
</div>
<?php
}
}
/**
* Customize New Theme Control Class
*
* @package WordPress
* @subpackage Customize
* @since 4.2.0
*/
class WP_Customize_New_Theme_Control extends WP_Customize_Control {
/**
* Render the new control.
*
* @since 4.2.0
*/
public function render() {
if ( is_multisite() || ! current_user_can( 'install_themes') ) {
return;
}
?>
<div class="theme add-new-theme">
<a href="<?php echo admin_url( 'theme-install.php' ); ?>" target="_top">
<div class="theme-screenshot">
<span></span>
</div>
<h3 class="theme-name"><?php _e( 'Add New Theme' ); ?></h3>
</a>
</div>
<?php
}
}
/**
* Widget Area Customize Control Class
*