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
- Via a helper plugin
- Via changes and additions on your (host) file system
- Via CSS, JS and PHP plugins
- A hybrid approach
1. Via a Plugin
The simplest and easiest way to bring a Zazzle feed into a WordPress site is through a helper plugin. Using the “Plugins” option in the Dashboard’s left-hand sidebar, you can “Add New” plugins quite easily. If you’re looking for a free plugin, be sure to read the documentation and user feedback on the plugins as some of these plugins will share clicks or replace your referral associate ID as payment.
In this example, I’m using the “Pizazz” plugin. Once installed, the Pizazz settings can be found under the “Settings” option in the Dashboard’s left-hand sidebar. Be sure to enter your Associate ID here to get your referral fees! After it’s installed, this plugin will actually remind you to enter your Assiociates ID too. The Pizazz settings area is where you’ll also find the “Shortcode” documentation. Once you figure out which parameters you want to include, you just enter the shortcode in the appropriate post or page.
I entered the following line in my “Holidays” page:
[ pizazz store=dogwoodandthistle keywords=ornaments thumbsize=150 rows=5 columns=3 ]
… and my page looked like this:
2. Via your host file systemIf you would like a little more flexibility and access to all of the zstore parameters, then with a little more work you can update your theme and create .php files for each of your feeds. In order to bring your feeds into WordPress yourself, you need to modify your Theme to ensure it is aware of the zstore.css file and then provide the feeds php code like the Zazzle Store Builder does with the zstore.php file.
NOTE: Whenever you make changes to a Theme, you should do so by creating a Child Theme. This ensures that WordPress updates or Theme updates won’t overwrite your changes and that you have a clean Theme install for troubleshooting. If you plan to try this, be sure to read the WordPress Codex on Child Themes.
- These updates are not actually that difficult, but it does require logging into your site host file system. Once there, you basically want to:
- Create a folder for your child theme: Create a folder in the your /wp-content/themes directory and call it parenttheme-child; in my case, I’m using the “Forever” theme so I called my folder: forever-child
- Create a “style.css” file in the child folder: Create your “style.css” file in the child folder as per the WordPress Codex on Child Themes, but updated with your own info. My “style.css” looks like this (I skipped some optional bits):/*
Theme Name: Forever Child
Description: Forever Child Theme
Author: Dogwood & Thistle
*/@import url(“../forever/style.css”);/* =Theme customization starts here
- Copy and edit files: Copy the file you want to modify into the theme-child folder and make your changes. I needed to make the Forever theme aware of the zstore.css file, and to create a page template that would display the store feed. To do so:
- I copied the “Header.php” file from the “forever” directory into the “forever-child” directory, and updated it to include the following line: ZSB/css/zstore.css”/>..which i added on the line above the closing tag.
- I copied the “Page.php” file from the “forever” directory into the “forever-child” directory, renamed it to “Store-holidays.php” and then modified it to include the following at the very beginning of the file:
Template Name: Store-Holidays
?>and then copy and pasted my store parameters into the contents section of the page (there was a little bit of trial and error here) – I added the code in blue:<?php get_template_part( ‘content’, ‘page’ ); ?>
$_GET[‘contributorHandle’] = ‘dogwoodandthistle’;
$_GET[‘keywords’] = “ornaments”;
$_GET[‘useCaching’] = ‘false’;
$_GET[‘showPagination’] = ‘false’;
$_GET[‘showSorting’] = ‘false’;
$_GET[‘gridCellSize’] = ‘medium’;
$_GET[‘defaultSort’] = ‘date_created’;
Then, back in WordPress, I used the newly created “store-holidays” page template (now available in the “Page Attributes” options on the right hand side of the new page) to create and publish a blank “Holidays” page, which as a result of the php code in the store-holidays.php template file, brought in the store feed.
The next feed I might want to bring in would be a much simpler process of just copying the store-holidays.php file and updating the store parameters to use with a new page I’d create for the new feed.
While I have worked in IT, I am not a coder by day or by night so I had some minor alignment problems with this method:
There are plugins available from the WordPress Plugins directory that will insert CSS, JS and PHP into pages and posts. I’ve installed “SuperSlider-Perpost-Code” which adds a box each for Custom CSS and Custom JS code right on the page or post, and I’ve installed “PHP Code for Posts” (and pages) which provides an area inside WordPress to create php and assign it a shortcode that can then be used in posts and pages.This option involves a little bit more work than a straight Zazzle helper plugin, but provides the flexibility of having all the store parameters available without leaving WordPress. I haven’t played with the look of my grids yet, but will probably play around with the borders and colors soon. I like that I’ll be able to do that in the CSS box for the page and easily see what changes I’ve applied to which page by just working with the page itself.The issue with this method is having to repeatedly add code to every Zazzle feed page that all the Zazzle feed pages need anyway, like the reference to the zstore.css file. So, the next approach is…
4. A hybrid approach
This method still involves creating a child-theme to deal with the code that is used by every Zazzle feed page, but uses the php plugin for page-specific code. With this method, you would go through steps 1. and 2. of the file system approach, but stop after updating the “Header.php” file. Once you reach that point, you’re done with the file system and only ever have to login to the WordPress Dashboard for future changes.
Using the hybrid method, I would create the feed page with the default template and enter a shortcode, just like with method #1. With this method, however, I would generate a unique shortcode in the plugins PHP Code area, available on the Dashboard’s left-hand sidebar menu:
(Note: “/home/username/public…” is a placeholder (for security purposes); in my actual code segment, I replaced “home” and “username” with my actual directory names. When I enter [ php snippet=3 ] on the “Holidays” page, my page looks like this:
Which Method Am I Using at Dogwood & Thistle?
My Zazzle Extras Series Index:
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