Elementor file select control

Few days ago, while working for Elementor PDF Viewer for WordPress Addon, I was looking for a control to allow users to select a pdf file from media library, found the Media control in elementor but that only allows to work with images. What a disappointment!

So, I started looking for ways to make my own solution and created a control that allows to work with any kind of files.

As I did lots of searching for options, I found that there were lots of threads on github and other websites asking for the same thing. That’s why I thought about releasing this to public, so it may help some valuable time of you.

In this article, I am going to describe how you can implement File Select Control in your Elementor widget. Let’s get started.

Prerequisites

This article can be useful for both end users and developers. Anyone can use this, I’ll explain how below.

For End Users/Beginners

I’ve created the whole thing as a plugin & made available on WordPress Repository. You can just get the plugin and install on your site to start using it right away if you’re looking for an Elementor widget to Link to any kind of files on your Media Library.

For Theme/Plugin Developers

There are 2 ways to use it for Theme/Plugin developers. You can use either way that suits. I am going to provide instructions for both ways.

1. Easy way / Integration on site

This is mostly suitable if you’re creating widgets on a site rather than a Theme or Plugin project. In this case you can just install the plugin from wordpress repository & add the control type in your widget to use it. Here are the steps to achieve this:

1. Click here Download and Install File Select Control for Elementor plugin from WordPress repository, additionally you can also search using the name right from your wordpress dashboard & install the plugin.
2. The plugin comes with a widget for linking to any file and a new control called file-select
3. To add the control to your own widget, simply add file-select as the value of type parameter in your add_control() function. More on this part here
4. You can also use this method for Theme/Plugin projects as well, in that case you’ll need to require users to install the File Select Control for Elementor plugin as well.

2. Integrating within Theme/Plugin Project

If you’re looking to use File Select control within your Theme or Plugin project, this part is for you. Its for more advanced users and I assume you already know the basics of creating an elementor addon, an widget and a control etc.

As a first step, you can the whole plugin, install on your site and give it a try to see how it works. And once you’re done with initial checking, continue with me.

Create a New Elementor Control:

Elementor has a nice guide for creating new controls, you can follow that for understanding the flow of creating a control here.

Register File Select Control:

I am not going to get into too much details on developing a new elementor addon plugin or control, I’ll just provide necessary instructions that’s required to implement file select control in your Theme or Plugin.

Now, let’s come back to our code. Download the plugin or clone the repo on your device, open the folder with your favorite text editor. Open elementor-file-select-control.php file and look at the line 150 which contains the following:

add_action( 'elementor/controls/controls_registered', [ $this, 'init_controls' ] );

As you can see in the code we are registering our control using elementor/controls/controls_registered action. We are hooking a function init_controls , let’s see what that function is doing.

Scroll to line 255 (Please note that line numbers may change in future updates, so match the code mentioned when following).

public function init_controls() {

    // Include Widget files
    require_once( __DIR__ . '/controls/fileselect-control.php' );

    // Register controls
    \Elementor\Plugin::$instance->controls_manager->register_control( 'file-select', new \FileSelect_Control() );
}

So, on init_controls function, we are including the file required for our control and registering our control.

Copy control files

Simply copy over the controls folder inside your theme or plugin and then register your control using the code parts above.

Please make sure to update file paths according to where you put the controls folder inside your project.

Another thing you’ll need to replace inside the files is text domain, replace the text domain on all files with your project’s text domain.

Add File Select Control to Widget

The next step is to add the created control to your widget. This part is very simple as well. Just like any other elementor widget and control, you can add this control to your widget using add_control. Let’s take a look at the code of the example widget included in this plugin:

    $this->add_control(
        'file_link',
        [
            'label' => esc_html__( 'Select File', 'elementor-file-select-control' ),
            'type'  => 'file-select',
            'placeholder' => esc_html__( 'URL to File', 'elementor-file-select-control' ),
            'description' => esc_html__( 'Select file from media library or upload', 'elementor-file-select-control' ),
        ]
    );

So, What you need to do is just put your control name in type parameter. In our case, I’ve used file-select as this is the name I’ve used for control while registering.

Source Code / Download Link

I’ve mentioned this url in multiple links above, but still if you missed in some case, you can get the plugin from WordPress repo or source code from github.

Click here to Download the plugin

Click here to get source code

Conclusion:

I hope it helps you to make your elementor projects more useful and easy to use. Please feel free to ask if you have any questions. Use the comment section of this post or on twitter