In this tutorial, i am going to explain how i did to create the ‘slide to unlock’ effect on this website: http://netbureau.mobi/ earlier in the year to open a post. It involves a WordPress powered site with a custom post type and jQuery. The idea is to display some projects within iphones on the home page of a site and to have the cool ‘slide to unlock’ animation to open the post.

Custom post type

So first of all, you should have a WordPress site ready to do your tests. Then we are going to set up a custom post type (cpt) to organise the whole thing. We could use the normal posts but in this case, i chose to use a cpt to let the normal posts for any upcomming blog system. And i also think that it is cleaner in the admin to have an extra menu item named ‘Projects’ rahter than having to dig inside the posts for a special category.

Here is the code to insert in functions.php to set up the cpt:

I always name my cpts like this: cpt-name. It helps me further in the code to know what i am dealing with.

More about the custom post types in the codex and about the register_post_type function.

Custom fields

Then you will have to download and install the pretty awesome Custom Field Template plugin. It is basically a plugin to help you organise your posts, pages and custom posts types with special custom fields. Here is a direct link to download it. I am myself using it in a lot of WordPress developments i do. Highly recommended but not an obligation. For this tutorial, it will only help to organise the informations of the projects we will be publishing and displaying in the iphones.

Head over to the settings and in the first template write a title, write the custom post type’s name you gave to your cpt during the last step in the 4th input field Custom Post Type so that this cpt only shows for our projects and not in every post or page of the site. The name is the first parameter of the register_post_type() function. In my case: cpt-projetos.

Then in the content i created 2 input fields; one for the url of the site and the second for the image. Like this:

Once this is saved, you can go to your cpt and check if the fields are there. If everything is showing up, you can publish at least one project. Title, url and image.

Slider setup

Simply put, all the credits go to Marco Kuiper. I will show most of the code but not explain everything, so check his detailed post and be sure to set it all up on your page so it works in a static way to understand it all. Here is a demo made by Marco if you want.

And here is my loop:

Some informations.

We are going to bring 3 projects on our page with the informations we entered in our custom fields earlier on. I will use for this the WP_Query loop with 2 parameters, the quantity of posts i want to display and the type of posts:

Then following Marco’s markup, i will not display the time and date but rather the post’s title as the title of the page in the iphone and the site’s url in the url field. About that last point, i am using a little tweak to erase the http:// from the url and just show what comes after it within a limit:

I get the url from the custom field, then get rid of the http://, count the quantity of letters within what is left, display only 17 characters and then show an if the url if over 17 letters. Note: i do the explode on :// instead of http:// because some urls come with https:// and this would mess up with the final display.

Then comes the display of the picture:

projeto-image is here the name i gave to the second custom field, remember?

About the scroll button, i had to include a php variable to get a difference in the class names so that javascript would not do the action on all of the locks but just one. A classic $i variable:

Javascript/php

The final part. Do not forget to include the 2 javascript files as Marco explained: ui.core-1.5.3.js and ui.slider.js (5ko + 10ko minified). Here is the code:

I basically did another loop that echoes the javascript code for each iphone with the variable $i and that gets the_permalink for each project. The link is done with this line:

Improvements

For sure the last part can be improved. Having to write 3 times almost the same javascript is not very optimised. I am pretty sure we could get the permalink with the first loop, store it at some point in the markup and then retrieve it with jQuery at the end to load the page.

I also know that it is possible to get rid of the animated gif in webkit with css3. Chris Coyier made a very good article that i read earlier in the year when i was looking for a way to do this effect.

Credits

A huge thanks to Marco Kuiper for the original script.

Conclusion

I hope you enjoyed this tutorial, the first “big” one i wrote in my blog. Feel free to comment on any point that would be wrong or not well explained.

Cheers.

Past Work

Soloteste

Design & development
Visit live site

Pousada Corsário

Design & development
Details Visit live site

Sydney Colombani

Design & development
Visit live site

Brecha

Development
Visit live site

Julia Queima

Design & development
Visit live site

Costa Brasilis

Design & Developement
Details

A3Interiores

Wp Development
Visit live site

ValorCafé e-commerce

Design
Details Visit live site

Oficina de Arquitetos

Development
Visit live site

Cani.tv

Development
Visit live site

Zee Champanheria

App design
Details

Rioow

Design & development
Details

ASBEA/RJ

Design & development
Details Visit live site

ValorCafé

Design & development
Details Visit live site

Livraria da Travessa

Design & development
Details Visit live site

Furafila

App design
Details

NETbureau

Design & development
Details Visit live site

About

So, i'm a developer from France currently living in Rio de Janeiro. I do code for the front-end side of the web with things like javascript, html, css, preprocessors, tasks runners, version control, frameworks, tdd, CI, Wordpress and others.

I do speak english, portuguese and french, read tons of books, love to play on a wake, bmx and snowboard and would like to travel to the Karakoram range, Tierra del Fuego and Mongolia.

I do appreciate you stopping by and admit i did abuse of the auxiliary verb do in this about.