Web Design & Development Projects

WordPress Design & Development | Hewescraft

I think I’ve said this before, but I love when I get a project that I code from the ground up. I like it for several reasons, the most significant of which is that I take pride in the cleanliness of my code. I try to do everything with the least amount of lines possible. A good example of that is the product menu on this site. The same code populates the top menu boat drop down as does the row of boats on the homepage and throughout the site in different places. If a link needs to be updated in the future, it only needs to be updated once, which should save time and make the code easier to maintain.

Other project highlights include the popup “Find a Dealer” map at the bottom of all pages. This map was made using my map code, which was refined significantly for this project. Hewescraft can add as many locations to the map by simply adding a location in the WordPress Admin. Although the design didn’t call for it, the code can also add a clickable legend that allows users to zoom to locations with a simple click.

Note: the site isn’t live currently, but should be soon. Since I left Voltage, someone else will be launching it.

Sherwin Williams WordPress Plugin

Skills: PHP, WordPress Plugin

Every once in a while a client will come to us with a very tedious task like, “can you update all 300 product SKUs based on this spreadsheet.” Doing this manually is time consuming and prone to error. Luckily, WordPress makes it easy to add a plugin to the site and manipulate the database quickly.

This project was fun because it was the first plugin for WordPress I had ever made. I’ve since added functionality to it to quickly delete spam comments that have built up overtime.

It turned out to be easier than I thought and it was fun to learn something new.

Brands @ Sherwin Williams Product Redesign

I’ve done several projects and many updates for Sherwin over the past year, but nothing that was significant until recently. This site is a beast. The client didn’t have us build the site originally but they’ve had us do all the updates (not good, I hate some people’s code). In addition, the site uses WordPress multi-site which can be buggy at times, particularly when the site has a lot of plugins, which they do.

The product redesign was nice because I get to change out more and more of the old code for new, better code. The site starts feeling more like my own. The product re-design was a challenge because of the tight timeline and the limited budget. Glad to say we hit the deadline and came in on-budget, so that is nice.

One of the highlights to the project is the carousel found on all subcategory pages like Products > Frazee. This gave me an opportunity to refine my carousel code found here.

Brunton Redesign

This was a re-skin of the existing site. Coding on shopify isn’t easy, particularly with version control, but we setup a repo in git and use Ruby to push to the Shopify api when a file changes. The feature I remember most about this project is the menu. One of the principles I code by is that the fewest lines of code is the best. On this site, the top navigation > all products and the sidebar navigation on the collection page is the exact same; therefore, it is easy to maintain. Other features of this redesign are the fully responsive slider, and the popup-video/images.

Google Sheets App

More and more these days I’m thinking of powerful ways to use Google Sheets for business needs. I recently created an “App” of sorts using only Google Sheets.

The project requirements were to maintain a future schedule for the main meeting in my church. I’m responsible for planning this meeting, which includes finding people to say prayers, people to speak, and hymns to sing.

The problem I had to solve was to allow the people responsible for different parts of the planning to communicate with each other (real time) while reducing the possibility of someone overriding another’s data and keeping some sensitive information private.

The solution was three Google Sheets that talk to each other. I have a sheet for themes and music that is populated by the music people. I have the planning document (with sometimes sensitive/private data) that I use to record future speakers and prayers; this document pulls in the themes and music (real time). And last, I have a program document that dynamically shows the next three weeks of the schedule so programs can be made.

It works like a charm. I’ve only found one issue; if someone opens the main document on a mobile phone and they close it before the sheet calculates, it breaks the formulas and shows errors in the program document. The work around is to replace the formulas with values if a week is totally planned.

ClearChoice Migration

ClearChoice.com was originally built in Drupal and their team decided to port it to WordPress for several strategic reasons. I was given access to the old site and a charge to re-create the whole thing, except the scheduler (which was ported over by Randy Lybert). This was a fun project because I tried to build most of landing pages using only one page template. Because of that, I got some good experience using and re-using snippets of code throughout the site. Another project highlight is the relationships between locations and doctors and how easy it is in the WordPress admin to add doctors to locations. These relationships took some well-thought-through architecture to get them to work right and not slow down the site on page load. In the end, the new site looks just like the old one, but it is much easier to edit and maintain. Success! 🙂

