Yaletown Dog Training

Our task as a group for this final project was to create a responsive website for our client using WordPress. Working start to finish through all the techniques we were taught in class, we designed a website that had all the functionality that was agreed upon with our client to meet the needs of her business.

HTML 5 icon CSS 3 icon JavaScript icon jQuery icon Adobe Indesign icon Github icon PHP icon SASS icon WordPress icon
Yaletown Dog Training Website Redesign
Yaletown Dog Training Original Website

 The Planning

To start off this project we had a meeting with our client in order to better understand her needs and what she liked and didn’t about her current website. Given the quick time frame of this site we jumped right into creating wireframes for our client while going through the UX process to gather some information that would better help us create a great site for her. After wireframes were completed we met with our client to discuss how we thought the website should be laid out and what content was going to be kept, added or removed.

Yaletown Dog Training Wireframes
Yaletown Dog Training Competitive Analysis
Yaletown Dog Training User Personas
Yaletown Dog Training Quantitative Content Audit

 The Design

Yaletown Dog Training Style Tile

Through consistent communication with our client we decided on a color scheme and created a style tile for colors, fonts, a custom logo as well as navigation and button styles. After this point we were ready to start on development. We got set up with fresh Wordpress installations on our live site and across the teams local servers. We used Github and Sass for this project in order to get more familiar with version control and .scss while working in a team.

 The Code

One section of this project that I am especially proud of is the isotope used to sort the videos. I struggled a lot with this section because initially I didn’t understand how it was working or how tutorials I was watching were supposed to translate to WordPress usage, but after a discussion with my instructor and taking a step back to break everything down step by step I managed to get it working!

Yaletown Dog Training Videos Page
Yaletown Dog Training Github Repository
Videos Page Isotope

<main id="main" class="site-main" role="main">
    <h2 class="filtertitle">Video Categories:</h2> 
        <section class="filter widget"> 
        
            <ul id="filters" class="filter-list" data-group="video-category"> 
                <li><a href="#" data-filter="*" class="selected">All</a></li>

                <?php
                    $terms = get_terms( 'video-category' );
                        if ( !empty( $terms ) && !is_wp_error( $terms ) ) {
                            foreach( $terms as $term) {
                            echo '<li><a href="#" data-filter=".'.$term->slug.'">' . $term->name . '</a></li>';
                        }
                    }
                ?>
            </ul> </section> <div id="video-list" class="video-flex-wrapper">

        <?php
            $args = array(
                'post_type'=> 'video',
                'posts_per_page' => -1
            );

            $videos = new WP_Query($args);

            if ( $videos->have_posts() ) {
                while($videos->have_posts()) {
                    $videos->the_post();

                    $termList = get_the_terms( $post->object, 'video-category' );
                    $termName = "";

                    foreach ( $termList as $term ) { // for each term
                        $termName .= $term->slug.' '; //create a string that has all the slugs
                    }

                    if( function_exists('get_field') ) {
                        if( get_field('video_url') ) {
                            echo '<div class="'. $termName. 'item video-item">';
                            the_field('video_url');
                            echo '<h3 class="video-time-title">';
                            the_title();
                            echo '</h3>';
                        }

                        if( get_field('video_description') ) {
                            echo '<p class="video_description">';
                            the_field('video_description');
                            echo '</p>';
                        }
                    echo '</div>';
                    }
                }
            }
        ?>
    </div>
</main>
		
Yaletown Dog Training Home Page

I was in charge of laying out the front page image slider and learning how to use the advanced custom field repeater to display the services and page description. As this was the first time we had used this advanced custom field and needed the icons to link to their corresponding pages, there was a lot of reading and trial and error to get the sections to display how we wanted them to. The floating text over the image gallery slider was also a challenge as we dealt with positioning the quotes in a way that allowed for them to be responsive across all devices. I also created custom icons in Adobe Illustrator for our client to use for the different sections with inverted copies that she can substitute if desired.

Front Page Gallery

<?php if( have_rows('image_slider') ): ?>
<div class="flexslider gallery-slider">
	<ul class="slides gallery-slides">
		<?php while( have_rows('image_slider') ): the_row();
			$image = get_sub_field('slider_image');
			$quote = get_sub_field('slider_quote');
			$author = get_sub_field('slider_author');
			$url = $image['url'];
			$alt = $image['alt'];
			$size = 'large-slider';
			$myimage = $image['sizes'][ $size ];
			$width = $image['sizes'][ $size . '-width' ];
			$height = $image['sizes'][ $size . '-height' ];
		?>
		<li>
			<div class="slider-text">
				<?php if( $quote ): ?>
				<div class="slider_quote">
					<h3><?php echo $quote; ?></h3>
				</div>
				<?php endif; ?>
				<?php if( $author ): ?>
				<div class="slider_author">
					<h4><?php echo $author; ?></h4>
				</div>
				<?php endif; ?>
			</div>
		<div class="slider_image">
			<img src="<?php echo $myimage; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>"/>
		</div>
		<?php endwhile; ?>
		</li>
		<?php endif; ?>
	</ul>
</div>
		
Front Page Service Fields

<div class="services">
	<?php if( have_rows('service_fields') ): ?>

		<?php while( have_rows('service_fields') ): the_row();
			$icon = get_sub_field('service_icon');
			$title = get_sub_field('service_title');
			$content = get_sub_field('service_text');
			$link = get_sub_field('service_icon_link');
			?>
			<div class="single-service">

				<?php if( $link ): ?>
					<a href="<?php echo $link; ?>"><img class="aligncenter" src="<?php echo $icon['url']; ?>" alt="<?php echo $icon['alt']; ?>" />
				<?php endif; ?>

				<?php if( $link ): ?>
					</a>
				<?php endif; ?>

			  	<h4><?php echo $title; ?></h4>

				<p><?php echo $content; ?></p>
			</div>
		<?php endwhile; ?>

	<?php endif; ?>
</div>