Skip to content

Creating a Theme for Fred

Fred themers should have a basic understand of MODX, be proficient with HTML/CSS markup for creating Elements, and be able to create valid JSON for Option Sets.

Intermediate Fred themers will use Twig to create conditional logic in Elements. This can be used to show or hide things based on the settings of the controls in Option Sets.

Suggested Workflow

The easiest way to familiarize yourself with developing for Fred is to install a Theme, duplicate it, then edit and add to the copy to see how things work.

We suggest installing the Ace Extra as it gives you a nice code editor interface including warnings for invalid JSON and code hints when creating Elements in the Manager.

Code Hinting in Fred

As mentioned above, Fred will offer attribute-completion and code hints when working in the Manager:

Download and install the Fred Ace Integration from the MODX Extras provider. When creating or editing Elements, start typing data- or fred and hit ctrl+space to show list of all fred attributes.

Ace Integration

JavaScript Events for Fred Elements

Elements support JavaScript Events—a precursor to full Fred Plugin support.