BodyGems

This is the coolest site I ever made.:) The products were cool and I was really happy with how the design turned out. This is a WordPress eCommerce/brochure site. I used the theme Zonkers as a jumping off point.

I ran into a problem with this theme, and it was my first lesson in why it’s dangerous to depend on an outside developer. WooCommerce released an update just after I downloaded and installed the theme, but the theme developer did not update the theme at the time. A WooCommerce add on we purchased didn’t work with the theme because of that. Also, right before launch, WordPress released 4.5, and when I updated, the theme completely broke. I always make backups before I update anything, so I recovered the site and contacted the developer. It took a week or so before they resolved it. If the site had been live, that could have been a disaster.

mewo

Plugins

WP Smush – I had to increase page load time. This helped by optimizing all of the images in the Media Library.

WooCommerce Variation Swatches and Photos – This paid add on allows for the color and thumbnail swatches on select attributes.

WooCommerce Product Add-ons – Users who are logged in get the option to write a note specific to the product, within the quick view window.

WooCommerce PDF Invoices & Packing Slips – This free plugin is pretty sweet. It creates a PDF invoice of every order someone places. It also emails the PDF to the admin when a new order is placed. The free version is pretty customizable.

Slider Revolution – Probably the best slider plugin out there right now.

Instagram Feed – The client is very popular on Instagram, so I added this plugin and displayed it in the footer of the website. It shows his most recent pictures.

Gravity Forms MailChimp Add-On – This is to collect email addresses for the client’s mailing list. All you need is an API key from MailChimp and you can hook a form up to a MC list.

BCC Everything – I didn’t realize this until this project, but you can’t BCC an email on WooCommerce orders under the WooCommerce settings. This plugin lets you add an email, and that email gets BCC’d on everything. Which worked for my needs.

design

Code

This fully responsive site was coded with care using: HTML, CSS, JavaScript, jQuery, and PHP. Here are two helpful snippets I learned about while making the site.

Check to see if user is logged in

My client sells wholesale only. So he wanted people to be able to browse the site, while only being able to place an order if they are logged in.

<?php if (!is_user_logged_in()): ?>

Cancel out double click on mobile

This JS tidbit will cancel out the double click problem on mobile devices. For some reason the hover event counts as a click on my iPhone 4s. Make sure you change the link class to a specific class – or it could effect your menus and other elements.

jQuery(document).ready(function($){

    $('.home-banners a').on('click touchend', function(e) {
        var el = $(this);
        var link = el.attr('href');
        window.location = link;
     });

});

Share link via email

<a class="email social-icon" href="mailto:enter_your_friend_email@domain.com?body=<?php echo $share_url;?>" title="Email"><i class=”fa fa-envelope-o"></i></a>

Priority Shuttle Landing Page

priorityshuttle

Priority Shuttle Landing Page http://priorityshuttle.com/lp/airport

This is a landing page I designed and developed during my time at WebFly. The objective was to bring in leads through a PPC campaign. This fully responsive page was created from scratch with: HTML, CSS, JavaScript, jQuery, and PHP. I used jQuery UI for the form validation, date picker, and time picker.

Here’s something I learned while working on this. When a user inputs their email on the site’s form, the client gets an email from the site, but it will say From: user’s email. The client wanted to be able to hit reply, and have the inquirer’s email autofill in “To:” Read full details here.

$to = 'amanda@myemail.com';
$headers = "BCC: clients@myemail.com\r\n";  
$headers .= 'Reply-To: ' . $email . "\r\n";

Lakes Pediatric Dentistry

lakespd

Lakes Pediatric Dentistry http://www.lakespd.com

Lakes Pediatric Dentistry was created with a video masthead of a kid brushing his teeth. It brings motion and life to the page. This is a WordPress site I designed and built during my time at WebFly, using the Genesis Framework. It is totally responsive.

A design issue I see on a lot of pediatric dentists’ sites, is that it’s designed to appeal to kids. However, the parent is the one who will be researching and using the site, not the child. Still, the site should feel kid friendly and reassure the parent that they’re in the right place. I feel I accomplished this with my choice of color.

dental

Plugins

Genesis Simple Edits – This allows easy edits to the site’s footer. Instead of creating a child theme footer.php or creating a filter, you can edit a text box with HTML, PHP, and shortcodes.

Genesis Simple Hooks – This is a handy plugin that lets you find an available filter and add to it, instead of coding your own in functions.php.

Slidedeck – This isn’t my favorite slider plugin, but it does the job. I used this for the Office Tour. If I had to build the site again, I’d pick a better/more responsive slider.

Advanced Custom Fields – I used this on the homepage, FAQ, Services, and Meet Our Dentists page, to make it easy for the client to update content themselves.

Gravity Forms – my favorite form plugin.

lakespd

Code

For this site I used the usual: HTML, CSS, JavaScript, jQuery and PHP. Here is some code that helped me on this site.

Use a dynamic year for copyright

Instead of manually updating the year in your footer, use this bit of PHP.

<p>&copy; <?php echo date("Y"); ?></p>

Let’s Get Stone’d Marble and Granite

lgsdesign

Let’s Get Stone’d Marble and Granite http://www.lgsgranite.com

