Kickstart Your Custom WordPress Design with Style Kits for Layers style kits

Layers is a really impressive free and open source website builder for WordPress. If you are a non-coder who wants more control over the way your WordPress website looks, then you should definitely check out the Layers theme.

Although the Layers theme has done a great job of making it as easy as possible to for users to create custom layouts for their blog or other type of website, one nice thing about it, is that you can create and share Style Kits for this theme.

These Style Kits are essentially pre-built page layouts or skins, which can include optional custom CSS and website content. Once you’ve created your custom website with Layers, these components can be exported as a Style Kit. This Style Kit can then be used on other websites that are also using the Layers theme. After importing the Style Kit, the appearance and configuration of that website is then modified, and the optional included content is also imported.

Layers WordPress Theme Style Kits

As well as sharing and reusing these Style Kits amongst the projects you are working on, you can also make them commercially available for purchase by the Layers community. You can also purchase the existing premium Style Kits that are available in order to kickstart your custom WordPress website design.

For a hands-on explanation of what a Style Kit is and can do, you can view a demo website making use of a Style Kit, and then compare it with one of the standard Layers demos.

Style Kits sit somewhere between the core theme and a child theme. They aren’t used to totally overhaul the theme, making use of actions and filters to add or remove elements to the theme, or change its overall appearance, like child themes can. Instead they allow you to create custom page layouts, with custom styling, for easy reuse on other websites using Layers.

In this article, we will take a closer look at Style Kits for Layers, to help you get a better understanding of what they are, and how you could use them on your WordPress website. We’ll also take a look at some of the premium Style Kits that are available, in order to show you what is possible and the potential commercial opportunities for Style Kit creators.

Creating a Style Kit for Layers

Waking through the process of creating a Style Kit for Layers should give you a good understand of what exactly this feature has to offer. Style Kits typically consist of three main parts:

  • Page builder layouts and widget settings (at least one per Style Kit)
  • Custom CSS
  • Website content

To get started, you begin by creating your custom page layouts with the Layers theme. As this takes place through the WordPress Theme Customizer tool, you get a live, front end preview of your website as you build it.

Layers Style Kit Create Page

Layers includes a number of pre-built page layouts to help you get started. Alternatively, you can begin with a blank canvas. Layers also gives you the ability to insert widgets into your content, in order to help you build more advanced layouts.

Layers does include support for adding any of the third party widgets that are active on your site into your layouts. However, if you’d like to export your projects as a Style Kit, for use on other websites, then you cannot include any third party widgets in your layout. Instead you must only use the core WordPress widgets, and those that are included as part of Layers.

Layers Style Kit Export

Once you’ve created your page layout, you can then export it. This creates a .json file which can then be imported into other websites.

After you’ve created and exported your page layout, you can then move onto customizing its appearance with CSS.

Creating Custom CSS for Your Style Kit

To assist you in creating custom CSS for Layers, there is a premium plugin available. This tool can will help you create Layers-compliant CSS, while also saving you time. While this tool isn’t required, it is recommended.

When you are ready to start adding custom CSS to your website, you can do so from the CSS tab on the Customizer menu.

Layers Style Kit Custom CSS

Once you’ve added some custom CSS, you can simply copy and paste it into a new text file and save it with the filename css.text.

Adding Custom Content to the Style Kit

As you can also include custom WordPress content in a Style Kit. After adding this content to your website, you can then export it as an XML file and add it to the Style Kit package. This is carried out by using the WordPress Exporter tool.

Layers Style Kit Export Content

After exporting the content, you should now have at least three files, as well as any additional page layouts that are included in your Style Kit:

  • home-page-2015-06-02.json
  • txt
  • mySK-content.xml

Next, you should create a readme file with some information about the Style Kit and instructions on its use. You can then package the Style Kit as a Zip archive, for use on other websites.

While the above is a quick overview of the process of creating a Style Kit, you can view a more detailed guideon the Layers website.

Commercially Available Style Kits

Just are you are free to make your Style Kits commercially available, you can also purchase those created by others. At the moment there are only 11 Layers Style Kits available at the CodeCanyon marketplace. However, as the popularity of Layers grows, this number is sure to grow too, as will the demand for premium Style Kits.

Some of the highlights from the current selection include:



Okab has been created for anyone building a website to showcase their services or those of their agency or corporation. The home page layout includes a full screen slider, icon list, team profiles, and a services charter.



Diamonds includes five custom page layouts, including four home page layouts, and a contact page design. Whatever type of business website you are building with Layers, Diamonds gives you a great foundation for your project.



The HIT Style Kit includes five different custom home page layouts for your website. Each one is packed with elements that you can either customize with your own content, or remove if they aren’t needed.

With prices starting from $10, these premium Style Kits can be a quick and affordable way to give your website a makeover. You can view all the premium Style Kits available at CodeCanyon.


Hopefully you’ve now got a good understanding of what Style Kits for Layers are all about. By using this free WordPress website builder theme, and combining it with one of the off-the-shelf premium Style Kits, you can get a great head start when it comes to building your own custom website.

You Layers website can also be enhanced by making use of the extensions and child themes available for this theme.

Do you think there will be a market for premium Style Kits for Layers? Do you plan in using this free website builder theme? Please share your thoughts in the comments below.