├── README.md
├── completed
    ├── archive.php
    ├── footer.php
    ├── functions.php
    ├── header.php
    ├── images
    │   ├── clothing.jpg
    │   ├── music.jpg
    │   └── posters.jpg
    ├── includes
    │   └── widgets.php
    ├── index.php
    ├── loop-page.php
    ├── loop-single.php
    ├── loop.php
    ├── page-full-width.php
    ├── page.php
    ├── screenshot.png
    ├── sidebar.php
    ├── single.php
    ├── style.css
    └── woocommerce
    │   └── loop
    │       └── no-products-found.php
└── start
    ├── archive.php
    ├── footer.php
    ├── functions.php
    ├── header.php
    ├── includes
        └── widgets.php
    ├── index.php
    ├── loop-page.php
    ├── loop-single.php
    ├── loop.php
    ├── page-full-width.php
    ├── page.php
    ├── screenshot.png
    ├── sidebar.php
    ├── single.php
    └── style.css


/README.md:
--------------------------------------------------------------------------------
 1 | # Developing a WooCommerce Theme
 2 | 
 3 | Learn how to create a custom theme for a WooCommerce store, making use of the WooCommerce API to ensure that the screens on your store fit with your overall theme and your store’s brand.
 4 | 
 5 | These source files comprise a theme developed for the [Tuts+ course][published url], which includes functions (in the `functions.php` file) that hook into hooks provided by the WooCommerce API. It also contains a template file in the `/woocommerce/loop` folder that overrides a template file provided by WooCommerce. See Part 5 of the course for a detailed description of how the theme is structured.
 6 | 
 7 | ## Files
 8 | 
 9 | This repository has two subdirectories:
10 |  - `start`: The starter theme for this course project.
11 |  - `completed`: The completed theme as developed in the course.
12 | 
13 | The completed theme includes the following template files:
14 | * `archive.php`
15 | * `index.php`
16 | * `page.php` - for static pages
17 | * `page-full-width.php`
18 | * `archive.php` - for archive pages
19 | * `header.php`
20 | * `sidebar.php`
21 | * `footer.php`
22 | * `loop.php`
23 | * `loop-single.php`
24 | * `loop-page.php`
25 | * `functions.php`
26 | 
27 | 
28 | ## Features
29 | 
30 | ### Featured images
31 | 
32 | These are displayed in the archive and index templates if they are present, using the medium size.
33 | 
34 | ### Menus
35 | 
36 | The default menu is in `header.php`, and uses the Menus admin
37 | 
38 | ### Styling
39 | 
40 | The theme uses Object Oriented CSS (OOCSS). The following clases are for layout and you can use them in your pages and posts. They are responsive, so will resize on smaller screens (for example the `.half` class is full width on phones).
41 | 
42 | * `.full-width`
43 | * `.three-quarters`
44 | * `.two-thirds`
45 | * `.half`
46 | * `.third`
47 | * `.quarter`
48 | 
49 | ### Hooks
50 | There are 7 action hooks:
51 | * Above the header
52 | * Inside the header
53 | * Before the content
54 | * After the content
55 | * In the sidebar
56 | * In the footer
57 | * After the footer
58 | 
59 | There are 3 filter hooks:
60 | * 1 in the header
61 | * 2 in the footer
62 | 
63 | 
64 | ### Widget Areas
65 | There are six widget areas, all added via the `widgets.php` file:
66 | - one in the header
67 | - one in the sidebar
68 | - four in the footer
69 | 
70 | 
71 | 
72 | These are source files for the Tuts+ course: [Developing a WooCommerce Theme][published url]
73 | 
74 | Available on [Tuts+](https://tutsplus.com) March, 2015
75 | 
76 | [published url]: https://code.tutsplus.com/courses/developing-a-woocommerce-theme
77 | 


--------------------------------------------------------------------------------
/completed/archive.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | /* the archive file - for displaying archives
 3 | */
 4 |  get_header(); ?>
 5 | 		
 6 | 			<?php
 7 | 			// action hook for any content placed before the content, including the widget area
 8 | 			do_action ( 'tutsplus_before_content' );
 9 | 			?>
10 | 	
11 | 			<?php get_template_part( 'loop' ); ?>
12 | 			
13 | <?php get_sidebar(); ?>
14 | <?php get_footer(); ?>


--------------------------------------------------------------------------------
/completed/footer.php:
--------------------------------------------------------------------------------
 1 | <?php // the footer template file - contains the footer itself plus the closing body and html tags ?>
 2 | 
 3 | 	</div><!-- .main -->
 4 | 
 5 | <footer>
 6 | 
 7 | 	<?php
 8 | 	// action hook for any content placed before the content, including the widget area
 9 | 	do_action ( 'tutsplus_footer' );
10 | 	?>
11 | 
12 | 	
13 | </footer>
14 | 
15 | <?php
16 | // action hook for any content placed before the content, including the widget area
17 | do_action ( 'tutsplus_after_footer' );
18 | ?>
19 | 
20 | 
21 | <?php wp_footer(); ?>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/completed/functions.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | // activate google fonts
  3 | function tutsplus_add_google_fonts() {
  4 | 	wp_register_style( 'googleFonts', 'http://fonts.googleapis.com/css?family=Open+Sans:400,300');
  5 | 	wp_enqueue_style( 'googleFonts');
  6 | }
  7 | add_action( 'wp_enqueue_scripts', 'tutsplus_add_google_fonts' );
  8 | 
  9 | // include for widgets
 10 | include( TEMPLATEPATH . '/includes/widgets.php' );
 11 | 
 12 | // register navigation menu
 13 | function tutsplus_register_theme_menu() {
 14 | 	register_nav_menu( 'primary', 'Main Navigation Menu' );
 15 | }
 16 | add_action( 'init', 'tutsplus_register_theme_menu' );
 17 | 
 18 | // register sidebar widgets
 19 | function tutsplus_widgets_init() {
 20 | 	
 21 | 	// In header widget area, located to the right hand side of the header, next to the site title and description. Empty by default.
 22 | 	register_sidebar( array(
 23 | 		'name' => __( 'In Header Widget Area', 'tutsplus' ),
 24 | 		'id' => 'in-header-widget-area',
 25 | 		'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'tutsplus' ),
 26 | 		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 27 | 		'after_widget' => '</div>',
 28 | 		'before_title' => '<h3 class="widget-title">',
 29 | 		'after_title' => '</h3>',
 30 | 	) );
 31 | 	
 32 | 	// Sidebar widget area, located in the sidebar. Empty by default.
 33 | 	register_sidebar( array(
 34 | 		'name' => __( 'Sidebar Widget Area', 'tutsplus' ),
 35 | 		'id' => 'sidebar-widget-area',
 36 | 		'description' => __( 'The sidebar widget area', 'tutsplus' ),
 37 | 		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 38 | 		'after_widget' => '</div>',
 39 | 		'before_title' => '<h3 class="widget-title">',
 40 | 		'after_title' => '</h3>',
 41 | 	) );
 42 | 	
 43 | 	// First footer widget area, located in the footer. Empty by default.
 44 | 	register_sidebar( array(
 45 | 		'name' => __( 'First Footer Widget Area', 'tutsplus' ),
 46 | 		'id' => 'first-footer-widget-area',
 47 | 		'description' => __( 'The first footer widget area', 'tutsplus' ),
 48 | 		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 49 | 		'after_widget' => '</div>',
 50 | 		'before_title' => '<h3 class="widget-title">',
 51 | 		'after_title' => '</h3>',
 52 | 	) );
 53 | 
 54 | 	// Second Footer Widget Area, located in the footer. Empty by default.
 55 | 	register_sidebar( array(
 56 | 		'name' => __('Second Footer Widget Area', 'tutsplus' ),
 57 | 		'id' => 'second-footer-widget-area',
 58 | 		'description' => __( 'The second footer widget area', 'tutsplus' ),
 59 | 		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 60 | 		'after_widget' => '</div>',
 61 | 		'before_title' => '<h3 class="widget-title">',
 62 | 		'after_title' => '</h3>',
 63 | 	) );
 64 | 
 65 | 	// Third Footer Widget Area, located in the footer. Empty by default.
 66 | 	register_sidebar( array(
 67 | 		'name' => __( 'Third Footer Widget Area', 'tutsplus' ),
 68 | 		'id' => 'third-footer-widget-area',
 69 | 		'description' => __( 'The third footer widget area', 'tutsplus' ),
 70 | 		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 71 | 		'after_widget' => '</div>',
 72 | 		'before_title' => '<h3 class="widget-title">',
 73 | 		'after_title' => '</h3>',
 74 | 	) );
 75 | 
 76 | 	// Fourth Footer Widget Area, located in the footer. Empty by default.
 77 | 	register_sidebar( array(
 78 | 		'name' => __( 'Fourth Footer Widget Area', 'tutsplus' ),
 79 | 		'id' => 'fourth-footer-widget-area',
 80 | 		'description' => __( 'The fourth footer widget area', 'tutsplus' ),
 81 | 		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 82 | 		'after_widget' => '</div>',
 83 | 		'before_title' => '<h3 class="widget-title">',
 84 | 		'after_title' => '</h3>',
 85 | 	) );
 86 | }
 87 | add_action( 'widgets_init', 'tutsplus_widgets_init' );
 88 | 
 89 | // add theme support for featured images
 90 | function tutsplus_theme_support() {
 91 | 	add_theme_support( 'post-thumbnails' ); 
 92 | }
 93 | add_action( 'after_setup_theme', 'tutsplus_theme_support' );
 94 | 
 95 | 
 96 | // colophon - activated via the tutsplus_after_footer hook
 97 | if ( ! function_exists( 'tutsplus_colophon' ) ) {
 98 | 	function tutsplus_colophon() { ?>
 99 | 		<section class="colophon" role="contentinfo">
100 | 			<small class="copyright half left">
101 | 				&copy; <a href="<?php echo apply_filters( 'tutsplus_colophon_link', home_url( '/' ) ) ?>"><?php echo apply_filters( 'tutsplus_colophon_name', get_bloginfo( 'name' ) ) ?></a> 2014
102 | 			</small><!-- #copyright -->
103 | 		
104 | 			<small class="credits half right">
105 | 					<?php _e( 'Proudly powered by', 'tutsplus' ); ?> <a href="http://wordpress.org/">WordPress</a>.
106 | 				</a>
107 | 			</small><!-- #credits -->
108 | 		</section><!--#colophon-->
109 | 
110 | 	<?php		
111 | 	}
112 | 
113 | }
114 | add_action( 'tutsplus_after_footer', 'tutsplus_colophon' );
115 | 
116 | // woocommerce support
117 | remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
118 | remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
119 | 
120 | function my_theme_wrapper_start() {
121 |   echo '<div class="main">';
122 | }
123 | add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
124 | 
125 | function my_theme_wrapper_end() {
126 |   echo '</div>';
127 | }
128 | add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);
129 | 
130 | add_theme_support( 'woocommerce' );
131 | 
132 | // home page header
133 | function tutsplus_cat_image_links() { ?>
134 | 		
135 | 		<div class="full-width clear product-cat-links">
136 | 			<div class="one-third left">
137 | 				<a href="<?php echo get_term_link( 'Clothing', 'product_cat' ); ?>">
138 | 					<img src ="<?php echo get_stylesheet_directory_uri(); ?>/images/clothing.jpg">
139 | 				</a>
140 | 				<h3>
141 | 					<a href="<?php echo get_term_link( 'Clothing', 'product_cat' ); ?>">Clothing</a>
142 | 				</h3>
143 | 			</div>
144 | 			<div class="one-third left">
145 | 				<a href="<?php echo get_term_link( 'Music', 'product_cat' ); ?>">
146 | 					<img src ="<?php echo get_stylesheet_directory_uri(); ?>/images/music.jpg">
147 | 				</a>
148 | 				<h3>
149 | 					<a href="<?php echo get_term_link( 'Music', 'product_cat' ); ?>">Music</a>
150 | 				</h3>
151 | 			</div>
152 | 			<div class="one-third right">
153 | 				<a href="<?php echo get_term_link( 'Posters', 'product_cat' ); ?>">
154 | 					<img src ="<?php echo get_stylesheet_directory_uri(); ?>/images/posters.jpg">
155 | 				</a>
156 | 				<h3>
157 | 					<a href="<?php echo get_term_link( 'Posters', 'product_cat' ); ?>">Posters</a>
158 | 				</h3>
159 | 			</div>
160 | 		</div>
161 | 		
162 | <?php }
163 | 
164 | function tutsplus_main_shop_before_content() {
165 | 	if( is_shop() && !is_search() ) {
166 | 		tutsplus_cat_image_links();
167 | 	}
168 | }
169 | add_action( 'woocommerce_before_main_content', 'tutsplus_main_shop_before_content' );
170 | 
171 | // featured products in sidebar
172 | function tutsplus_sidebar_products() {
173 | 	
174 | 	// query arguments
175 | 	$args = array(
176 | 		'post_type' => 'product',
177 | 		'product_tag' => 'Featured',
178 | 	);
179 | 	
180 | 	// run the loop
181 | 	$query = new WP_query ( $args );
182 | 	if ( $query->have_posts() ) { ?>
183 | 		<aside class="featured-products">
184 | 			<h3>Featured Products</h3>
185 | 			
186 | 			<ul>
187 | 				<?php while ( $query->have_posts() ) : $query->the_post(); /* start the loop */ ?>
188 | 			 
189 | 				<li id="post-<?php the_ID(); ?>" <?php post_class( 'half left' ); ?>>
190 | 				
191 | 					<?php if ( has_post_thumbnail() ) { ?>
192 | 						<a href="<?php the_permalink(); ?>">
193 | 							<?php the_post_thumbnail( 'thumbnail', array(
194 | 								'class' => 'left',
195 | 								'alt'	=> trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
196 | 							) ); ?>
197 | 						</a>
198 | 					<?php } ?>
199 | 					
200 | 					<a class="featured-product-text" href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'compass' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
201 | 				</li>
202 | 			 		 
203 | 				<?php endwhile; /* end the loop*/ ?>
204 | 		 	
205 | 			</ul>
206 | 				
207 | 		</aside>
208 | 		
209 | 		<?php rewind_posts(); ?>
210 | 	
211 | 	<?php }
212 | 	
213 | }
214 | add_action( 'tutsplus_sidebar', 'tutsplus_sidebar_products', 15 );
215 | 
216 | // category pages - image
217 | function tutsplus_product_cats_before_content() {
218 | if ( is_product_category() ){
219 | 	    global $wp_query;
220 | 	    $cat = $wp_query->get_queried_object();
221 | 	    $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
222 | 	    $image = wp_get_attachment_url( $thumbnail_id );
223 | 	    if ( $image ) {
224 | 		    echo '<img src="' . $image . '" alt="' . trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt )) . '" class="product-cat-image" />';
225 | 		}
226 | 	}
227 | }
228 | add_action( 'woocommerce_archive_description', 'tutsplus_product_cats_before_content', 5 );
229 | 
230 | function woocommerce_template_loop_product_thumbnail() {
231 | 
232 | 	if( is_product()) {
233 | 		echo woocommerce_get_product_thumbnail( 'thumbnail' );
234 | 	}
235 | 	else {
236 | 		echo woocommerce_get_product_thumbnail();		
237 | 	}
238 | }
239 | 
240 | // checkout customization
241 | function tutsplus_checkout_text() { ?>
242 | 	<p>Thanks for shopping with us. Please complete your details below.</p>
243 | <?php }
244 | add_action( 'woocommerce_before_checkout_form', 'tutsplus_checkout_text', 5 );
245 | ?>