This is a site I’m really proud of. I created this during my time at WebFly for Let’s Get Stone’d Marble and Granite, a local home improvement business. There was a ton of content to sift through and organize. I believe I managed to organize the products in a way that makes sense to a potential customer, or even a casual browser.

I created this site using WordPress. We purchased the theme Artcore as a starting point. I kept a lot of Artcore’s ascetics and functionality, but customized the design and added a lot of functionality of my own. Artcore uses Bootstrap, which came in handy when developing. The real challenge was transforming Artcore, a portfolio theme, into a brochure site.

There are a lot of products on this site: stone countertops, wall tile, floor tile, fireplace surrounds, and hardscaping. The products are not meant to be purchased off site, but instead to show a customer a sample of the stone LGS has available. I used WooCommerce to structure the products, then removed pricing, and changed the Add to Cart button into a button that will trigger a pop-up form where the user can request a quote.

granite

Plugins

This theme came with some plugins in the bundle, for example: Aqua Page Builder, Contact Form 7, and Revolution Slider. But here is what I chose to add.

Gravity Forms – I like working with Gravity forms over Contact Form 7, which was included with the theme. So I swapped the forms out with Gravity Forms.

Gallery Factory (lite) – The client wanted a way to show off the slabs of granite and other stones that they keep in their yard. I liked the looks of this plugin and so I used it.

WooCommerce – LGS is not an eCommerce site, but I feel WooCommerce is also great for brochure sites. Instead of creating a custom post type and reinventing the wheel, I went with WooCommerce, which already has products and categories built in.

Yoast SEO – Artcore did not come with any SEO settings. In order to add meta data to the posts and pages, I needed an SEO plugin.

WOOF WooCommerce Product Filter – I wanted a simple way to filter products by color. This plugin provided the answer.

Redirection – The site was a redesign, and so outdated links needed 301’s to the new site. This is my go to plugin for that purpose.

granite

Code

Not everything can be done with a plugin, and it’s best not to use plugins when you can code it yourself. This reduces plugin bloat, and you won’t have to rely on an outside developer updating his/her code.

For this site I used HTML, CSS, Bootstrap (came with the theme), JavaScript, jQuery and PHP. The site  is fully responsive. I always check my sites in all major browsers. Here’s a tidbit of code for you.

Grab products from a specific WooCommerce product category

<?php
 query_posts( array( 'post_type' => 'product', 'product_cat' => 'prefabricated', 'showposts' => 100 ) );
 if ( have_posts() ) : while ( have_posts() ) : the_post();
 ?>

<ul>
  <li>
    <a rel="external" href="<? the_permalink()?>">
    <?php 
    if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
     the_post_thumbnail();
    } 
    ?>
    </a>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  </li>
 </ul>

<?php endwhile; endif; wp_reset_query(); ?>

DentaLux PA

This is a run down of a WordPress site I built during my time at Webfly – Dentalux PA. This was a redesign of the dentist’s old site, which wasn’t bad as far as dentist’s sites go, but it needed a modern face lift. The client wanted something clean and modern, and I wanted to stick with her original color theme, which I felt represented a clean, refreshing look. Also, I liked that it reminded me of toothpaste.😉

WebFly introduced me to the Genesis framework. It takes care of a lot of functionality for you, and equips you with hooks and filters within the WordPress admin, so you don’t have to write a function every time you want to, say, add something to the footer. I chose the Genesis child theme Epik as a boiler plate, but the design is completely my own.

dental

Plugins

I used Gravity Forms for every form. Some are pop-ups, I used JavaScript to handle that.

This site is on a shared server, so I installed Backup Buddy and Sucuri for security.

Genesis Simple Hooks – this is a great plugin to use when working with Genesis. It makes editing the footer and header much easier.

The client wanted to be able to edit certain things themselves, so I used Advanced Custom Fields on the homepage.

Custom Post Types, I used for Services and the Dentists’ bios.

Since this site is a redesign, I used Redirection to make sure the old links 301’d to the new.

dental

Code

Not everything can be done with a plugin, and not everything should be. For this site I used HTML, CSS, JavaScript, jQuery and PHP. The site  is fully responsive. I always check my sites in all major browsers.

Here’s how I grabbed my custom post type, “dentists”, and displayed them in front-page.php.

<?php $loop = new WP_Query( array( 'post_type' => 'dentists', 'posts_per_page' => -1 ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

Then call your thumbnail, permalink, etc., as you normally would.

Doing Web Stuff

Hello world! It’s been a while since I’ve posted. I’m currently working on my portfolio site. I haven’t had a whole lot of time available to focus on it over the past year, but now I do. In the mean time please check out what I’ve been keeping up with on Facebook:

And look at my most recent work on LinkedIn:

https://www.linkedin.com/in/amandawyckoff

I’m Redoing my Portfolio Site

My portfolio site is down as I redo it to show my new skills, so I’m redirecting you to my humble blog. If you want to see what I can do and the quality of some of my work, please refer to the links in the side navigation here. Also feel free to poke around on my DeviantArt, where I put all sorts of stuff I’m working on, from digital painting, photography, logo design, game design; really whatever I feel like getting into at the time.

http://antu.deviantart.com/

Also check out this site I launched last week with Arnolds Office Furniture!

http://www.arnoldsofficefurniture.com/

Another way to keep up with me is through social media. Find me on:

Facebook
LinkedIn
Pinterest