WordPress Site Building Guide with Layers

Layers isn’t just a simple plugin or theme that helps you build and remodel your WordPress sites. This theme is much more complex than that and offers you a complete set of tools for making and maintaining both your website and all the extensions that go with it, and there are plenty of possibilities here. Before we start with this tutorial guide, let us first say a few words about the actual theme. Layers, once downloaded and installed, is actually built into your WordPress customizer as a theme. This allows quicker access to its features and, generally a faster work turnaround. One of its biggest advantages is its open source format which allows inclusion of many useful extensions. Finally, even though highly customizable and extendable, Layers is simple to use thanks to its point & click interface which should make this tutorial simple. It is clear that this theme was built with both beginners and professionals in mind as it offers the best from both worlds; easiness of use from one side and customization and high extension value from the other.

Install Guide

To begin using the Layers theme, first you’ll have to download and install it. This tutorial will explain you how to do that. To download it, simply follow this link and click on Download Layers field. Needless to say, the theme is free of charge. When it comes to installation, there are couple of possible ways you could choose: manual or automatic installation. Of course, latter one is much simpler and doesn’t require any additional applications. The guide is as follows; just go to your WordPress admin page, select Appearance and then Themes  from your menu’s design bar. After you’ve done that, click on Add New button. You’ll see a list of available themes, but that doesn’t interest you at the moment. On the same spot as Add New, you’ll now find Upload Theme button. Click it, then click on Choose File in the middle of the page and browse until you find Layers zip file which you have just downloaded. After you find it, just click on Install Now, and the rest should be taken care of automatically. Only thing that remains now is to activate desired theme by clicking on Activate button while hovering over theme’s thumbnail. 

Tutorial on manual installation follows the same steps but manual installation also requires FTP Client like FileZilla, SmartFTP, Cyberduck or similar clients. You should start by downloading the theme just like described above and then extracting these files. By using your FTP client to access your host web server, create a directory to save your theme. The path should look like this: wp-content/themes/Layers. Only thing that remains is to upload the theme files to the new directory on your host server and activate them. Regardless, of which path suits you best, results are the same once you activate and start using Layers. You’ll be greeted by the theme and offered a chance to customize it through a short tutorial, but you can skip all that and do it later. The actual fun begins here and we’ll now give you a few “how to” guidelines on some of its most important features.

 How To Create Page And Insert Widgets

Here’s How Your Page Should Look Like With Only Widgets Active (Image Credit: Jyrki Salmi)

As already mentioned, customizing Layers can be quite fun thanks to theme’s simple nature. Here’s a tutorial guide on how to do it. First of all, you’ll by now notice that Layers section has become active in your menu and should find itself just below the dashboard section. You can use it like any other, and this should be your starting point. We’ll start the guide by creating a new WordPress page. This is done by choosing a corresponding sub section, clicking on desired page type, naming it and then proceeding to customizer. All this is done in just a few simple clicks. After this is done, you’ll be moved to a new screen which is similar to already known surroundings and allows you to fully customize your page (or multiple pages). Now, you’ll notice a new design bar on the left hand side. First of its sections is Edit Layout which allows you to tamper with the body of your pages and gives you the ability to set up a mobile sidebar for touch-sensitive devices which will not be further discussed in this tutorial. This guide will mostly pay attention to widgets which you can easily add to your page by clicking on “your page name Body” section (we have used the name Page 1), clicking on Add Widget button and choosing desired option. For the purposes of this tutorial, we have chosen good old calendar and Layers’ own Content widget.

 How To Navigate And Insert Sidebars

Sidebar With Three Widgets
Sidebar With Three Widgets Encircled In Red

Next guide section are site settings where you can rename your WordPress website and change its logo, for instance. However, more important sub sections which are more relevant to this tutorial guide are Navigation and Sidebars. In Navigation, you can choose which menus you want to display and where do you want to put them. Menus can be edited in menu content on the Menus screen in the Appearance section, or you can choose one of these few menu builders which offer additional options. Tutorial on adding sidebar widgets and info is simple. However, Layers, in its initial form only allows you to choose the side of the sidebar. Actual content is added from Widgets screen in Appearance section which this guide had already explained. The easiest explanation on how to do this is to drag and drop desired widget into right, left or mobile slider field. After this has been done, you’ll be able to see your sidebar widgets on a sample page’s screen. Finally, you can easily change the font types for body, headings and buttons alike in order to further differentiate your website’s appearance.


 How To Change Header and Footer

