Programmatically: How to implement custom Magento jQuery plugins

Step 1: Create a new directory and file structure

Create a new directory YourCompany_YourModule under app/code/local and inside it create a new directory view and a file js under it. Inside the js directory, create a new file yourplugin.js. yourplugin.js

	// yourplugin.js
	(function($) {
    $.fn.yourPlugin = function() {
        // Your plugin code here
        return this;
    };
	})(jQuery);
	

Step 2: Add the JavaScript file to Magento's concatenation process

In your module's config.xml file, add the following code:

	<config>
		<frontend>
			<js>
			<merge>
			<files>
			<yourplugin_js>yourcompany_yourmodule/js/yourplugin.js</yourplugin_js>
			</files>
			</merge>
			</js>
		</frontend>
	</config>
	

Step 3: Use the custom plugin in your theme

In your theme's layout.xml file, add the following code:

	<layout>
    <default>
    <reference name="head">
    <block type="core/text" name="yourplugin" template="yourcompany_yourmodule/youtemplate.phtml">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>yourcompany_yourmodule/js/yourplugin.js</script></action>
    </block>
    </reference>
    </default>
	</layout>

Step 4: Use the custom plugin in your PHTML file

In your PHTML file (e.g., youtemplate.phtml), you can use the custom plugin like this:

	echo $this->getLayout()->getBlock('yourplugin')->toHtml();