--------------------------------------------------------------------------------
/completed/header.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!-- add a class to the html tag if the site is being viewed in IE, to allow for any big fixes -->
 3 | <!--[if lt IE 8]><html class="ie7"><![endif]-->
 4 | <!--[if IE 8]><html class="ie8"><![endif]-->
 5 | <!--[if IE 9]><html class="ie9"><![endif]-->
 6 | <!--[if gt IE 9]><html><![endif]-->
 7 | <!--[if !IE]><html><![endif]-->
 8 | <head>
 9 | <meta charset="<?php bloginfo( 'charset' ); ?>" />
10 | <meta name="viewport" content="width=device-width" />
11 | <title>
12 | 	<?php
13 | 	/*
14 | 	 * Print the <title> tag based on what is being viewed.
15 | 	 */
16 | 	global $page, $paged;
17 | 	wp_title( '|', true, 'right' );
18 | 
19 | 	// Add the blog name.
20 | 	bloginfo( 'name' );
21 | 
22 | 	// Add the blog description for the home/front page.
23 | 	$site_description = get_bloginfo( 'description', 'display' );
24 | 	if ( $site_description && ( is_home() || is_front_page() ) )
25 | 		echo " | $site_description";
26 | 	?>
27 | </title>
28 | 
29 | <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
30 | <?php wp_head(); ?>
31 | </head>
32 | 
33 | <body <?php body_class(); ?>> 
34 | 
35 | 	<?php
36 | 	// action hook for any content placed before the header, including the widget area
37 | 	do_action ( 'tutsplus_before_header' );
38 | 	?>
39 | 
40 | 
41 | 	<header role="banner">
42 | 	
43 | 		<div class="site-name half left">			
44 | 			<!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
45 | 			<h1 id="site-title">
46 | 				<a href="<?php echo home_url(); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php echo apply_filters( 'tutsplus_sitetitle', get_bloginfo( 'name' ) ); ?></a>
47 | 			</h1>
48 | 			<h2 id="site-description"><?php echo apply_filters( 'tutsplus_sitedescription', get_bloginfo( 'description' ) ); ?></h2>
49 | 		</div>
50 | 		
51 | 		<div class="half right">
52 | 			<!-- This area is by default in the top right of the header. It contains contact details and is also where you might add social media or RSS links -->
53 | 		
54 | 			<?php
55 | 			// action hook for any content placed inside the right hand header, including the widget area.
56 | 			do_action ( 'tutsplus_in_header' );
57 | 			?>
58 | 		</div> <!-- .half right -->
59 | 		
60 | 		
61 | 	</header>
62 | 
63 | <div class="navwrapper"><!-- for full width styling -->	
64 | 	<!-- full width navigation menu - delete nav element if using top navigation -->
65 | 	<nav class="menu main">
66 | 	  <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
67 | 		<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content"><?php _e( 'Skip to content', 'tutsplus' ); ?></a></div>
68 | 		<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
69 | 
70 | 	</nav><!-- .main -->
71 | </div><!-- .navwrapper-->
72 | 
73 | 	<div class="main">
74 | 	
75 | 		<?php if ( is_page_template( 'page-full-width.php' ) ) {
76 | 			
77 | 			echo '<div id ="content" class="full-width">';
78 | 		
79 | 		} else {
80 | 			
81 | 			echo '<div id="content" class="two-thirds left">';
82 | 		} ?>
83 | 		
84 | 			<?php
85 | 			// action hook for any content placed before the content, including the widget area
86 | 			do_action ( 'tutsplus_before_content' );
87 | 			?>


--------------------------------------------------------------------------------
/completed/images/clothing.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/developing-a-woocommerce-theme/c4f65a5ceb1d01d112639073a9bc338a6c7aa5eb/completed/images/clothing.jpg


--------------------------------------------------------------------------------
/completed/images/music.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/developing-a-woocommerce-theme/c4f65a5ceb1d01d112639073a9bc338a6c7aa5eb/completed/images/music.jpg


--------------------------------------------------------------------------------
/completed/images/posters.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/developing-a-woocommerce-theme/c4f65a5ceb1d01d112639073a9bc338a6c7aa5eb/completed/images/posters.jpg


--------------------------------------------------------------------------------
/completed/includes/widgets.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /******************************************************************
 3 | WordPress Theme Frameworks Tutorial - include file for widgets
 4 | ******************************************************************/
 5 | 
 6 | 
 7 | /******************************************************************
 8 | in header widget area, activated on the compass_in_header action hook
 9 | ******************************************************************/
10 | function tutsplus_in_header_widget_area() {
11 | 	if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>
12 | 		<aside class="in-header widget-area" role="complementary">
13 | 			<?php dynamic_sidebar( 'in-header-widget-area' ); ?>
14 | 		</aside>
15 | 	<?php } 
16 | }
17 | add_action( 'tutsplus_in_header', 'tutsplus_in_header_widget_area' );
18 | 
19 | 
20 | /******************************************************************
21 | sidebar widget area, activated on the compass_sidebar action hook
22 | ******************************************************************/
23 | function tutsplus_sidebar_widget_area() {
24 | 	if ( is_active_sidebar( 'sidebar-widget-area' ) ) { ?>
25 | 		<aside class="sidebar widget-area" role="complementary">
26 | 			<?php dynamic_sidebar( 'sidebar-widget-area' ); ?>
27 | 		</aside>
28 | 	<?php } 
29 | }
30 | add_action( 'tutsplus_sidebar', 'tutsplus_sidebar_widget_area' );
31 | 
32 | 
33 | /******************************************************************
34 | footer widget area, activated on the compass_footer action hook
35 | ******************************************************************/
36 | function tutsplus_footer_widget_area() { ?>
37 | 
38 | 	<aside class="fatfooter" role="complementary">
39 | 
40 | 		<?php
41 | 		// the first widget area
42 | 		if ( is_active_sidebar( 'first-footer-widget-area' ) ) { ?>
43 | 			<aside class="first quarter left widget-area">
44 | 				<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
45 | 			</aside><!-- .first .widget-area -->
46 | 		<?php } 
47 | 		
48 | 		// the second widget area
49 | 		if ( is_active_sidebar( 'second-footer-widget-area' ) ) { ?>
50 | 			<aside class="second quarter widget-area">
51 | 				<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
52 | 			</aside><!-- .first .widget-area -->
53 | 		<?php } 
54 | 	
55 | 		// the third widget area
56 | 		if ( is_active_sidebar( 'third-footer-widget-area' ) ) { ?>
57 | 			<aside class="third quarter widget-area">
58 | 				<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
59 | 			</aside><!-- .first .widget-area -->
60 | 		<?php } 
61 | 	
62 | 		// the fourth widget area
63 | 		if ( is_active_sidebar( 'fourth-footer-widget-area' ) ) { ?>
64 | 			<aside class="fourth right quarter widget-area">
65 | 				<?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?>
66 | 			</aside><!-- .first .widget-area -->
67 | 		<?php } ?>
68 | 	
69 | 	</aside>
70 | 
71 | <?php	
72 | }
73 | add_action( 'tutsplus_footer', 'tutsplus_footer_widget_area' );
74 | 
75 | ?>


--------------------------------------------------------------------------------
/completed/index.php:
--------------------------------------------------------------------------------
1 | <?php // the index template file - the default template file WordPress uses to display content ?>
2 | 
3 | <?php get_header(); ?>
4 | 				
5 | 			 <?php get_template_part( 'loop' ); ?>
6 | 			
7 | <?php get_sidebar(); ?>
8 | <?php get_footer(); ?>


--------------------------------------------------------------------------------
/completed/loop-page.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /***************************************************
 3 | 
 4 | The Loop for Pages
 5 | 
 6 | This theme uses a separate file for the loop instead of including it in individual template files, meaning that it can be used by multiple template files without duplication of code.
 7 | 
 8 | This loop is for pages - another loop is used for single posts and archives
 9 | 
10 | *****************************************************/
11 | 
12 | // Run the page loop to output the page content.
13 | 
14 | if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
15 | 
16 | 	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
17 | 		
18 | 		<?php if ( ! is_front_page() ) { ?>
19 | 			<h2 class="entry-title"><?php the_title(); ?></h2>
20 | 		<?php } ?>
21 | 		
22 | 		<section class="entry-content">
23 | 			<?php the_content(); ?>
24 | 		</section><!-- .entry-content -->
25 | 	</article><!-- #post-## -->
26 | 
27 | <?php endwhile; ?>


--------------------------------------------------------------------------------
/completed/loop-single.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /***************************************************
 3 | 
 4 | The Loop for single posts
 5 | 
 6 | This theme uses a separate file for the loop instead of including it in individual template files, meaning that it can be used by multiple template files without duplication of code.
 7 | 
 8 | This loop is for single posts - another loop is used for pages and for archives
 9 | 
10 | *****************************************************/
11 | 
12 | 
13 | /***************************************************
14 | The main loop
15 | ****************************************************/
16 | ?>	
17 | 			
18 | <?php // start the loop ?> 
19 | <?php while ( have_posts() ) : the_post(); ?>
20 | 
21 | <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
22 | 
23 | 	<h2 class="entry-title">
24 | 		<?php the_title(); ?>
25 | 	</h2>
26 | 
27 | 	<section class="left image quarter">
28 | 		
29 | 		<?php if ( has_post_thumbnail() ) { ?>
30 | 			<a href="<?php the_permalink(); ?>">
31 | 				<?php the_post_thumbnail( 'medium', array(
32 | 					'class' => 'left',
33 | 					'alt'	=> trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
34 | 				) ); ?>
35 | 			</a>
36 | 		<?php } ?>
37 | 	</section><!-- .image -->
38 | 
39 | 	<section class="entry-meta">
40 | 		<p>
41 | 			<?php 
42 | 			printf(  __('Posted on %s', 'tutsplus' ), get_the_date() );
43 | 			printf( __( ' by %s', 'tutsplus' ), get_the_author() );?>
44 | 		</p>
45 | 	</section><!-- .entry-meta -->
46 | 
47 | 	<section class="entry-content">
48 | 		<?php the_content(); ?>
49 | 	</section><!-- .entry-content -->
50 | 
51 | 	<section class="entry-meta">
52 | 		<?php if ( count( get_the_category() ) ) : ?>
53 | 			<span class="cat-links">
54 | 				<?php _e( 'Categories', 'tutsplus' )?>: <?php echo get_the_category_list( ', ' ); ?>
55 | 			</span>
56 | 		<?php endif; ?>	
57 | 	</section><!-- .entry-meta -->
58 | 	
59 | </article><!-- #01-->
60 | 
61 | <?php endwhile; ?>
62 | <?php // ends the loop ?> 
63 | 