Header Customization Menu
Header Customization Menu

Header and Footer menus allow you to fully customize top and bottom of your WordPress pages. Most people would like to know how to change the Header position or how to disable Layers icon in the Footer. All of it is rather easy and takes but a moment of your time. This guide is here to show you how to do this, after all. Let’s start with Header. Header layout allows you to change header’s width, its position, and logo and menu position as well. Of course, you can change the Header background color too. Footer set up tutorial isn’t any harder than the Header customization. Footer layout section allows you to choose the number of widget areas and to support Layers theme by showing its icon. Tutorial on how to disable this icon is right here; just untick the Support Layers box. Customozation section allows you to choose text and link colors, and choose background image or color and set them up according to your needs. The guide won’t dwell much on this trivial matters. Finally, you can add custom scripts and change your copyright text in the last couple of sections. Static Front Page menu, in the end, offers you the ability to choose what kind of front page do you want. It allows you to either opt for your latest posts which would be arranged in descending order, or go with a static page which basically means to display one of the pages you have created and customized using Layers WordPress theme. Page creation has been explained throughout this tutorial guide, and now we’ll move to some helpful tricks to make your WordPress website more appealing to the eye.

How To Add Google Maps With Layers WordPress Theme

We’ll start with how to add Google maps with Layers. It is fairly simple – you should start by either adding a new WordPress page on which to display the map or customizing one of already available pages so that it could display the Google map. For the purpose of this guide, we’ll make a new page called “Map”. Go to your Dashboard, Layers and click on Add New Page button. Choose Contact Details & Maps template and name your page. You can also choose blank or any other template and add Contact Details & Map widget in it which basically does the same thing. In Page body section, you’ll see Contact Details & Maps and accordions options (Body and Footer). Choose the first one and enter the location which you want to display in Google Maps Location field. That’s basically it, as far as this tutorial is concerned, you can continue to customize the page by changing its layout, background or text. Moreover, Body and Footer Content menus allow you to write something about the location or whatever you deem fit.

Google Map In Your Layers-made Page
Google Maps With Background In Your Layers-made Page (Image Credit: Moyan Brenn)

 How To Add Slides To Your Layers WordPress Page

In this tutorial, we’ll also show you how to add slides to one of your WordPress site’s pages. For the purposes of this guide, we have created a new, blank page called “Slides”. Start by adding a widget from page’s Body section. Select Slider widget and start customizing it. By now, you should already have a feeling on how this works as this widget is also Layers’ own option and features the same setup layout. It’s generally fairly easy. Just name your first slider page and add desired text below it. Then, choose the slider image (background in top, horizontal toolbar), customize it and click on Add New Slide button which is in the bottom right side of widget’s settings screen. You can repeat this tutorial process for as many times as you like and the results should be noticed in the images below.

Slide 1 Preview
Slide 1 Preview (Image Credit: Susanne Nilsson and David Yu)


Slide 2 Preview
Slide 2 Preview (Image Credit: Marina)


 How To Add Posts To Layers WordPress Page

Just like before, start with creating a blank WordPress page and adding Posts widget which this tutorial had already explained. The guide is simple; you’ll get to Posts widget’s customization menu and start setting the WordPress page up. How to do it? The same way as with any other Layers WordPress theme widgets. Choose the name and description of the page to begin with, and then choose the posts categories which you want to display. Then, select the number of posts you wish to appear and their sorting order (newest first usually works the best). Finally, in the right sidebar, you’ll see the options to customize the rest of the page. For the purposes of this tutorial guide, we have chosen grid listing style with 6 available posts.

Posts displayed On A Page
Posts displayed On A Page (Image Credit: Baker County Tourism)



We hope that this WordPress tutorial guide managed to show you that Layers WordPress theme is simple and easy to use and learn. Moreover, this guide hopefully managed to give you an insight in how to use some of Layers’ special features as well as how to build variety of pages that this theme allows you to make. We know that there’s plenty more to Layers than this, but in its basic version, this should be enough on how to get you started. There’s a number of available extensions that could be built into your Layers WordPress theme in order to give you more options and further enhance your WordPress site building experience, but this guide will stop here and keep it simple. Extensions are a story for another time and another tutorial guide, after all.

Nikola Potrebić

About Nikola Potrebić

Nikola enjoys writing, reading, sports, history and geography. Nothing out of the ordinary, wouldn't you agree?