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:
It has thousands of plugins. I used WooCommerce to create a shop for TerraDolls. It was a piece of cake to set up.
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
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.