--------------------------------------------------------------------------------
/completed/loop.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /***************************************************
 3 | 
 4 | The Loop for Posts and Archives
 5 | 
 6 | This theme uses a separate file for the loop instead of including it in individual template files, meaning that it can be used by multiple template files without duplication of code.
 7 | 
 8 | This loop is for single posts and archives - another loop is used for pages
 9 | 
10 | *****************************************************/
11 | 
12 | 
13 | /***************************************************
14 | The main loop
15 | Used by archive.php and index.php
16 | ****************************************************/
17 | 
18 | 
19 | /* Queue the first post, that way we know if this is a date archive so we can display the correct title.
20 |  * We reset this later so we can run the loop properly with a call to rewind_posts().
21 |  */
22 |  
23 | // check if we're on the main blog page and don't run if so
24 | 
25 | if ( ! is_front_page() ) {
26 |  
27 | 	if ( have_posts() )
28 | 		the_post();
29 | 	?>
30 | 	
31 | 			<h2 class="page-title">
32 | 				<?php if ( is_day() ) {
33 | 					printf(  __( 'Archive for %s', 'tutsplus' ), the_date() );
34 | 				}
35 | 				elseif ( is_month() ) {
36 | 					printf(  __( 'Archive for %s', 'tutsplus' ), the_date('F Y') );
37 | 				}
38 | 				elseif ( is_year() ) { 
39 | 					printf(  __( 'Archive for %s', 'tutsplus' ), the_date('Y') );
40 | 				}
41 | 				else {
42 | 					echo get_queried_object()->name; 
43 | 				} ?>
44 | 			</h2>
45 | 	
46 | 	<?php rewind_posts();
47 | 
48 | } ?>
49 | 			
50 | 			
51 | <?php // start the loop ?> 
52 | <?php while ( have_posts() ) : the_post(); ?>
53 | 
54 | <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
55 | 
56 | 	<h2 class="entry-title">
57 | 		<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'tutsplus' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
58 | 			<?php the_title(); ?>
59 | 		</a>
60 | 	</h2>
61 | 
62 | 	<section class="left image quarter">
63 | 		
64 | 		<?php if ( has_post_thumbnail() ) { ?>
65 | 			<a href="<?php the_permalink(); ?>">
66 | 				<?php the_post_thumbnail( 'medium', array(
67 | 					'class' => 'left',
68 | 					'alt'	=> trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
69 | 				) ); ?>
70 | 			</a>
71 | 		<?php } ?>
72 | 	</section><!-- .image -->
73 | 
74 | 	<section class="entry-meta">
75 | 		<p>
76 | 			<?php 
77 | 			printf(  __('Posted on %s', 'tutsplus' ), get_the_date() );
78 | 			printf( __( ' by %s', 'tutsplus' ), get_the_author() );?>
79 | 		</p>
80 | 	</section><!-- .entry-meta -->
81 | 
82 | 	<section class="entry-content">
83 | 		<?php the_content(); ?>
84 | 	</section><!-- .entry-content -->
85 | 
86 | 	<section class="entry-meta">
87 | 		<?php if ( count( get_the_category() ) ) : ?>
88 | 			<span class="cat-links">
89 | 				<?php _e( 'Categories', 'tutsplus' )?>: <?php echo get_the_category_list( ', ' ); ?>
90 | 			</span>
91 | 		<?php endif; ?>	
92 | 	</section><!-- .entry-meta -->
93 | 	
94 | </article><!-- #01-->
95 | 
96 | <?php endwhile; ?>
97 | <?php // ends the loop ?> 
98 | 


--------------------------------------------------------------------------------
/completed/page-full-width.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /*
 3 | Template Name: Full width page, no sidebar
 4 | */
 5 | 
 6 | get_header(); ?>
 7 | 
 8 | 	<?php get_template_part( 'loop' , 'page' ); ?>
 9 | 
10 | 	<?php
11 | 	// action hook for any content placed after the content, including the widget area
12 | 	do_action ( 'tutsplus_after_content' );
13 | 	?>	
14 | 	
15 | </div><! -- content-->
16 | 
17 | <?php get_footer(); ?>
18 | 


--------------------------------------------------------------------------------
/completed/page.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The template for displaying all pages.
 4 |  *
 5 |  */
 6 | 
 7 | get_header(); ?>
 8 | 
 9 | 	<?php
10 | 	// action hook for any content placed before the content, including the widget area
11 | 	do_action ( 'tutsplus_before_content' );
12 | 	?>
13 | 
14 | 	 <?php get_template_part( 'loop' , 'page' ); ?>
15 | 
16 | <?php get_sidebar(); ?>
17 | <?php get_footer(); ?>
18 | 


--------------------------------------------------------------------------------
/completed/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/developing-a-woocommerce-theme/c4f65a5ceb1d01d112639073a9bc338a6c7aa5eb/completed/screenshot.png


--------------------------------------------------------------------------------
/completed/sidebar.php:
--------------------------------------------------------------------------------
 1 | <?php // the sidebar template file - contains the sidebar widgets ?>
 2 | 
 3 | 	<?php
 4 | 	// action hook for any content placed after the content, including the widget area
 5 | 	do_action ( 'tutsplus_after_content' );
 6 | 	?>
 7 | 
 8 | </div><!-- #content -->
 9 | 
10 | <?php
11 | // action hook for any content placed in the sidebar, including the widget area
12 | do_action ( 'tutsplus_sidebar' );
13 | ?>
14 | 


--------------------------------------------------------------------------------
/completed/single.php:
--------------------------------------------------------------------------------
 1 | <?php // the single template file - used for single posts ?>
 2 | 
 3 | <?php get_header(); ?>
 4 | 		
 5 | 			<?php
 6 | 			// action hook for any content placed before the content, including the widget area
 7 | 			do_action ( 'tutsplus_before_content' );
 8 | 			?>
 9 | 
10 | 				
11 | 			 <?php get_template_part( 'loop', 'single' ); ?>
12 | 			
13 | <?php get_sidebar(); ?>
14 | <?php get_footer(); ?>


--------------------------------------------------------------------------------
/completed/style.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Theme Name: WooCommerce Theme Development
  3 | Theme URI: http://rachelmccollin.co.uk
  4 | Author: Rachel McCollin
  5 | Author URI: http://rachelmccollin.co.uk
  6 | Description: The theme to accompany the tutsplus course on developing a store theme for use with WooCommerce.
  7 | Version: 1.0
  8 | License: GNU General Public License v2 or later
  9 | License URI: http://www.gnu.org/licenses/gpl-2.0.html
 10 | */
 11 | 
 12 | 
 13 | /*Contents
 14 | 1. CSS reset
 15 | 2. Layout
 16 | 3. Global elements
 17 | 4. Menu
 18 | 5. Content
 19 | 6. Images and gallery
 20 | 7. Navigation
 21 | 8. Widget areas
 22 | 9. Footer
 23 | 10. Colours
 24 | 11. Media queries
 25 | 12. Print
 26 | */
 27 | 
 28 | 
 29 | /* 1. Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
 30 | -------------------------------------------------------------- */
 31 | 
 32 | /* http://meyerweb.com/eric/tools/css/reset/ 
 33 |    v2.0 | 20110126
 34 |    License: none (public domain)
 35 | */
 36 | 
 37 | html, body, div, span, applet, object, iframe,
 38 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 39 | a, abbr, acronym, address, big, cite, code,
 40 | del, dfn, em, img, ins, kbd, q, s, samp,
 41 | small, strike, strong, sub, sup, tt, var,
 42 | b, u, i, center,
 43 | dl, dt, dd, ol, ul, li,
 44 | fieldset, form, label, legend,
 45 | table, caption, tbody, tfoot, thead, tr, th, td,
 46 | article, aside, canvas, details, embed, 
 47 | figure, figcaption, footer, header, hgroup, 
 48 | menu, nav, output, ruby, section, summary,
 49 | time, mark, audio, video {
 50 | 	margin: 0;
 51 | 	padding: 0;
 52 | 	border: 0;
 53 | 	font-size: 100%;
 54 | 	font: inherit;
 55 | 	vertical-align: baseline;
 56 | }
 57 | /* HTML5 display-role reset for older browsers */
 58 | article, aside, details, figcaption, figure, 
 59 | footer, header, hgroup, menu, nav, section {
 60 | 	display: block;
 61 | }
 62 | body {
 63 | 	line-height: 1;
 64 | }
 65 | h1, h2, h3, h4, h5, h6 {
 66 | 	clear: both;
 67 | 	font-weight: normal;
 68 | }
 69 | ol, ul {
 70 | 	list-style: none;
 71 | }
 72 | blockquote, q {
 73 | 	quotes: none;
 74 | }
 75 | blockquote:before, blockquote:after,
 76 | q:before, q:after {
 77 | 	content: '';
 78 | 	content: none;
 79 | }
 80 | table {
 81 | 	border-collapse: collapse;
 82 | 	border-spacing: 0;
 83 | }
 84 | a img {
 85 | 	border: none;
 86 | }
 87 | 
 88 | /* 2. Layout
 89 | -------------------------------------------------------------- */
 90 | /* layout */
 91 | body, footer, .header-wrapper, .navwrapper, .banner-wrapper {
 92 | 	width: 100%;
 93 | 	margin: 0;
 94 | }
 95 | header, .main, .colophon, nav.main, .fatfooter {
 96 | 	margin: 0 auto;
 97 | 	width: 96%;
 98 | 	max-width: 1000px;
 99 | }
100 | .navwrapper {
101 | 	float: left;
102 | }
103 | .header-wrapper {
104 | 	padding: 10px 0;
105 | }
106 | div.main {
107 | 	padding-top: 1em;
108 | }
109 | footer {
110 | 	padding: 0;
111 | 	overflow: auto;
112 | 	margin-top: 20px;
113 | }
114 | .colophon {
115 | 	padding: 0.5em 0;
116 | }
117 | body {
118 | 	padding: 20px 0;
119 | }
120 | .banner-wrapper {
121 | 	margin: 0;
122 | }
123 | 
124 | 
125 | /* floats */
126 | .quarter,
127 | .one-third,
128 | .two-thirds,
129 | .half {
130 | 	float: left;
131 | }
132 | 
133 | /****************************** widths and margins ************************/
134 | 
135 | /* widths for different proportions */
136 | .one-third {
137 | 	width: 32%;
138 | }
139 | .two-thirds {
140 | 	width: 65.5%;
141 | }
142 | .quarter {
143 | 	width: 23.5%;
144 | }
145 | .three-quarters {
146 | 	width: 74.5%;
147 | }
148 | .half {
149 | 	width: 48%;
150 | }
151 | 
152 | /* margins - 1% generally except for the .half width. Remember that these will be cumulative
153 | - so four items side by side will have 6% added in margins, 
154 | assuming the left and right ones are given .left and .right classes */
155 | .one-third {
156 | 	margin: 0 0.5%;
157 | }
158 | .quarter,
159 | .two-thirds {
160 | 	margin: 0 0.5%;
161 | }
162 | .left,
163 | .quarter.left,
164 | .one-third.left {
165 | 	margin: 0 1% 0 0;
166 | 	float: left;
167 | }
168 | .right,
169 | .quarter.right,
170 | .one-third.right {
171 | 	margin: 0 0 0 1%;
172 | 	float: right;
173 | }
174 | .half.left {
175 | 	width: 48%;
176 | 	margin: 0 2% 0 0;
177 | }
178 | .half.right {
179 | 	width: 48%;
180 | 	margin: 0 0 0 2%;
181 | }
182 | .two-thirds.left {
183 | 	margin: 0 1% 0 0;
184 | }
185 | .two-thirds.right {
186 | 	margin: 0 0 0 1%;
187 | 	float: right;
188 | }
189 | 
190 | 
191 | /* adjust margins around floated images in line with larger screen size */
192 | #content .alignleft,
193 | #content img.alignleft {
194 | 	margin-right: 3%;
195 | }
196 | #content .alignright,
197 | #content img.alignright {
198 | 	margin-left: 3%;
199 | 	overflow: auto;
200 | }
201 | 
202 | /**************** archive page - margins between articles **********/
203 | .archive #content article,
204 | .blog #content article{
205 | 	margin-top: 10px;
206 | 	overflow: auto;
207 | }
208 | 
209 | /****************** floats *******************/
210 | 
211 | /* styles to ensure floated elements inside block elements laid out correctly */
212 | header,
213 | div.main,
214 | aside {
215 | 	overflow: auto;
216 | }
217 | .main-nav {
218 | 	width: 100%;
219 | 	clear: both;
220 | }
221 | div.main, footer {
222 | 	clear: both;
223 | }
224 | 
225 | /* styles for alignment - not used by main layout blocks but may be used within content on occasion */
226 | .floatleft {
227 | 	float: left;
228 | 	margin-right: 3%; /* approx 10px */
229 | }
230 | .floatright {
231 | 	float: right;
232 | 	margin-left: 3%; /* approx 10px */
233 | }
234 | .center {
235 | 	float: none;
236 | 	margin: 0 auto;
237 | }
238 | 
239 | /* class for clearing elements */
240 | .clear {
241 | 	clear: both;
242 | }
243 | 
244 | /**************** header - margins for breathing room **********/
245 | h1#site-title {
246 | 	margin-bottom: 0.2em;
247 | }
248 | h2#site-description {
249 | 	margin: 0 0 1em 0;
250 | 	font-size: 1.28em;
251 | }
252 | .header.widget-area {
253 | 	padding-top: 1em;
254 | }
255 | 
256 | /* search box */
257 | #woocommerce_product_search-2 {
258 | 	float: right;
259 | }
260 | 
261 | 
262 | 
263 | /**************** footer and widgets - margins for breathing room **********/
264 | 
265 | /* footer */
266 | footer .fatfooter {
267 | 	padding-top: 20px;
268 | 	padding-bottom: 20px;
269 | }
270 | 
271 | /* home page widgets */
272 | .home-page-widgets .widget-area {
273 | 	margin-top: 1em;
274 | 	margin-bottom: 1em;
275 | }
276 | 
277 | /
278 | 
279 | /* 3. Text Elements
280 | -------------------------------------------------------------- */
281 | 
282 | /* Main fonts and typographic styles */
283 | 
284 | body {
285 | 	font-size: 14px;
286 | 	line-height: 1.4em;
287 | 	font-family: Georgia, "Times New Roman", serif;
288 | }
289 | code {
290 | 	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
291 | }
292 | blockquote {
293 | 	font-style: italic;
294 | 	padding: 0 3em;
295 | }
296 | input[type="text"],
297 | textarea {
298 | 	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
299 | 	-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
300 | 	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
301 | 	padding: 2px;
302 | }
303 | 
304 | /* Contact details in header */
305 | header address {
306 | 	font-style: normal;
307 | 	text-align: right;
308 | }
309 | header address p {
310 | 	margin: 0.2em 0;
311 | }
312 | 
313 | /* Headings */
314 | h1, h2, h3, h4, .site-name {
315 | 	font-family: 'Open Sans', sans-serif;
316 | }
317 | h1, #site-title {
318 | 	font-size: 1.57em; /*22px*/
319 | }
320 | h2 {
321 | 	font-size: 1.28 em; /*18px*/
322 | }
323 | h3 {
324 | 	font-size: 1.14em; /*16px*/
325 | }
326 | h4 {
327 | 	font-size: 1em;
328 | 	font-style: bold;
329 | }
330 | h5{
331 | 	font-size: 1em;
332 | 	font-style: italic;
333 | }
334 | h6 {
335 | 	font-size: 1em;
336 | 	font-style: normal;
337 | }
338 | h1, h2, h3 {
339 | 	line-height: 1.2em;
340 | }	
341 | 
342 | /* Text element layout */
343 | 
344 | p {
345 | 	margin-bottom: 1em;
346 | }
347 | ul, ol, ul ul, ol ol, ul ul ul, ol ol ol {
348 | 	list-style-position: outside;
349 | 	padding-left: 1.4em;
350 | 	margin: 0 0 1.4em 0;
351 | }
352 | ol,ol ol, ol ol ol {
353 | 	padding-left: 1.7em;
354 | }
355 | 
356 | ul {
357 | 	list-style: disc;
358 | }
359 | ol {
360 | 	list-style: decimal;
361 | }
362 | ol ol {
363 | 	list-style: upper-alpha;
364 | }
365 | ol ol ol {
366 | 	list-style: lower-roman;
367 | }
368 | ol ol ol ol {
369 | 	list-style: lower-alpha;
370 | }
371 | ul ul,
372 | ol ol,
373 | ul ol,
374 | ol ul {
375 | 	margin-bottom: 0;
376 | }
377 | dl {
378 | 	margin: 0 0 2em 0;
379 | }
380 | dt {
381 | 	font-weight: bold;
382 | }
383 | dd {
384 | 	margin-bottom: 1.4em;
385 | }
386 | code {
387 | 	font-size: 0.8em;
388 | }
389 | abbr,
390 | acronym {
391 | 	cursor: help;
392 | }
393 | sup,
394 | sub {
395 | 	height: 0;
396 | 	line-height: 1;
397 | 	position: relative;
398 | 	vertical-align: baseline;
399 | }
400 | sup {
401 | 	bottom: 1ex;
402 | }
403 | sub {
404 | 	top: .5ex;
405 | }
406 | 
407 | /* Text meant only for screen readers */
408 | .screen-reader-text {
409 | 	position: absolute;
410 | 	left: -9000px;
411 | }
412 | 
413 | 
414 | 
415 | 
416 | /* 4. Menu
417 | -------------------------------------------------------------- */
418 | 
419 | .menu.main {
420 | 	margin-bottom: 10px;
421 | }
422 | .menu.main ul {
423 | 	list-style: none;
424 | 	margin: 0;
425 | 	padding-left: 0;
426 | }
427 | .menu.main li {
428 | 	float: left;
429 | 	position: relative;
430 | }
431 | .menu.main a {
432 | 	display: block;
433 | 	line-height: 3em;
434 | 	padding: 0 20px;
435 | 	text-decoration: none;
436 | }
437 | .menu.main ul ul {
438 | 	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
439 | 	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
440 | 	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
441 | 	display: none;
442 | 	position: absolute;
443 | 	top: 3em;
444 | 	left: 0;
445 | 	float: left;
446 | 	width: 180px;
447 | 	z-index: 99999;
448 | }
449 | .menu.main ul ul li {
450 | 	min-width: 180px;
451 | }
452 | .menu.main ul ul ul {
453 | 	left: 100%;
454 | 	top: 0;
455 | }
456 | .menu.main ul ul a {
457 | 	line-height: 1em;
458 | 	padding: 10px;
459 | 	width: 160px;
460 | 	height: auto;
461 | }
462 | .menu.main ul li:hover > ul {
463 | 	display: block;
464 | }
465 | 
466 | 
467 | /* 5. Content
468 | -------------------------------------------------------------- */
469 | 
470 | /* Content table styles */
471 | #content table {
472 | 	margin: 0 -1px 24px 0;
473 | 	text-align: left;
474 | 	width: 100%;
475 | }
476 | #content tr th,
477 | #content thead th {
478 | 	font-size: 0.8em;
479 | 	font-weight: bold;
480 | 	line-height: 1.4em;
481 | 	padding: 9px 24px;
482 | }
483 | #content tr td {
484 | 	padding: 6px 24px;
485 | }
486 | 
487 | 
488 | /* Asides */
489 | 
490 | .home #content .category-asides p,
491 | .home #content article aside p {
492 | 	font-size: 1em;
493 | 	line-height: 1.6em;
494 | 	margin-top: 0;
495 | }
496 | .home .hentry.category-asides {
497 | 	padding: 0;
498 | }
499 | .home #content .category-asides .entry-content,
500 | .home #content article aside .entry-content{
501 | 	padding-top: 0;
502 | }
503 | 
504 | /* Attachment pages */
505 | 
506 | .attachment .entry-content .entry-caption {
507 | 	font-size: 1.4em;
508 | }
509 | .attachment .entry-content .nav-previous a:before {
510 | 	content: '\2190\00a0';
511 | }
512 | .attachment .entry-content .nav-next a:after {
513 | 	content: '\00a0\2192';
514 | }
515 | 
516 | /* product category images */
517 | #content .product-cat-image {
518 | 	margin: 1em 0;
519 | }
520 | #content .term-description {
521 | 	font-family: 'Open Sans', sans-serif;
522 | 	color: #70C7D4;
523 | 	line-height: 1.4em;
524 | }
525 | 
526 | /* search page */
527 | body.search #content form,
528 | body.search #content h3 {
529 | 	margin: 1em 0;
530 | }
531 | 
532 | 
533 | /* 6. Gallery and images
534 | -------------------------------------------------------------- */
535 | 
536 | /* Images */
537 | 
538 | img {
539 | 	max-width: 100%;	
540 | }
541 | #content img {
542 | 	margin: 0;
543 | 	height: auto;
544 | 	width: auto;
545 | }
546 | #content .alignleft,
547 | #content img.alignleft {
548 | 	float: left;
549 | 	margin: 4px 4% 4px 0;
550 | }
551 | #content .alignright,
552 | #content img.alignright {
553 | 	float: right;
554 | 	margin: 4px 0 4px 4%;
555 | }
556 | #content .aligncenter,
557 | #content img.aligncenter {
558 | 	clear: both;
559 | 	display: block;
560 | 	margin-left: auto;
561 | 	margin-right: auto;
562 | }
563 | #content img.alignleft,
564 | #content img.alignright,
565 | #content img.aligncenter {
566 | 	margin-bottom: 12px;
567 | }
568 | 
569 | /* Captions */
570 | 
571 | #content .wp-caption {
572 | 	line-height: 1.4em;
573 | 	padding: 4px;
574 | 	text-align: center;
575 | }
576 | #content .wp-caption img {
577 | 	margin: 5px 5px 0;
578 | }
579 | #content .wp-caption p.wp-caption-text {
580 | 	font-size: 0.8em;
581 | 	margin: 5px;
582 | }
583 | 
584 | 
585 | /* Gallery */
586 | 
587 | #content .gallery {
588 | 	margin: 0 auto;
589 | }
590 | #content .gallery .gallery-item {
591 | 	float: left;
592 | 	margin-top: 0;
593 | 	text-align: center;
594 | 	width: 33%;
595 | }
596 | #content .gallery .gallery-item img {
597 | 	padding: 5px;
598 | 	border: 1px solid #bbb;
599 | }
600 | #content .gallery .gallery-caption {
601 | 	font-size: 0.8em;
602 | 	margin: 0 0 12px;
603 | }
604 | #content .gallery dl {
605 | 	margin: 0;
606 | }
607 | #content .gallery br+br {
608 | 	display: none;
609 | }
610 | #content .attachment img { /* centers single attachment images */
611 | 	display: block;
612 | 	margin: 0 auto;
613 | }
614 | 
615 | 
616 | /* 7. In-content navigation
617 | -------------------------------------------------------------- */
618 | 
619 | .navigation {
620 | 	font-size: 0.8em;
621 | 	line-height: 1.5em;
622 | 	overflow: hidden;
623 | }
624 | .nav-previous {
625 | 	float: left;
626 | 	width: 50%;
627 | }
628 | .nav-next {
629 | 	float: right;
630 | 	text-align: right;
631 | 	width: 50%;
632 | }
633 | .nav-below {
634 | 	margin: 20px 0;
635 | }
636 | 
637 | /* Links to product category archives */
638 | .product-cat-links {
639 | 	overflow: auto;
640 | 	margin-bottom: 1em;
641 | } 
642 | .product-cat-links div {
643 | 	position: relative;
644 | } 
645 | .product-cat-links h3 {
646 | 	position: absolute;
647 | 	right: 3px;
648 | 	bottom: 10px;
649 | 	font-size: 1.5em;
650 | }
651 | 
652 | 
653 | 
654 | 
655 | /* 8. Widget Areas
656 | -------------------------------------------------------------- */
657 | 
658 | .widget-area .widget-container {
659 | 	margin-left: 0;
660 | }
661 | .widget_search #s {/* This keeps the search inputs in line */
662 | 	width: 70%;
663 | }
664 | .widget_search label {
665 | 	display: none;
666 | }
667 | .widget-area a:link,
668 | .widget-area a:visited {
669 | 	text-decoration: none;
670 | }
671 | .widget-area a:active,
672 | .widget-area a:hover {
673 | 	text-decoration: underline;
674 | }
675 | .widget-area .entry-meta {
676 | 	font-size: 0.7em;
677 | }
678 | .widget-area ul {
679 | 	padding-left: 0;
680 | }
681 | .widget-area li {
682 | 	list-style-type: none;
683 | }
684 | #wp_tag_cloud div {
685 | 	line-height: 1.6em;
686 | }
687 | 
688 | /* featured products in sidebar */
689 | .featured-products {
690 | 	margin-top: 1em;
691 | }
692 | .featured-products ul {
693 | 	padding-left: 0;
694 | }
695 | .featured-products ul li {
696 | 	list-style: none;
697 | 	padding-top: 10px;
698 | 	position: relative;
699 | }
700 | .featured-products ul li .featured-product-text {
701 | 	position: absolute;
702 | 	right: 15px;
703 | 	bottom: 10px;
704 | }
705 | 
706 | 
707 | /* 9. Footer
708 | -------------------------------------------------------------- */
709 | 
710 | #credits a,
711 | #credits a:hover {
712 | 	text-decoration: underline;
713 | }
714 | #colophon {
715 | 	padding: 10px 0 20px 0;
716 | }
717 | 
718 | 
719 | /* 10. Colors
720 | -------------------------------------------------------------- */
721 | /* 
722 | Main colors:
723 | Petrol blue: #002C43
724 | Coral #CF4939
725 | Tan #977632
726 | Duck Egg #70C7D4
727 | Dark grey #494949
728 | 
729 | */
730 | body {
731 | 	color: #494949;
732 | }
733 | h1, #site-title a {
734 | 	color: #70C7D4;
735 | }
736 | h2 {
737 | 	color: #666;
738 | }
739 | h3, h4 {
740 | 	color: #999;
741 | }
742 | a:link, a:visited {
743 | 	color: #70C7D4;
744 | 	text-decoration: underline;
745 | }
746 | a:hover, a:active {
747 | 	color: #977632;
748 | 	text-decoration: underline;
749 | }
750 | .entry-title a:link,
751 | .entry-title a:visited,
752 | #site-title a:link,
753 | #site-title a:visited {
754 | 	text-decoration: none;
755 | }
756 | .entry-title a:hover,
757 | .entry-title a:active,
758 | #site-title a:hover,
759 | #site-title a:active  {
760 | 	text-decoration: underline;
761 | }
762 | 
763 | /* Menu colours */
764 | .navwrapper, .menu.main, .menu.main ul ul  {
765 | 	background: #002C43;
766 | }
767 | .menu.main a {
768 | 	color: #fff;
769 | }
770 | .menu.main li:hover > a,
771 | .menu.main ul ul :hover > a,
772 | .menu.main ul li.current_page_item > a,
773 | .menu.main ul li.current-menu-ancestor > a,
774 | .menu.main ul li.current-menu-item > a,
775 | .menu.main ul li.current-menu-parent > a,
776 | * html.menu .main ul li.current_page_item a,
777 | * html.menu .main ul li.current-menu-ancestor a,
778 | * html.menu .main ul li.current-menu-item a,
779 | * html.menu .main ul li.current-menu-parent a,
780 | * html.menu .main ul li a:hover {
781 | 	color: #fff;
782 | 	background: #70C7D4;
783 | }
784 | 
785 | 
786 | /* a background for the fat footer, with adjustments to text color */
787 | footer {
788 | 	background: #70C7D4;
789 | 	color: #fff;
790 | }
791 | footer a:link,
792 | footer a:visited {
793 | 	color: #fff;
794 | 	text-decoration: underline;
795 | }
796 | footer a:hover,
797 | footer a:active {
798 | 	color: #977632;
799 | }
800 | 
801 | /* single product page - colors */
802 | .woocommerce div.product p.price,
803 | .woocommerce div.product span.price {
804 | 	color: #977632 !important;
805 | }
806 | #content .product h2 {
807 | 	color: #70C7D4;
808 | }
809 | /* buttons */
810 | .woocommerce #respond input#submit.alt,
811 | .woocommerce a.button.alt,
812 | .woocommerce button.button.alt,
813 | .woocommerce input.button.alt {
814 | 	background-color: #CF4939 !important;
815 | }
816 | 
817 | /* related products */
818 | .woocommerce .related ul li.product,
819 | .woocommerce .related ul.products li.product, 
820 | .woocommerce .upsells.products ul li.product, 
821 | .woocommerce .upsells.products ul.products li.product, 
822 | .woocommerce-page .related ul li.product, 
823 | .woocommerce-page .related ul.products li.product, 
824 | .woocommerce-page .upsells.products ul li.product, 
825 | .woocommerce-page .upsells.products ul.products li.product {
826 | 	width: 25% !important;
827 | }
828 | 
829 | 
830 | /* 12. Media queries
831 | -------------------------------------------------------------- */
832 | 
833 | /* media queries for large desktop screens */
834 | @media screen and ( min-width: 1200px ) {
835 | }
836 | 
837 | /* media queries for larger screens such as small tablets in landscape or large tablets in portrait */
838 | @media screen and ( max-width: 780px ) {
839 | 	/* only the .quarter layout class is relevant here - all other classes will have full width */
840 | 	.quarter {
841 | 		width: 48%;
842 | 	}
843 | 	.quarter.left {
844 | 		margin-right: 2%;
845 | 	}
846 | 	.quarter.right {
847 | 		margin-left: 2%;
848 | 	}
849 | 	footer .third.quarter.widget-area {
850 | 		clear: both;
851 | 	}
852 | }
853 | 
854 | /* media queries for small screens in landscape mode (or similar) */
855 | @media screen and ( max-width: 600px ) {
856 | 	/* overall margins and padding - mainly vertical. These create some space around the elements of the layout */
857 | 	body, footer {
858 | 		width: 100%;
859 | 		max-width: 100%;
860 | 		margin: 0;
861 | 	}
862 | 	header, .main, .colophon, nav.main, .fatfooter {
863 | 		margin: 0 10px;
864 | 	}
865 | 	/* width sizing all full width in small screens */
866 | 	.quarter,
867 | 	.one-third,
868 | 	.half,
869 | 	.two-thirds,
870 | 	.three-quarters,
871 | 	.full-width {
872 | 		width: 100%;
873 | 		margin: 0;
874 | 	}
875 | 	/* padding adjustments */
876 | 	header, footer {
877 | 		padding: 10px 0;
878 | 	}
879 | 	.widget-area {
880 | 		padding: 0 0 10px 0;
881 | 	}
882 | }
883 | /* media queries for small screens in portrait mode (or similar) */
884 | @media screen and ( max-width: 400px ) {
885 | 
886 | }
887 | 
888 | /* 13. Print
889 | -------------------------------------------------------------- */
890 | @media print {
891 | 	body {
892 | 		background: none !important;
893 | 		clear: both !important;
894 | 		display: block !important;
895 | 		float: none !important;
896 | 		position: relative !important;
897 | 	}
898 | 	header,
899 | 	footer,
900 | 	.colophon {
901 | 		background: none !important;
902 | 	}
903 | 	header {
904 | 		padding-bottom: 18pt;
905 | 	}
906 | 	.colophon {
907 | 		border-top: 2pt solid #000;
908 | 	}
909 | 	.copyright,
910 | 	.credits {
911 | 		float: none;
912 | 		line-height: 1.4em;
913 | 		margin: 0;
914 | 		padding: 0;
915 | 		width: auto;
916 | 	}
917 | 	.site-title {
918 | 		font-size: 21pt;
919 | 	}
920 | 	.entry-content {
921 | 		font-size: 14pt;
922 | 		line-height: 1.6em;
923 | 	}
924 | 	.entry-title {
925 | 		font-size: 21pt;
926 | 	}
927 | 	nav.main,
928 | 	.respond,
929 | 	.comment-edit-link,
930 | 	.edit-link,
931 | 	.navigation,
932 | 	.page-link {
933 | 		display: none !important;
934 | 	}
935 | 	body,
936 | 	header,
937 | 	.main,
938 | 	footer {
939 | 		margin: 0;
940 | 		width: 100%;
941 | 	}
942 | 	#content,
943 | 	.one-column #content {
944 | 		margin: 24pt 0 0;
945 | 		width: 100%;
946 | 	}
947 | 	.wp-caption p {
948 | 		font-size: 11pt;
949 | 	}
950 | 	.colophon {
951 | 		width: auto;
952 | 	}
953 | 	img#wpstats {
954 | 		display: none;
955 | 	}
956 | 	#entry-author-info {
957 | 		border: 1px solid #e7e7e7;
958 | 	}
959 | 	.main {
960 | 		display: inline;
961 | 	}
962 | }


