How to Add a Beautiful Flipboard to Your WordPress Site

How to Add a Beautiful Flipboard to Your WordPress Site

I find myself using FlipBoard more and more every week. The application is currently available for iPhone, iTouch and iPad though is being rolled out to Android users now too. For those who haven’t used the app, FlipBoard is a news and social media aggregation application that lets you flip through content as if you were reading a book. It may sound a little gimmicky but it really does make reading a joy.

Due to my love of FlipBoard, I was really excited when I came across the WordPress Flipper plugin in the CodeCanyon marketplace. The plugin lets you add a jQuery featured area to any post or page. The video below shows you exactly what the plugin can do.

[youtube http://www.youtube.com/watch?v=OMLqC-DQ5Ks]

The plugin isn’t currently responsive however it does support touchscreens. This allows people viewing your site on tablets and mobile phones to browse through content on your website by flicking their fingers on the page.

Setting WordPress Flipper Up

Setting up your flipper is a breeze though confusingly, the developer chose to call different flippers ‘widgets’ despite the fact they have nothing to do with the WordPress widget system. I soon realised after checking the widget area that the plugin does not work with widgets. Thankfully, when I spoke to Nikolay regarding this issue he admitted that he had used the word ‘widget’ as he couldn’t think of anything better, though the name will be changed in the next update to avoid any confusion.

The general options page lists all the flippers you have created so far. You can those you don’t need any more and clicking on the name of a flipper will allow you to edit it.

Flipper General Options

In the general settings area you define the width and height of your flipper. The number of pages of content can also be defined here. By default the flipper shows navigation circles underneath and arrows at both the left and right hand side for skipping pages. These can be switched off if you prefer.

Flipper Settings

There are 9 default layouts to choose from. You can choose from one or two columns and an small, medium or large image can be integrated into the page. There is a custom option available too if you want to design it yourself using CSS.

Flipper Layout

The plugin cannot pull content from your posts or pages. Like many featured slider plugins, you need to add the content manually via the content area. Clearly the plugin was designed as a cool way to present additional content rather than an alternative way to publish posts and pages.

Nikolay hinted in the comment area of CodeCanyon that he may upgrade the plugin in future to allow posts, pages and custom post types to be pulled inside the flipper. I’d love to see this introduced as it would make the plugin much more versatile.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

Flipper Content

On the last tab of the settings area you can see a preview of your flipper.

Flipper Preview

Adding Flipper To Your Website

Once you have finished setting up your flippa you can add it to any post or page on your website using shortcode. You simply need to ensure to state the name of your flipper e.g. [flipper name=”WPMU Flipper”].

I tested it out on the default WordPress theme Twenty Eleven. The final result was impressive though the current version has a CSS issue that displays content directly underneath the flipper area. Due to this, the page navigation buttons underneath overlap the content. Nikolay ensured me via email that this was just a simple CSS issue and it will be resolved in the next update though I must admit I was surprised to see a simple error like this end up in the final version. This is a commercial product after all so you would expect it to at least be tested on the default WordPress designs Twenty Ten and Twenty Eleven.

Flipper Output

Unfortunately, there is no way to insert the flipper into a page template. This makes it difficult to add the flipper to a specific area of your design such as top of your home page or in your footer. Hopefully a future version will include basic instructions as to how flippers can be added to your site using PHP include (or something similar).

Overview

Featured sliders are so common now that the majority of WordPress business, portfolio and blogging themes come integrated with one. WordPress Flipper isn’t really a featured slider though. I initially assumed that this was the case though it’s better to consider it as a unique way of presenting content within a post or page.

I can see a variety of uses for the plugin. It would be a cool way of displaying frequently asked questions, instructions or perhaps presenting information on your about page in a unique way.

Despite the small CSS issue and confusing use of the term ‘widget’ in the options area, I was impressed with the plugin. It’s very quick to set up, very easy to use and the final output looks great. A license for WordPress Flipper retails for only $14 from CodeCanyon. I recommend checking it out if you are looking for a unique way of displaying content within posts and pages on your site :)

Thanks,
Kevin

* Many thanks to developer Nikolay Dyankov who sent us a test copy of this plugin for the purpose of this review :)

Tags: