Zazzle Extras (Part 2): Converting to a WordPress Website

In Part 2 of my “Zazzle Extras” series, I’ll show the steps I took to move from a barebones Zazzle Store Builder website to a WordPress website. In Part 3, I’ll show the steps I took to bring the Zazzle feed into the WordPress site.

First Step – Back it up!

Be prepared for the worst…

My hosting service’s “Backup” tool offers two types of backups:

  1. A Full (non-restorable) backup
  2. Three Partial (restorable) backups

The Full backup is a full site backup and wouldn’t be used to restore individual files or directories. Instead, the Full backup is used to restore the site to another server if I move host services. This Full backup might also be used by my current provider to restore my full site, but really only in case of emergencies – and on their schedule, not mine; in general, we are expected to make our own backups and perform our own restores.

My host offers the following three Partial backup options which I would use to perform the backups and restores:

  • Home Directory
  • MySQL Databases
    * when you install WordPress, it will create a MySQL Database to store its content
  • Email Forwarders & Filters
    * if you setup custom email addresses for your domain, this is where you’d back it up

Before I make any changes to my installation, I perform all of the offered backups – the three Partial backups and the Full backup – just to be safe.

It’s good practice to backup your site at least once a week and again before you make any significant changes (like adding WordPress).

Installing WordPress

Onward and upward…

My hosting service offers the Fantastico de Luxe tool for installing a bunch of stuff, including WordPress. The WordPress installer is listed under “Blogs” in the Fantastico tool. Selecting “WordPress” presents a page with a Short description, a link to the WordPress Support Forum, a link to start a New Installation, and a list of the current WordPress installations on the site.Once I’ve clicked on New Installation, I’m presented with the first of three pages for the installation. The information I provide here will determine the folder structure on my host. Because I want to have a tidy and organized folder structure, I chose to install WordPress in its own folder.

Wordpress Install -1 of 3
WordPress Install -1 of 3

I filled in the following sections on this page:

Installation location

Install on domain:
(my domain name, dogwoodandthistle.com)

Install in directory:
(this directory is created by the install – I chose to call it WordPress)

Admin access data

Administrator – username:
(the username I chose for logging into my WordPress install’s admin area – it’s a secret) (:

Password: 
(the password I chose for logging into my WordPress install’s admin area – it’s an even bigger secret) (:

Base configuration

Admin nickname: 
(I entered my admin’s nickname here)

Admin e-mail:
(I entered the email address for notifications from my WordPress install)

Site name:
(This will be inserted into the header of my WordPress site as its title; I entered Dogwood & Thistle)

Site description: 
(This will be inserted in the header of my WordPress site as its subtitle; I entered Decorations, Gifts and More! I can update this from within WordPress when I think of something better to put there)

After providing the installation information, I hit the “Install WordPress” button.The second page for the installation is just a confirmation with some of the install details and a button to “Finish installation”, which I click on.

The third and final page for the installation gives an overview of the installation with a reminder of the admin username and password, and provides a URL link to the new WordPress admin area. And a suggestion to Bookmark it! I followed the URL and Bookmarked it as suggested! It also provides an option to send that information to an email address of your choosing for your records.

My WordPress site was now live!

And Then I Had A WordPress Site!

And then I had a WordPress site, but a very plain WordPress site without any Zazzle feed. It looked like this:

Wordpress Install - Site First Look
WordPress Install – Site First Look

The next steps are to make the site pretty and bring in the Zazzle feed. If you know all about webstuff and html and css, then there are any number of methods for accomplishing the next steps. I don’t know all about webstuff and html and css – I know some basic html like bold and lists, and I’m learning a little more of everything as I go, so for now I’ll be keeping it simple; I’ll make it pretty by applying a WordPress theme and show four ways to bring in the Zazzle feed ranging from super simple to not as simple but not too difficult either.

Applying a Theme

Making it pretty…

Now it’s time to login to the WordPress Dashboard via the URL provided during the WordPress install. When you first login to the WordPress Dashboard, it can be a little overwhelming. My advice is to take it slow, and explore each section at your own pace.Checking the “Right Now” section of the default Dashboard screen, I see that the install came with some sample data: 1 Post, 1 Page, 1 Category, 0 Tags, 1 Comment, 1 Approved, 0 Pending and 0 Spam. This section also notes that:

– I’m using the “Twenty Twelve” them with “6 Widgets”
– I’m using WordPress 3.5 and that there is an update to WordPress 3.7.1 available

The theme determines the look of the site with respect to colours, layout, fonts, navigation, available widgets, etc. Occasionally, an update to a Theme or WordPress breaks something on your site; this doesn’t happen very often though, and the fewer modifications you make with plugins and coding, the less often it will happen. I usually wait a week or two and check the feedback on the WordPress or theme support forums before applying the updates.

Since I haven’t done anything to my site yet, I’m not concerned about breaking anything. So, I update the WordPress install by clicking on the “Update to 3.7.1” button which takes me to the WordPress Updates area of the the Dashboard. From there, I just click on the “Update Now” button. The update is really quick and ends at the “Welcome to WordPress 3.7.1” page giving an overview of what’s new, what’s changed, etc. Once done, it’s back to the dashboard via the “Dashboard” item in the left-hand sidebar.

Back in the “Welcome to WordPress!” section, its time to change the look of the site. I followed WordPress’ lead and clicked on the big blue “Customize Your Site” button!

Customize Your Site Button
Customize Your Site Button
The customization page has the customizable sections listed in the left-hand sidebar, and a preview of the changes to the site on the right. The customizable sections are:“You are previewing” and the the theme name, in this case “Twenty Twelve”
– expanding this section gives a little blurb on the current themeSite Title & Tagline
– this is where you can change the displayed site name and tagline (this is where, inside WordPress, I can change “Decorations, Gifts and More!” as mentioned earlier). You can also opt to hide this info.Colors
– This is where you can change the colors of your Site Title and Subtitle text, and the background colour of the site – the color that will be visible beyond the white containers of posts, pages, sidebars, etc. If I changed Header and Background colors to dark blue and light blue, my site would look like this:

Light Blue As Background
Light Blue As Background

 

Background Image
– If I wasn’t installing a theme, I might have considered replacing the light blue background with a tiled image.

Static Front Page
I can choose from a static front page that never changes, or a page that displays my latest posts. I can change this whenever I want so I’m leaving it at “Your latest posts” for now.

There may be more or fewer options when apply a different theme.
After I saved and published my changes, I was ready to install my theme!

Expanding “Appearance” in the left-hand sidebar of the dashboard lists options for Themes, Customize, Widgets, Menus, Header, Background, and Editor, within the sidebar. On the right, a two-tabbed page is displayed with “Manage Themes” and “Install Themes” as the two tab headings. The “Current Theme” section of the the “Manage Themes” tabbed page provides another view of the menu with options for Customize, Widgets, Menus, Header, and Background.

From the Header menu, I uploaded my “Dogwood & Thistle” signboard for my banner. The Twenty Twelve theme displays the Site Title and subtitle, followed by the menu, followed by the header image.

Text And Sign-Board Left
Text And Sign-Board Left

I wanted something different than that, so I started to explore additional themes (If I was using a full size banner instead of my signboard-sized banner, that would have looked better too).The initial WordPress install actually included two additional themes, Twenty Eleven and Twenty Thirteen. In the Installed themes area listed under the “Manage Themes” page, I used “Live Preview” with each of those themes (in the “Available Themes” section) to see what my WordPress install would like like if I activated those themes. Neither was quite right for me, so I spent some time wandering the Themes Gallery.

The “Install Themes” tab page provides the search area for for the Themes Gallary. I searched on the keyword “free” and checked off the Color “Blue” and the Feature “Custom Header”. Then I click on “Find Themes”.

I ended up choosing the “Forever” theme, but there are so many free themes to choose from I may go through a few more before I’m done! There are also some pretty snazzy Premium themes for not too much money that may be better able to provide exactly what you might be looking for.

In my case, the new theme looked really nice, but the site branding as I had it was quite large – so large that only the Site Title, Signboard and Subtitle could be seen without scrolling. I made this more reasonable by using the “Customize” options to remove the Site Title “Dogwood & Thistle”, but I think it still needs work.

Final Preparations for the Feed

A Place to Live

Since I had my bare-bones storefront up and running while playing around with WordPress, I made another copy of the Zazzle Store Builder files and put them in a folder called ZSB in my WordPress folder. Then I could mess about with the Zazzle feed and not worry that my changes would accidentally affect my bare-bones storefront.The last step before bringing in the Zazzle feed is to give the feed some place to live. I wanted a separate feed page for each of my arbitrary categories of merchandise so I created and published the following five pages (with just these titles and no content):
Newest, Holidays, Design, Nature, PlacesMy chosen theme automatically added these pages to the Navigation Menu. To manually create or edit the Navigation Menu, goto “Appearance” in the left-hand sidebar and choose “Menus”. I manually removed the “Sample Page” by clicking on the arrow beside “Sample Page” in the menu items to expand it, then clicking on “Remove”. If I wanted to manually add a page, I would click the checkbox next to the page name under “Pages” on the same “Edit Menus” page, then click on the “Add to Menu” button. I could also do the same for Links or Categories.I intend to post featured items (copying and pasting the share link code for the item from Zazzle) and want them to show up on a separate “Featured” page. Earlier, in the Customize section, I left the post pages at the default so currently any new post I create will show up on the “Home” page, which is an automatically created navigation menu item. To get what I want, I simply renamed the “Home” page navigation label to “Featured”.I also wanted to re-order the menu items, so I re-arranged them by dragging-and-dropping them under the “Menu Structure” of the “Edit Menus” page. Then I gave my menu a name and clicked “Save the Menu”. I also clicked the checkbox to make it Primary (instead of a default that the site will use if no Primary is selected – at least for this theme)And now I had everything ready to bring in the Zazzle feed.

Housekeeping

Final steps…

These are the final housekeeping steps I took:Removed the sample data:
From the Dashboard, I chose Comments and deleted the sample comment. Next I chose Posts and deleted the “Hello World!” post. Then I chose “Pages” and deleted the “Sample Page”.Removed right-hand sidebar admin items:
I didn’t want to see the Categories and the admin items (Meta module with the logon etc) along side my store items. I moved the Categories and Meta items off the Widget Sidebar areas and into the Inactive Widget area via Appearance -> Widgets.Friendly URL names (Permalinks):
My “Holidays” page URL was originally:

Holidays


and my featured Snowflake post’s URL was:
http://dogwoodandthistle.com/WordPress/?p=58.I wanted and all of my pages and posts to have more friendly names. To make this happen, I went to “Settings” in the left-hand sidebar of the Dashboard and chose “Permalinks”. Then I simply selected the “Post name” option and “Save Changes”. Now my URLs use the titles of posts and pages so that my “Holidays” page URL now looks like:
http://dogwoodandthistle.com/WordPress/holidays/
and my featured Snowflake post’s URL looks like:
http://dogwoodandthistle.com/WordPress/green-swirly-tree-year-ornament/Made the WordPress install the default at www.dogwoodandthistle.com:
The last thing to do was make the WordPress site the default at www.dogwoodandthistle.com (replacing the bare-bones storefront).First, In the WordPress Dashboard, under Settings -> General, I changed the “Site Address (URL)” to my root directory (the DogwoodAndThistle.com folder) by making the following changes:

  • From: http://dogwoodandthistle.com/WordPress
  • to: http://dogwoodandthistle.com

The “WordPress Address (URL)” points to the directory in which the WordPress files are located, so I left that alone.

Then I moved the bare-bones storefront install via my host file system:

  • I moved the files and folders created with the Zazzle Store Builder into it’s own folder, in my case “ZSB”, but left the index.php file in the root directory (my DogwoodAndThistle.com folder)
  • I updated the index.php file so that it could find the store files, now that I’d moved them to the “ZSB” folder. I made the following changes to the index.php file:
    • changed: href=”css/ztore.css” to href=”ZSB/zstore.css”
    • changed: include “include/zstore.php”; to include “ZSB/include/zstore.php”;
  • I then renamed the index.php file – I’m going to replace it, but want it around just in case I ever need to go back to it
  • copied (NOT cut) the index.php file from the WordPress directory to the root directory (my DogwoodAndThistle.com folder).
  • Made the following changes to the newly copied index.php flle:
      • changed: require( dirname( __FILE__ ) . ‘/wp-blog-header.php’ );
        to: require( dirname( __FILE__ ) . ‘/WordPress/wp-blog-header.php’ );
      This let the index.php file know where to look for the WordPress install. If I had installed in a folder called “flower”, then that last bit would be changed to ‘/flower/wp-blog-header.php’.

    These steps hide the word “WordPress” from my URLs. Now my “Holidays” page URL looks like this:

    Holidays


    and my featured Snowflake post’s URL looks like this:
    http://dogwoodandthistle.com/green-swirly-tree-year-ornament/

    On my host file system, my folder structure now looks like this:

D&T File Structure-After Expanded
D&T File Structure-After Expanded

I don’t need the second ZSB folder (the fourth and last folder directly under DogwoodAndThistle.com) for my site to function; I just need the ZSB folder installed in the “WordPress” directory. The second ZSB folder is the replaced bare-bones install. I’m keeping the bare-bones install around in case future tinkering with my WordPress site breaks my WordPress site – then I’ll at least have something to put up as the site while I fix what I break (:

WordPress Support

For WordPress hosted sites, support is provided at WordPress.com, but for independent WordPress installations like this, support is provided at WordPress.org

My Zazzle Extras Series Index:

Zazzle Extras: Introduction

Zazzle Extras (Part 1): 10 Steps to Build a ZSB ZStore Website
Using the Zazzle Store Builder to Make a Barebones External ZStore Website

Zazzle Extras (Part 2): Converting to a WordPress Website
The Steps I Took To Convert My Website to a WordPress Website

Zazzle Extras (Part 3): Bringing the Zazzle Feed into a WordPress Website
Show Me the Merchandise! Four Methods for Bringing the Zazzle Feed into a WordPress Website.

Zazzle Extras (Appendix): My Dogwood & Thistle Storefront Evolution
A Snapshot History of the Evolution of the Dogwood & Thistle Storefront Website