Creating Widget

1. Creating Manually

Step 1: Navigate to Module Directory

## Go to:

/{project-root}/wp-content/plugins/codexshaper-framework/widgets/elementor/modules

Step 2: Create the Module Directory

Create a directory with your module name {module-name}.

├── custom-menu
│   ├── --
│   ├── --

Step 3: Create module.php

Inside your module directory, create a module.php file and add the following code:

├── custom-menu
│   ├── module.php

<?php
namespace CodexShaper\Framework\Widgets\Elementor\Modules\CustomMenu;

if (!defined('ABSPATH')) {
    exit;
}

use CodexShaper\Framework\Foundation\Elementor\Module as BaseModule;

class Module extends BaseModule {
    public function get_name() {
        return 'cmf--custom-menu';
    }

    public function get_widgets() {
        return ['Custom_Menu'];
    }
}

Step 4: Create module.json

Inside your module directory, create a module.json file and add the following code:

├── custom-menu
│   ├── module.json
│   ├── module.php

{
  "name": "custom-menu",
  "slug": "custom-menu",
  "title": "Custom Menu",
  "icon": "eicon-archive",
  "version": "1.0.0",
  "widgets": ["Custom_Menu"],
  "author": "CodexShaper",
  "author_uri": "https://framework.codexshaper.com",
  "description": "Custom Menu Module for Elementor",
  "module_uri": "https://framework.codexshaper.com/elementor/modules/custom-menu",
  "is_pro": false,
  "is_active": true
}

Step 5: Create widgets Directory

Inside your module directory, create a widgets directory

├──custom-menu
|   ├── widgets
│   ├── module.json
│   ├── module.php

Step 6: Create Widget File

Inside the widgets directory, create a PHP file named {module-name}.php. In our example, the file name will be custom-menu.php.

├── custom-menu
|   ├── widgets
|   |   ├── custom-menu.php
│   ├── module.json
│   ├── module.php

Example custom-menu.php:

<?php
namespace CodexShaper\Framework\Widgets\Elementor\Modules\CustomMenu\Widgets;

use CodexShaper\Framework\Foundation\Elementor\Widget;
use Elementor\Controls_Manager;

if (!defined('ABSPATH')) {
    exit();
}

class Custom_Menu extends Widget {
    public function get_name() {
        return 'cmf--custom-menu';
    }

    public function get_title() {
        return __('CMF Custom Menu', 'textdomain');
    }

    public function get_icon() {
        return 'eicon-apps';
    }

    public function get_keywords() {
        return ['Custom Menu', 'CodexShaper', 'Framework', 'CMF'];
    }

    public function get_categories() {
        return ['cmf--widget'];
    }

    public function get_style_depends(): array {
        return ['cmf--custom-menu'];
    }

    protected function register_controls() {
		// Register layout controls.
        $this->register_layout_controls();
		// Register style controls.
        $this->register_style_controls();
    }

    protected function register_layout_controls() {
		$this->start_controls_section( 'section_layout', [
                'label' => __('Layout', 'textdomain'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );
        $this->end_controls_section();
	}

    protected function register_style_controls() {
        $this->start_controls_section('section_style', [
            'label' => __('Style', 'textdomain'),
            'tab' => Controls_Manager::TAB_STYLE,
        ]);
        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        cmf_view('custom-menu.content', compact('settings'));
    }
}

Step 7: Create the views Directory

## Go to:

{project-root}/wp-content/plugins/codexshaper-framework/widgets/elementor/views

Inside your views directory, create a directory with same module name {module-name}. (e.g. custom-menu)

├── views
│   ├── custom-menu
|   |   ├── --

Step 8: Create Views File

Inside the views directory, create a PHP file named content.view.php.

├── views
|   ├── custom-menu
|   |   ├── content.view.php
│   

Example content.view.php:

<?php if (!defined('ABSPATH')) exit; ?>

<div class="cmf-custom-menu">
    <p><?php echo esc_html__('This is the Custom Menu widget view.', 'textdomain'); ?></p>
</div>

2. Creating CSS and JS Files (Optional)

CSS:

## Go to:

/{project-root}/wp-content/plugins/codexshaper-framework/widgets/elementor/assets/css/

Inside css directory, create a CSS file cmf--{module-name}.min.css.

├── assets
|   ├── css
|   |   ├── cmf--custom-menu.min.css
|   |   ├── --
│   ├── js
│   |

Register the CSS file in module.php:

public function register_styles() {
    wp_register_style(
        'cmf--custom-menu',
        $this->get_css_assets_url('cmf--custom-menu', null, true, true),
        [],
        CMF_APP_VERSION
    );
}

JS (Required for --slider, Manual for Others):

# Go to:

/{project-root}/wp-content/plugins/codexshaper-framework/widgets/elementor/assets/js/

Inside js directory, create a JS file cmf--{module-name}.min.js.

├── assets
│   ├── css
|   ├── js
|   |   ├── cmf--custom-menu.min.js
|   |   ├── --
│   |

Register the JS file in module.php:

public function register_scripts() {
    $widget_js_file = CMF_PATH . 'widgets/elementor/assets/js/cmf--custom-menu.min.js';
    $version = file_exists($widget_js_file) ? filemtime($widget_js_file) : CMF_VERSION;

    wp_register_script(
        'cmf--custom-menu',
        $this->get_js_assets_url('cmf--custom-menu', null, true, true),
        array(),
        $version,
        $widget_js_file,
        array('in_footer' => true)
    );
}

---

Now, your custom widget is successfully created and ready to be used in Elementor with CodexShaper Framework!