Logo
Logo

Initial Setup

Introduction to Element Studio Setup

This document will guide you through the initial setup of Element Studio, focusing on creating a custom WordPress plugin for saving elements. This process is essential for utilizing Element Studio’s full capabilities, allowing you to use, share, or sell your custom elements.

Creating Your Plugin on WordPress

Downloading and Preparing the Plugin Template

  1. Navigate to the boilerplate Breakdance Custom Elements plugin on GitHub: https://github.com/soflyy/breakdance-custom-elements/
  2. Download the repository as a ZIP file by clicking ‘Code’ and then ‘Download ZIP’.
  3. Unzip the file on your computer and open the plugin.php file within the extracted folder.

Customizing the Plugin

  1. Modify the plugin details such as name, URI, description, and author to suit your requirements.
  2. Change the namespace and internal references to reflect your custom name (e.g., ‘luis custom elements’).
  3. Update areas in the code where elements, macros, and presets are defined to use your custom names.
  4. Save the changes and re-zip the plugin folder.

Uploading and Activating the Plugin in WordPress

  1. Go to your WordPress admin panel, navigate to ‘Plugins’ > ‘Add New’ > ‘Upload Plugin’.
  2. Choose the newly created ZIP file and install it.
  3. Activate the plugin after installation is complete.

Using Element Studio

Creating and Saving a New Element

Once the plugin is activated, you can use Element Studio to create and save custom elements. Here, you’ll see how to add and configure a new element:

  1. Refresh your Element Studio interface in Breakdance.
  2. Select ‘New Element’ and define it using your custom settings.
  3. Add desired controls and functionalities to the element.
  4. Save your custom element to your plugin.

Additional Notes

It is crucial to ensure that your custom plugin does not conflict with other plugins by maintaining unique names and namespaces. This tutorial also briefly touched upon the basics of element control, but for more detailed instructions on advanced configurations, refer to other specific tutorials or documentation.

You can learn more about creating WordPress plugins and general recommendations and suggestions here: https://developer.wordpress.org/plugins/

Advanced Workflow Using Git

Setting Up Version Control for Plugin Development

For a more professional development approach, using Git for version control is recommended. This segment will guide you through creating a repository, making changes, and pushing updates:

  1. Create a fork of the plugin repository on GitHub and rename it to indicate your custom project (e.g., ‘lewis custom elements demo’).
  2. Edit the plugin details in the GitHub editor to reflect your custom settings and commit the changes.
  3. Clone the repository into your WordPress plugins folder using either Git commands or GitHub CLI.
  4. Make further modifications locally as needed and push the changes back to your GitHub repository.

Once your custom plugin is managed via Git, it becomes easier to maintain version control and update across multiple sites or distribute it. Detailed steps for committing changes and syncing with the remote repository were demonstrated using both command line and visual tools like Visual Studio Code.

Conclusion

This guide provided a comprehensive walkthrough of setting up Element Studio for custom element development and management using WordPress and Git. By following these steps, you can effectively create, manage, and distribute your custom plugins and elements.