--------------------------------------------------------------------------------
/completed/woocommerce/loop/no-products-found.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Displayed when no products are found matching the current query.
 4 |  *
 5 |  * Overide of template from woocommerce
 6 |  *
 7 |  */
 8 | 
 9 | if ( ! defined( 'ABSPATH' ) ) {
10 | 	exit; // Exit if accessed directly
11 | }
12 | 
13 | ?>
14 | <h3>Sorry, we couldn't find anything matching your search.</h3>
15 | <p>Why not try another search?</p>
16 | <?php echo get_product_search_form(); ?>
17 | <h3>Alternatively check out our departments:</h3>
18 | <?php tutsplus_cat_image_links(); ?>
19 | 


--------------------------------------------------------------------------------
/start/archive.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | /* the archive file - for displaying archives
 3 | */
 4 |  get_header(); ?>
 5 | 		
 6 | 			<?php
 7 | 			// action hook for any content placed before the content, including the widget area
 8 | 			do_action ( 'tutsplus_before_content' );
 9 | 			?>
10 | 	
11 | 			<?php get_template_part( 'loop' ); ?>
12 | 			
13 | <?php get_sidebar(); ?>
14 | <?php get_footer(); ?>


--------------------------------------------------------------------------------
/start/footer.php:
--------------------------------------------------------------------------------
 1 | <?php // the footer template file - contains the footer itself plus the closing body and html tags ?>
 2 | 
 3 | 	</div><!-- .main -->
 4 | 
 5 | <footer>
 6 | 
 7 | 	<?php
 8 | 	// action hook for any content placed before the content, including the widget area
 9 | 	do_action ( 'tutsplus_footer' );
10 | 	?>
11 | 
12 | 	
13 | </footer>
14 | 
15 | <?php
16 | // action hook for any content placed before the content, including the widget area
17 | do_action ( 'tutsplus_after_footer' );
18 | ?>
19 | 
20 | 
21 | <?php wp_footer(); ?>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/start/functions.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | // activate google fonts
  3 | function tutsplus_add_google_fonts() {
  4 | 	wp_register_style( 'googleFonts', 'http://fonts.googleapis.com/css?family=Open+Sans:400,300');
  5 | 	wp_enqueue_style( 'googleFonts');
  6 | }
  7 | add_action( 'wp_enqueue_scripts', 'tutsplus_add_google_fonts' );
  8 | 
  9 | // include for widgets
 10 | include( TEMPLATEPATH . '/includes/widgets.php' );
 11 | 
 12 | // register navigation menu
 13 | function tutsplus_register_theme_menu() {
 14 | 	register_nav_menu( 'primary', 'Main Navigation Menu' );
 15 | }
 16 | add_action( 'init', 'tutsplus_register_theme_menu' );
 17 | 
 18 | // register sidebar widgets
 19 | function tutsplus_widgets_init() {
 20 | 	
 21 | 	// In header widget area, located to the right hand side of the header, next to the site title and description. Empty by default.
 22 | 	register_sidebar( array(
 23 | 		'name' => __( 'In Header Widget Area', 'tutsplus' ),
 24 | 		'id' => 'in-header-widget-area',
 25 | 		'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'tutsplus' ),
 26 | 		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 27 | 		'after_widget' => '</div>',
 28 | 		'before_title' => '<h3 class="widget-title">',
 29 | 		'after_title' => '</h3>',
 30 | 	) );
 31 | 	
 32 | 	// Sidebar widget area, located in the sidebar. Empty by default.
 33 | 	register_sidebar( array(
 34 | 		'name' => __( 'Sidebar Widget Area', 'tutsplus' ),
 35 | 		'id' => 'sidebar-widget-area',
 36 | 		'description' => __( 'The sidebar widget area', 'tutsplus' ),
 37 | 		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 38 | 		'after_widget' => '</div>',
 39 | 		'before_title' => '<h3 class="widget-title">',
 40 | 		'after_title' => '</h3>',
 41 | 	) );
 42 | 	
 43 | 	// First footer widget area, located in the footer. Empty by default.
 44 | 	register_sidebar( array(
 45 | 		'name' => __( 'First Footer Widget Area', 'tutsplus' ),
 46 | 		'id' => 'first-footer-widget-area',
 47 | 		'description' => __( 'The first footer widget area', 'tutsplus' ),
 48 | 		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 49 | 		'after_widget' => '</div>',
 50 | 		'before_title' => '<h3 class="widget-title">',
 51 | 		'after_title' => '</h3>',
 52 | 	) );
 53 | 
 54 | 	// Second Footer Widget Area, located in the footer. Empty by default.
 55 | 	register_sidebar( array(
 56 | 		'name' => __('Second Footer Widget Area', 'tutsplus' ),
 57 | 		'id' => 'second-footer-widget-area',
 58 | 		'description' => __( 'The second footer widget area', 'tutsplus' ),
 59 | 		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 60 | 		'after_widget' => '</div>',
 61 | 		'before_title' => '<h3 class="widget-title">',
 62 | 		'after_title' => '</h3>',
 63 | 	) );
 64 | 
 65 | 	// Third Footer Widget Area, located in the footer. Empty by default.
 66 | 	register_sidebar( array(
 67 | 		'name' => __( 'Third Footer Widget Area', 'tutsplus' ),
 68 | 		'id' => 'third-footer-widget-area',
 69 | 		'description' => __( 'The third footer widget area', 'tutsplus' ),
 70 | 		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 71 | 		'after_widget' => '</div>',
 72 | 		'before_title' => '<h3 class="widget-title">',
 73 | 		'after_title' => '</h3>',
 74 | 	) );
 75 | 
 76 | 	// Fourth Footer Widget Area, located in the footer. Empty by default.
 77 | 	register_sidebar( array(
 78 | 		'name' => __( 'Fourth Footer Widget Area', 'tutsplus' ),
 79 | 		'id' => 'fourth-footer-widget-area',
 80 | 		'description' => __( 'The fourth footer widget area', 'tutsplus' ),
 81 | 		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 82 | 		'after_widget' => '</div>',
 83 | 		'before_title' => '<h3 class="widget-title">',
 84 | 		'after_title' => '</h3>',
 85 | 	) );
 86 | }
 87 | add_action( 'widgets_init', 'tutsplus_widgets_init' );
 88 | 
 89 | // add theme support for featured images
 90 | function tutsplus_theme_support() {
 91 | 	add_theme_support( 'post-thumbnails' ); 
 92 | }
 93 | add_action( 'after_setup_theme', 'tutsplus_theme_support' );
 94 | 
 95 | 
 96 | // colophon - activated via the tutsplus_after_footer hook
 97 | if ( ! function_exists( 'tutsplus_colophon' ) ) {
 98 | 	function tutsplus_colophon() { ?>
 99 | 		<section class="colophon" role="contentinfo">
100 | 			<small class="copyright half left">
101 | 				&copy; <a href="<?php echo apply_filters( 'tutsplus_colophon_link', home_url( '/' ) ) ?>"><?php echo apply_filters( 'tutsplus_colophon_name', get_bloginfo( 'name' ) ) ?></a> 2014
102 | 			</small><!-- #copyright -->
103 | 		
104 | 			<small class="credits half right">
105 | 					<?php _e( 'Proudly powered by', 'tutsplus' ); ?> <a href="http://wordpress.org/">WordPress</a>.
106 | 				</a>
107 | 			</small><!-- #credits -->
108 | 		</section><!--#colophon-->
109 | 
110 | 	<?php		
111 | 	}
112 | 
113 | }
114 | add_action( 'tutsplus_after_footer', 'tutsplus_colophon' );
115 | 
116 | // woocommerce support
117 | remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
118 | remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
119 | 
120 | function my_theme_wrapper_start() {
121 |   echo '<div class="main">';
122 | }
123 | add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
124 | 
125 | function my_theme_wrapper_end() {
126 |   echo '</div>';
127 | }
128 | add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);
129 | 
130 | add_theme_support( 'woocommerce' );
131 | ?>


