Building a Module – The Basics

Important: To develop modules you will of course need experience with web development and WordPress development.

Introduction

Building a module for Live Composer is mostly general web development, there’s not much that’s specific to Live Composer, so if you have experience with web development you should be creating modules in no time. Let’s start by making the simplest module ever.

Setting Up

We need a place ( plugin/theme ) where we’ll be developing the module in. So let’s create a blank plugin for that purpose. Create a new folder in the plugins folder of WP and name it  simple-lc-module. Inside of it create a new PHP file and name it simple-lc-module.php and let’s tell WP about the plugin.

<?php 

/**
 * Plugin Name: Simple LC Module
 * Description: A simple module for Live Composer plugin.
 * Version: 1.0
 */

Now just go ahead and activate the plugin.

Notice: If your module is going to be a part of a theme the above code is irrelevant, in that case you can just use the functions.php file. Or create a specific file for it, or a specific folder in which all the module files will be in… there’s no rule, do it however you want.

The Base

To create a module you’ll be extending the  DSLC_Module class. You might find the code bellow a bit familiar, that’s because it’s similar to creating a WordPress widget.

// Check if Live Composer is active
if ( defined( 'DS_LIVE_COMPOSER_URL' ) ) {

	// Register Module
	add_action('dslc_hook_register_modules',
	     create_function('', 'return dslc_register_module( "Simple_LC_Module" );')
	);

	class Simple_LC_Module extends DSLC_Module {
	 		
	 	// Module Attributes
	    var $module_id = 'Simple_LC_Module';
	    var $module_title = 'Simple Module';
	    var $module_icon = 'circle';
	    var $module_category = 'general';
	 
	 	// Module Options
	    function options() {  }
	 
	 	// Module Output
	    function output( $options ) { }
	 
	}

}

If you go to LC mode on a page you will see the “Simple Module” in the modules list (at the end). There are a few things to mention about this code snippet:

• Make sure you use a unique class name for your module to avoid conflicts.
• The class name goes in 3 places (line 3, 6 and 9)
• Line 11. All the icon names can be found here
• Line 12. The categories used by the current modules are: general, single, elements and posts. But you can have your own if you like.

The Options

The module has no options and does not output any content yet, let’s change that. First let’s add an option ( the  options function ).

// Module Options
function options() { 

	// The options array
	$options = array(

		// A simple text input option
		array(
			'label' => 'Text Input',
			'id' => 'text_input',
			'std' => 'Default value',
			'type' => 'text',
		),

	);

	// Return the array
	return apply_filters( 'dslc_module_options', $options, $this->module_id );

}

It’s simply an array of options, LC handles the rest. There are more attributes for the options and of course more types, but that’s for one of the next tutorials in the series.

After the array is set we run it through a filter and return it back to LC. The main purpose of the filter is to allow other developers to alter the default values of the options.

The Output

Now let’s output some content (the  output function) and show the value from the option we made.

// Module Output
function output( $options ) {

	// REQUIRED
	$this->module_start( $options );

	// Your content
	echo 'The value of the text input option is: ' . $options['text_input'];

	// REQUIRED
	$this->module_end( $options );

 }

On lines 5 and 11 are 2 required lines. Everything in between those lines is your content.  $options is an array which holds the current values of all the options you have. To get the option value just use$options[‘id_of_option’];.

Final Code

Bellow is the final module code ( not including the plugin code from the beggining ).

// Check if Live Composer is active
if ( defined( 'DS_LIVE_COMPOSER_URL' ) ) {

	add_action('dslc_hook_register_modules',
	     create_function('', 'return dslc_register_module( "Simple_LC_Module" );')
	);

	class Simple_LC_Module extends DSLC_Module {
	 		
	 	// Module Attributes
	    var $module_id = 'Simple_LC_Module';
	    var $module_title = 'Simple Module';
	    var $module_icon = 'circle';
	    var $module_category = 'general';
	 
	 	// Module Options
	    function options() { 

	    	// The options array
	    	$options = array(

	    		// A simple text input option
	    		array(
					'label' => 'Text Input',
					'id' => 'text_input',
					'std' => 'Default value',
					'type' => 'text',
				),

	    	);

	    	// Return the array
	    	return apply_filters( 'dslc_module_options', $options, $this->module_id );

	    }
	 
	 	// Module Output
	    function output( $options ) {

	    	// REQUIRED
	    	$this->module_start( $options );

	    	// Your content
	    	echo 'The value of the text input option is: ' . $options['text_input'];

	    	// REQUIRED
	    	$this->module_end( $options );

	    }

	}
 
}

Tutorial Finished

That concludes this tutorial on module creation basics, quite simple if I may say.

The plugin from the tutorial can be downloaded here.