WordPress Tutorial: How To Create An Awesome Page Flip Plugin

Note: We no longer support this WP plugin as the author is not writing for us for now. 

Starting today, every week we’ll feature an awesome coding tutorial, teaching you how to do custom stuff using WordPress, from basic to advanced. Today we’ll create a plugin (so you’ll learn the basic steps on this) to generate a “page flip” gallery, using JS.

I bet you’ve seen one of those in your early web days, but those were mostly done using flash, which now is quite of deprecated (it still has its value, but it’s not the best option for this kind of thing anymore).

The basic functionality will be create a new type of gallery based on a few images and their sizes, via shortcode.

Let’s get started then!

Zip & Install

The best way to see it in action is installing it yourself. You can download it here. Install and activate the plugin, then all you need to do is to add the shortcode in a page, like this:

[flip_book ids = "78 79 78 79 79 78 78 79 79 78" width="300" height="225" display="double"]

Quick Preview

And this is the kind of result that you’ll get:

Flipbook Effect

But what sort of black magic goes on there? Well, it’s quite simple actually. Let’s learn how to create something like this.

The Header

First of all you’ll need to create a new folder and a new .php file. At this point it would be awesome if you have a test environment, so you can break and test stuff.

The file and folder should have a simple and unique name, so you’ll avoid conflict with existing plugins. Then the basic content of our file is something like this:

/*
    Plugin Name: FlipBook Gallery
    Description: Create a shortcode for flipbook galleries.
    Version: 1.0
    Author: Web Revenue Blog
    License: GPL2
*/

Pretty simple, huh? Once you create this file you’ll see your plugin in the list under WP admin > Plugins, and you can activate it (but if you only have this content in your file it won’t change a lot your site).

Calling scripts

Now we need to include some important external assets here. The required external files for basic functionality are:

  • jQuery (1.9+)
  • Turn.js script
  • Turn basic styling

If you simply add the script and style tags there you’ll have some issues. For instance, the double jQuery call will probably break your site. Also WordPress itself won’t “know” that you’ve created those items, so if a different plugin calls turn.js again or a different styling it’ll break your site.

That’s why we should always use the wp_enqueue_script and wp_enqueue_style functions. Here is the basic usage:

function plugin_scripts( ) {
    wp_enqueue_script('jquery');
    wp_enqueue_script('turn', plugins_url( 'js/turn.js' , __FILE__ ), array('jquery'), '1.3', false);
    wp_enqueue_style('turnCSS', plugins_url( 'css/style.css' , __FILE__ ), false, '1.3', 'all' );
}

We are calling external items in 3 different ways, here they are:

  • Calling an existing item: jQuery – We don’t need to pass a lot of parameters if we know for sure that WordPress already load this script, we’re just telling him “Dude, this script MUST be here otherwise our code won’t work”
  • Creating a new script – you’ll need to pass some attributes like name, file location, required items (in this case it requires jQuery), version, and if it’s loaded in the footer or header (false = header, true = footer)
  • Creating a new style – Pretty much the same as the previous one, with a small difference in the last attribute, that says which media type this style if for

One of the important things you should consider when you’re calling external scripts is if there is more code that will depend on this plugin. That is basically what defines if your file will be called in the header or footer.

In our case, we have some additional scripts to set up the gallery only when its HTML is created, and that will be added in the body. This is why we MUST add this script in the head, otherwise when our code is called the “turn” function is not there yet.

After this nice code we need to tell WordPress to load those as scripts, the action “wp_enqueue_scripts” will do this:

add_action('wp_enqueue_scripts', 'plugin_scripts');

The Shortcode

Let’s start with the action to create the shortcode. It’s quite simple, you just need to add the shortcode trigger, and the function that will be executed:

add_shortcode("flip_book","create_flip_book");

Now we need to create our function and get our attributes. But some of the attributes can be optional, which means that we’ll need to create default values for them. We could create a lot of if’s there testing if the attribute is empty, but this is one of the cases where ternary operation is better than the regular if call.

Ternary operations are kind of if statements directly in variable’s value. If follows this structure:

$variable = ( CONDITION ) ? "VALUE IF CONDITION IS TRUE" : "VALUE IF CONDITION IS FALSE";

You can see them in action in the first part of our function:

function create_flip_book( $attr ) {

    //Preparing the IDs to be processed
    $array['ids'] = explode(" ",$attr['ids']);

    //display mode
    $array['display'] = empty( $attr['display'] ) ? "single" : $attr['display'];//standard value

    //width
    $array['width'] = empty( $attr['width'] ) ? 400 : $attr['width'];

    //height
    $array['height'] = empty( $attr['height'] ) ? 300 : $attr['height'];
    //HTML and the rest of the code goes here
}

Then we’ll need to create the HTML, and the basic call for our images. Another important point here is to adjust the size if we’re using magazine style (it should be 2x the width since we’ll have 2 images instead of one):

<?php
    if ( $array['display'] == "double" ) {
        $array['width'] = $array['width'] * 2;
    }
    // HTML, JS and Black Magic
?>
<div id="flipbook">
    <?php
        for( $i = 0; $i < sizeof( $array['ids'] ); $i++ ) {
    ?>
        <div>
            <?php
                echo wp_get_attachment_image( $array['ids'][$i], 'full' );
                if( $array['display'] == "single" ) {
            ?>
                <span><?="".($i+1)?>/<? echo "".sizeof($array['ids'])?></span>
            <?php
                } else { 
            ?>
                <spanright" : "left");
                ?>">
                <?php
                    echo "".($i+1)?>/<? echo "".sizeof($array['ids']);
                ?>
                </span>
            <?php
                }
            ?>
        </div>
    <?php
        }
    ?>
</div>
<script type="text/javascript">
    jQuery("#flipbook").turn({
        width: <?php echo $array['width']; ?>,
        height: <?php echo $array['height']; ?>,
        autoCenter: true,
        display: '<?php echo $array['display']; ?>',//single page or double page
        acceleration: true,
        gradients: ! jQuery.isTouch,
    });
</script>

What do you think?

Now you can tweak and modify this as you want, adding more options (check out their awesome examples for more inspiration), adjusting what doesn’t work for you, or combining this with other plugins.

Do you have any WordPress concept you want to learn a little bit more? Maybe something you want to learn how to do? Let us know via comments and we’ll be glad to include this in a future post!