Wednesday, April 21, 2010

Pyrocms: create a widget in 5 minutes:

Today, I am going to show you how to create as simple Lorem Ipsum dummy text widget. This widget, when placed any where, will produce a paragraph of dummy text. This is essential if you are creating lots of pages and want an idea how the text will look in relation to other elements on the page.

So to get started, download the latest Pyrocms package and extract to your http folder. In Pyrocms, all the widgets are stored in the application/widgets folder. There are many other widgets there for you to explore. 
  1. First we will need to create a folder for our widget. That folder will store all our widget files. Note that the naming of the folder is very important. More on that later, for the moment, we just create a folder and name it lorem_ipsum.
  2. Inside our folder, we fist create our main widget file. We will call it: lorem_ipsum.php. Notice how we are keeping the same naming convention. Our folder, main widget file and later our class name would have the same name. If anytime you receive any kind of error, ensure that these three parts have the same name. Inside our widget we will put the following information:
    <---------FILE STARTS HERE----------->
    class lorem_ipsum extends Widgets
    //The following information will appear when you will install the widget
    public $title = 'Lorem ipsum';
    public $description = 'Puts default Lorem ipsum text.';
    public $author = 'Mahen';
    public $website = '';
    public $version = '1.0';

    <---------FILE ENDS HERE----------->
    This is all we need for a basic widget. Notice that no function is defined here, we are just showing some information to the user when he will install the widget.
  3. Next, we create a folder inside our lorem_ipsum and name it as views. This will contain the main functions that will be outputed to the browser.
  4. Inside our views folder, create a file called display.php and insert the following information: 
      < ? ph p echo “hello world”; ? >
    where we replace hello world with our default lorem ipsum text....
  5. We are now technically ready to install our widget. So in Pyrocms's widget screen, do a refresh and if everything is fine, our Lorem Ipsum widget will appear under Un-installed
  6.  Next, we click and install our widget. After install, our widget will receive a unique instance ID, usually denoted by the # tag. Once installed, we need to tell Pyrocms where to display our widget.
  7. Under the pages section, we edit the page under which we want to add our Lorem Ipsum widget, for our example, am going to use our homepage.
  8. Finally we add {widget_instance(3)} where 3 is the instance ID of our Widget. If everything went on well, our Lorem Ipsum text should appear on the homepage 
So this is all for Widgets. Note that we have barely scratched the surface here. If you want to develop your own Pyrocms Widgets, I encourage you to explore the other widgets and learn from them. Thats it for today, check often for newer updates.  

You can download my Widget here and explore it.


  1. After you install the widget ( item #6 here) you need to drag it from the left into one of the groups on the right!

    Caught me out :)

  2. widget this expierd link download

    re upload your link download


  3. Dude, just a little change...
    It should be:
    class Widget_Lorem_ipsum... Otherwise it gives an error...
    Notice the uppercase 'L' and the 'Widget' prefix... and now it goes to the 'addons/widgets/ folder...


  4. how can pass additional values in to display the display.php ?