Home Plugin documentation Layouts Creating a layout

 

 

Here we go!

 

Creating a layout

Go to Pilo’Press > Layouts and add a new layout

 

Click on “Add new”.

Configure the layout

 

Add your fields, configure the layout’s slug and the associated file names, add a thumbnail, category, collection. Configure the location etc.

Code your layout

 

On layout save, folder and main PHP file will be created automatically . This PHP file is required for your layout to work.

You can create manually the JS and CSS files.

Configuration file it will also be created automatically if enabled.

JS and PHP sync are available, files will be in layout folder.

How to add a new layout in WordPress admin
Admin view when create a layout
Files in IDE for a layout

Layout settings

“Layout” tab

 

In this tab, you can configure file names and layout slug.

Layout slug is used for the folder name and file names fields are used to match and load those files.

 

“Configuration” tab

 

You can enable configuration file which allow you to use WordPress’s hooks. It’s a PHP file inside your layout folder and it’s automatically include.

Pretty useful for many types of layout such as a slider layout for example: you will be able to enqueue your slider library directly in this configuration file and your layout will work if you copy-paste it on other website.

You can also add a configuration modal by linking a field group. You will be able to retrieve those data and use it inside your layout.

Here at Pilot’in, we use this feature to add the same options to all our layouts: user can modify layout background color, vertical spacing and add an ID to the layout to make anchor links.

 

“Variables” tab

 

Here you can add variables that user can modify directly. Thought to be use for style variables, it allows you to have layout with non-static styles, you can modify it with those fields, without modifying code.

Since you have to link those fields to your layout code, you can lock variables and prevent user from adding variables which will not work.

 

“Settings” tab

 

In this tab, you will find ACF and ACFE options like “Advanced settings” and instructions/label placement.

 

You didn’t find the answer you were looking for?

or you think a specific topic deserve more informations?

 

Wave to bottom