Introducing the Improved Elementor Developers Docs

Library

Meet the new Elementor developers docs website – the educational center for Elementor developers. This site is specifically created as a resource for third-party developers working to extend Elementor’s functionality. Here, we offer a comprehensive learning experience with code snippets and full code examples, aimed at empowering you to enhance and create new and exciting Elementor features. Following is some background information about why we’ve redone the site and the improvements we’ve made.

Developers Center Evolution

Back in 2017 we launched our developers docs site to help third-party developers create Elementor addons and make them backwards and forwards compatible by following best practices.

In 2019 we launched the developers blog to keep our community updated. This blog will remain part of the new site and is where you can find news about future updates, deprecation notices and other dev-focus content.

New Documentation

The new docs website has three main sections:

Getting Started – As you’ll probably see, this section is aimed at developers who are just entering the world of Elementor addon creation. It gives a basic overview of Elementor, its history, and an explanation of Elementor addons. This section also includes a tutorial guiding developers through the creation of their first addon and best practices building addons.

Internals – In order to create addons, developers need to understand the core technology powering Elementor, which we sometimes refer to as “looking behind the curtain.” In this section, you’ll find details about the Elementor editor, manager, scripts & styles and hooks. There is also a basic overview of the connection between WordPress and Elementor development.

Components – In this section, we take a detailed look at many important components with an emphasis on how to modify them. Each of these sections contains code examples ranging from the simple to the complex, which you can copy and customize for yourself. 

Lots of Code Examples

Each component has extensive information on how it works, how to use it and how to extend it for your needs. At the end of each section, we added full code examples, allowing you to create your own addons.

While some people learn by reading the instructions, others learn by example. This is why we added full code examples of ready-to-use addons. Starting from simple examples covering basic implementations and continuing on to complex addons with advanced implementations.

In these examples, you get the full folder & file structure, full code for each file and screenshots displaying the results. Just copy the code and grow from there.

Changing Elementor Core

Elementor is constantly improving and updating its architecture, in part to help third-party developers develop their own functionality.

For example, we standardized and unified the way different components are used by external developers. Another good example is the component managers, which now have similar registration patterns, making it easy to add new functionality and reducing the code third-party developers need to write.

The next versions will reflect a more “open” Elementor as additional components will be rewritten to give more freedom to our developer community. More documentation will be added as this process continues, making it easy for you to bring your site to new heights.

New Platform

Just as we encourage third-party developers in their quest to extend Elementor’s capabilities, we are also asking the developer community to help contribute to the growth of this documentation.

If you find a typo, want to add a detailed explanation or insert a code snippet, head to the bottom of the page and click the “Edit this page on GitHub”. There you will be able to modify the markdown file used to generate the docs.

What’s Next?

While we feel this is a great start for improving our developer resources, we realize this is just a beginning. Over the coming months we will be adding even more documentation, expanding upon more components and providing more examples. 

In addition, we expect feedback from the developer community which will allow us to improve the site and take it into a direction that will be most beneficial for Elementor developers.  

Please feel free to share any interesting addons you’ve developed, or ideas on how we can improve the docs or even ideas for new tutorials and code examples.

Author

Rami Yushuvaev
Rami Yushuvaev
Head of Elementor Developers Experience. Fullstack developer. Open source projects contributor. Creator of ChartsCSS.org, GenerateWP.com, DisplayWP.com and many other projects.

2 Responses

  1. Hi, I’m working on a custom set of Elementor widgets. The third widget i’m planning to make is a bit more complex. What is the best place to ask for extra Information about the developer tools?
    Elementor Support sends me to this domain, but I can’t find the answer in the docs.
    Thanks in advance!

Leave a Reply

Your email address will not be published. Required fields are marked *