--------------------------------------------------------------------------------
/start/header.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!-- add a class to the html tag if the site is being viewed in IE, to allow for any big fixes -->
 3 | <!--[if lt IE 8]><html class="ie7"><![endif]-->
 4 | <!--[if IE 8]><html class="ie8"><![endif]-->
 5 | <!--[if IE 9]><html class="ie9"><![endif]-->
 6 | <!--[if gt IE 9]><html><![endif]-->
 7 | <!--[if !IE]><html><![endif]-->
 8 | <head>
 9 | <meta charset="<?php bloginfo( 'charset' ); ?>" />
10 | <meta name="viewport" content="width=device-width" />
11 | <title>
12 | 	<?php
13 | 	/*
14 | 	 * Print the <title> tag based on what is being viewed.
15 | 	 */
16 | 	global $page, $paged;
17 | 	wp_title( '|', true, 'right' );
18 | 
19 | 	// Add the blog name.
20 | 	bloginfo( 'name' );
21 | 
22 | 	// Add the blog description for the home/front page.
23 | 	$site_description = get_bloginfo( 'description', 'display' );
24 | 	if ( $site_description && ( is_home() || is_front_page() ) )
25 | 		echo " | $site_description";
26 | 	?>
27 | </title>
28 | 
29 | <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
30 | <?php wp_head(); ?>
31 | </head>
32 | 
33 | <body <?php body_class(); ?>> 
34 | 
35 | 	<?php
36 | 	// action hook for any content placed before the header, including the widget area
37 | 	do_action ( 'tutsplus_before_header' );
38 | 	?>
39 | 
40 | 
41 | 	<header role="banner">
42 | 	
43 | 		<div class="site-name half left">			
44 | 			<!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
45 | 			<h1 id="site-title">
46 | 				<a href="<?php echo home_url(); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php echo apply_filters( 'tutsplus_sitetitle', get_bloginfo( 'name' ) ); ?></a>
47 | 			</h1>
48 | 			<h2 id="site-description"><?php echo apply_filters( 'tutsplus_sitedescription', get_bloginfo( 'description' ) ); ?></h2>
49 | 		</div>
50 | 		
51 | 		<div class="half right">
52 | 			<!-- This area is by default in the top right of the header. It contains contact details and is also where you might add social media or RSS links -->
53 | 		
54 | 			<?php
55 | 			// action hook for any content placed inside the right hand header, including the widget area.
56 | 			do_action ( 'tutsplus_in_header' );
57 | 			?>
58 | 		</div> <!-- .half right -->
59 | 		
60 | 		
61 | 	</header>
62 | 
63 | <div class="navwrapper"><!-- for full width styling -->	
64 | 	<!-- full width navigation menu - delete nav element if using top navigation -->
65 | 	<nav class="menu main">
66 | 	  <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
67 | 		<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content"><?php _e( 'Skip to content', 'tutsplus' ); ?></a></div>
68 | 		<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
69 | 
70 | 	</nav><!-- .main -->
71 | </div><!-- .navwrapper-->
72 | 
73 | 	<div class="main">
74 | 	
75 | 		<?php if ( is_page_template( 'page-full-width.php' ) ) {
76 | 			
77 | 			echo '<div id ="content" class="full-width">';
78 | 		
79 | 		} else {
80 | 			
81 | 			echo '<div id="content" class="two-thirds left">';
82 | 		} ?>
83 | 		
84 | 			<?php
85 | 			// action hook for any content placed before the content, including the widget area
86 | 			do_action ( 'tutsplus_before_content' );
87 | 			?>


--------------------------------------------------------------------------------
/start/includes/widgets.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /******************************************************************
 3 | WordPress Theme Frameworks Tutorial - include file for widgets
 4 | ******************************************************************/
 5 | 
 6 | 
 7 | /******************************************************************
 8 | in header widget area, activated on the compass_in_header action hook
 9 | ******************************************************************/
10 | function tutsplus_in_header_widget_area() {
11 | 	if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>
12 | 		<aside class="in-header widget-area" role="complementary">
13 | 			<?php dynamic_sidebar( 'in-header-widget-area' ); ?>
14 | 		</aside>
15 | 	<?php } 
16 | }
17 | add_action( 'tutsplus_in_header', 'tutsplus_in_header_widget_area' );
18 | 
19 | 
20 | /******************************************************************
21 | sidebar widget area, activated on the compass_sidebar action hook
22 | ******************************************************************/
23 | function tutsplus_sidebar_widget_area() {
24 | 	if ( is_active_sidebar( 'sidebar-widget-area' ) ) { ?>
25 | 		<aside class="sidebar widget-area" role="complementary">
26 | 			<?php dynamic_sidebar( 'sidebar-widget-area' ); ?>
27 | 		</aside>
28 | 	<?php } 
29 | }
30 | add_action( 'tutsplus_sidebar', 'tutsplus_sidebar_widget_area' );
31 | 
32 | 
33 | /******************************************************************
34 | footer widget area, activated on the compass_footer action hook
35 | ******************************************************************/
36 | function tutsplus_footer_widget_area() { ?>
37 | 
38 | 	<aside class="fatfooter" role="complementary">
39 | 
40 | 		<?php
41 | 		// the first widget area
42 | 		if ( is_active_sidebar( 'first-footer-widget-area' ) ) { ?>
43 | 			<aside class="first quarter left widget-area">
44 | 				<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
45 | 			</aside><!-- .first .widget-area -->
46 | 		<?php } 
47 | 		
48 | 		// the second widget area
49 | 		if ( is_active_sidebar( 'second-footer-widget-area' ) ) { ?>
50 | 			<aside class="second quarter widget-area">
51 | 				<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
52 | 			</aside><!-- .first .widget-area -->
53 | 		<?php } 
54 | 	
55 | 		// the third widget area
56 | 		if ( is_active_sidebar( 'third-footer-widget-area' ) ) { ?>
57 | 			<aside class="third quarter widget-area">
58 | 				<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
59 | 			</aside><!-- .first .widget-area -->
60 | 		<?php } 
61 | 	
62 | 		// the fourth widget area
63 | 		if ( is_active_sidebar( 'fourth-footer-widget-area' ) ) { ?>
64 | 			<aside class="fourth right quarter widget-area">
65 | 				<?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?>
66 | 			</aside><!-- .first .widget-area -->
67 | 		<?php } ?>
68 | 	
69 | 	</aside>
70 | 
71 | <?php	
72 | }
73 | add_action( 'tutsplus_footer', 'tutsplus_footer_widget_area' );
74 | 
75 | ?>


--------------------------------------------------------------------------------
/start/index.php:
--------------------------------------------------------------------------------
1 | <?php // the index template file - the default template file WordPress uses to display content ?>
2 | 
3 | <?php get_header(); ?>
4 | 				
5 | 			 <?php get_template_part( 'loop' ); ?>
6 | 			
7 | <?php get_sidebar(); ?>
8 | <?php get_footer(); ?>


--------------------------------------------------------------------------------
/start/loop-page.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /***************************************************
 3 | 
 4 | The Loop for Pages
 5 | 
 6 | This theme uses a separate file for the loop instead of including it in individual template files, meaning that it can be used by multiple template files without duplication of code.
 7 | 
 8 | This loop is for pages - another loop is used for single posts and archives
 9 | 
10 | *****************************************************/
11 | 
12 | // Run the page loop to output the page content.
13 | 
14 | if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
15 | 
16 | 	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
17 | 		
18 | 		<?php if ( ! is_front_page() ) { ?>
19 | 			<h2 class="entry-title"><?php the_title(); ?></h2>
20 | 		<?php } ?>
21 | 		
22 | 		<section class="entry-content">
23 | 			<?php the_content(); ?>
24 | 		</section><!-- .entry-content -->
25 | 	</article><!-- #post-## -->
26 | 
27 | <?php endwhile; ?>


--------------------------------------------------------------------------------
/start/loop-single.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /***************************************************
 3 | 
 4 | The Loop for single posts
 5 | 
 6 | This theme uses a separate file for the loop instead of including it in individual template files, meaning that it can be used by multiple template files without duplication of code.
 7 | 
 8 | This loop is for single posts - another loop is used for pages and for archives
 9 | 
10 | *****************************************************/
11 | 
12 | 
13 | /***************************************************
14 | The main loop
15 | ****************************************************/
16 | ?>	
17 | 			
18 | <?php // start the loop ?> 
19 | <?php while ( have_posts() ) : the_post(); ?>
20 | 
21 | <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
22 | 
23 | 	<h2 class="entry-title">
24 | 		<?php the_title(); ?>
25 | 	</h2>
26 | 
27 | 	<section class="left image quarter">
28 | 		
29 | 		<?php if ( has_post_thumbnail() ) { ?>
30 | 			<a href="<?php the_permalink(); ?>">
31 | 				<?php the_post_thumbnail( 'medium', array(
32 | 					'class' => 'left',
33 | 					'alt'	=> trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
34 | 				) ); ?>
35 | 			</a>
36 | 		<?php } ?>
37 | 	</section><!-- .image -->
38 | 
39 | 	<section class="entry-meta">
40 | 		<p>
41 | 			<?php 
42 | 			printf(  __('Posted on %s', 'tutsplus' ), get_the_date() );
43 | 			printf( __( ' by %s', 'tutsplus' ), get_the_author() );?>
44 | 		</p>
45 | 	</section><!-- .entry-meta -->
46 | 
47 | 	<section class="entry-content">
48 | 		<?php the_content(); ?>
49 | 	</section><!-- .entry-content -->
50 | 
51 | 	<section class="entry-meta">
52 | 		<?php if ( count( get_the_category() ) ) : ?>
53 | 			<span class="cat-links">
54 | 				<?php _e( 'Categories', 'tutsplus' )?>: <?php echo get_the_category_list( ', ' ); ?>
55 | 			</span>
56 | 		<?php endif; ?>	
57 | 	</section><!-- .entry-meta -->
58 | 	
59 | </article><!-- #01-->
60 | 
61 | <?php endwhile; ?>
62 | <?php // ends the loop ?> 
63 | 


--------------------------------------------------------------------------------
/start/loop.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /***************************************************
 3 | 
 4 | The Loop for Posts and Archives
 5 | 
 6 | This theme uses a separate file for the loop instead of including it in individual template files, meaning that it can be used by multiple template files without duplication of code.
 7 | 
 8 | This loop is for single posts and archives - another loop is used for pages
 9 | 
10 | *****************************************************/
11 | 
12 | 
13 | /***************************************************
14 | The main loop
15 | Used by archive.php and index.php
16 | ****************************************************/
17 | 
18 | 
19 | /* Queue the first post, that way we know if this is a date archive so we can display the correct title.
20 |  * We reset this later so we can run the loop properly with a call to rewind_posts().
21 |  */
22 |  
23 | // check if we're on the main blog page and don't run if so
24 | 
25 | if ( ! is_front_page() ) {
26 |  
27 | 	if ( have_posts() )
28 | 		the_post();
29 | 	?>
30 | 	
31 | 			<h2 class="page-title">
32 | 				<?php if ( is_day() ) {
33 | 					printf(  __( 'Archive for %s', 'tutsplus' ), the_date() );
34 | 				}
35 | 				elseif ( is_month() ) {
36 | 					printf(  __( 'Archive for %s', 'tutsplus' ), the_date('F Y') );
37 | 				}
38 | 				elseif ( is_year() ) { 
39 | 					printf(  __( 'Archive for %s', 'tutsplus' ), the_date('Y') );
40 | 				}
41 | 				else {
42 | 					echo get_queried_object()->name; 
43 | 				} ?>
44 | 			</h2>
45 | 	
46 | 	<?php rewind_posts();
47 | 
48 | } ?>
49 | 			
50 | 			
51 | <?php // start the loop ?> 
52 | <?php while ( have_posts() ) : the_post(); ?>
53 | 
54 | <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
55 | 
56 | 	<h2 class="entry-title">
57 | 		<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'tutsplus' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
58 | 			<?php the_title(); ?>
59 | 		</a>
60 | 	</h2>
61 | 
62 | 	<section class="left image quarter">
63 | 		
64 | 		<?php if ( has_post_thumbnail() ) { ?>
65 | 			<a href="<?php the_permalink(); ?>">
66 | 				<?php the_post_thumbnail( 'medium', array(
67 | 					'class' => 'left',
68 | 					'alt'	=> trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
69 | 				) ); ?>
70 | 			</a>
71 | 		<?php } ?>
72 | 	</section><!-- .image -->
73 | 
74 | 	<section class="entry-meta">
75 | 		<p>
76 | 			<?php 
77 | 			printf(  __('Posted on %s', 'tutsplus' ), get_the_date() );
78 | 			printf( __( ' by %s', 'tutsplus' ), get_the_author() );?>
79 | 		</p>
80 | 	</section><!-- .entry-meta -->
81 | 
82 | 	<section class="entry-content">
83 | 		<?php the_content(); ?>
84 | 	</section><!-- .entry-content -->
85 | 
86 | 	<section class="entry-meta">
87 | 		<?php if ( count( get_the_category() ) ) : ?>
88 | 			<span class="cat-links">
89 | 				<?php _e( 'Categories', 'tutsplus' )?>: <?php echo get_the_category_list( ', ' ); ?>
90 | 			</span>
91 | 		<?php endif; ?>	
92 | 	</section><!-- .entry-meta -->
93 | 	
94 | </article><!-- #01-->
95 | 
96 | <?php endwhile; ?>
97 | <?php // ends the loop ?> 
98 | 


--------------------------------------------------------------------------------
/start/page-full-width.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /*
 3 | Template Name: Full width page, no sidebar
 4 | */
 5 | 
 6 | get_header(); ?>
 7 | 
 8 | 	<?php get_template_part( 'loop' , 'page' ); ?>
 9 | 