When we took over the site, it have a conversion rate of about .5%, it is now ~2%. Props to Randy Libert and the team for making that happen.

Code Snippets

One of the things I’m really happy about my last year at Voltage is my focus on creating reusable snippets of code that can be used to quickly deploy features on client sites. I’ve made my repository of code_snippets publicly available so that anyone can take advantage of them. Note, these are not for beginners, but if you’re familiar with HTML, CSS, and object oriented Javascript, you can easily take advantage of them.

I’m most proud of the Javascript structure of these snippets. Most of the Javascript in these files organized in a way that makes it really easy to drop it into an existing project. I start by creating a global object and then adding functions to it that can be called in the document ready or by other functions in the object. Each function returns an object after it is run that allows you to further manipulate the functionality at anytime. I’m not sure what this structure is called, it is somewhat of a hybrid of a structure I saw used on a site I made edits to and the better use of the object structure of Javascript. I’d love to hear your comments about this structure.

Keep in mind, that some of these are a work in progress, but all have been tested on at least one site. I welcome pull requests to improve the functionality, although I must say that I may be hesitant to add any code that I think is bulky or not very customization.

Some of the things you can do with these snippets.

Add a customizable, responsive modal to a page.
- I’m aware that there are tons of modal plugins out there, but many that I’ve found make customization hard. Customization is key at Voltage, so using this snippet, you can show a modal that plays a video, shows an image, shows a gallery, or even shows content. Oh, and did I mention it is responsive?
Add a Google Map with a clickable legend.
- Maps aren’t necessarily hard to add, but wading through the sometimes nebulous Google Maps API documentation isn’t fun. This snippet allows you to drop in the javascript and html and quickly have a map. You can even use the legend to interact with the map.
Make your javascript more responsive.
- These functions allow you to set breakpoint variables based on browser width and allow your Javascript to react to changes in these breakpoints. A great example of this is the customApp.breakpointImages function. You can modify your image tags to load images based on the active breakpoint.
Add a responsive, very customizable slider.
- I’ve tried many slider plugins and the problem with most is they are designed for people who don’t know how to code. For us, custmization is key, so I started using unslider, which is very customizable, but had some bugs in different browsers. Everything we build has to be compatible back to IE8, so I use these code snippets all the time to quickly deploy an unslider while making sure it is totally responsive and compatible.

There are more snippets that I didn’t mention, but these are a few that I keep finding insanely helpful. I hope you do to. Please add comments if you’d like to see me add stuff to them.

UpYourService Re-design

When I first got this project, I was hesitant. The goal was to port their old site (which was a mix of one Joomla install and several WordPress sites) into one consistent WordPress install; oh, and not lose money on the project. It turned out to be very difficult. One of the big learnings from this project was that your site will always be developed better if you get all the designs done before development starts. That said, it worked out in the end.

One of the hardest things to do was to keep the URLs the same on the new site. We had to do a bit of complex redirecting using built-in WordPress functionality but were able to make it happen.

Some other project highlights include Javascript parsing for branding keywords, making the site responsive across both css and javascript, and adding custom breadcrumbs to wordpress.

The text is parsed on each page looking for keywords like SignUp, ReadUp, MeasureUP, and ShowUp. When found, the Javascript adds html to the “Up” portion of the word to make it read. This reduced the amount of html needed to add this branding to the site and allows the user to add it to the WYSIWYG.

The responsive aspects of the site sync across both the javascript and css. It is pretty cool. One example of this is the slider. Each slider image has both a mobile and tablet version, in addition to a desktop version. The browser loads the relevant image and changes the images on re-size with the changes in CSS.

Lastly, the custom breadcrumbs took a considerable amount of work, but as you can see, they work like a charm.