Homepage Builder

Styled homepage builder Removed widget-content div, wasn't able to get it to work Added theme-specific admin css/js, since the plugin wasn't working well. Consolidating theme customizer sections
weblab · Jun 27, 2014 · 88f6649 · 88f6649
1 parent 7591bf6
commit 88f6649
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 63 deletions.
diff --git a/admin-style.css b/admin-style.css
@@ -0,0 +1,61 @@
+#wpadminbar {
+	background-color:red;
+
+	}
+
+
+
+/* Homepage Layout builder */
+
+.sliderDeleteRow {
+	float:right;
+	}
+
+.sliders {
+	padding:1em 0;
+	}
+	.slider-wrap {
+		float:left;
+		width:100%;
+		padding:5px 0;
+		clear:left;
+		}
+		.slider,
+		.sliderAddColumn {
+			float:left;
+			}
+		.slider {
+			width:195px;
+			margin-right:15px;
+			}
+		.sliderAddColumn {
+			padding:1em 5px!important;
+			height:auto!important;
+			}
+
+		.ui-slider-horizontal {
+			height: 3.5em!important;
+			}
+		.ui-slider .ui-slider-handle {
+			width: .75em!important;
+			height: 3.9em!important;
+			padding:0!important;
+			background:#E6E6E6!important;
+			}
+			.ui-slider .ui-slider-handle:hover {
+				cursor:-webkit-grab;
+				}
+				.ui-slider .ui-slider-handle:active {
+					cursor:-webkit-grabbing;
+					}
+			.ui-slider .ui-slider-handle:focus {
+				background-image:none;
+				background:#2ea2cc!important;
+				}
+	.wp-core-ui .button.sliderDeleteColumn {
+		background: #2ea2cc;
+		border-color: #0074a2;
+		-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15);
+		box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15);
+		color: #fff;
+		}
diff --git a/admin-style.js b/admin-style.js
@@ -0,0 +1,5 @@
+jQuery(document).ready(function($) {
+	$('.ui-slider-handle').each(function(){
+		$(this).addClass('button button-primary');     
+	});
+});
diff --git a/functions.php b/functions.php
@@ -140,4 +140,15 @@ function be_hidden_meta_boxes($hidden, $screen) {
 		$hidden = array('slugdiv', 'trackbacksdiv', 'postexcerpt', 'commentstatusdiv', 'commentsdiv', 'authordiv', 'revisionsdiv');
 		// removed 'postcustom',
 	return $hidden;
-}
+}
+
+
+function load_custom_wp_admin_style() {
+        wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
+        wp_enqueue_style( 'custom_wp_admin_css' );
+
+
+		wp_register_script('uc-admin-js', get_template_directory_uri() . '/admin-style.js', false, '1.0.0');
+		wp_enqueue_script('uc-admin-js');
+}
+add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
diff --git a/inc/customizer.php b/inc/customizer.php
@@ -36,15 +36,10 @@ function cs_customize_preview_js() {
 
 function huskypress_parentSite_register( $wp_customize )
 {
-    $wp_customize->add_section( 'parentSite', 
-         array(
-            'title' => __( 'Parent Site', 'mytheme' ), //Visible title of section
-            'priority' => 35, //Determines what order this appears in
-            'capability' => 'edit_theme_options', //Capability needed to tweak
-            'description' => __('Optional. Enter the title and web address of a parent School, College, Divison, or Department.', 'huskypress'), //Descriptive tooltip
-         ) 
-      );
-
+
+	$wp_customize->get_section( 'title_tagline'     )->title     = 'Title Bar';
+	$wp_customize->remove_control('blogdescription');// removes tagline form field. 
+
     $wp_customize->add_setting( 'parentSiteTitle',
          array(
             'type' => 'option',
@@ -55,8 +50,9 @@ function huskypress_parentSite_register( $wp_customize )
 	$wp_customize->add_control('parentSiteTitle', 
 		array(
 	        'type' => 'text',
-	        'label' => 'Title',
-	        'section' => 'parentSite'
+			'priority' => '100',
+	        'label' => 'Parent Site Title',
+	        'section' => 'title_tagline'
         )
 	);
 	$wp_customize->add_setting( 'parentSiteLink',
@@ -69,39 +65,14 @@ function huskypress_parentSite_register( $wp_customize )
 	$wp_customize->add_control('parentSiteLink', 
 		array(
 	        'type' => 'text',
-	        'label' => 'Link',
-	        'section' => 'parentSite'
+			 'priority' => '101',
+	        'label' => 'Parent Site Link',
+	        'section' => 'title_tagline'
         )
 	);
-
-	$wp_customize->add_setting( 'parentColor',
-		array(
-			'default' => 'blue', //Default setting/value to save
-			'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'?
-			'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting.
-			'transport' => 'refresh'
-			)
-		);
-
 
-	$wp_customize->add_control('parentColor', 
-		array(
-	        'type' => 'radio',
-	        'label' => 'Parent Title Color',
-	        'section' => 'parentSite',
-	        'choices' => array(
-				'blue'=>'Blue',
-				'grey' => 'Grey',
-				'black' => 'Black',
-				'white' => 'White'
-	       		)
-	    	/**/
-    	)
-    );
-	/**/
 
-	$wp_customize->get_section( 'title_tagline'     )->title     = 'Site Title';
-	$wp_customize->remove_control('blogdescription');// removes tagline form field. 
+
 
 	$wp_customize->add_setting( 'headingColor', //Give it a SERIALIZED name (so all theme settings can live under one db record)
 		array(
@@ -114,11 +85,12 @@ function huskypress_parentSite_register( $wp_customize )
 	$wp_customize->add_control('headingColor', array(
         'type' => 'radio',
         'label' => 'Site Title Color',
-        'section' => 'title_tagline',
+        'section' => 'colors',
         'choices' => array(
 			'blue'=>'Blue',
-			'grey' => 'Grey',
 			'black' => 'Black',
+			'darkgrey' => 'Dark Grey',
+			'lightgrey' => 'Light Grey',
 			'white' => 'White'
         	)
     	)
@@ -198,7 +170,7 @@ public function render_content()
 		{
 
 			?>
-				<div class="sliderAddRow">Add Row</div><div class="sliders"></div><div class="sliderDeleteColumn disabled">Delete Column</div><div class="sliderDeleteRow">Delete Last Row</div>
+				<div class="button sliderAddRow" title="Add New Row">+ Row</div><div class="button sliderDeleteRow" title="Remove Last Row">– Row</div><div class="sliders"></div><div class="button sliderDeleteColumn disabled" title="Remove Column Divider">– []</div>
 			<?php
 		}
 	}
@@ -220,8 +192,8 @@ public function render_content()
 	}
 	$wp_customize->add_section( 'layout_builder', 
          array(
-            'title' => __( 'Layout Builder', 'mytheme' ), //Visible title of section
-            'priority' => 35, //Determines what order this appears in
+            'title' => __( 'Homepage Layout', 'mytheme' ), //Visible title of section
+            'priority' => 999, //Determines what order this appears in
             'capability' => 'edit_theme_options', //Capability needed to tweak
             'description' => __('Allows you to customize homepage layout', 'huskypress'), //Descriptive tooltip
          ) 
@@ -282,7 +254,7 @@ public function render_content()
 	);
 
 
-	$wp_customize->add_setting( 'headingtest', //Give it a SERIALIZED name (so all theme settings can live under one db record)
+	$wp_customize->add_setting( 'parentText', //Give it a SERIALIZED name (so all theme settings can live under one db record)
 		 array(
 			'default' => '', //Default setting/value to save
 			'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'?
@@ -293,12 +265,12 @@ public function render_content()
 	$wp_customize->add_control(
 		new Heading_Custom_Control(
 			$wp_customize,
-			'headingtest',
+			'parentText',
 			array(
-				'label'    => 'Heading Test',
-				'description' => 'Test description describing the heading test.',
-				'priority'  => 1,
-				'section'  => 'layout_builder'
+				'label'    => 'Parent Site',
+				'description' => 'Optional. Enter the title and web address of a parent School, College, Divison, or Department.',
+				'priority'  => 99,
+				'section'  => 'title_tagline'
 			)
 		)
 	);

diff --git a/inc/reg-sidebars.php b/inc/reg-sidebars.php
@@ -13,31 +13,30 @@
 		'description'   	=> 'Appears with Archives, Search Results, the Blog page template, and when viewing single posts.',
 		'class'        	=> 'sidebar',
 		'before_widget' 	=> '<aside id="%1$s" class="widget %2$s">',
-		'after_widget'  	=> '</div></aside>',
+		'after_widget'  	=> '</aside>',
 		'before_title'  	=> '<div class="widget-head"><h2 class="widget-title">',
-		'after_title'   	=> '</h2></div><div class="widget-content">'
+		'after_title'   	=> '</h2></div>'
 	));
 
 	register_sidebar( array(
 	    'name'         	=> __( 'Mega Footer' ),
 	    'id'           	=> 'mega-footer',
 		'description'   	=> 'Limited to 6 widgets. Will appear at the bottom of every page in the site.',
 		'before_widget' 	=> '<aside id="%1$s" class="widget %2$s">',
-		'after_widget'  	=> '</div></aside>',
+		'after_widget'  	=> '</aside>',
 		'before_title'  	=> '<div class="widget-head"><h2 class="widget-title">',
-		'after_title'   	=> '</h2></div><div class="widget-content">'
+		'after_title'   	=> '</h2></div>'
 	) );
 
 	for($i=0; $i<60; $i++){
 		register_sidebar(array(
 			'name'          	=> __( 'Home '.$i, 'theme_text_domain' ),
 			'id'            	=> 'home'.$i,
-			'description'   	=> 'Appears with Archives, Search Results, the Blog page template, and when viewing single posts.',
 			'class'        		=> 'sidebar',
 			'before_widget' 	=> '<aside id="%1$s" class="widget %2$s">',
-			'after_widget'  	=> '</div></aside>',
+			'after_widget'  	=> '</aside>',
 			'before_title'  	=> '<div class="widget-head"><h2 class="widget-title">',
-			'after_title'   	=> '</h2></div><div class="widget-content">'
+			'after_title'   	=> '</h2></div>'
 		));
 	}
 }

diff --git a/js/layoutbuilder.js b/js/layoutbuilder.js
@@ -12,7 +12,7 @@ jQuery(document).ready(function($) {
 
 			} );
 		var addRow = function(i){
-			$('.sliders').append('<div class="slider" id="slider'+i+'"></div><div class="sliderAddColumn" id="addColumn'+i+'">Add Column</div>');
+			$('.sliders').append('<div class="slider-wrap"><div class="slider" id="slider'+i+'"></div><div class="button sliderAddColumn" title="Add Column Divider" id="addColumn'+i+'">+[]</div></div>');
 			$('#addColumn'+i).click(function(){
 				addColumnButton(this);
 			});

diff --git a/js/min/layoutbuilder.min.js b/js/min/layoutbuilder.min.js
diff --git a/min/admin-style.min.js b/min/admin-style.min.js
diff --git a/page-home.php b/page-home.php
@@ -13,7 +13,6 @@
 $rows = get_theme_mod('homepagerows');
 $count = 1;
 get_header(); ?>
-<h1>Home</h1>
 	<?php for($i=0; $i<$rows; $i++){ ?>
 	<div class="row">
     <?php //for($j=0;$j<12;$j++){ 
@@ -30,7 +29,7 @@
 				<?php dynamic_sidebar( 'home'.$count ); ?>
 			<?php } else { ?>
 				<h1>Home<?php echo $count; ?></h1>
-				<p>Go to Appearance > Widgets, and drag items into Home1 to edit this area.</p>
+				<p>Go to Appearance > Customize, scroll down and open the Home<?php echo $count; ?> section to edit this area.</p>
 			<?php }; ?>	
 				</main><!-- #main -->
 			</div><!-- #primary -->