Dynamic Step Process Panels is a lightweight jQuery plugin. It allows that any content can be represented in any number of tabs / steps. Can be used to:

• presentating bulleted content,
• multisteps forms,
• provide a description of products,
• viewing photos,
• anything that comes to your mind :).

Implementation involves writing the WP shortcode (with specific id attribute) in your page or post. Implementation requires 2 steps:

• Step 1 - go to Settings submenu in WordPress administration panel, open position Dynamic Step Process Panels and configure your own panel.
• Step 2 - after saving settings you'll get the information with shortcode, which you have to put into your page. The shortcode will look like this:

  [dspp id='you_process_panel_id']

You can also display process panel as a popup. To do that set Displayed as a popup option to true, then copy a link from bold part of description and put it with shortcode into your page. For example:

<a href="#processPanel-popup">open popup</a>
[dspp id='you_process_panel_id']

There is some parameters that can defined behaviour or look of the steps panel. It can be configured from administration panel.

Parameter	Default value	Possible values	Description
id	processPanel	-	Specifies the identifier of the steps panel. Should be unique for each panel, if they are displayed on one page.
kind	stepByStep	stepByStep freeChoice	Specifies the behaviour of the steps panel. Parameter stepByStep forces the user to open steps one after another. Parameter freeChoice allow free choice.
markVisited	true	true false	true - once step was highlighted it can't be unhighlighted/uncolored false - remove step highlight on go back action
style	green-blue	green-blue blue-gray blue-green blue-maroon blue-orange green-gray green-maroon green-orange maroon-blue maroon-gray maroon-green maroon-orange orange-blue orange-gray orange-green orange-maroon	Specifies the coloristic version of the step panel. 16 predefined base / hover color styles available.
firstSelected	true	true false	Specifies that the first step is open on start or not.
icons	true	true false	Specifies that the icons under the step labels shows or not.
imgFolder	img	-	Specifies the path to folder which contains the sprite_with_icons.png, sprite_without_icons.png and sprite_buttons.png images.
chooseAgain	true	true false	Specifies that the step can be chosen again.
nextPrevButtons	true	true false	Specifies that the next and previous buttons will show.
nextPrevButtonsPosition	bottom	bottom top	Specifies the next and previous buttons position.
nextButtonTitle	Next step	-	Specifies the next button caption.
prevButtonTitle	Previous step	-	Specifies the previous button caption.
fadeSpeed	1000	-	Specifies the fade effect speed (in miliseconds) when the step is changed. Set to 0 if you want to disable effect.
event	click	click mouseover	Specifies the type of event to be used for open step content.

There is also some predefined events that you can use to expand step panel functionality. In fact events are specific parameters and the implementation of its look similar. You just need to write custom javascript function and put it into function body in administration panel.

Notice: If you want to prevent default event functionality, use return false; instruction inside your custom event function.

Event	Aviable arguments	Description
beforeLoad	-	This event is triggered before step panel will be initialized.
onLoad	-	This event is triggered after step panel has been initialized.
onOpen	event step content stepNumber	This event is triggered before opening step content.
afterOpen	event step content stepNumber	This event is triggered after opening step content.
onHoverIn	event step stepNumber	This event is triggered when step is hovered.
onHoverOut	event step stepNumber	This event is triggered when step hover is out.
onOpenPopup	event button panel	This event is triggered before opening process panel displayed as a popup.
onClosePopup	event button panel	This event is triggered after opening process panel displayed as a popup.

You can find style sheets for coloristic versions in colors wp-content/plugins/dynamic_step_process_panels/colors/ folder.
The Dynamic Step Process Panels plugin has several important css classes.
The classes dspp_step, dspp_step-green-blue (depends on color version), dspp_step1 (depends on step number), dspp_step1-green-blue (only for first step, depends on color version) are added automaticaly on load to every step element.
So you can define the width of each step using .dspp_step1, .dspp_step2, .dspp_step3 etc. classes. For example:

.dspp_step1
{
	width: 100px;
}
.dspp_step2
{
	width: 110px;
}
.dspp_step3
{
	width: 150px;
}

When you use many step panels on one site you should use custom classes to specify style of each step. For example:

.myStep1, .myStep2, .myStep3
{
	width: 100px;
}

Remember to put their names into Class parameter in step config.

Here are some classes that define style of step panel, steps and contents. You can find them in wp-content/plugins/dynamic_step_process_panels/style.css file.

• Panel that is the container for the steps and their content

.dspp_panel
{
	background-color: #ffffff;
	border: 1px solid #dbe6ee;
	padding: 10px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
					

• Step class that is added to every step autamatically

.dspp_step
{
	float: left;
	position: relative;
	margin-left: -20px;
	width: 351px;
	height: 43px;
	font-size: 16px;
	padding-left: 20px;
	padding-top: 18px;
	background-image: url("img/sprite_with_icons.png");
	background-repeat: no-repeat;
	outline: none;
}
					

• Step label class

.dspp_stepLabel
{
	position: absolute;
	top: 19px;
	right: 30px;
}
					

• Last step label class

.dspp_stepLabelLast
{
	position: absolute;
	top: 19px;
	right: 25px;
}

• Content class

.dspp_content
{
	clear: both;
	padding: 10px;
	line-height: 150%;
}
					

• Next and previous buttons classes

.dspp_nextPrevButtons
{
	clear: both;
	width: 310px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	padding-bottom: 10px;
}
.dspp_nextPrevButtons .dspp_button:first-child
{
	margin-right: 10px;
}
.dspp_nextPrevButtons .dspp_button
{
	float: left;
	display: block;
	width: 150px;
	height: 34px;
	padding-top: 12px;
	text-align: center;
	background-image: url("img/sprite_buttons.png");
	background-repeat: no-repeat;
	cursor: pointer;
}
.dspp_nextPrevButtons .dspp_inactiveButton
{
	background-position: -10px -310px;
	color: #ffffff;
}
					

You can load the content for some steps from files via AJAX technology. In this case you should put a path to file in Content from file parameter. To see javascript codes used in live preview check (please open this file in text editor):

• live preview - javascript

If you want to implement Dynamic Step Process Panels without using admin panel check old documentation. If you've used Dynamic Step Process Panels before update, when admin panel wasn't available and you don't want to change your old implementation, just replace [dspp] shortcodes with [dspp_old] shortcodes. Support for all our items is conducted through our Support Forum.
Please register an account and search the forum or create a new topic, we'll answer as soon as possible.

We're in GMT +1 and we aim to answer all questions within 24 hours (Monday – Friday). In some cases the waiting time can be extended to 48 hours.
Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.