{"id":2453,"date":"2018-04-16T17:49:58","date_gmt":"2018-04-17T00:49:58","guid":{"rendered":"https:\/\/www.blocksylaunch.click\/documentation\/?p=2453"},"modified":"2022-02-28T18:58:05","modified_gmt":"2022-03-01T01:58:05","slug":"create-divi-extension","status":"publish","type":"post","link":"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/","title":{"rendered":"How To Create A Divi Extension"},"content":{"rendered":"<blockquote><p><strong>Note:<\/strong> This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.<\/p><\/blockquote>\n<h2 id=\"whatsadiviextension\">What&#8217;s A Divi Extension?<\/h2>\n<p>A Divi Extension is essentially a WordPress plugin that customizes Divi in some way. For example, an extension can add custom modules to the Divi Builder or add new options to the theme \u2014 the possibilities are almost endless! All Divi Extensions consist of some PHP code. Depending on their purpose, they can also consist of some JavaScript, HTML, and CSS. In this tutorial you&#8217;ll learn how to get started on a new Divi Extension.<\/p>\n<h2 id=\"developmentenvironment\">Development Environment<\/h2>\n<p>Before you can create a Divi Extension you need to ensure that you have the proper environment setup on your local system. The requirements are:<\/p>\n<ul>\n<li>A fully functional installation of WordPress<\/li>\n<li>The latest LTS version of <a href=\"https:\/\/nodejs.org\">NodeJS<\/a><\/li>\n<li>The latest version of <a href=\"https:\/\/yarnpkg.com\">Yarn<\/a> (optional, but preferred)<\/li>\n<li>The latest version of Divi<\/li>\n<\/ul>\n<p>If you don&#8217;t have a development environment setup, there&#8217;s <a href=\"https:\/\/www.blocksylaunch.click\/documentation\/developers\/divi-development-environment\/\">a tutorial for that!<\/a> \ud83d\ude42<\/p>\n<h2 id=\"creatediviextension\">Create Divi Extension<\/h2>\n<p><a href=\"https:\/\/github.com\/elegantthemes\/create-divi-extension\">Create Divi Extension<\/a> is a command line utility that streamlines the process of creating and maintaining Divi Extensions. Let&#8217;s create a new Divi Extension inside our WordPress plugins directory. First, you need to open a terminal and change to your WordPress plugins directory. If you followed our tutorial to setup your development environment you should already have a command prompt inside your docker container. If so, you can change to the plugins directory using the following command:<\/p>\n<pre style=\"margin-bottom: 40px;\"><code style=\"background: #f6f8fa; padding: 2px 4px;\">cd wp-content\/plugins\r\n<\/code><\/pre>\n<p>Now, run the this command to create your extension:<\/p>\n<pre style=\"margin-bottom: 40px;\"><code style=\"background: #f6f8fa; padding: 2px 4px;\">npx create-divi-extension my-extension\r\n<\/code><\/pre>\n<p>You&#8217;ll be prompted to provide some details about your extension and then you&#8217;ll be able to find it inside your WordPress plugins directory!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2018\/02\/screencast.svg\" alt=\"\" \/><\/p>\n<p>Inside your new extension&#8217;s directory you&#8217;ll find an initial project structure that provides a minimal, fully functional Divi Extension waiting for you to make it your own \ud83d\ude42<\/p>\n<p><script src=\"https:\/\/gist.github.com\/ayubadiputra\/b52c19a97f20285ca82afcef78088b94.js\"><\/script><\/p>\n<h2 id=\"whatsnext\">What\u2019s Next?<\/h2>\n<p>Now that you\u2019ve created your Divi Extension, you\u2019ll probably want to learn <a href=\"https:\/\/www.blocksylaunch.click\/documentation\/developers\/how-to-create-a-divi-builder-module\/\">How To Create A Divi Builder Module<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to develop extensions for Divi<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-2453","post","type-post","status-publish","format-standard","hentry","category-developers"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elegant Themes Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create A Divi Extension - Elegant Themes Documentation\" \/>\n<meta property=\"og:description\" content=\"Learn how to develop extensions for Divi\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/\" \/>\n<meta property=\"og:site_name\" content=\"Elegant Themes Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-17T00:49:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-01T01:58:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2018\/02\/screencast.svg\" \/>\n<meta name=\"author\" content=\"Dustin Falgout\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dustin Falgout\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/create-divi-extension\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/create-divi-extension\\\/\"},\"author\":{\"name\":\"Dustin Falgout\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/0e2387f96b40940c4d33e54bac52e79b\"},\"headline\":\"How To Create A Divi Extension\",\"datePublished\":\"2018-04-17T00:49:58+00:00\",\"dateModified\":\"2022-03-01T01:58:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/create-divi-extension\\\/\"},\"wordCount\":343,\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/create-divi-extension\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2018\\\/02\\\/screencast.svg\",\"articleSection\":[\"Developer Documentation\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/create-divi-extension\\\/\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/create-divi-extension\\\/\",\"name\":\"How To Create A Divi Extension - Elegant Themes Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/create-divi-extension\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/create-divi-extension\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2018\\\/02\\\/screencast.svg\",\"datePublished\":\"2018-04-17T00:49:58+00:00\",\"dateModified\":\"2022-03-01T01:58:05+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/0e2387f96b40940c4d33e54bac52e79b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/create-divi-extension\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/create-divi-extension\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/create-divi-extension\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2018\\\/02\\\/screencast.svg\",\"contentUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2018\\\/02\\\/screencast.svg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/create-divi-extension\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Create A Divi Extension\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\",\"name\":\"Elegant Themes Documentation\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/0e2387f96b40940c4d33e54bac52e79b\",\"name\":\"Dustin Falgout\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4e8ced4a3ccff2b6839ae64b6e01266bb3da7dcbd5d0d391a1886029e7feac13?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4e8ced4a3ccff2b6839ae64b6e01266bb3da7dcbd5d0d391a1886029e7feac13?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4e8ced4a3ccff2b6839ae64b6e01266bb3da7dcbd5d0d391a1886029e7feac13?s=96&d=mm&r=g\",\"caption\":\"Dustin Falgout\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elegant Themes Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/","og_locale":"en_US","og_type":"article","og_title":"How To Create A Divi Extension - Elegant Themes Documentation","og_description":"Learn how to develop extensions for Divi","og_url":"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/","og_site_name":"Elegant Themes Documentation","article_published_time":"2018-04-17T00:49:58+00:00","article_modified_time":"2022-03-01T01:58:05+00:00","og_image":[{"url":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2018\/02\/screencast.svg","type":"","width":"","height":""}],"author":"Dustin Falgout","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dustin Falgout","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/#article","isPartOf":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/"},"author":{"name":"Dustin Falgout","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/0e2387f96b40940c4d33e54bac52e79b"},"headline":"How To Create A Divi Extension","datePublished":"2018-04-17T00:49:58+00:00","dateModified":"2022-03-01T01:58:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/"},"wordCount":343,"image":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/#primaryimage"},"thumbnailUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2018\/02\/screencast.svg","articleSection":["Developer Documentation"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/","url":"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/","name":"How To Create A Divi Extension - Elegant Themes Documentation","isPartOf":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/#primaryimage"},"image":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/#primaryimage"},"thumbnailUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2018\/02\/screencast.svg","datePublished":"2018-04-17T00:49:58+00:00","dateModified":"2022-03-01T01:58:05+00:00","author":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/0e2387f96b40940c4d33e54bac52e79b"},"breadcrumb":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/#primaryimage","url":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2018\/02\/screencast.svg","contentUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2018\/02\/screencast.svg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.blocksylaunch.click\/documentation\/developers\/create-divi-extension\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.blocksylaunch.click\/documentation\/"},{"@type":"ListItem","position":2,"name":"How To Create A Divi Extension"}]},{"@type":"WebSite","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#website","url":"https:\/\/www.blocksylaunch.click\/documentation\/","name":"Elegant Themes Documentation","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.blocksylaunch.click\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/0e2387f96b40940c4d33e54bac52e79b","name":"Dustin Falgout","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4e8ced4a3ccff2b6839ae64b6e01266bb3da7dcbd5d0d391a1886029e7feac13?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4e8ced4a3ccff2b6839ae64b6e01266bb3da7dcbd5d0d391a1886029e7feac13?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4e8ced4a3ccff2b6839ae64b6e01266bb3da7dcbd5d0d391a1886029e7feac13?s=96&d=mm&r=g","caption":"Dustin Falgout"}}]}},"_links":{"self":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/2453","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/comments?post=2453"}],"version-history":[{"count":29,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/2453\/revisions"}],"predecessor-version":[{"id":7343,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/2453\/revisions\/7343"}],"wp:attachment":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/media?parent=2453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/categories?post=2453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/tags?post=2453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}