Styling your content just got easier

Custom editor styles in required+ Foundation

WordPress supports custom stylesheets used in your WYSIWYG editor to mimic the look your visitors are going to see on the page. We combined this with another feature that adds a custom drop down to your TinyMCE to select the styling.


Editor Styles

required+ Foundation and the child themes support editor-style.css to add custom CSS to the visual editor in WordPress. We included most of the default element styles from Foundation in the parent theme editor-style.css and let you overwrite it with your custom styling in the child theme using an additional editor-style.css in your child theme.

Custom Styleselect

Hidden under the kitchen sink (the last icon in the visual editor’s first row), we added a dropdown called styleselect for you to add Foundation styles and elements to the editor without using shortcodes.

Using the Styles dropdown

Here is a list of supported elements you can use in the visual editor:

  • Subheader (Headings) adds class="subheader" to any h1-h6
  • Leading Paragraph adds class="lead" to any paragraph
  • Keyboard CMD wraps the selected text with <kbd>…</kbd>
  • Button adds class="button" to any link
  • Panel wraps the selected text with <div class="panel">…</div>
  • Panel callout wraps the selected text with <div class="panel callout">…</div>
  • Panel wraps the selected text with <div class="panel">…</div>

Some of the elements in Foundation can have different styles, you can combine some of the elements with the following options from the Styles dropdown:

  • Radius (Panel, Label, Button) adds class="radius"
  • Round (Label, Button) adds class="round"
  • Alert (Label, Button) adds class="alert"
  • Success (Label, Button) adds class="success"
  • Secondary (Label, Button) adds class="secondary"

Theme options?

Learn why we dislike 100+ theme options in your theme and what you can do instead with WordPress builtin functionality. Enjoy a decisions over options approach.

No Theme options »