Creating rotating image slider using wordpress data manager

Today we will show you how you can create special gallery, using our wordpress data manager. This tutorial may be useful for wordpress theme developers and wordpress plugin developers.

Today we will integrate a special gallery on pages we would like to based on Jquery plugin : Rotating Image slider

Please download the code and unzip it.

Please, place jquery code at js directory at our theme:

In order to best fit your design copy from css/style.css all lines starting .rm_wrapper to your theme style files:

Open index.html and copy html code div of class rm_wrapper to new php file at your theme:

 

Also copy button images from images directory to images directory at your theme:

 

Now update image url at css style to be url(images/pic.name) from url(../images/pic.name)

Now we have to enque jquery scripts to our theme

We will replace this code at index.html:

With script enque function.

Open functions.php at your theme and look for a function that enques scripts. If there is no such function create it. Get Code

Ok, now we will create base for our images with data manager, so user will be able to manage images at his site.

Step 1:

Go to Form Settings. Press “Add” and create form Name it my gallery. This will create table named “mygallery” at wordpress database.

Stage 2: Go to Fields and Views and  create 3 fields: image, Alt and category

After each saving you will be asked to save new form design. Data manager dynamically generates default view. You should approve saving form design:

 

Ok, now we should upload our images using “Test your form” page:

Gallery needs 16 images to work. Upload your client images to the site. Don’t forget to use Alt to describe the images and also name images according to your page subject. That will help with SEO, but if you need more assistance check the indexsy seo services for more info.

Ok, now is coding part. Remember we started editin php file with code from index.html?

Now we will create code that gets all images from gallery table we just created. Then we will output images to html.

Please call the php file you just created : sidebar-mainGallery.php

Open PHP tags at the beginning of the page : Get Code

Add line that gets all the photos from the mygallery table:
//gets all gallery photos
$mygalleryPhotos = $wpdb->get_results( "select * from mygallery where category='main gallery'", OBJECT );

Now initiate first variables:
//first initiations
$countInPage=0;
//will contain first displayed photos
$firstImages = array();
//will contains 4 parts of switching photos

At the original gallery we have 5 parts:
First part contains first photos that are shown with gallery initiation
4 Parts of switching photos. Each part contains 4 photo to one of four positions. Each time container rotates, next photo selected from container.
So we will go over our photos and add them to each part accordingly like in the loop:

Ok All parts prepared. No we can close code and start printing gallery:

Get Code

Ok , we almost finished! Now we just have to insert using of needed sidebar whenever we want at our theme.
For example you can add this code at header.php of your theme:

Get Code

Now, if you would like to test your theme, go to wanted post and add custom field “hasGallery” with “true” value

Contact us to get a free trial version