Making TerraDolls.com

With Wordpress and X Theme

Posted on July 3, 2015 in webdev, wordpress

Getting Started

A few months I learned a valuable lesson about the power of "doing". Advanced beginners have the tendency to get stuck in "analysis paralysis" while they are learning a new trade. I was in this phase myself. I was reading a few books, taking a udemy web development course, downloading ruby on rails courses from lynda, and more. At the time, my wife was selling dolls on etsy, trying to get her business going.

I was in the middle of the wordpress section of my course and I was looking for a real project to test my skills on. So first, I thought of a basic design and started to build a very basic page from the bottom up. I started it thinking that the core feature of the website would be the doll-customizer, which lets you choose the head, dress, and legs of a doll from a collection of images, and then make a custom order.

Here is picture of the first draft doll-creator:

And the code that reacts to a click event on the left/right arrows:

I basically used the same code that I used on the head for the body and the legs, making the script pretty long and redundant. The customizer worked pretty well but it was going to take a long time to get it ready before we needed it to launch the website, so we changed our plans.

Change of Plans

After I realized how much work it would actually take to make a full-functioning website, I decided to take a shot at a Wordpress site. Terra needed a good landing page and shop before the weekend so it made more sense at the time. In retrospect, I’m glad that I was pressed for time because it pushed me to learn new things quickly.

After looking around a bit, it looked like the x theme for Wordpress was the best theme to use. It costed quite a bit of money but it was worth it for its versatility. The x theme has a customizer built in to it which offers you very detailed options and a realtime editor.

My favorite things about Wordpress:

  1. It has thousands of plugins. I used WooCommerce to create a shop for TerraDolls. It was a piece of cake to set up.

  2. Shortcodes. Most plugins make themselves useful and adaptable by providing shortcodes which can be used on any page or post. The jumbotron on the main page is a simple shortcode, along with the pane of featured products.

Custom Dolls Page

Terra came up with some great designs for how the site should look and behave, so I started to implement custom CSS and Javascript. The Custom Dolls Page is the best example of some custom work.

This was pretty fun to make, although it did take quite a while to modify the images to look uniform. Javascript’s only role on this page is to hide and/or show the “other” fields. These show up when you click “other” on one of the customization options. I now realize that all of the images did not have to be hardcoded. The next time I do this, I will try to use AngularJS’s “ng-repeat” directive.

The trickiest part of this page was making the images act as radio buttons. Here is the html I used:

<div class="radio_div"><label class="image_radio"><input type="radio" name="hair_color" value="red" />

<img src="http://terradolls.com/wp-content/uploads/2015/08/hair-color-RED-e1440808706167.png"></label><p style="text-align: center">Red</p>

</div>

I then used css to hide the actual button, effectively turning the image into the new button.

I used the plugin ContactForm 7 to do the PHP work behind the scenes. I am eager to learn some more PHP so I can do some custom work on the backend, but for now the submit button displays a basic message and sends all the form’s info to Terra’s email.


comments powered by Disqus