A simple plugin to prototype design ideas in WP-Admin. This repository is intended to be a quick way for designers to try out ideas and minor CSS updates. Quick, messy code is encouraged to get ideas across.
- Install the Design Experiments plugin from the WordPress Plugins Directory
- Activate the plugin.
- Visit
Settings > Design Experiments
to activate an experiment.
- First, fork the repository.
- Clone your fork. If possible, place your local copy in the Plugins folder of your local dev site. Then you'll be able to activate the plugin directly from your WP Admin dashboard (If this isn't possible, you'll need to manually create a zip of the repository and upload it to your site to install the plugin after you've made changes).
- For simple CSS updates, you can either edit
css/default.css
directly, or editsass/default.scss
and compile using the method described below. If you'd like to add a new CSS file, you can enqueue it by following steps 4 and 5 below.
-
Clone your fork. If possible, place your local copy in the Plugins folder of your local dev site. Then you'll be able to activate the plugin directly from your WP Admin dashboard (If this isn't possible, you'll need to manually create a zip of the repository and upload it to your site to install the plugin after you've made changes).
-
If you're using Sass, create new SASS stylesheet in the
sass
directory, and runnpm run build
to compile it. Otherwise, just add a new CSS file to thecss
directory. Experiments are expected to use a single css file. -
Begin your CSS file with the following file header, adjusting the values of each field to best describe your experiment (All fields are optional):
/* Title: Your Experiment Title Description: A description of your experiment. PR: https:// */
-
When your stylesheet is ready, visit
Settings > Design Experiments
. Select your experiment to activate it and view your changes. -
Once you're ready to share your experiment, open a PR and share it here.
- Run
npm install
to install dependencies (You'll only have to do this once). - Run
npm run build
to compile the CSS once, ornpm run watch
to have it compile changes whenever you modify a sass file.
If you'd like to propose improvements to this plugin, feel free to open an issue or PR. Also feel free to ask in the #design channel on WordPress.org Slack.