Build a Perfect WordPress Site with Layers

 

One of the best things about open source software is that you’re free to modify it to your heart’s content. That’s why WordPress is such a great blogging platform – you can choose from hundreds of themes and also extend it with plugins and improve its performance with helpful tricks.

If you’ve always wanted to create your own WordPress theme, but didn’t have the coding skills nor the time to invest in learning, Layers is definitely for you. It’s a theme framework that integrates tightly with the default WordPress options, enabling a seamless customization experience. You can use it to design WordPress themes without any coding knowledge through a drag-and-drop interface and user-friendly dialogs.

Installation & Integration with WordPress

Layers is free and open source, so you can just download the .zip and install it via the theme installation dialog into your existing WordPress setup. To use Layers, you have to select it as the active WordPress theme.

Once it’s activated, Layers will be accessible from several parts of the WordPress interface. There will be a new menu called “Layers” in the main WordPress sidebar. Here you can control all the aspects of Layers from its own Dashboard.

Layers will also integrate with the Appearance menu where you can access it by clicking “Customize” and the Pages menu where you can add a new page as a “Layers Template.” Finally, when previewing your WordPress site, there will be a new option – “Edit Layout” – in the toolbar.

If you just want to try out Layers without installing it, there’s a demo version that runs in the browser but requires a (free) registration.

Editing WordPress Pages with Layers

Layers essentially functions as a completely customizable WordPress theme; unlike other themes with predefined features, you can adjust every element of your website by adding, removing and editing widgets. If you don’t feel like building pages from scratch, you can choose one of the Preset Layouts. Some templates are built for specific purposes, like a portfolio page, landing pages, or a video page. To start working with Layouts, click either “Edit Layout” in the main toolbar or “Edit Your Page” from the Pages menu in the WordPress sidebar.

The Layers Editor has the main sidebar on the left where you can choose what you want to edit (Page Body, Mobile Sidebar, Footer). Each section is a drop-down menu in which you can add and rearrange widgets. Clicking on a widget opens its options dialog on the right for further customization.

The vertical toolbar with icons is called the Design Bar, and it changes depending on the widget you select. Each widget has its own set of features, and Layers widgets are marked with a blue icon to distinguish them from default WordPress widgets. Clicking the “Advanced” button in the Design Bar will let you edit CSS for that widget. In this way Layers provides a greater degree of control over content to advanced, CSS-savvy users.

Of course you never have to touch the code if you don’t want to, even when it comes to responsive design. Layers provides support for mobile devices by letting you create a special, mobile-only menu simply by selecting and reorganizing widgets.

Editing a layout affects only the selected WordPress page. However, Layers can also modify site-wide settings. To access them, navigate away from “Edit Layout” by clicking the back arrow in the Layers Editor sidebar.

Adjusting Site Settings

From the Site Settings menu, you can control elements such as logo and website title, navigation and sidebars, as well as use Google Fonts thanks to Layers’ integration with the service.

In the Layers Editor sidebar, there are also separate options for editing the Header and Footer, setting a Static Front Page and adding custom CSS. The Header and Footer sections both contain an “Additional Scripts” tab which you can use to put custom code into your website like Google Analytics tracking or similar Javascript-based functions.

If you plan to build a theme with Layers, I suggest you start with those general elements (site-wide settings), and then work your way towards customizing single pages and creating templates which you can apply to a set of pages.

Export & Advanced Features

Once you’re happy with the layout you’ve created, you can export it in several different formats. From the WordPress dashboard, go to the Layers menu and select Backup to see all the options. You can export just the layouts or do a full backup of your content along with the modified widgets settings.
With Layers, it’s also possible to create child themes and Style Kits, which are more extensive exports that contain all the elements of the website interface. However, they can only be applied to a WordPress installation that has Layers. The official documentation explains how to create and import Style Kits.
Another useful feature of Layers is the support for WooCommerce, which makes building e-commerce websites much easier.

Conclusion

Layers is a growing project, so if you feel some features are missing, it’s likely that they will be added in future versions. It’s an easy way for WordPress beginners to quickly create a custom theme, and it doesn’t bog down the website. The interface is uncluttered and straightforward with a left-to-right workflow that leads you from the sidebar through drop-down menus to individual widget dialogs. Naturally, Layers is not the only WordPress extension of this kind, so if for some reason you don’t like it, you can try Platform or Unyson, which we’ve previously covered.
Have you tried Layers? Do you prefer building your own WordPress themes, or do you rely on the creations of other designers? Tell us in the comments.

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.