DevKit User Guide

Product Guides  Since: 1.0 Last Updated: Layers ver. 1.1 Time to Read: 4 minutes

The Layers DevKit extension provides an advanced Custom CSS editor in the WordPress Customizer to aid in rapid restyling of any WordPress theme.

01-banner-devkit

If you have Layers or a Layers Child theme active and have any Custom CSS in the CSS panel of the Customizer, back it up to a safe place before activating DevKit.

  1. From the WordPress admin, go to PLUGINSADD NEW
  2. Click on UPLOAD PLUGIN 
  3. Click on CHOOSE FILE in the center white box and navigate to your devkit-extension.zip, select it and click  OPEN
    • If you downloaded the file from CodeCanyon, be sure to unzip the codecanyon file first to find the devkit-extension.zip!
  4. Click INSTALL NOW
  5. When complete, click Activate Plugin

DevKit comes with a few basic settings to control what is visible in thee plugin interface, and what your mobile media query breakpoints are.

  1. From the WordPress admin screen, go to SettingsDevKit Settings
  2. Code Panels: If you do not want a specific panel to be visible in the DevKit editor, uncheck it.
  3. Code Linting: Check this option to enable code linting in the DevKit editor.

Custom Breakpoints

Custom media query breakpoints may be added to each Code panel option. Breakpoints set the maximum width of the screen that determines which mobile styles to load.

Check responsinator.com for a demo of the most popular devices and their screen widths.

Access DevKit from the Customizer under the Layers icon in the Customizer nav bar:

customizer-menu-devkit

The DevKit nav bar has two primary editors, CSS and Javascript. The default view puts you into the global editor, which will add styles for all views unless a media query or mobile style is found which overrides.

Format your CSS as you would inside your style.css. Do not include <style>  tags.

The following example shows us adding CSS from the How to Customize the Header Menu Style tutorialcss-panel-devkit

Mobile & Responsive Styling

To the right of the CSS tab are three screen-size adjustment options. Each view will preview your site to the right using the maximum screen size dimensions, or “breakpoints,” defined by the active theme’s responsive styling (media queries) or those which you define in the DevKit Options. Code you add to these specific views will be automatically added to the appropriate media query for that view when the stylesheet is generated. Neat!

mobile

Layers theme users: DevKit replaces the Custom CSS textarea in the default Layers Customizer while active, and will seamlessly transfer your custom code to this field once DevKit is switched off.

CSS may be entered directly into any of these panels and will show you the effects immediately – as long as the selectors are right. We recommend using DevKit in combination with your favorite Browser Inspector to ensure you get the right overrides. See the following articles for detailed help with live-editing and rapid restyling using the Inspector.

The JavaScript panel accepts any JS or jQuery functions. Do not include <script>  tags.

      1. Ensure proper wrappers are included.
      2. Click Run to send script to preview pane.
      3. Click Save & Publish

jquery

Use the following processes to export your code into a Style Kit or theme stylesheet.

Layers Themes & StyleKits

.js – With DevKit still active, copy your Javascript into your project’s js file.

.css – Layers themes or child theme users may return to the Customizer with DevKit deactivated, then expand the CSS panel, where all DevKit CSS is transferred. Each DevKit panel corresponds to a separate field here where you can copy/paste into your child theme stylesheet.

customcss

If copying manually from DevKit to a style.css: DevKit automatically wraps mobile CSS in the correct media query overrides. If developing a child theme, it is best to keep the code in the order presented, and add any additional styling to the existing media queries (i.e. do not include multiple copies of a media query as it is only run once by the browser)

Copy this code into your Child Theme style.css or StyleKit css.txt

Non-Layers Themes

  1. Load your site in a new tab and View Source
  2. In the main CSS stack in the header, you should see the devkit-custom css link
  3. Click the link to view the stylesheet and Save or copy the contents.
  4. Return to the source and scroll down to find the layers-custom-js script wrapper (or use Cmd+F) to copy into your .js file without the <script>  tags

Example

See How to Update Layers Extensions

To report issues with DevKit, visit our support page and click Submit a Ticket in the Dedicated Support section.