Merge pull request #411 from abaicus/development

Selective refresh for widgets

Author: rodica-andronache

functions.php

@@ -79,7 +79,10 @@ function zerif_setup() {
 
     /* woocommerce support */
 	add_theme_support( 'woocommerce' );
-		
+
+	/* selective widget refresh */
+	add_theme_support( 'customize-selective-refresh-widgets' );
+
 	/*******************************************/
     /*************  Welcome screen *************/
     /*******************************************/
@@ -184,8 +187,8 @@ function zerif_widgets_init() {
     register_sidebar(array(
         'name' => __('About us section', 'zerif-lite'),
         'id' => 'sidebar-aboutus',
-        'before_widget' => '',
-        'after_widget' => '',
+        'before_widget' => '<span id="%1$s">',
+        'after_widget'  => '</span>',
         'before_title' => '<h1 class="widget-title">',
         'after_title' => '</h1>',
     ));
@@ -455,13 +458,13 @@ function zerif_register_widgets() {
 
 	/* Register sidebars */
 	foreach ( $zerif_lite_sidebars as $zerif_lite_sidebar ):
-	
+		$extra_class = '';
 		if( $zerif_lite_sidebar == 'sidebar-ourfocus' ):
 
 			$zerif_lite_name = __('Our focus section widgets', 'zerif-lite');
 
 		elseif( $zerif_lite_sidebar == 'sidebar-testimonials' ):
-		
+			$extra_class = 'feedback-box';
 			$zerif_lite_name = __('Testimonials section widgets', 'zerif-lite');
 
 		elseif( $zerif_lite_sidebar == 'sidebar-ourteam' ):
@@ -478,8 +481,8 @@ function zerif_register_widgets() {
             array (
                 'name'          => $zerif_lite_name,
                 'id'            => $zerif_lite_sidebar,
-                'before_widget' => '',
-                'after_widget'  => ''
+                'before_widget' => '<span id="%1$s" class="'.$extra_class.'">',
+                'after_widget' => '</span>',
             )
         );
 
@@ -636,7 +639,10 @@ class zerif_ourfocus extends WP_Widget {
 	public function __construct() {
 		parent::__construct(
 			'ctUp-ads-widget',
-			__( 'Zerif - Our focus widget', 'zerif-lite' )
+			__( 'Zerif - Our focus widget', 'zerif-lite' ),
+			array (
+				'customize_selective_refresh' => true,
+			)
 		);
 		add_action('admin_enqueue_scripts', array($this, 'widget_scripts'));
 	}
@@ -777,7 +783,10 @@ class zerif_testimonial_widget extends WP_Widget {
 	public function __construct() {
 		parent::__construct(
 			'zerif_testim-widget',
-			__( 'Zerif - Testimonial widget', 'zerif-lite' )
+			__( 'Zerif - Testimonial widget', 'zerif-lite' ),
+			array (
+				'customize_selective_refresh' => true,
+			)
 		);
 		add_action('admin_enqueue_scripts', array($this, 'widget_scripts'));
 	}
@@ -796,9 +805,11 @@ function widget($args, $instance) {
 		$zerif_accessibility = get_theme_mod('zerif_accessibility');
 		// open link in a new tab when checkbox "accessibility" is not ticked
 		$attribut_new_tab = (isset($zerif_accessibility) && ($zerif_accessibility != 1) ? ' target="_blank"' : '' );
-        ?>
 
-        <div class="feedback-box">
+		echo $before_widget;
+
+	    ?>
+
 
             <!-- MESSAGE OF THE CLIENT -->
 
@@ -862,10 +873,11 @@ function widget($args, $instance) {
             </div>
             <!-- / END CLIENT INFORMATION-->
 
-        </div> <!-- / END SINGLE FEEDBACK BOX-->
 
         <?php
 
+	    echo $after_widget;
+
     }
 
     function update($new_instance, $old_instance) {
@@ -924,17 +936,18 @@ function form($instance) {
 }
 
 /****************************/
-
 /****** clients widget ******/
-
 /***************************/
 
 class zerif_clients_widget extends WP_Widget{	
 
 	public function __construct() {
 		parent::__construct(
 			'zerif_clients-widget',
-			__( 'Zerif - Clients widget', 'zerif-lite' )
+			__( 'Zerif - Clients widget', 'zerif-lite' ),
+			array (
+				'customize_selective_refresh' => true,
+			)
 		);
 		add_action('admin_enqueue_scripts', array($this, 'widget_scripts'));
 	}
@@ -1028,7 +1041,10 @@ class zerif_team_widget extends WP_Widget{
 	public function __construct() {
 		parent::__construct(
 			'zerif_team-widget',
-			__( 'Zerif - Team member widget', 'zerif-lite' )
+			__( 'Zerif - Team member widget', 'zerif-lite' ),
+			array (
+				'customize_selective_refresh' => true,
+			)
 		);
 		add_action('admin_enqueue_scripts', array($this, 'widget_scripts'));
 	}

style.css

@@ -1846,28 +1846,28 @@ ul.nav > li.current_page_item.current > a:before {
 	-webkit-transition: all 0.2s ease-in-out;
 	transition: all 0.2s ease-in-out;
 }
-.focus-box:nth-child(4n+1) .service-icon:hover {
+#focus span:nth-child(4n+1) .focus-box .service-icon:hover {
 	border: 10px solid #e96656;
 }
-.focus-box:nth-child(4n+2) .service-icon:hover{
+#focus span:nth-child(4n+2)  .focus-box .service-icon:hover{
 	border: 10px solid #34d293;
 }
-.focus-box:nth-child(4n+3) .service-icon:hover {
+#focus span:nth-child(4n+3) .focus-box .service-icon:hover {
 	border: 10px solid #3ab0e2;
 }
-.focus-box:nth-child(4n+4) .service-icon:hover{
+#focus span:nth-child(4n+4) .focus-box .service-icon:hover{
 	border: 10px solid #f7d861;
 }
-.focus-box:nth-child(4n+1) .red-border-bottom:before {
+#focus span:nth-child(4n+1) .focus-box .red-border-bottom:before {
 	background: #e96656;
 }
-.focus-box:nth-child(4n+2) .red-border-bottom:before {
+#focus span:nth-child(4n+2) .focus-box .red-border-bottom:before {
 	background: #34d293;
 }
-.focus-box:nth-child(4n+3) .red-border-bottom:before {
+#focus span:nth-child(4n+3) .focus-box .red-border-bottom:before {
 	background: #3ab0e2;
 }
-.focus-box:nth-child(4n+4) .red-border-bottom:before {
+#focus span:nth-child(4n+4) .focus-box .red-border-bottom:before {
 	background: #f7d861;
 }
 .focus-box h3 {
@@ -2330,7 +2330,7 @@ width: -webkit-calc(100% / 4);
 .client-list div{
 	margin: 0;
 }
-.client-list div a{
+.client-list div span{
     margin-right: 24px;
 }
 .client-list div a:last-child{
@@ -2482,16 +2482,16 @@ width: -webkit-calc(100% / 4);
 .team-member .social-icons ul li a:hover {
 	color: #e96656;
 }
-.our-team .row > div:nth-child(4n+1) .red-border-bottom:before{
+.our-team .row > span:nth-child(4n+1) .red-border-bottom:before{
     background: #e96656;
 }
-.our-team .row > div:nth-child(4n+2) .red-border-bottom:before{
+.our-team .row > span:nth-child(4n+2) .red-border-bottom:before{
     background: #34d293;
 }
-.our-team .row > div:nth-child(4n+3) .red-border-bottom:before{
+.our-team .row > span:nth-child(4n+3) .red-border-bottom:before{
     background: #3ab0e2;
 }
-.our-team .row > div:nth-child(4n+4) .red-border-bottom:before{
+.our-team .row > span:nth-child(4n+4) .red-border-bottom:before{
     background: #f7d861;
 }