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.

Nifty Animated Carousel

I recently needed to setup a carousel for a client with specific functionality. I looked around online for a while but never really found a carousel with the right functionality so I ended up needing to build my own (Image Below).

Screen Shot 2014-10-15 at 1.25.20 PM

You can probably see by the look how this carousel will operate. The correct image will move to the front and move the front image to the side. When the new front image is in place the content area is updated. The mechanics are simple but it was a little tricky to get working correctly cross browser (IE8 included).

The information for this slider comes from a CPT called “History”. First thing first, make sure you have a CPT setup (or I guess you could use posts or pages too if you want). For my purpose I setup an Advanced Custom Field (ACF) for the featured image instead of using the native featured image, it is a habit at this point, but you don’t have to do that and can just use the standard featured image instead.

Second, we need to build and display the content. Here is how I did that.

NOTE: This is inside a wrapper and a container to keep it centered in the screen. Don’t just drop this on a blank page because it wont work right.

By itself that is going to be really ugly so lets add some CSS

If you were to display this now you would have the basic layout ready but it wouldn’t actually do anything. Lets fix that with some jQuery.

As long as you did everything right you should now have a working carousel (although unless you had the exact same images and everything it will probably look like garbage).

For those of you who think I should have done this in a  more object oriented / open source way so that it could be controlled and updated more easily…go download one of the hundreds of open source carousels out there.

NOTE: You will need to get yourself some control images.

NOTE: You will also need a ‘darken’ image. IE8 does not handle CSS transparency but it DOES handle png transparency. Since all my images were the same size and dimensions I just needed one darken image which was the same size as the images. I just set it up as black with about 40% transparency. If you aren’t worried about IE8 you could do this using CSS in a variety of ways.

NOTE: This carousel is NOT responsive or mobile friendly. You want a responsive or mobile friendly carousel? Build it yourself or download one of the hundreds online.

Multiple Dynamic ACF Meta Queries

I recently had to build an employee page which required some dynamic querying of the employee meta fields. Here are the important parts of that code.

Note: I actually noticed that this type of query seems to be pretty slow. If you have a lot of employees it might honestly be quicker to either simply grab all employees and sort them using PHP or find another way altogether to do this.

Edit Custom User Capabilities

There are many good user role editors (like user role editor and Press Permit among others). However we had a client who needed very specific control over some Custom Post types on a per user basis and they felt that the standard plugins were too confusing (a common problem). So I ended up having to setup an ACF on all users and then add and remove capabilities based on selected permissions…it will be easier to show than explain.

The first step is to create an ACF Checkbox field called User PermissionsScreen Shot 2014-10-02 at 2.21.30 PM

In the “Choices” section just enter in the permissions you want to have and a label for each. (ie member_access : Allow users to add, edit, and delete Members). Make sure to set the location for this ACF to User => is equal to => All (or, I guess, whatever you want).

Next make sure to update your custom post type with a capability:

Now go ahead and put the following function in your functions.php file

Now if you go into a specific user you should see a list of user permissions you defined.Screen Shot 2014-10-02 at 2.31.26 PM

Just check whatever  capabilities you want the user to have and hit “Update User”. Now you should have control over what CPTs each user can see AND it is even easy enough for the technically illiterate to use!

 

Custom Search Query

Sometimes it is necessary to setup a custom search of posts. While the WordPress search is decent and with some plugins, like Relevanssi, it can be downright awesome. Even so sometimes it is important to use your own search for more specific / controlled queries. Here is a basic example I used recently.

 

Insert Custom Post from Normal DB

OK so I had no idea what to title this. The idea is simple though. Legacy and non-wordpress sites use databases and tables to hold information about…everything. Now you want to take some of that information and create a custom post type with it. But not just the title and content but also any ACFs that you need to use. Well here we go.