Home>Support>Creating a Widget

Creating a Widget

By Paulka, 10 years ago. Last reply by Magus, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi Site Origin Team,

Firstly, thank you guys for this outstanding page builder, i absolutely love it!

I’m a bit of a newbie and am trying to follow the creating a widget tutorial, but i’m not able to get the hello world widget to show up with the other site origin widgets.

I’m sure i have the file structure of the widget down correct, but i’m not sure if i am placing this all in the correct place.

Where in the theme would i need to place the extra-widgets-bundle folder please? I’m following the tutorial here https://siteorigin.com/docs/widgets-bundle/getting-started/creating-a-widget/

Once i see the widget show up in the admin i can start tackling building an actual widget.

It’s quite possible i am missing a couple of concepts here, any guidance would be massively appreciated.

Many thanks in advance,
Paul

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 2 months ago Magus
    Hi, I Work Here

    Hi Paulka

    In this section of your code

    function add_my_awesome_widgets_collection($folders){
        $folders[] = 'path/to/my/widgets/';
        return $folders;
    }
    

    Use this for your $folders setting

    $folders[] = plugin_dir_path(__FILE__).'Your-Widget-Folder-Name/';
    

    Replace with the name of your widget folder. You can then upload your widget folder directly to the wp-content/plugins directory.

    Let us know how you get on and good luck with your widget.

    Magus

  2. 10 years, 2 months ago Paulka

    Hey Magus,

    Thank you for the rapid reply!

    Unfortunately the solution did not work for me, i fear i am being a numpty here so i’m going to label out exactly what i’ve done so we can be sure.

    1. Inside of the plugins directory i have created a folder called: extend-widgets-bundle

    2. Inside the extend-widgets-bundle folder i have created a folder called: extra-widgets and file called extend-widgets-bundle.php.

    3. Inside the extend-widgets-bundle.php file there is the following code:

    <?php
    
    function add_my_awesome_widgets_collection($folders){
        $folders[] = plugin_dir_path(__FILE__).'extend-widgets-bundle/';
        return $folders;
    }
    add_filter('siteorigin_widgets_widget_folders', 'add_my_awesome_widgets_collection');
    

    4. Inside the extra-widgets folder there is a folder called: hello-world-widget

    5. Inside the hello-world-widget folder the is a folder called hw-templates and a file called: hello-world-widget.php

    6. Inside the hello-world-widget.php file there is the following code:

    <?php
    
    /*
    Widget Name: Hello world widget
    Description: An example widget which displays 'Hello world!'.
    Author: Me
    Author URI: http://example.com
    Widget URI: http://example.com/hello-world-widget-docs,
    Video URI: http://example.com/hello-world-widget-video
    */
    
    class Hello_World_Widget extends SiteOrigin_Widget {
    
        function get_template_name($instance) {
            return '';
        }
    
        function get_style_name($instance) {
            return '';
        }
    }
    
    siteorigin_widget_register('hello-world-widget', __FILE__, 'Hello_World_Widget');
    
    function __construct() {
        //Here you can do any preparation required before calling the parent constructor, such as including additional files or initializing variables.
    
        //Call the parent constructor with the required arguments.
        parent::__construct(
            // The unique id for your widget.
            'hello-world-widget',
    
            // The name of the widget for display purposes.
            __('Hello World Widget', 'hello-world-widget-text-domain'),
    
            // The $widget_options array, which is passed through to WP_Widget.
            // It has a couple of extras like the optional help URL, which should link to your sites help or support page.
            array(
                'description' => __('A hello world widget.', 'hello-world-widget-text-domain'),
                'help'        => 'http://example.com/hello-world-widget-docs',
            ),
    
            //The $control_options array, which is passed through to WP_Widget
            array(
            ),
    
            //The $form_options array, which describes the form fields used to configure SiteOrigin widgets. We'll explain these in more detail later.
            array(
                'text' => array(
                    'type' => 'text',
                    'label' => __('Hello world! goes here.', 'siteorigin-widgets'),
                    'default' => 'Hello world!'
                ),
            ),
    
            //The $base_folder path string.
            plugin_dir_path(__FILE__)
        );
    }
    
    function get_template_name($instance) {
        return 'hello-world-template';
    }
    
    function get_template_dir($instance) {
        return 'hw-templates';
    }
    

    7. Inside the hw-templates folder there is a file called hello-world-template.php which contains the following code:

    <div>
        <?php echo wp_kses_post($instance['text']) ?>
    </div>
    

    As i said i am a bit of a newbie, apologies in advance and thank you for your time.

    Best,
    Paul

  3. 10 years, 2 months ago Magus
    Hi, I Work Here

    Hi Paul

    Please change this line

    $folders[] = plugin_dir_path(__FILE__).'extend-widgets-bundle/';
    

    to this

    $folders[] = plugin_dir_path(__FILE__).'extend-widgets/';
    

    The folders path needs to be pointing to the folder containing the widgets themselves rather than the main containing folder.

    Let us know how you get on

    Magus

  4. 10 years, 2 months ago Magus
    Hi, I Work Here

    sorry read that last as

    $folders[] = plugin_dir_path(__FILE__).'extra-widgets/';
    

    Magus

  5. 10 years, 2 months ago Paulka

    Unfortunately, still no joy?

  6. 10 years, 2 months ago Magus
    Hi, I Work Here

    Hi Paul

    Please add this to the top of your extend-widgets-bundle.php after the opening php tag

    /*
    Plugin Name: Extra Widgets for SiteOrigin
    */
    

    Magus

  7. 10 years, 2 months ago Paulka

    Hey Magus,

    Ok great, that has made this show up in the plugins admin, i activated it and then the widget showed up with the other widgets. Problem now is, once the widget is turned on a few errors appear.

    Missing argument 1 for SiteOrigin_Widget::__construct(), called in /var/sites/s/services.mydev.click/public_html/wp-includes/widgets.php on line 560 and defined in /var/sites/s/services.mydev.click/public_html/wp-content/plugins/so-widgets-bundle/base/siteorigin-widget.class.php on line 47

    Cannot modify header information – headers already sent by (output started at /var/sites/s/services.mydev.click/public_html/wp-content/plugins/so-widgets-bundle/base/siteorigin-widget.class.php:47) in /var/sites/s/services.mydev.click/public_html/wp-includes/option.php on line 772

    Cannot modify header information – headers already sent by (output started at /var/sites/s/services.mydev.click/public_html/wp-content/plugins/so-widgets-bundle/base/siteorigin-widget.class.php:47) in /var/sites/s/services.mydev.click/public_html/wp-includes/option.php on line 773

    If this is blatantly obvious to you whats wrong, please let me know, otherwise there is no need to spend a heap time trying to solve this. I will look into it and try to figure a few things out myself.

    Many thanks again for your help on this.

    All the best,
    Paul

  8. 10 years, 2 months ago Magus
    Hi, I Work Here

    Hi Paul

    Headers already sent errors are typically caused by spaces or new lines before the opening <?php tag Please check your pages for any unneeded empty lines at the top or bottom.

    Magus

  9. 10 years, 2 months ago Paulka

    Hi Magus,

    Thats great, i appreciate the time you have taken here to help out. Now to figure out the whole creating a widget thingy.

    Thanks again,
    Paul

  10. 10 years, 2 months ago Magus
    Hi, I Work Here

    Hi Paul

    You are welcome.

    Good luck with the widget and if you need any more help please don’t hesitate to open a new thread.

    Magus

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More