How to make a flipbook online using jQuery or WordPress

Flipbook Animation of Page Flip

Why Flipbook?

Flipbooks are gaining popularity in online space. So much that popular publication houses like issuu.com are solving how to make a flipbook online – using flipbook as primary viewer for millions of readers and users. Now most would love to have the in their sites too. But those publication houses are not very budget friendly costing beyond hundreds of dollars per months easily.

 

Click next and previous arrow in above flipbook

But, there are other solutions to provide such flipbooks with amazing 3D look and feel. You can use such flipbooks in your site with ease whether you are using jQuery, WordPress or even just HTML5. Now there is a possibility, with DearFlip.

How to make a flipbook online using jQuery or WordPress 1

DearFlip is a Realistic 3D Flipbook built for websites powered by jQuery or WordPress. It requires little knowledge in each of the platform. All you will need is link to the PDF file and rest will be handled by DearFlip.

How to make a Flipbook online?

Now, let’s talk about how to make a flipbook online with DearFlip using WordPress or jQuery.

Make a Flipbook with WordPress:

WordPress is a popular CMS platform and very easy to use. On top of that, various plugins and theme make WordPress much more configurable as per requirement. Same goes for how to make a flipbook online with WordPress? Straightforward, we use a plugin.

DearFlip comes as a WordPress plugin to solve this issue foe WordPress users. It has a free lite version and premium version to use. Free version is enough for this tutorial on how to make a flipbook online – using WordPress. You can download the 3D Flipbook plugin from the official WordPress plugin directory.

Install DearFlip flipbook plugin:

We are assuming you are in WordPress admin area. There follow these following steps:

How to make a flipbook online using jQuery or WordPress 2

  1. Click on ‘Plugins > Add New’.
  2. In the search text box in top right corner, type ‘dflip’.
  3. Once the search return dFlip – 3D Flipbook WordPress and click on ‘Install Now’ button
  4. Now, click on ‘Activate’ to activate the plugin

Make a WordPress Flipbook:

Now that you have installed the flipbook WordPress plugin, next you can create flipbooks with the plugin post. DearFlip uses custom post to create flipbooks, so if you have created any posts in WordPress it will be similar.

How to make a flipbook online using jQuery or WordPress 3

  1. Click on “dFlip Books -> Add New Book”. You will get a post page with settings like in the image below.
  2. In Add title add the title of the book. This will be used if you use thumb or button type popup for flipbooks. But primarily to distinguish the post from others in all flipbooks post screen.
  3. In PDF File add, click on Select PDF and choose a PDF file from the media popup box.
  4. Now click on Publish button to publish. you will get a shortcode for the flipbook once you have publish which you can add in pages and posts as per your need.

How to make a flipbook online using jQuery or WordPress 4

Adding Flipbook to your WordPress Page or Post:

Now that you have the flipbook created and have a shortcode for that flipbook. You can create a new page and add the shortcode to the text area and preview the page or post.

How to make a flipbook online using jQuery or WordPress 5

Once you Publish or preview you will have the page contain a flipbook that will be ready to flip – Similar to the flipbook below. you can change the background color in the layout section of the flipbook post. like we used yellow in the above flipbook.

 

 

How to make a flipbook online with jQuery:

WordPress is easy to use when you have no coding knowledge. If you want to know how to make a flipbook online with much more customization, then you can use jQuery to make a flipbook. you can see a whole documentation for jQuery flipbook in our site.

Leave a Reply

Close Menu