WordPress Etsy Widget

January 18th, 2010 by: joshua

You may have noticed the new Etsy thumbnail display in the sidebar. I coded this up last week because Cheyenne wasn’t happy with Etsy Mini. The issue was that there wasn’t an easy way to adjust the background colors and other styling elements because Etsy Mini embeds an iframe or flash object. While poking around for a solution I discovered that Etsy has a public API so I went ahead and signed up as a developer and created this simple plugin for WordPress. It has more or less the same layout as Etsy Mini but it inherits css styles from the sidebar and it’s possible to customize it in your theme’s css file by using the ‘etsy’ class.

It’s free and licensed under GPL so go ahead and install it on your own wordpress site. Download it from wordpress.org and if you have trouble leave a comment here and I’ll try to help.

Here is a screenshot of the admin interface.



20 Comments on “WordPress Etsy Widget”

  1. alice says:

    Hi, I’m trying to use your plugin for an etsy shop on my website. Its a wordpress and I can’t figure out how to get to the sidebar that you show in the above screenshot. The only option wordpress is giving me is to edit the actual code of the plugin which I don’t think I should do. Any help would be greatly appreciated.

  2. joshua says:

    On your wordpress admin dashboard click on “appearance” then “widgets” (it should be right under themes). After you have activated the plugin it will appear on this page under “available widgets.” Drag and drop the widget onto your sidebar (right). Of course, this assumes that your theme supports widgets (most do). There could be one or more sidebars available and if the names aren’t obvious you may have to experiment to see where it appears.

    If you’re having trouble installing it. The easiest way is to choose “Plugins” then “Add New” from you admin dashboard. Enter “Custom Etsy” into the search box and it should come up. Click install (far right).

  3. Amelia says:

    This plugin is awesome, and works awesomely in the sidebar. I would love it if you would consider posting instructions to use your code in the main page area of a wordpress site as opposed to just as a sidebar widget. The existing Etsy Mini code really doesn’t fit in with most websites.

  4. Chris Loringer says:

    Hey I’m having trouble getting 3 columns to show up. Do you have any idea why I can only get 2 columns even though my settings are set for 3 columns?
    (note: I tried making them 50×50 just to see if it was a size issue and that did not work)

  5. joshua says:

    Hi Chris, Thanks for the bug report. I guess I didn’t test the column layouts too thoroughly. It turned out to just be a typo. It should be fixed if you upgrade to version 1.0.4.

  6. joshua says:

    Hi Amelia, I’m glad you like the plugin. When I have some free time I’ll look into creating a tag for embedding the widget into articles. I’m not sure when that will happen, but I’ll send you a note if it does.

  7. Chris Wright says:

    Hello Joshua

    Thanks for the great plugin. Much nicer then the Etsy one that shows links to Etsy – not just your Etsy account but just Etsy frontpage or whatever category you happen to post in.

    I am also having the same issue as the other Chris. When I select two columns or two rows it still only shows me one picture. I am running 1.0.4, auto installed through wordpress.

    Thanks much

  8. joshua says:

    Hi Chris W,

    Since you only have 2 items in your etsy shop it obviously won’t show more than that. Additional rows and columns won’t display even though they show up in the HTML. I see on your site that only a single item is showing. I suspect that the problem is simply a stale cache. The cache is refreshed every 6 hours. The other item should show up then. You can clear the cache manually if you log into your shell account.

    On a unix server, the command would be:

    rm -f /tmp/etsy*

  9. Chris Wright says:

    I tried the waiting thing and
    … Looks like you’re right! Both items are showing up now!

    Thanks much!

  10. Susan says:

    I love your plugin! In your readme you say:

    6. If desired, add custom styling to your theme for the ‘etsy’ css class, otherwise it will default to sidebar style rules.

    Is this difficult to do? If not could you give me an idea how?

  11. joshua says:

    Hi Susan,

    You need to edit the style.css file in your theme. The file is located in the wp-content/themes/THEME_NAME directory.

    For example, if you wanted it to have a pink background. And also wanted a 1 pixel red border around the entire widget as well as each image. You would add the following lines to the css file.

    .etsy{
    background-color: pink;
    border: 1px solid red;
    }

    .etsy img{
    border: 1px solid red;
    }

    You can finds lots of information about css at w3schools (http://www.w3schools.com/css/default.asp).

  12. Laura says:

    Hi, I’m excited to use this widget but when I put it in my sidebar the title “Curry Kay Designs’ Shop” comes up but without any boxes. I have 9 items in my shop so there is something from the widget to show.

    Any ideas?

    Thanks so much!

  13. becky says:

    I’m not sure what I’m doing wrong but for some reason I get all this code on my side bar – Warning: file_exists() [function.file-exists]: open_basedir restriction in effect. File(/tmp/etsy10099111_cache_sundaydrivedesigns.com.json) is not within the allowed path(s): (/var/www/domains/sundaydrivedesigns.com/:/usr/share/phpmyadmin:/etc/phpmyadmin:/var/www/myfilemanager:/var/www/myinstaller:/usr/local/lib/php) in /var/www/domains/sundaydrivedesigns.com/docs/blog/wp-content/plugins/etsy-widget/etsy-widget.php on line 179

    Warning: file_put_contents() [function.file-put-contents]: open_basedir restriction in effect. File(/tmp/etsy10099111_cache_sundaydrivedesigns.com.json34962961.tmp) is not within the allowed path(s): (/var/www/domains/sundaydrivedesigns.com/:/usr/share/phpmyadmin:/etc/phpmyadmin:/var/www/myfilemanager:/var/www/myinstaller:/usr/local/lib/php) in /var/www/domains/sundaydrivedesigns.com/docs/blog/wp-content/plugins/etsy-widget/etsy-widget.php on line 168

    Warning: file_put_contents(/tmp/etsy10099111_cache_sundaydrivedesigns.com.json34962961.tmp) [function.file-put-contents]: failed to open stream: Operation not permitted in /var/www/domains/sundaydrivedesigns.com/docs/blog/wp-content/plugins/etsy-widget/etsy-widget.php on line 168

    Warning: rename() [function.rename]: open_basedir restriction in effect. File(/tmp/etsy10099111_cache_sundaydrivedesigns.com.json34962961.tmp) is not within the allowed path(s): (/var/www/domains/sundaydrivedesigns.com/:/usr/share/phpmyadmin:/etc/phpmyadmin:/var/www/myfilemanager:/var/www/myinstaller:/usr/local/lib/php) in /var/www/domains/sundaydrivedesigns.com/docs/blog/wp-content/plugins/etsy-widget/etsy-widget.php on line 169

    and then the widget seems to as it should be under the miles of code. Any suggestions?

  14. richard says:

    Hi, I see the widget is creating some temporary files: * randomnumber.tmp * and placing them from wherever the widget is accessed. How is this working? Wouldn’t it be better to place them in a single cache location? I’m finding myself having to delete temporary files in my wordpress installation.

    Great widget though!

  15. michele says:

    Hi
    great plug in.
    I was wondering if when the link to my etsy store, or when they click on a product if the link could open etsy on a new window, something like (target=”_blank”)?
    Thank you,
    michele

  16. joshua says:

    Hi Richard,

    The cache files are written to the location returned by the php function “sys_get_temp_dir”. It would be better to use the wordpress cache but it’s not enabled by default and I wanted this widget to be as easy as possible to install. The *.tmp files should be immediately renamed to a single *.json file of the form etsy_cache_.json.

    If you are finding that you get a lot of *.tmp files hanging around then the file rename is failing and the cache isn’t working at all. There are a couple of reasons why this might be happen but the most likely is that old cache files are owned by a different user (maybe the ownership was changed during a system restore or some other automated process). Try deleting the json file from the shell. If you find that you don’t have permission to delete it then this is definitely the problem and the best solution is to ask your sys admin to delete them for you. It should start working correctly again after these files are cleared.

    If you know a little php it should be easy for you to change the sys_get_temp_dir call and replace with a cache location more to your liking. Maybe I’ll add this as a configuration option in the next version.

  17. joshua says:

    Richard and Becky, I updated to widget to version 1.0.5. The new versions includes a configuration option to set the cache location. It defaults to whatever is returned by php’s sys_get_temp_dir function, but you can change to any place you like.

    Becky, in your case, try /var/www/domains/sundaydrivedesigns.com or /var/www/domains/sundaydrivedesigns.com/cache

  18. Tony says:

    Hi Josh, I activated your plugin and when it’s activated, the widget panel in my admin is messed up and I can’t make any changes to the the widget placement on the site. When I deactivate the plugin, the widget panel is fine.

    Think this is an issue with the newest version of wordpress and your plugin, or something wrong in my wordpress install?
    Tony

  19. ithinkitsnice says:

    I’m having the same problem as Tony, right after the 3.0.1 upgrade.

  20. ithinkitsnice says:

    it’s as if the widget admin page fails to load right as it reaches the etsy widget

Leave a Comment

Cheyenne Weil, Joshua Coxwell