Wookmark (Pinterest) Wall

Wookmark is a jQuery plugin which handles the building of the familiar Pinterest wall. It is super simple to use and if you go to the plugin site you can see a bunch of examples: http://www.wookmark.com/jquery-plugin

Here is a screenshot of my Wookmark wall.

Screen Shot 2014-10-17 at 9.14.14 AM

Below you will find some code to setup the wall using CPTs. So before continuing make sure you have a CPT (or standard post or whatever).  I also setup some Advanced Custom Fields (ACFs) for information I needed.

Screen Shot 2014-10-17 at 9.11.47 AM

I also setup a ‘Featured Image’ ACF (but you could use whatever image you want) for the images. You may also want to add an new image size to your CPT to ensure you get the most efficient image sizes to work with. Just drop this in your functions.php file.

First, lets layout the elements we want to pin to the wall.

As you can see this is a fairly standard layout. All you really need for Wookmark to work is a container and one level of children.  Lists can also be used but I like divs more (for no good reason).

Now that the elements have been laid out lets setup our functionality.

Almost done, we just need to setup some basic styling for our tiles. Here is some LESS to get you started.

Hopefully at this point you will also have a working wall. In my next post I will paste some code to create a form for submitting a ‘story’ and setting up a post automatically.