With Style Manager, developers can easily create advanced theme-specific options inside the WordPress Customizer. Using those options, a user can make presentational changes without having to know or edit the theme code.
This plugin is primarily intended to be used together with Pixelgrade themes. So the best way to get acquainted with its capabilities is to study the way Pixelgrade's Anima universal theme integrates with it.
Made with care by Pixelgrade
First you need to install and activate the stable version. This will always be on wordpress.org
Now go to ‘Appearance -> Customize’ menu and have fun with the new fields provided by your active theme.
We know developers are a special kind of breed and that they need special kinds of treats. That is why we have introduced options dedicated to them.
In the plugin's settings page (WordPress Dashboard > Settings > Style Manager) you will find a checkbox called Enable Reset Buttons that once activated will show a new Customizer section called Style Manager Toolbox and also introduce buttons in each section or panel configured via the plugin.
All these buttons will reset the options to their default values.
If you want to go even further, there is a nuclear option. Simply define the STYLE_MANAGER_DEV_FORCE_DEFAULTS
constant to true
and everywhere the default value will be used. You can play with the values in the Customizer and the live preview will work, but no value gets saved in the database.
Add this in your wp-config.php
file:
define( 'STYLE_MANAGER_DEV_FORCE_DEFAULTS', true);
Before you can get developing, you need to have node
and composer
(v2) installed globally. Google is your best friend to get you to the resource to set things up.
Once you clone the Git repo, to get started open a shell/terminal in the cloned directory and run these from the command line (in this order):
composer run dev-install
npm run dev
This will set up all node_modules, composer packages, and compile the scripts and styles with watchers waiting for your next move.
You need to be careful since we require certain node versions (v14) and PHP versions (v7.4).
For ease of development, it is best to use nvm
(https://github.com/nvm-sh/nvm) for node version management and automatic node version switching on shell navigation. For the zsh
shell the easiest way is to use oh-my-zsh with the nvm
plugin activated.
We use the following oh-my-zsh plugins: plugins=(composer git nvm npm)
configured in ~/.zshrc
. For automatic node version switching, place this line in ~/.zshrc
just below the plugins line: NVM_AUTOLOAD=1
. Now whenever you enter a directory through the shell, if it finds a .nvmrc
file, it will switch to the specified node version.
To avoid the hassle and bustle of editing design assets on the cloud and then refreshing your local WordPress installation (ad infinitum), you can use this must-use plugin that contains the logic to automatically load and inject locally-defined, JSON-based design assets.
Simply download the zip and extract it in your local WordPress installation's wp-content/mu-plugins
directory (the style-manager-local-dev.php
and style-manager-local-dev
need to be directly in the mu-plugins
directory, not in a subdirectory, since WordPress will not recognize it as mu-plugin otherwise).
Next go to the style-manager-local-dev
directory and remove/add/edit anything you want. The starting directories and files are just there to help you get started. You don't need to keep all of them.
Please note that there are further instructions in the mu-plugin's code.
Since Style Manager is intended for distribution on WordPress.org you will need to build the plugin files, transpile them to the appropriate PHP version (7.1), and generate a cleaned-up zip.
After you have updated the version, added the changelog, blessed everything, you NEED to clone the repo in a TEMPORARY directory since the build process is DESTRUCTIVE!!!
From the newly cloned, temporary directory, run these commands from the command line:
nmp install
npm run zip
To run the PHPUnit tests, in the root directory of the plugin, run something like:
./vendor/bin/phpunit --testsuite=Unit --colors=always
or
composer run tests
Bear in mind that there are simple unit tests (hence the --testsuite=Unit
parameter) that are very fast to run, and there are integration tests (--testsuite=Integration
) that need to load the entire WordPress codebase, recreate the db, etc. Choose which ones you want to run depending on what you are after.
Important: Before you can run the tests, you need to create a .env
file in tests/phpunit/
with the necessary data. You can copy the already existing .env.example
file. Further instructions are in the .env.example
file.
GPLv2 and later, of course!
This plugin also includes the following third-party libraries:
- Select 2 - https://select2.github.io/
- Ace Editor - https://ace.c9.io/
- CarbonFields - https://carbonfields.net/
- React jQuery Plugin - https://github.com/natedavisolds/jquery-react
2020-2022 © Pixelgrade.