Child Theme Authoring: How to Add Presets

Child Theming

Last Updated: Time to Read: 4 minutes

Layers offers a way for you to export any single Layers Template page and then pack it together with Custom CSS and an XML export to create a Style Kit so users can import fully-configured page layouts. If you already have a child theme, it is not necessary to package kits along with the theme. Instead, you may integrate the presets directly into the theme by filtering the layers_preset_layouts hook. This sets up your presets under the Layers Add New Page area, enabling users to select one of your custom layouts and load it in one step, compared to the multiple-step style kit method.

Your preset images must be stored in a special folder inside your child theme structure so they can be automatically pulled in by the preset when it is loaded. This cuts down on the margin of error that loading them manually or via XML would introduce. Review Structuring Your Theme if you skipped it previously.

Images used as backgrounds or full-width slides should be at least 1920px wide. Images used elsewhere should be at least 1000px wide. This ensures the theme can generate the appropriate crops and scaled versions while maintaining optimal performance.  Each preset also needs a screenshot in png or jpg format that is 515px wide and at least 350px tall.

  1. In your child theme folder, ensure an assets folder exists
  2. Create a sub folder inside assets called preset-images
  3. Add all images used in your Preset Layouts to this folder root.

Before going forward with preset integration, you will need to setup your child theme and the Layers Pages exactly how you intend them to look when selected by the user. It is always best to do this on a live server, especially if you need to export content to an XML file, as it is the only sure way your users will be able to import the images and other media used. Be sure to upload the images used on the builder pages from the child theme’s preset-images folder. This is a safety step that makes absolutely sure the image file names and location are correctly set in the export.

Export the pages using the Export function on the page editor as outlined here. This will produce a .json file for each layout that you will need for the next step.

You may add your custom preset function to your theme’s functions.php file, but the json string can get very long, so you may find it more manageable to create a helperfile such as presets.php, then include it in your functions.php using require_once():

In your presets.php, start be defining your filter:

In the above example, we use layers_child_presets  as our custom function name, where child might be the name of your theme. Lets take a look at the function

Line 1: Filter $layers_preset_layouts

Selecting the $layers_preset_layouts function and defining our own variable $layers_child_presets will allow us to pass our custom array into the Layers Presets so our screenshot and preset loader are visible under Layers → Add New Page. 

Line 3: Set first preset ID

This is the beginning of our preset array and must set a unique identifier for the preset. Here we use first-preset-id , but yours could be my-child-home-preset , etc.

Line 4: Preset Title

The title argument takes a simple string, which you should internalize it with __()  so it can be translated.  child-theme-slug  is your main theme slug as defined in your localization function, or can be replaced by a theme name constant if you chose to use them.

Line 5: Screenshot URL

For best performance, store your preset screenshot in the preset-images folder. We use get_stylesheet_directory_uri() to determine the URL path to the child theme root.

Line 6: Screenshot Type

Ensure the file extension on the image in your screenshot url is correct and matches this value.

Line 7: Json

This is the fun part! Well not really. But the results are worth the few minutes of intense concentration this step requires. The json argument is looking for the entire contents of your export file, sandwiched between those two tiny single quotes. Extra characters and spaces can break it. A missing bracket can break it. As a Layers Child Theme Developer, you can do this!

  1. Open the export .json file for this preset, preferably in a plain-text editor or program such as Sublime Text.
  2. Ignore any scary syntax error your HTML editor may throw. It is a false positive.
  3. Copy the entire file contents with Cmd+A / Ctrl+A
  4. Return to your function and place your cursor gently between the single quotes of this json line and hit Cmd+V / Ctrl+V
  5. You should now have a gigantic block of code that begins and ends with a fancy bracket, snuggled between the single quotes. This code will be loaded into a new page when your preset is selected by the user, just like the import process, and all images automatically reconciled with the files in your preset-images folder and pulled into the Media Library automatically.

Line 10: Return

Finally, we merge our custom arrays with the original using array_merge()  and return  our results. Remember, you must always have a return in combination with a filter hook.

Activate  your child theme on a fresh WordPress setup that does not have the layouts or images yet.

Go to LayersAdd New Page and verify your presets appear.