Conversion to SCSS and Foundation 3.0.

admin/options-interface.php

@@ -10,8 +10,8 @@ function optionsframework_fields() {
 	$optionsframework_settings = get_option('optionsframework');
 
 	// Get the theme name so we can display it up top
-	$themename = get_theme_data(STYLESHEETPATH . '/style.css');
-	$themename = $themename['Name'];
+	$the_theme = wp_get_theme();
+	$themename = $the_theme->Name;
 
 	// Gets the unique option id
 	if (isset($optionsframework_settings['id'])) {

config.rb

@@ -0,0 +1,26 @@
+require 'zurb-foundation'
+# Require any additional compass plugins here.
+
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

footer.php

@@ -6,18 +6,27 @@
 					</nav>
 				</div>
 
+				<div class="panel">
 				<div class="row">
-					<p class="ten columns">&copy; <?php bloginfo('name'); ?> <?php _e("is brought to you by", "bonestheme"); ?> <a href="http://320press.com/wp-foundation">WP-Foundation</a>, <a href="http://wordpress.org/" title="WordPress">WordPress</a>, <a href="http://www.themble.com/bones" title="Bones" class="footer_bones_link">Bones</a> <span class="amp">&</span> <a href="http://foundation.zurb.com/" title="Zurb Foundation">Zurb Foundation</a>.</p>
-
-					<p class="attribution two columns"><a href="http://320press.com" id="credit320" class="hide-on-phones" title="By the dudes of 320press">320press</a></p>
+					<p class="attribution two columns offset-by-ten"><a href="http://320press.com" id="credit320" class="hide-on-phones" title="By the dudes of 320press">320press</a></p>
 				</div>
+			</div>
 
 			</footer> <!-- end footer -->
 
 		</div> <!-- end #container -->
 
 		<!-- scripts are now optimized via Modernizr.load -->	
 		<script src="<?php echo get_template_directory_uri(); ?>/library/js/scripts.js"></script>
+
+		<!-- Included JS Files -->
+		<script src="<?php echo get_template_directory_uri(); ?>/javascripts/jquery.min.js"></script>
+		<script src="<?php echo get_template_directory_uri(); ?>/javascripts/foundation/jquery.reveal.js"></script>
+		<script src="<?php echo get_template_directory_uri(); ?>/javascripts/foundation/jquery.orbit-1.4.0.js"></script>
+		<script src="<?php echo get_template_directory_uri(); ?>/javascripts/foundation/jquery.customforms.js"></script>
+		<script src="<?php echo get_template_directory_uri(); ?>/javascripts/foundation/jquery.placeholder.min.js"></script>
+		<script src="<?php echo get_template_directory_uri(); ?>/javascripts/foundation/jquery.tooltips.js"></script>
+		<script src="<?php echo get_template_directory_uri(); ?>/javascripts/app.js"></script>
 
 		<!--[if lt IE 7 ]>
   			<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>

functions.php

@@ -163,6 +163,19 @@ function custom_password_form() {
 
 /*********** update standard wp tag cloud widget so it looks better ************/
 
+// filter tag clould output so that it can be styled by CSS
+function add_tag_class( $taglinks ) {
+    $tags = explode('</a>', $taglinks);
+    $regex = "#(.*tag-link[-])(.*)(' title.*)#e";
+        foreach( $tags as $tag ) {
+            $tagn[] = preg_replace($regex, "('$1$2 label radius tag-'.get_tag($2)->slug.'$3')", $tag );
+        }
+    $taglinks = implode('</a>', $tagn);
+    return $taglinks;
+}
+
+add_action('wp_tag_cloud', 'add_tag_class');
+
 add_filter( 'widget_tag_cloud_args', 'my_widget_tag_cloud_args' );
 
 function my_widget_tag_cloud_args( $args ) {
@@ -177,7 +190,7 @@ function my_widget_tag_cloud_args( $args ) {
 
 function wp_tag_cloud_filter($return, $args)
 {
-  return '<div id="tag-cloud">'.$return.'</div>';
+  return '<div id="tag-cloud"><p>'.$return.'</p></div>';
 }
 
 // Enable shortcodes in widgets
@@ -205,6 +218,112 @@ function remove_thumbnail_dimensions( $html ) {
     return $html;
 }
 
+// change the standard class that wordpress puts on the active menu item in the nav bar
+//Deletes all CSS classes and id's, except for those listed in the array below
+function custom_wp_nav_menu($var) {
+        return is_array($var) ? array_intersect($var, array(
+                //List of allowed menu classes
+                'current_page_item',
+                'current_page_parent',
+                'current_page_ancestor',
+                'first',
+                'last',
+                'vertical',
+                'horizontal'
+                )
+        ) : '';
+}
+add_filter('nav_menu_css_class', 'custom_wp_nav_menu');
+add_filter('nav_menu_item_id', 'custom_wp_nav_menu');
+add_filter('page_css_class', 'custom_wp_nav_menu');
+
+//Replaces "current-menu-item" with "active"
+function current_to_active($text){
+        $replace = array(
+                //List of menu item classes that should be changed to "active"
+                'current_page_item' => 'active',
+                'current_page_parent' => 'active',
+                'current_page_ancestor' => 'active',
+        );
+        $text = str_replace(array_keys($replace), $replace, $text);
+                return $text;
+        }
+add_filter ('wp_nav_menu','current_to_active');
+
+//Deletes empty classes and removes the sub menu class
+function strip_empty_classes($menu) {
+    $menu = preg_replace('/ class=""| class="sub-menu"/','',$menu);
+    return $menu;
+}
+add_filter ('wp_nav_menu','strip_empty_classes');
+
+
+// add the 'has-flyout' class to any li's that have children and add the arrows to li's with children
+
+class description_walker extends Walker_Nav_Menu
+{
+      function start_el(&$output, $item, $depth, $args)
+      {
+            global $wp_query;
+            $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
+
+            $class_names = $value = '';
+
+            // If the item has children, add the dropdown class for foundation
+            if ( $args->has_children ) {
+                $class_names = "has-flyout ";
+            }
+
+            $classes = empty( $item->classes ) ? array() : (array) $item->classes;
+
+            $class_names .= join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
+            $class_names = ' class="'. esc_attr( $class_names ) . '"';
+
+            $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
+
+            $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
+            $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
+            $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
+            $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
+            // if the item has children add these two attributes to the anchor tag
+            // if ( $args->has_children ) {
+            //     $attributes .= 'class="dropdown-toggle" data-toggle="dropdown"';
+            // }
+
+            $item_output = $args->before;
+            $item_output .= '<a'. $attributes .'>';
+            $item_output .= $args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
+            $item_output .= $args->link_after;
+            // if the item has children add the caret just before closing the anchor tag
+            if ( $args->has_children ) {
+                $item_output .= '</a><a href="#" class="flyout-toggle"><span> </span></a>';
+            }
+            else{
+                $item_output .= '</a>';
+            }
+            $item_output .= $args->after;
+
+            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
+            }
+
+        function start_lvl(&$output, $depth) {
+            $indent = str_repeat("\t", $depth);
+            $output .= "\n$indent<ul class=\"flyout\">\n";
+        }
+
+        function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output )
+            {
+                $id_field = $this->db_fields['id'];
+                if ( is_object( $args[0] ) ) {
+                    $args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
+                }
+                return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
+            }
+
+
+}
+
+
 // Add the Meta Box to the homepage template
 function add_homepage_meta_box() {  
     add_meta_box(  

header.php

@@ -30,7 +30,7 @@
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 		<script>window.jQuery || document.write(unescape('%3Cscript src="<?php echo get_template_directory_uri(); ?>/library/js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>
 
-		<script src="<?php echo get_template_directory_uri(); ?>/library/js/modernizr.full.min.js"></script>
+		<script src="<?php echo get_template_directory_uri(); ?>/javascripts/foundation/modernizr.foundation.js"></script>
 
 		<!-- media-queries.js (fallback) -->
 		<!--[if lt IE 9]>
@@ -48,139 +48,24 @@
 		<?php wp_head(); ?>
 		<!-- end of wordpress head -->
 
-		<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/foundation/foundation.css">
+		<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/stylesheets/app.css">
 		<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
 
 		<!-- bring in theme options styles -->
-		<?php 
-		$heading_typography = of_get_option('heading_typography');
-		if ($heading_typography) {
-			$theme_options_styles = '
-			h1, h2, h3, h4, h5, h6{ 
-				font-family: ' . $heading_typography['face'] . '; 
-				font-weight: ' . $heading_typography['style'] . '; 
-				color: ' . $heading_typography['color'] . '; 
-			}';
-		}
 
-		$main_body_typography = of_get_option('main_body_typography');
-		if ($main_body_typography) {
-			$theme_options_styles .= '
-			body{ 
-				font-family: ' . $main_body_typography['face'] . '; 
-				font-weight: ' . $main_body_typography['style'] . '; 
-				color: ' . $main_body_typography['color'] . '; 
-			}';
-		}
-
-		$link_color = of_get_option('link_color');
-		if ($link_color) {
-			$theme_options_styles .= '
-			a{ 
-				color: ' . $link_color . '; 
-			}';
-		}
-
-		$link_hover_color = of_get_option('link_hover_color');
-		if ($link_hover_color) {
-			$theme_options_styles .= '
-			a:hover{ 
-				color: ' . $link_hover_color . '; 
-			}';
-		}
-
-		$link_active_color = of_get_option('link_active_color');
-		if ($link_active_color) {
-			$theme_options_styles .= '
-			a:active{ 
-				color: ' . $link_active_color . '; 
-			}';
-		}
-
-		$topbar_bg_color = of_get_option('top_nav_bg_color');
-		if ($topbar_bg_color) {
-			$theme_options_styles .= '
-			.top-nav { 
-				background-color: '. $topbar_bg_color . ';
-			}';
-		}
-
-		$use_gradient = of_get_option('showhidden_gradient');
-		if ($use_gradient) {
-			$topbar_bottom_gradient_color = of_get_option('top_nav_bottom_gradient_color');
-
-			$theme_options_styles .= '
-			.top-nav {
-				background-image: -khtml-gradient(linear, left top, left bottom, from(' . $topbar_bg_color . '), to('. $topbar_bottom_gradient_color . '));
-				background-image: -moz-linear-gradient(top, ' . $topbar_bg_color . ', '. $topbar_bottom_gradient_color . ');
-				background-image: -ms-linear-gradient(top, ' . $topbar_bg_color . ', '. $topbar_bottom_gradient_color . ');
-				background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, ' . $topbar_bg_color . '), color-stop(100%, '. $topbar_bottom_gradient_color . '));
-				background-image: -webkit-linear-gradient(top, ' . $topbar_bg_color . ', '. $topbar_bottom_gradient_color . '2);
-				background-image: -o-linear-gradient(top, ' . $topbar_bg_color . ', '. $topbar_bottom_gradient_color . ');
-				background-image: linear-gradient(top, ' . $topbar_bg_color . ', '. $topbar_bottom_gradient_color . ');
-				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'' . $topbar_bg_color . '\', endColorstr=\''. $topbar_bottom_gradient_color . '2\', GradientType=0);
-			}';
-		}
-		else{
-			$theme_options_styles .= '.top-nav { background-image: none; };';
-		}	
-
-		$topbar_link_color = of_get_option('top_nav_link_color');
-		if ($topbar_link_color) {
-			$theme_options_styles .= '
-			.top-nav a { 
-				color: '. $topbar_link_color . ' !important;
-			}';
-		}
-
-		$topbar_link_hover_color = of_get_option('top_nav_link_hover_color');
-		if ($topbar_link_hover_color) {
-			$theme_options_styles .= '
-			.top-nav a:hover { 
-				color: '. $topbar_link_hover_color . ' !important;
-			}';
-		}
-
-		$suppress_comments_message = of_get_option('suppress_comments_message');
-		if ($suppress_comments_message){
-			$theme_options_styles .= '
-			#main article {
-				border-bottom: none;
-			}';
-		}
-
-
-		if($theme_options_styles){
-			echo '<style>' 
-			. $theme_options_styles . '
-			</style>';
-		}
-
-		?>
 
 	</head>
 
 	<body <?php body_class(); ?>>
+
+		<div class="container">
 
 		<header role="banner" id="top-header" class="container">
 			<div class="row">
-				<div class="ten columns siteinfo">
+				<div class="twelve columns siteinfo">
 					<h1><a class="brand" id="logo" href="<?php echo get_bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
 					<h4 class="subhead"><?php echo get_bloginfo ( 'description' ); ?></h4>
 				</div>
-
-				<div class="two columns">
-					<ul class="top-nav nav-bar show-on-phones">
-						<li class="has-flyout"><a href="#">Menu</a>
-							<div class="top-nav flyout small">
-								<ul class="nice vertical tabs">
-									<?php mobile_nav(); ?>
-								</ul>
-							</div>
-						</li>
-					</ul>
-				</div>
-
 			</div>
 
 			<div class="row">
@@ -189,4 +74,4 @@
 
 		</header> <!-- end header -->
 
-		<div class="container">
+