10 | 	<?php
11 | 	// action hook for any content placed after the content, including the widget area
12 | 	do_action ( 'tutsplus_after_content' );
13 | 	?>	
14 | 	
15 | </div><! -- content-->
16 | 
17 | <?php get_footer(); ?>
18 | 


--------------------------------------------------------------------------------
/start/page.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The template for displaying all pages.
 4 |  *
 5 |  */
 6 | 
 7 | get_header(); ?>
 8 | 
 9 | 	<?php
10 | 	// action hook for any content placed before the content, including the widget area
11 | 	do_action ( 'tutsplus_before_content' );
12 | 	?>
13 | 
14 | 	 <?php get_template_part( 'loop' , 'page' ); ?>
15 | 
16 | <?php get_sidebar(); ?>
17 | <?php get_footer(); ?>
18 | 


--------------------------------------------------------------------------------
/start/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/developing-a-woocommerce-theme/c4f65a5ceb1d01d112639073a9bc338a6c7aa5eb/start/screenshot.png


--------------------------------------------------------------------------------
/start/sidebar.php:
--------------------------------------------------------------------------------
 1 | <?php // the sidebar template file - contains the sidebar widgets ?>
 2 | 
 3 | 	<?php
 4 | 	// action hook for any content placed after the content, including the widget area
 5 | 	do_action ( 'tutsplus_after_content' );
 6 | 	?>
 7 | 
 8 | </div><!-- #content -->
 9 | 
10 | <?php
11 | // action hook for any content placed in the sidebar, including the widget area
12 | do_action ( 'tutsplus_sidebar' );
13 | ?>
14 | 


--------------------------------------------------------------------------------
/start/single.php:
--------------------------------------------------------------------------------
 1 | <?php // the single template file - used for single posts ?>
 2 | 
 3 | <?php get_header(); ?>
 4 | 		
 5 | 			<?php
 6 | 			// action hook for any content placed before the content, including the widget area
 7 | 			do_action ( 'tutsplus_before_content' );
 8 | 			?>
 9 | 
10 | 				
11 | 			 <?php get_template_part( 'loop', 'single' ); ?>
12 | 			
13 | <?php get_sidebar(); ?>
14 | <?php get_footer(); ?>


--------------------------------------------------------------------------------
/start/style.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Theme Name: WooCommerce Theme Development
  3 | Theme URI: http://rachelmccollin.co.uk
  4 | Author: Rachel McCollin
  5 | Author URI: http://rachelmccollin.co.uk
  6 | Description: The theme to accompany the tutsplus course on developing a store theme for use with WooCommerce.
  7 | Version: 1.0
  8 | License: GNU General Public License v2 or later
  9 | License URI: http://www.gnu.org/licenses/gpl-2.0.html
 10 | */
 11 | 
 12 | 
 13 | /*Contents
 14 | 1. CSS reset
 15 | 2. Layout
 16 | 3. Global elements
 17 | 4. Menu
 18 | 5. Content
 19 | 6. Images and gallery
 20 | 7. Navigation
 21 | 8. Widget areas
 22 | 9. Footer
 23 | 10. Colours
 24 | 11. Media queries
 25 | 12. Print
 26 | */
 27 | 
 28 | 
 29 | /* 1. Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
 30 | -------------------------------------------------------------- */
 31 | 
 32 | /* http://meyerweb.com/eric/tools/css/reset/ 
 33 |    v2.0 | 20110126
 34 |    License: none (public domain)
 35 | */
 36 | 
 37 | html, body, div, span, applet, object, iframe,
 38 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 39 | a, abbr, acronym, address, big, cite, code,
 40 | del, dfn, em, img, ins, kbd, q, s, samp,
 41 | small, strike, strong, sub, sup, tt, var,
 42 | b, u, i, center,
 43 | dl, dt, dd, ol, ul, li,
 44 | fieldset, form, label, legend,
 45 | table, caption, tbody, tfoot, thead, tr, th, td,
 46 | article, aside, canvas, details, embed, 
 47 | figure, figcaption, footer, header, hgroup, 
 48 | menu, nav, output, ruby, section, summary,
 49 | time, mark, audio, video {
 50 | 	margin: 0;
 51 | 	padding: 0;
 52 | 	border: 0;
 53 | 	font-size: 100%;
 54 | 	font: inherit;
 55 | 	vertical-align: baseline;
 56 | }
 57 | /* HTML5 display-role reset for older browsers */
 58 | article, aside, details, figcaption, figure, 
 59 | footer, header, hgroup, menu, nav, section {
 60 | 	display: block;
 61 | }
 62 | body {
 63 | 	line-height: 1;
 64 | }
 65 | h1, h2, h3, h4, h5, h6 {
 66 | 	clear: both;
 67 | 	font-weight: normal;
 68 | }
 69 | ol, ul {
 70 | 	list-style: none;
 71 | }
 72 | blockquote, q {
 73 | 	quotes: none;
 74 | }
 75 | blockquote:before, blockquote:after,
 76 | q:before, q:after {
 77 | 	content: '';
 78 | 	content: none;
 79 | }
 80 | table {
 81 | 	border-collapse: collapse;
 82 | 	border-spacing: 0;
 83 | }
 84 | a img {
 85 | 	border: none;
 86 | }
 87 | 
 88 | /* 2. Layout
 89 | -------------------------------------------------------------- */
 90 | /* layout */
 91 | body, footer, .header-wrapper, .navwrapper, .banner-wrapper {
 92 | 	width: 100%;
 93 | 	margin: 0;
 94 | }
 95 | header, .main, .colophon, nav.main, .fatfooter {
 96 | 	margin: 0 auto;
 97 | 	width: 96%;
 98 | 	max-width: 1000px;
 99 | }
