In this tutorial we will help you to create your first simple widget for Elgg. This is so simple. Follow these steps and just create 4 files and you will get your first Elgg widget. You can download the final plugin from following link.
We are going to create a Love Calculator for Elgg. This tutorial assumes that you know the following
- What is Elgg?
- A little Html and PHP
- A little javascript
Type : Tutorial | Difficulty : Low | Level : Beginner
First things first.
We need to create a folder called loveCalculator (our plugin name) inside your elgg’s mod directory. Create a start.php and manifest.xml files inside the folder.
STEP 1 :The start.php file.
This is the file that tell’s elgg about a plugin residing inside its mod folder and initiate the plugin when Elgg loads. Add the following code to the start.php
<?php
elgg_register_event_handler('init', 'system', 'loveCalculator_init');
function loveCalculator_init() {
elgg_register_widget_type('loveCalculator',elgg_echo("loveCalculator:wg:title"),elgg_echo("loveCalculator:wg:detail"));
}
?>
This will tell elgg to initiate the plugin when Elgg loads. Also it will register a widget for Elgg. The parameters are the widget name, the widget title, and the widget description.
STEP 2 : Add the following to your manifest.xml
<?xml version="1.0" encoding="UTF-8"?> <plugin_manifest xmlns="http://www.elgg.org/plugin_manifest/1.8"> <name>loveCalculator</name> <author>Raez mon @ Team Webgalli</author> <version>2</version> <category>enhancement</category> <category>fun</category> <description>Love Calculator plugin; This pluggin is just coded for fun :). It adds a page and widget to calculate love percentage between two peoples.</description> <website>http://www.webgalli.com/</website> <license>GNU General Public License version 2</license> <requires> <type>elgg_release</type> <version>1.8</version> </requires> <activate_on_install>true</activate_on_install> </plugin_manifest>
This covers the plugin authors information and other general informations about the plugin.
That finishes the basics.
STEP 3 : Folder structure
As Elgg is in MVC architecture, we need to create view files for the widget. Create a few folders in the following flow
loveCalculator / views / default / widgets / loveCalculator
Create a file called contents.php inside the last created loveCalculator folder. This file contains the contents to display for our widget. We will use the following content
<script type="text/javascript" language="javascript">
/*
By Team Webgalli
www.webgalli.com
*/
function calc() {
first = document.loveform.name1.value.toUpperCase();
firstlength = document.loveform.name1.value.length;
second = document.loveform.name2.value.toUpperCase();
secondlength = document.loveform.name2.value.length;
var LoveCount=0;
for (Count=0; Count < firstlength; Count++) {
letter1=first.substring(Count,Count+1);
if (letter1=='L') LoveCount+=2;
if (letter1=='O') LoveCount+=2;
if (letter1=='V') LoveCount+=2;
if (letter1=='E') LoveCount+=2;
if (letter1=='Y') LoveCount+=3;
if (letter1=='O') LoveCount+=1;
if (letter1=='U') LoveCount+=3;
}
for (Count=0; Count < secondlength; Count++) {
letter2=second.substring(Count,Count+1);
if (letter2=='L') LoveCount+=2;
if (letter2=='O') LoveCount+=2;
if (letter2=='V') LoveCount+=2;
if (letter2=='E') LoveCount+=2;
if (letter2=='Y') LoveCount+=3;
if (letter2=='O') LoveCount+=1;
if (letter2=='U') LoveCount+=3;
}
amount=0;
if (LoveCount> 0) amount= 5-((firstlength+secondlength)/2)
if (LoveCount> 2) amount= 10-((firstlength+secondlength)/2)
if (LoveCount> 4) amount= 20-((firstlength+secondlength)/2)
if (LoveCount> 6) amount= 30-((firstlength+secondlength)/2)
if (LoveCount> 8) amount= 40-((firstlength+secondlength)/2)
if (LoveCount>10) amount= 50-((firstlength+secondlength)/2)
if (LoveCount>12) amount= 60-((firstlength+secondlength)/2)
if (LoveCount>14) amount= 70-((firstlength+secondlength)/2)
if (LoveCount>16) amount= 80-((firstlength+secondlength)/2)
if (LoveCount>18) amount= 90-((firstlength+secondlength)/2)
if (LoveCount>20) amount=100-((firstlength+secondlength)/2)
if (LoveCount>22) amount=110-((firstlength+secondlength)/2)
if (firstlength==0 || secondlength==0) amount= "Err";
if (amount < 0) amount= 0;
if (amount >99) amount=99;
document.loveform.output.value=amount+"%";
}
</script>
<CENTER>
<?php echo elgg_echo('loveCalculator:info');?>
<FORM name="loveform">
<P>
<INPUT value="<?php echo elgg_echo('loveCalculator:yourname');?>" name="name1" type="text" size="10"> + <INPUT value="<?php echo elgg_echo('loveCalculator:lovername');?>" name="name2" type="text" size="10"> = <INPUT value name="output" type="text" size="6"> <BR>
<BR>
<INPUT value="<?php echo elgg_echo('loveCalculator:calculate');?>" name="calculate" type="button" class="elgg-button" onclick="calc()"> </P>
</FORM>
</CENTER>
That finishes the widget content.
STEP 4 : Language file
Now we need to create a language file. Create a folder called languages inside your loveCalculator folder. Create an en.php file inside this languages folder and add the following to that file.
<?php
$english = array(
'loveCalculator:wg:title' => "Love calculator",
'loveCalculator:wg:detail' => "A funny widget for Calculating love percentage b/w 2 peoples.",
'loveCalculator:info' => "Calculate the love between two people by entering their names below and then calculate their compatibility.",
'loveCalculator:yourname' => "Your name",
'loveCalculator:lovername' => "Lover name",
'loveCalculator:calculate' => "Calculate",
);
add_translation("en", $english);
?>
That finishes the development and your first elgg widget is ready now. Just enable it from the admin panel and add it to your profile or dashboard. You can also download the finished product from here.
If you are not seeing any contents in your new widget, just run the upgrade script and flush the caches from Your sites admin dashboard.
Tags: add new elgg widget, elgg hello world, elgg widget, elgg widget tutorial, how to create elgg plugin, how to create elgg widget
