[vc_row][vc_column width=”1/1″][vc_column_text]Web design, ecommerce and WordPress. Three new, essential – and possibly frightening – elements of the modern brand.
But I’m writing this blog post to officially say that I, as a writer, built my own ecommerce website. And you can do it too, in just a few days.
Throughout this post, it’ll become more and more clear, but I just want to reiterate: I’ve never dabbled in web design. Besides making a MySpace for my garage band in the 8th grade, I’ve pretty much stayed away from any sort of web design. (I’m actually practicing with this here post. You’ll notice an array of colors and icons not normally seen in my blog posts for Snap.)
So, here is a story about a writer; with no background in web design, creating my very own ecommerce WordPress website.
This is where my tale begins.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][heading]
The Start Of My Website Build
[/heading][divider line_type=”No Line” custom_height=”30″][vc_column_text]
After spending a year on the content side of digital marketing as Snap’s content manager, I thought it was only a natural progression to beef up my knowledge of the web design side of digital marketing as well. I thought to myself, “It might be nice to know what Tim [our web designer] is blabbing about all the time.” As someone who dives head first into any challenge, I naturally decided to build first and ask questions later.
So, I hopped on GoDaddy to buy my domain name. The one I wanted was of course taken, so I decided on another. I purchased the second perfect domain name for my personal ecommerce WordPress website for just over 10 bucks after a discount. Entered my card information – and BAM. In minutes my domain name was tossed out to the ether.
I just couldn’t wait to get my fingers typing on the backend of that site and make it the most spellbindingly interactive, responsive, icon-littered, parallax-ical, retina-HD-in-your-face website that ever existed on the Internet.
I’m laughing at myself now. Wishful thinking.[/vc_column_text][divider line_type=”Full Width Line” custom_height=”30″][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][image_with_animation image_url=”11865″ alignment=”center” animation=”Flip In” img_link_target=”_self” delay=”300″][/vc_column][vc_column width=”1/3″][divider line_type=”No Line” custom_height=”85″][vc_column_text]
$12.95
[/vc_column_text][/vc_column][/vc_row][vc_row type=”in_container” bg_position=”left top” bg_repeat=”no-repeat” text_color=”dark” text_align=”left”][vc_column width=”1/1″][divider line_type=”Full Width Line” custom_height=”30″][divider line_type=”No Line” custom_height=”30″][heading]
Rocky Starts with Domain + Hosting
[/heading][divider line_type=”No Line”][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_column_text]Since I had no idea what the hell I was doing, I went ahead and purchased the cheapest hosting package I could find, which coincidentally came from GoDaddy as well.
With the GoDaddy package, I received the website building platform, Website Builder to put together my website. How did it work, you ask? Well, another whole blog post could be dedicated to a negative review of Website Builder, but I’ll just quickly run through some positive and negative experiences. You’ll get a better idea of what an alternative to WordPress consists of.
Website Builder Short Review
First of all, if you don’t have much of an eye for web design or any experience with visual design, and just want something cheap and easy, this will do the trick. If you really want an optimized website for ecommerce, SEO and UX purposes, you should probably go for a better platform. For a personal art portfolio or simple blog, this is sufficient. For me and my vision – this wasn’t the best option.
These were the best elements of the Website Builder platform in my eyes:
- It’s drag and drop
- No coding necessary
- Some easy SEO shortcodes
- Edit elements directly on the page
- It was easy to upload images
- The grid feature made aligning images easy
My complaints are much more extensive, but essentially, this builder didn’t offer the freedom I wanted with building my website. The editor was restricted to the built-in options, and without a lot of HTML coding experience, I couldn’t customize the site behind-the-scenes to represent what I envisioned on the frontend.
Like I said, I wanted all the trendy features – device-responsive, parallax-enabled, compelling header slides, Google fonts API; all that good stuff. So, I reexamined my options, and while I was looking for the answer to my hosting problems, stumbled upon a helpful (but at the time misleading) YouTube video explaining how to set up a WordPress site.
If you watch the video, he explains how to set up domain hosting on HostGator. Now, at the time I had no idea that your website domain needs to be synched up to your hosting account. So, off I went onto HostGator and swallowed up a piece of Internet real estate through the form of a Baby Plan hosting package.
This is where the real trouble began.[/vc_column_text][divider line_type=”No Line” custom_height=”30″][divider line_type=”Full Width Line” custom_height=”30″][/vc_column][/vc_row][vc_row][vc_column width=”1/4″][image_with_animation image_url=”11865″ alignment=”center” animation=”Flip In” img_link_target=”_self” delay=”300″][/vc_column][vc_column width=”1/4″][divider line_type=”No Line” custom_height=”55″][vc_column_text]
$16.90
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][divider line_type=”Full Width Line” custom_height=”30″][divider line_type=”No Line” custom_height=”30″][heading]
Even More Problems with Hosting
[/heading][divider line_type=”No Line” custom_height=”30″][vc_column_text]I bought a yearly subscription on a Baby Plan for $6.36 per month, or about $75 bucks a year. They also have the more introductory Hatchling Plan, and the premier Business Plan. My package works well for me because I plan on developing more websites and the Baby Plan gives you unlimited domains, disk space, bandwidth and a shared SSL certificate.
So I journeyed into the depths of Google, through the veins of internet content to troubleshoot my problem. I found that WordPress development is much harder than it seems.
Troubleshooting DNS + Name Servers
For someone to visit your website, you need to configure DNS and set name servers. I had no idea what either of these terms meant, so I did some research and diffused it for you below.
DNS
DNS stands for Domain Name System (or server or service). What DNS does is convert your domain name, or URL, into a numerical IP address so that your computer server can be identified by other devices throughout the world. DNS allows sites like Google to authority-rank your domain. Without DNS operation and IP, the Internet wouldn’t exist.
These two elements, both DNS and Internet Protocol are the two main hierarchical structures of the functioning web – with domain name system considered of greater importance than that of IP protocol.
I found a great analogy for DNS: It’s like a modern-day phone book. The DNS transforms high-level hostnames (URLs) into numerical data to talk with other computers. Much like a phone book assigns each person’s name a numerical phone number for contact. But think about it, we would never refer to Janis Smith as “555-343-7777”, just as we would never refer to Ebay.com as “66.135.217.240”. It’s simply a transl
Name Server
A name server is a computer server that implements a network service (either DNS or IP) and provides responses to questions asked against a directory service. A directory service is the software system that stores, catalogs and accesses the information in a computer operating system’s directory.
So, now that we got some textbook definitions down on paper, let’s get to work fixing this website.
According to a HostGator resource I found, there are two options to setting up name servers and squaring away your DNS.
Option 1: Using HostGator Name Servers
This is the recommended way HostGator customers to use name servers, since they are built to operate with HostGator web hosting accounts.
First, you need to find out your name servers for your hosting account. To find these, either go to your
- Welcome email from HostGator. These name servers can be used on all sites that are hosted on your HostGator web hosting account.
- In Your HostGator control panel (if you have shared web hosting).
Second, you need to change the name servers.
- If you are smart, unlike me, and purchased your domain and hosting through the same company, then all you have to do is head to your control panel and click “Domains” at the top to manage your domain names.
- If you are like me and didn’t purchase your domain from the same place you bought your hosting, then you have to head to where you bought your domain and go to their FAQ section, or give customer service a call. GoDaddy has a bunch of helpful and easy directions to follow no matter what domain-hosting pitfalls you may have come across (most other companies have tools as well for assisting you.)
- Once I found this article from GoDaddy, switching my hosting was a breeze. All I had to do was remove my registrar’s current name servers and replace them with name servers from HostGator, found in their welcome email.
Option 2: Use Name Servers Elsewhere (Development Expertise Recommended)
If you’re an experienced developer, you can use different name servers if you desire. This won’t automatically update themselves, and require much more upkeep, but it’s definitely doable if you’re searching for this option. Visit this article for more information:
How to Point Your Domain to HostGator when Using DNS Elsewhere
Of course if you’re like me, you’re probably not experienced – hence why you’ve made it this far in the post. As it turns out, I chose option one, and viola – it worked like a charm. I was now able to see my domain name on my HostGator control panel.[/vc_column_text][divider line_type=”No Line” custom_height=”30″][divider line_type=”Full Width Line” custom_height=”30″][/vc_column][/vc_row][vc_row][vc_column width=”1/4″][image_with_animation image_url=”11865″ alignment=”center” animation=”Flip In” img_link_target=”_self” delay=”300″][/vc_column][vc_column width=”1/4″][divider line_type=”No Line” custom_height=”55″][vc_column_text]
$93.22
[/vc_column_text][/vc_column][/vc_row][vc_row type=”in_container” bg_position=”left top” bg_repeat=”no-repeat” text_color=”dark” text_align=”left”][vc_column width=”1/1″][divider line_type=”Full Width Line” custom_height=”30″][divider line_type=”No Line” custom_height=”30″][heading]
Almost Setup On WordPress
[/heading][divider line_type=”No Line”][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_column_text]After my troubleshooting woes were gone and my hosting was set up on HostGator, it was time to put my domain name on a WordPress platform. I logged into my cPanel.
To access your cPanel on HostGator, follow these instructions.
Thankfully, HostGator (can’t speak on other companies) has a very easy to use WordPress Quick Install feature within the control panel. When you login into your cPanel, scroll to the 10th section in your main dashboard, “Software/Services”, click on “WordPress Quick Install”.
Finally Choosing a WordPress Theme
[/heading][divider line_type=”No Line” custom_height=”30″][vc_column_text]Finally, I got to the fun part. Picking a theme. There are millions of options — literally. It’s almost overwhelming at first, because it’s difficult knowing where to start.
I started with a Google search: “wordpress themes”. Three million results. Okay… “responsive wordpress themes”, I typed. Five million results. “What?!”
I had research ahead of me.
I never realized how many options there are when choosing a WordPress theme. There are free themes and middle-priced, hundred, and thousand dollar premium themes. There are companies like ThemeForest, Elegant Themes, WordPress.org Themes, ThemeRoullette. The list goes on and on.
I visited so many sites including the ones I listed above, and first of all, found that most of these websites really need updated themes themselves. But second, and most importantly, many themes are just variations of one another. Above all, make sure that the theme style matches what you or your brand is trying to communicate and everything else should fall into place.
Here are some more elements to consider when choosing a WordPress theme:
Budget
For a personal site, I knew that I wanted it to look good and be customizable, so I avoided pretty much all free themes. But I also didn’t have the necessary means to break the bank. I wanted to invest some money, about 100 bucks and ended up spending a little more, but there’s no reason you can’t do it for much less than I did.
Make sure you have a budget in mind, because believe me, if you don’t educate yourself – you’ll be spending money on things you never even realized you needed – the costs add up quickly.
Free Themes vs. Premium Themes
A free theme can be a blessing to those with a small budget, and a curse to those desiring more freedom with their website design. If you’re like me – doing this on a budget – then there’s no reason not to at least research free WordPress themes. You can even download a few and test them out. If you don’t like them, you can always restrategize your design and decide on a premium theme instead.
A simple + optimized website development isn’t just smart for easy building, it is better for compatibility, responsiveness and all-around better usability. For the best functionality, choose a theme that can be customizable, perhaps one that costs money. Remember my experiences with Website Builder. This gives you the freedom to manipulate backend code to get the frontend experience you’re envisioning.
Read the terms of service
Unlike your iTunes Agreement, you should actually read the theme’s terms of service. When buying a WordPress theme, this is important because there may be information within the TOS that will affect your entire site. For instance, there is important theme licensing information about legal ownership and distribution, as well as the theme offerings, refund policy and support.
Refund policy
I can’t reiterate the importance of a solid refund policy. I was about to purchase a seemingly awesome theme from ThemeForest, but knew I had no experience with HTML coding. I researched their theme support and came up empty handed. Which brings me to my next point.
Support policy
If you don’t have much experience with web design, then make sure the theme support is solid. Investigate their included documentation, dedicated support portal on their website, or other offered communication line to the theme developers before you buy.
The theme I almost bought had almost no support. They had a dedicated support website which they pushed in their sales pitch, and was a great UVP to convince me to research their theme farther. But when I accessed the portal there were about 6 threads with no useful information for me. Real bummer, so I moved on to another theme.
Responsiveness
You know how having a mobile strategy was all the rage a few years ago? Well, now mobile strategy has to adapt to every conceivable device, like tablets, phablets, laptops, TVs and soon even smartwatches. Depending on whether you choose a free or premium theme will most likely dictate your website’s responsiveness. Whether that’s important to you or not should depend on who you’re trying to reach and how.
To choose Onepage or Multi-purpose
This confused me at first. I love the ease and look of onepage sites, where every section is contained on the same page as Home. But as a content manger, I had my suspicions about their SEO value. Turns out my suspicions were somewhat valid. Although there’s conflicting reports about onepagers and SEO rank, seems like unless you’re a stellar developer and content producer, onepage sites most likely won’t help you. You should go for a multi-purpose theme if you want to rank well in search engines, creating layers of web pages relevant to your brand.
Included demo + built-in features, templates and SEO capabilities
Without much coding experience, it’s nice when the theme offers a free download of their demo. Certain premium themes either offer this or some sort of alternative, like pre-installed templates or plugins, like WordPress SEO capabilities. But strangely, many do not. The theme I ended up returning did not have these capabilities, so I wasn’t about to design a website and manipulate CSS stylesheets without any knowledge of how to do so.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][divider line_type=”No Line” custom_height=”30″][heading]
Buying the Perfect WordPress Theme
[/heading][divider line_type=”No Line” custom_height=”30″][vc_column_text]After going my proverbial research checklist as a analytic content nerd is one to do, I finally settled on my theme of choice: Outeredge, for $48 dollars.
What I loved about this visual design of theme is the clean layout, the clear headers + icons, Google font integration, shortcode abilities and page templating.
[image_with_animation animation=”Grow In” image_url=”https://www.snapagency.com/wp-content/uploads/2014/10/outeredge-wordpress-theme.jpg” delay=”30″ alt=”outeredge-wordpress-theme-review] [/image_with_animation]
The bonus was what’s included on the backend. Free dummy data was included so I could upload the demo versions of the theme just like what was advertised. Also, the Revolution Slider plugin for $19 was included free with my purchase as well as SEO plugin compatibility.[/vc_column_text][divider line_type=”No Line” custom_height=”30″][divider line_type=”Full Width Line” custom_height=”30″][/vc_column][/vc_row][vc_row][vc_column width=”1/4″][image_with_animation image_url=”11865″ alignment=”center” animation=”Flip In” img_link_target=”_self” delay=”300″][/vc_column][vc_column width=”1/4″][divider line_type=”No Line” custom_height=”55″][vc_column_text]
$141.22
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][divider line_type=”Full Width Line” custom_height=”30″][divider line_type=”No Line” custom_height=”30″][heading]
Making Headway With WordPress
[/heading][divider line_type=”No Line” custom_height=”30″][vc_column_text]After a quick download of a .zip file, I uploaded the theme to my WordPress site, pressed “activate”, clicked into my site, and there she was; my very own WordPress website with premium theme.