Create a Widget system like WordPress without any framework

Question

I have searched for this topic here and Google but I only found the solutions with PHP frameworks (for example, YII and Laravel)

I am developing a simple CMS and I would like to add widget system just like WordPress ( Recent Comments, Categories widgets )

List available widgets.
Users can active the widgets and use them in sidebar.

My steps:

1. First at all, I already made an admin tool as the screenshot blow ( jQuery UI sortable works fine)

enter image description here

Here is my php code:

$available_widgets = array(
    0 => array(

        'id' => 'recent-post',
        'title' => 'Latest Pots',
        'option' => array( 'display_count' => 5, 'multi_widget' => 0)

    ),
    1 => array(

        'id' => 'recent-comment',
        'title' => 'Recent Commets',
        'option' => array( 'display_count' => 5, 'multi_widget' => 0)

    ),
    2 => array(

        'id' => 'text-box',
        'title' => 'Text Box',
        'option' => array('multi_widget' => 1)

    )
);

View

foreach ( $available_widgets AS $available_widget ) {

    if ( $available_widget['option']['multi_widget'] == 0 ) {
        echo '<li class="widget-box widget-single" data-widget-id="' . $available_widget['id'] . '" ><div class="widget-handle">' . $available_widget['title'] . '</div></li>';
    }
    else {
        echo '<li class="widget-box widget-multiple" data-widget-id="' . $available_widget['id'] . '" ><div class="widget-handle">' . $available_widget['title'] . '</div></li>';
    }
}

But I still no idea about the next step, any idea will be grateful. Thanks.

Update:

For my step 2 I made a simple EventDispatcher, I put the link here if someone else needs it. https://github.com/terrylinooo/PHP-EventDispatcher

can you please share your code with us? I am in the same need. I would appreciate if you can share it. — Code Lover, Aug 21 '15 at 10:32

score 2 · Answer 1 · answered Jun 06 '15 at 17:49

You may be underestimating the complexity of this question. If you are doing this from scratch, there will be several things to consider.

Are you creating all your widgets, and then just want the user to be able to pick and choose which ones they want visible?

If so, roughly I would probably:

Obviously make html sidebar that will house the widgets, styled by your css. Have the width of column set to 0 if no widgets are published.
And of course make all your widgets in separate files probably in their own folder.
Have database table with at very least path to widget file, "published" boolean column, and "widget_order" column.
Choose where in the admin area the user will choose which ones to show, and have it change the "published" column in the table, and maybe also a small text box or dropdown where they can specify the order number.

Then on the front end, just do a database lookup in the sidebar, if the number of rows from the module table that are "published" is greater than 0, then 'echo' out a css value that will give your column the correct width (of your choice) instead of 0 width keeping it hidden otherwise if none are enabled.

The database look up should have the ORDER BY clause to follow the 'widget_order' values. This obviously is how the widgets get displayed in order by the users preference.

Now each widgets functionality is all in each file, so put any relevant php, Javascript etc, in each one which will make them easy to develop and modify. Obviously you can refactor after where feasible.

Hope this gives you an idea of what you're getting in to lol..

score 1 · Accepted Answer · edited Jul 05 '22 at 16:47

1

Take a look at Observer Pattern or Event Dispatcher Pattern for plugin system

When installing plugins, don't forget to save it to the database
And, to list available widgets, you just need to query the database which plugins are available or activated.

edited Jul 05 '22 at 16:47

Zoe

27,060
21
118
148

answered Jun 08 '15 at 07:39

Terry Djony

1,975
4
23
41

In my step 2, I'm thinking about how to put Hook on sidebar and how to save those data to the database. Thanks. These articles are helpful. – Terry Lin Jun 08 '15 at 08:22
I found two simple Event Dispactcher, I think they can solve my question, [link](http://stackoverflow.com/questions/8336308/how-to-do-a-php-hook-system) and [link](https://github.com/symfony/EventDispatcher) , which one you prefer? – Terry Lin Jun 08 '15 at 09:00
I use Symfony Event Dispactcher and just added widgets to sidebar successfully. Thanks for your idea. I will edit my question and list the steps what I did for someone else needs the same help if they found my topic. – Terry Lin Jun 08 '15 at 13:45

Create a Widget system like WordPress without any framework

2 Answers2