100 | .navwrapper {
101 | 	float: left;
102 | }
103 | .header-wrapper {
104 | 	padding: 10px 0;
105 | }
106 | div.main {
107 | 	padding-top: 1em;
108 | }
109 | footer {
110 | 	padding: 0;
111 | 	overflow: auto;
112 | 	margin-top: 20px;
113 | }
114 | .colophon {
115 | 	padding: 0.5em 0;
116 | }
117 | body {
118 | 	padding: 20px 0;
119 | }
120 | .banner-wrapper {
121 | 	margin: 0;
122 | }
123 | 
124 | 
125 | /* floats */
126 | .quarter,
127 | .one-third,
128 | .two-thirds,
129 | .half {
130 | 	float: left;
131 | }
132 | 
133 | /****************************** widths and margins ************************/
134 | 
135 | /* widths for different proportions */
136 | .one-third {
137 | 	width: 32%;
138 | }
139 | .two-thirds {
140 | 	width: 65.5%;
141 | }
142 | .quarter {
143 | 	width: 23.5%;
144 | }
145 | .three-quarters {
146 | 	width: 74.5%;
147 | }
148 | .half {
149 | 	width: 48%;
150 | }
151 | 
152 | /* margins - 1% generally except for the .half width. Remember that these will be cumulative
153 | - so four items side by side will have 6% added in margins, 
154 | assuming the left and right ones are given .left and .right classes */
155 | .one-third {
156 | 	margin: 0 0.5%;
157 | }
158 | .quarter,
159 | .two-thirds {
160 | 	margin: 0 0.5%;
161 | }
162 | .left,
163 | .quarter.left,
164 | .one-third.left {
165 | 	margin: 0 1% 0 0;
166 | 	float: left;
167 | }
168 | .right,
169 | .quarter.right,
170 | .one-third.right {
171 | 	margin: 0 0 0 1%;
172 | 	float: right;
173 | }
174 | .half.left {
175 | 	width: 48%;
176 | 	margin: 0 2% 0 0;
177 | }
178 | .half.right {
179 | 	width: 48%;
180 | 	margin: 0 0 0 2%;
181 | }
182 | .two-thirds.left {
183 | 	margin: 0 1% 0 0;
184 | }
185 | .two-thirds.right {
186 | 	margin: 0 0 0 1%;
187 | 	float: right;
188 | }
189 | 
190 | 
191 | /* adjust margins around floated images in line with larger screen size */
192 | #content .alignleft,
193 | #content img.alignleft {
194 | 	margin-right: 3%;
195 | }
196 | #content .alignright,
197 | #content img.alignright {
198 | 	margin-left: 3%;
199 | 	overflow: auto;
200 | }
201 | 
202 | /**************** archive page - margins between articles **********/
203 | .archive #content article,
204 | .blog #content article{
205 | 	margin-top: 10px;
206 | 	overflow: auto;
207 | }
208 | 
209 | /****************** floats *******************/
210 | 
211 | /* styles to ensure floated elements inside block elements laid out correctly */
212 | header,
213 | div.main,
214 | aside {
215 | 	overflow: auto;
216 | }
217 | .main-nav {
218 | 	width: 100%;
219 | 	clear: both;
220 | }
221 | div.main, footer {
222 | 	clear: both;
223 | }
224 | 
225 | /* styles for alignment - not used by main layout blocks but may be used within content on occasion */
226 | .floatleft {
227 | 	float: left;
228 | 	margin-right: 3%; /* approx 10px */
229 | }
230 | .floatright {
231 | 	float: right;
232 | 	margin-left: 3%; /* approx 10px */
233 | }
234 | .center {
235 | 	float: none;
236 | 	margin: 0 auto;
237 | }
238 | 
239 | /* class for clearing elements */
240 | .clear {
241 | 	clear: both;
242 | }
243 | 
244 | /**************** header - margins for breathing room **********/
245 | h1#site-title {
246 | 	margin-bottom: 0.2em;
247 | }
248 | h2#site-description {
249 | 	margin: 0 0 1em 0;
250 | 	font-size: 1.28em;
251 | }
252 | .header.widget-area {
253 | 	padding-top: 1em;
254 | }
255 | 
256 | /* search box */
257 | #woocommerce_product_search-2 {
258 | 	float: right;
259 | }
260 | 
261 | 
262 | 
263 | /**************** footer and widgets - margins for breathing room **********/
264 | 
265 | /* footer */
266 | footer .fatfooter {
267 | 	padding-top: 20px;
268 | 	padding-bottom: 20px;
269 | }
270 | 
271 | /* home page widgets */
272 | .home-page-widgets .widget-area {
273 | 	margin-top: 1em;
274 | 	margin-bottom: 1em;
275 | }
276 | 
277 | /
278 | 
279 | /* 3. Text Elements
280 | -------------------------------------------------------------- */
281 | 
282 | /* Main fonts and typographic styles */
283 | 
284 | body {
285 | 	font-size: 14px;
286 | 	line-height: 1.4em;
287 | 	font-family: Georgia, "Times New Roman", serif;
288 | }
289 | code {
290 | 	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
291 | }
292 | blockquote {
293 | 	font-style: italic;
294 | 	padding: 0 3em;
295 | }
296 | input[type="text"],
297 | textarea {
298 | 	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
299 | 	-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
300 | 	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
301 | 	padding: 2px;
302 | }
303 | 
304 | /* Contact details in header */
305 | header address {
306 | 	font-style: normal;
307 | 	text-align: right;
308 | }
309 | header address p {
310 | 	margin: 0.2em 0;
311 | }
312 | 
313 | /* Headings */
314 | h1, h2, h3, h4, .site-name {
315 | 	font-family: 'Open Sans', sans-serif;
316 | }
317 | h1, #site-title {
318 | 	font-size: 1.57em; /*22px*/
319 | }
320 | h2 {
321 | 	font-size: 1.28 em; /*18px*/
322 | }
323 | h3 {
324 | 	font-size: 1.14em; /*16px*/
325 | }
326 | h4 {
327 | 	font-size: 1em;
328 | 	font-style: bold;
329 | }
330 | h5{
331 | 	font-size: 1em;
332 | 	font-style: italic;
333 | }
334 | h6 {
335 | 	font-size: 1em;
336 | 	font-style: normal;
337 | }
338 | h1, h2, h3 {
339 | 	line-height: 1.2em;
340 | }	
341 | 
342 | /* Text element layout */
343 | 
344 | p {
345 | 	margin-bottom: 1em;
346 | }
347 | ul, ol, ul ul, ol ol, ul ul ul, ol ol ol {
348 | 	list-style-position: outside;
349 | 	padding-left: 1.4em;
350 | 	margin: 0 0 1.4em 0;
351 | }
352 | ol,ol ol, ol ol ol {
353 | 	padding-left: 1.7em;
354 | }
355 | 
356 | ul {
357 | 	list-style: disc;
358 | }
359 | ol {
360 | 	list-style: decimal;
361 | }
362 | ol ol {
363 | 	list-style: upper-alpha;
364 | }
365 | ol ol ol {
366 | 	list-style: lower-roman;
367 | }
368 | ol ol ol ol {
369 | 	list-style: lower-alpha;
370 | }
371 | ul ul,
372 | ol ol,
373 | ul ol,
374 | ol ul {
375 | 	margin-bottom: 0;
376 | }
377 | dl {
378 | 	margin: 0 0 2em 0;
379 | }
380 | dt {
381 | 	font-weight: bold;
382 | }
383 | dd {
384 | 	margin-bottom: 1.4em;
385 | }
386 | code {
387 | 	font-size: 0.8em;
388 | }
389 | abbr,
390 | acronym {
391 | 	cursor: help;
392 | }
393 | sup,
394 | sub {
395 | 	height: 0;
396 | 	line-height: 1;
397 | 	position: relative;
398 | 	vertical-align: baseline;
399 | }
400 | sup {
401 | 	bottom: 1ex;
402 | }
403 | sub {
404 | 	top: .5ex;
405 | }
406 | 
407 | /* Text meant only for screen readers */
408 | .screen-reader-text {
409 | 	position: absolute;
410 | 	left: -9000px;
411 | }
412 | 
413 | 
414 | 
415 | 
416 | /* 4. Menu
417 | -------------------------------------------------------------- */
418 | 
419 | .menu.main {
420 | 	margin-bottom: 10px;
421 | }
422 | .menu.main ul {
423 | 	list-style: none;
424 | 	margin: 0;
425 | 	padding-left: 0;
426 | }
427 | .menu.main li {
428 | 	float: left;
429 | 	position: relative;
430 | }
431 | .menu.main a {
432 | 	display: block;
433 | 	line-height: 3em;
434 | 	padding: 0 20px;
435 | 	text-decoration: none;
436 | }
437 | .menu.main ul ul {
438 | 	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
439 | 	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
440 | 	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
441 | 	display: none;
442 | 	position: absolute;
443 | 	top: 3em;
444 | 	left: 0;
445 | 	float: left;
446 | 	width: 180px;
447 | 	z-index: 99999;
448 | }
449 | .menu.main ul ul li {
450 | 	min-width: 180px;
451 | }
452 | .menu.main ul ul ul {
453 | 	left: 100%;
454 | 	top: 0;
455 | }
456 | .menu.main ul ul a {
457 | 	line-height: 1em;
458 | 	padding: 10px;
459 | 	width: 160px;
460 | 	height: auto;
461 | }
462 | .menu.main ul li:hover > ul {
463 | 	display: block;
464 | }
465 | 
466 | 
467 | /* 5. Content
468 | -------------------------------------------------------------- */
469 | 
470 | /* Content table styles */
471 | #content table {
472 | 	margin: 0 -1px 24px 0;
473 | 	text-align: left;
474 | 	width: 100%;
475 | }
476 | #content tr th,
477 | #content thead th {
478 | 	font-size: 0.8em;
479 | 	font-weight: bold;
480 | 	line-height: 1.4em;
481 | 	padding: 9px 24px;
482 | }
483 | #content tr td {
484 | 	padding: 6px 24px;
485 | }
486 | 
487 | 
488 | /* Asides */
489 | 
490 | .home #content .category-asides p,
491 | .home #content article aside p {
492 | 	font-size: 1em;
493 | 	line-height: 1.6em;
494 | 	margin-top: 0;
495 | }
496 | .home .hentry.category-asides {
497 | 	padding: 0;
498 | }
499 | .home #content .category-asides .entry-content,
500 | .home #content article aside .entry-content{
501 | 	padding-top: 0;
502 | }
503 | 
504 | /* Attachment pages */
505 | 
506 | .attachment .entry-content .entry-caption {
507 | 	font-size: 1.4em;
508 | }
509 | .attachment .entry-content .nav-previous a:before {
510 | 	content: '\2190\00a0';
511 | }
512 | .attachment .entry-content .nav-next a:after {
513 | 	content: '\00a0\2192';
514 | }
515 | 
516 | 
517 | /* 6. Gallery and images
518 | -------------------------------------------------------------- */
519 | 
520 | /* Images */
521 | 
522 | img {
523 | 	max-width: 100%;	
524 | }
525 | #content img {
526 | 	margin: 0;
527 | 	height: auto;
528 | 	width: auto;
529 | }
530 | #content .alignleft,
531 | #content img.alignleft {
532 | 	float: left;
533 | 	margin: 4px 4% 4px 0;
534 | }
535 | #content .alignright,
536 | #content img.alignright {
537 | 	float: right;
538 | 	margin: 4px 0 4px 4%;
539 | }
540 | #content .aligncenter,
541 | #content img.aligncenter {
542 | 	clear: both;
543 | 	display: block;
544 | 	margin-left: auto;
545 | 	margin-right: auto;
546 | }
547 | #content img.alignleft,
548 | #content img.alignright,
549 | #content img.aligncenter {
550 | 	margin-bottom: 12px;
551 | }
552 | 
553 | /* Captions */
554 | 
555 | #content .wp-caption {
556 | 	line-height: 1.4em;
557 | 	padding: 4px;
558 | 	text-align: center;
559 | }
560 | #content .wp-caption img {
561 | 	margin: 5px 5px 0;
562 | }
563 | #content .wp-caption p.wp-caption-text {
564 | 	font-size: 0.8em;
565 | 	margin: 5px;
566 | }
567 | 
568 | 
569 | /* Gallery */
570 | 
571 | #content .gallery {
572 | 	margin: 0 auto;
573 | }
574 | #content .gallery .gallery-item {
575 | 	float: left;
576 | 	margin-top: 0;
577 | 	text-align: center;
578 | 	width: 33%;
579 | }
580 | #content .gallery .gallery-item img {
581 | 	padding: 5px;
582 | 	border: 1px solid #bbb;
583 | }
584 | #content .gallery .gallery-caption {
585 | 	font-size: 0.8em;
586 | 	margin: 0 0 12px;
587 | }
588 | #content .gallery dl {
589 | 	margin: 0;
590 | }
591 | #content .gallery br+br {
592 | 	display: none;
593 | }
594 | #content .attachment img { /* centers single attachment images */
595 | 	display: block;
596 | 	margin: 0 auto;
597 | }
598 | 
599 | 
600 | /* 7. In-content navigation
601 | -------------------------------------------------------------- */
602 | 
603 | .navigation {
604 | 	font-size: 0.8em;
605 | 	line-height: 1.5em;
606 | 	overflow: hidden;
607 | }
608 | .nav-previous {
609 | 	float: left;
610 | 	width: 50%;
611 | }
612 | .nav-next {
613 | 	float: right;
614 | 	text-align: right;
615 | 	width: 50%;
616 | }
617 | .nav-below {
618 | 	margin: 20px 0;
619 | }
620 | 
621 | 
622 | 
623 | 
624 | /* 8. Widget Areas
625 | -------------------------------------------------------------- */
626 | 
627 | .widget-area .widget-container {
628 | 	margin-left: 0;
629 | }
630 | .widget_search #s {/* This keeps the search inputs in line */
631 | 	width: 70%;
632 | }
633 | .widget_search label {
634 | 	display: none;
635 | }
636 | .widget-area a:link,
637 | .widget-area a:visited {
638 | 	text-decoration: none;
639 | }
640 | .widget-area a:active,
641 | .widget-area a:hover {
642 | 	text-decoration: underline;
643 | }
644 | .widget-area .entry-meta {
645 | 	font-size: 0.7em;
646 | }
647 | .widget-area ul {
648 | 	padding-left: 0;
649 | }
650 | .widget-area li {
651 | 	list-style-type: none;
652 | }
653 | #wp_tag_cloud div {
654 | 	line-height: 1.6em;
655 | }
656 | 
657 | 
658 | /* 9. Footer
659 | -------------------------------------------------------------- */
660 | 
661 | #credits a,
662 | #credits a:hover {
663 | 	text-decoration: underline;
664 | }
665 | #colophon {
666 | 	padding: 10px 0 20px 0;
667 | }
668 | 
669 | 
670 | /* 10. Colors
671 | -------------------------------------------------------------- */
672 | /* 
673 | Main colors:
674 | Petrol blue: #002C43
675 | Coral #CF4939
676 | Tan #977632
677 | Duck Egg #70C7D4
678 | Dark grey #494949
679 | 
680 | */
681 | body {
682 | 	color: #494949;
683 | }
684 | h1, #site-title a {
685 | 	color: #70C7D4;
686 | }
687 | h2 {
688 | 	color: #666;
689 | }
690 | h3, h4 {
691 | 	color: #999;
692 | }
693 | a:link, a:visited {
694 | 	color: #70C7D4;
695 | 	text-decoration: underline;
696 | }
697 | a:hover, a:active {
698 | 	color: #977632;
699 | 	text-decoration: underline;
700 | }
701 | .entry-title a:link,
702 | .entry-title a:visited,
703 | #site-title a:link,
704 | #site-title a:visited {
705 | 	text-decoration: none;
706 | }
707 | .entry-title a:hover,
708 | .entry-title a:active,
709 | #site-title a:hover,
710 | #site-title a:active  {
711 | 	text-decoration: underline;
712 | }
713 | 
714 | /* Menu colours */
715 | .navwrapper, .menu.main, .menu.main ul ul  {
716 | 	background: #002C43;
717 | }
718 | .menu.main a {
719 | 	color: #fff;
720 | }
721 | .menu.main li:hover > a,
722 | .menu.main ul ul :hover > a,
723 | .menu.main ul li.current_page_item > a,
724 | .menu.main ul li.current-menu-ancestor > a,
725 | .menu.main ul li.current-menu-item > a,
726 | .menu.main ul li.current-menu-parent > a,
727 | * html.menu .main ul li.current_page_item a,
728 | * html.menu .main ul li.current-menu-ancestor a,
729 | * html.menu .main ul li.current-menu-item a,
730 | * html.menu .main ul li.current-menu-parent a,
731 | * html.menu .main ul li a:hover {
732 | 	color: #fff;
733 | 	background: #70C7D4;
734 | }
735 | 
736 | 
737 | /* a background for the fat footer, with adjustments to text color */
738 | footer {
739 | 	background: #70C7D4;
740 | 	color: #fff;
741 | }
742 | footer a:link,
743 | footer a:visited {
744 | 	color: #fff;
745 | 	text-decoration: underline;
746 | }
747 | footer a:hover,
748 | footer a:active {
749 | 	color: #977632;
750 | }
751 | 
752 | 
753 | /* 12. Media queries
754 | -------------------------------------------------------------- */
755 | 
756 | /* media queries for large desktop screens */
757 | @media screen and ( min-width: 1200px ) {
758 | }
759 | 
760 | /* media queries for larger screens such as small tablets in landscape or large tablets in portrait */
761 | @media screen and ( max-width: 780px ) {
762 | 	/* only the .quarter layout class is relevant here - all other classes will have full width */
763 | 	.quarter {
764 | 		width: 48%;
765 | 	}
766 | 	.quarter.left {
767 | 		margin-right: 2%;
768 | 	}
769 | 	.quarter.right {
770 | 		margin-left: 2%;
771 | 	}
772 | 	footer .third.quarter.widget-area {
773 | 		clear: both;
774 | 	}
775 | }
776 | 
777 | /* media queries for small screens in landscape mode (or similar) */
778 | @media screen and ( max-width: 600px ) {
779 | 	/* overall margins and padding - mainly vertical. These create some space around the elements of the layout */
780 | 	body, footer {
781 | 		width: 100%;
782 | 		max-width: 100%;
783 | 		margin: 0;
784 | 	}
785 | 	header, .main, .colophon, nav.main, .fatfooter {
786 | 		margin: 0 10px;
787 | 	}
788 | 	/* width sizing all full width in small screens */
789 | 	.quarter,
790 | 	.one-third,
791 | 	.half,
792 | 	.two-thirds,
793 | 	.three-quarters,
794 | 	.full-width {
795 | 		width: 100%;
796 | 		margin: 0;
797 | 	}
798 | 	/* padding adjustments */
799 | 	header, footer {
800 | 		padding: 10px 0;
801 | 	}
802 | 	.widget-area {
803 | 		padding: 0 0 10px 0;
804 | 	}
805 | }
806 | /* media queries for small screens in portrait mode (or similar) */
807 | @media screen and ( max-width: 400px ) {
808 | 
809 | }
810 | 
811 | /* 13. Print
812 | -------------------------------------------------------------- */
813 | @media print {
814 | 	body {
815 | 		background: none !important;
816 | 		clear: both !important;
817 | 		display: block !important;
818 | 		float: none !important;
819 | 		position: relative !important;
820 | 	}
821 | 	header,
822 | 	footer,
823 | 	.colophon {
824 | 		background: none !important;
825 | 	}
826 | 	header {
827 | 		padding-bottom: 18pt;
828 | 	}
829 | 	.colophon {
830 | 		border-top: 2pt solid #000;
831 | 	}
832 | 	.copyright,
833 | 	.credits {
834 | 		float: none;
835 | 		line-height: 1.4em;
836 | 		margin: 0;
837 | 		padding: 0;
838 | 		width: auto;
839 | 	}
840 | 	.site-title {
841 | 		font-size: 21pt;
842 | 	}
843 | 	.entry-content {
844 | 		font-size: 14pt;
845 | 		line-height: 1.6em;
846 | 	}
847 | 	.entry-title {
848 | 		font-size: 21pt;
849 | 	}
850 | 	nav.main,
851 | 	.respond,
852 | 	.comment-edit-link,
853 | 	.edit-link,
854 | 	.navigation,
855 | 	.page-link {
856 | 		display: none !important;
857 | 	}
858 | 	body,
859 | 	header,
860 | 	.main,
861 | 	footer {
862 | 		margin: 0;
863 | 		width: 100%;
864 | 	}
865 | 	#content,
866 | 	.one-column #content {
867 | 		margin: 24pt 0 0;
868 | 		width: 100%;
869 | 	}
870 | 	.wp-caption p {
871 | 		font-size: 11pt;
872 | 	}
873 | 	.colophon {
874 | 		width: auto;
875 | 	}
876 | 	img#wpstats {
877 | 		display: none;
878 | 	}
879 | 	#entry-author-info {
880 | 		border: 1px solid #e7e7e7;
881 | 	}
882 | 	.main {
883 | 		display: inline;
884 | 	}
885 | }


--------------------------------------------------------------------------------