In the first part, we learned how to integrate impress.js into WordPress, for creating dynamic presentations with CSS transitions and transformations. impress.js is becoming one of the most popular JavaScript libraries in Github.
Flexibility and well structured codes might be the reason behind its success as a presentation generation library. In this tutorial, we are going to look at the possibilities of enhancing the default features of impress.js while building an interactive presentation with WImpress.
We completed the first part of this article by building a very basic presentation with the impress.js integrated WordPress plugin. Let’s start this tutorial by creating an options panel for our presentations. I hope you have already activated WImpress plugin in your WordPress installation. If so, you can update the code of that same plugin as we move on with the implementation.
Planning the Options Panel
Design plays a vital role in building amazing presentations. With tools like PowerPoint, design of the presentation might be restricted to a certain level, depending on the available features in each version. impress.js is purely built on CSS and HTML and hence you have the freedom to be creative with your designs. In this section, we are planning to implement a basic options panel with two options listed here.
- CSS Customizer
- Background Image (Presentation Template)
The purpose of creating this options panel is to let you know how to build basic options panel for any type of WordPress plugin.With CSS, you have no limitations and you can design your own options panel with more options to suit your needs. So let’s get started.
Creating Options Page
WordPress offers the capability of creating different types of pages in the admin panel. We can create menu pages to be displayed in the left menu as a main menu item or a sub menu item. Also we are allowed to create settings pages to be displayed under the default settings section. Here, we are going to use a menu page to configure the settings of WImpress plugin. So let’s get started by updating the plugin constructor with the following action.
add_action('admin_menu', array($this, 'wimpr_presentation_settings_page'));Let’s look at the wimpr_presentation_settings_page function for adding a new menu page.
public function wimpr_presentation_settings_page() {
add_menu_page('WImpress Presentation Settings', 'WImpress Presentation Settings', 'administrator', 'wimpr_settings', array($this, 'wimpr_presentation_settings'));
}Inside the function, we call WordPress add_menu_page for creating a top level menu item. First and second parameters are used to define the page title and menu title for the options page. The third parameter defines the capability required for displaying the menu. We need to provide a unique slug as the fourth parameter. The last parameter defines the function used for displaying the contents of the options panel. We will be using the wimpr_presentation_settings function for displaying the form fields for the options panel.
You can take a look at the complete list of parameters for the add_menu_page function at http://codex.wordpress.org/Function_Reference/add_menu_page.
Creating Options Form
Once we click the menu item, WordPress will execute the wimpr_presentation_settings function. So, we need to generate the necessary HTML content to be displayed for options page. The following code illustrates the implementation of the wimpr_presentation_settings function.
public function wimpr_presentation_settings() {
$html = '<div class="wrap">
<form method="post" name="options" action="options.php">
<h2>Select Presentation Settings</h2>' . wp_nonce_field('update-options') . '
<table width="100%" cellpadding="10" class="form-table">
<tr>
<td align="left" scope="row">
<label>Background Image</label>
</td>
<td><input type="text" name="wimpr_bimage" id="wimpr_bimage"
value="' . get_option('wimpr_bimage') . '" />
<input type="button" name="wimpr_image_btn" id="wimpr_image_btn"
value="Upload" />
<div name="wimpr_bimage_preview" id="wimpr_bimage_preview"><img style="width:100px;height:100px" src="' . get_option('wimpr_bimage') . '" /></div>
</td>
</tr>
<tr>
<td align="left" scope="row">
<label>Custom CSS</label>
</td>
<td><textarea style="width:500px;height:300px;" name="wimpr_css" id="wimpr_css">' . get_option('wimpr_css') . '</textarea></td>
</tr>
</table>
<p class="submit">
<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="wimpr_bimage,wimpr_css" />
<input type="submit" name="Submit" value="Update" />
</p>
</form>
</div>';
echo $html;
}We start the HTML for settings page by creating a form with an action pointing to the options.php page. This allows us to use the WordPress built-in options saving process instead of a manual saving process. Next, we define the background image field as a text field with an additional upload button and DIV container for previewing the uploaded image. Here, we have used the get_option function for retrieving the existing value from the wp_options table. Then we define another textarea for adding custom CSS styles for presentations.
Now we have two fields for our options panel with the existing values. Finally, we define two hidden fields called action and page_options. Since we are using the existing options saving process, it’s mandatory to have these two fields with the exact names mentioned here. The field action should have the value update for processing the form submission. Then we have to define the names of each form field that we want to be saved, as a comma separated value of the page_options field. Now we can click the Submit button to save the data automatically into the wp_options table.
Uploading Background Image
In the previous section, we created the background image field with an upload button. Now we have to allow users to upload images using this button. So we are going to integrate the existing WordPress Media Uploader into our upload button.
First, we have to include the necessary script files for loading the Media Uploader. Use the following action inside the plugin constructor to load the script files for WordPress admin.
add_action('admin_enqueue_scripts', array($this, 'wimpr_admin_scripts'));Now we can take a look at the wimpr_admin_scripts function for inclusion of the necessary script files.
public function wimpr_admin_scripts() {
wp_enqueue_script('jquery');
if (function_exists('wp_enqueue_media')) {
wp_enqueue_media();
} else {
wp_enqueue_style('thickbox');
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
}
wp_register_script('wimpr_init', plugins_url('js/wimpr_init.js', __FILE__), array("jquery"));
wp_enqueue_script('wimpr_init');
}WordPress 3.5 introduced a new version of Media Uploader using the wp_enqueue_media function. So we check for the existence of the wp_enqueue_media function before loading it into the plugin. In case it’s not available, we can fallback to the previous method of loading Media Uploader with wp_enqueue_script statements. Finally, we include a custom JavaScript file for handling the file upload for our upload button.
Now let’s take a look at the wimpr_init.js file for handling the image upload.
jQuery(document).ready(function(){
jQuery("#wimpr_image_btn").click(function(){
if ( typeof wp !== 'undefined' && wp.media && wp.media.editor )
wp.media.editor.open("wimpr");
var wimpr_image_btn = jQuery(this);
var send_attachments = wp.media.editor.send.attachment;
wp.media.editor.send.attachment = function(props, attachment) {
jQuery("#wimpr_bimage").val(attachment.url);
jQuery("#wimpr_bimage_preview").html("<img style='width:100px;height:100px;' src='"+attachment.url+"' />");
wp.media.editor.send.attachment = send_attachments;
}
wp.media.editor.open();
return false;
});
});Once the button is clicked, we open the media uploader by giving a unique ID to the wp.media.editor.open function. Then we assign the original media attachment function into a variable called send_attachments for avoiding conflicts with our custom Media Uploader. Next, we define the custom send attachment function for the upload button.
We get the path to the uploaded file using attachment.url and assign it to the text field as the background image. Next, we assign the same URL as an image into the preview DIV container. Finally, we restore the original send attachment function by using the send_attachments variable.
Having completed the upload handling code, we can now upload an image using our upload button. After uploading the image, we have to click the Insert into Page button and the URL and preview will be displayed in the settings page.
Applying Presentation Settings
So far, we have created a basic settings section with a background image and custom CSS for presentation steps. Now we have to apply those data into the actual presentation. Let’s update the single-wpresentations.php file to include the settings.
< ?php
$style[0] = (get_option('wimpr_bimage') != "") ? "background-image: url('" . get_option('wimpr_bimage') . "')" : "";
?>
<style>
body{
font-size:12px;
< ?php echo $style[0]; ?>
}
< ?php echo get_option('wimpr_css'); ?>
</style>First, we prepare the necessary styles for the background image using the wimpr_bimage option value retrieved from get_option function. Styles for the background image are applied to the body of the HTML page. Next, we get the custom CSS data from the wp_options table using the wimpr_css key and apply it inside the style element. Now we have completed the implementation of the WImpress plugin with the settings page.
You can add more settings based on your preferences. I would like to know what other settings you would like to have for this plugin. So use the comments section to let me know.
In this section, we are going to build an advanced presentation using the plugin we created throughout this tutorial. Presentation will be designed to illustrate various tutorials and categories in the SitePoint network. Let’s look at the preview of our final presentation using the following link.
Demo – http://goo.gl/oMuO8c
Let’s get started.
Step 1 – Configuring presentation settings
We can start the process by configuring the settings for presentations. Select your favorite background image for the presentation template and upload it by clicking the Upload button and finally click the Insert to Page button after uploading.
Then we have to provide custom CSS used for the presentations inside the textarea. The complete set of styles used for this presentation is lengthy and hence I am not going to include it inside this tutorial. You can all the styles in the source codes folder. Now your settings screen should look like the following image.
Step 2 – Creating the presentation
Now you can use the Impress Presentation item on the left menu to create a presentation. Use a meaningful name and click the Publish button to save the presentation.
Step 3 – Creating first step
In the first step, we are going to include the SitePoint title with its logo and small tag line. Use the Impress Steps section to create the first step of the presentation. Add a unique title and the following code as the content.
<img src="http://localhost/wordpress-web-develop-test/wp-content/uploads/2013/09/logo.png" />
<p class="title1">Sitepoint</p>
<p class="title2">Cutting-edge content for web professionals</p>Make sure to have the correct path to the image based on your WordPress installation. Then select the Presentation Name and add necessary CSS classes for this step. Here, I’ll be using a class called banner to style the first step. Next, define data-x as -1000 and data-y as 0 as the starting points of the presentation. Finally, click the Publish button.
Now go to the Impress Presentations list and click the view link of the previously created presentation to load it inside the browser. You should get something similar to the following image.
Step 4 – Creating second level steps
Now we are going to create the tutorial categories as a sub level of SitePoint. So they will be placed below the first step. We can increase the data-y value to get steps to the bottom of the screen while decreasing data-x values will move the steps towards the left of the screen. Following code shows the HTML used for this step. Necessary CSS styles are placed in the settings section.
<img src="http://localhost/wordpress-web-develop-test/wp-content/uploads/2013/09/php.png" />As usual, select the same presentation from the list and define the CSS class as post-category. Finally, set the data-x value to -1500 and data-y value to 800, before clicking the Publish button. Now load the presentation again and use the spacebar or arrow keys to navigate. You should get something similar to the following image.
Step 5 – Create tutorials as a cube
Now we come to the third level of the presentation with the tutorials. Here, we are going to build a cube to contain information of six tutorials and will be placed far away from Step 2. Now consider the following code for HTML structure used for tutorial steps.
<div class="iauthor">
<img src="http://localhost/wordpress-web-develop-test/wp-content/uploads/2013/09/auth1.jpeg" />
<div class="iauth_name">Rakhitha Nimesh</div>
</div>
<div class="ipost_title">
<p class="ipost_header">Integrating impress.js into WordPress</p>
</div>
<div style="clear:both"></div>
<div class="ipost_content">Tutorial Summery.</div>Use the same structure for all the tutorial steps with modified values. As usual, select the presentation and define the CSS class as post. Next, keep the data-x value as -2000 and data-y value as 2500 to get step3 away from step2. Now you should have something similar to the following image.
Now we have to build remaining five steps of the cube for PHP category in a similar manner.
Step 2 of the cube – data-x = -1750, data-y=2500, data-z=-250, data-rotate-y=90
Here we have used data-z value to provide the depth for the cube. Also this step is rotated 90 degrees across the Y-axis to build the cube.
In the initial stages, it’s difficult to understand how the cube is built, by thinking about the values. So make sure to play with impress.js until you understand how to position the elements properly.
Step 3 of the cube – data-x=-2000, data-y=2500, data-z=-500, data-rotate-y=180
In Step 3, we are increasing the depth while rotating another 90 degrees across Y-axis.
Step 4 of the cube – data-x=-2250, data-y=2500, data-z=-250, data-rotate-y=270
Step 5 of the cube – data-x=-2000, data-y=2250, data-z=-250, data-rotate-x=90
In Step 5, we use data-rotate-y attribute to place the top part of the cube by rotating across X-axis.
Step 6 of the cube – data-x=-2000, data-y=2750, data-z=-250, data-rotate-y=270
So now we have completed all three levels of the presentation for the PHP category. Now we have to complete the same process for JavaScript and Design categories. So start the process by creating the category step for JavaScript by using similar codes to Step 2. Once all three categories are completed you will get an image similar to the following.
Now you have to continue this process until the cubes for all three categories are designed. You can find the attribute values and the content for remaining steps inside the source codes folder.
Find the demo of the final presentation at http://goo.gl/oMuO8c
Download the source codes at http://goo.gl/TdT1xZ
Wrap Up
In this two part tutorial, we created a basic WordPress plugin to integrate impress.js into WordPress for automating presentation step creation. You can see why impress.js is considered to be one of the most powerful presentation creation libraries with the use of CSS3 transitions and transformations.
We completed the tutorial by creating a simple and stylish presentation using this plugin. There are no limits in building presentations with impress.js. So it’s up to you to put the creativity into practice by designing amazing presentations.
Looking forward to hear your suggestions and seeing some amazing presentations in the comments section.
Rakhitha NimeshRakhitha Nimesh is a software engineer and writer from Sri Lanka. He likes to develop applications and write on latest technologies. He is available for freelance writing and WordPress development. You can read his latest book on Building Impressive Presentations with Impress.js. He is a regular contributor to 1stWebDesigner, Tuts+ network and SitePoint network. Make sure to follow him on Google+.
