Tweaking Existing Designs Vs Editing Existing Designs Vs Creating New Designs
Quick reference for terminology with reference to this tutorial:
- Tweaking a design means changing the design settings via “Lander Design” screen.
- Editing a design means editing the design files including design files stored inside the design folder like functions.php, style.css and custom templates.
- Creating new designs refers to creating a new design from scratch.
- Never edit any existing design stored inside the theme itself (
/wp-content/themes/lander/designs/…). If you do, your changes will be lost when Lander updates.
- To edit any existing design, copy the design folder to
/wp-content/uploads/lander-user/designs/…. This will ensure that your designs persist through Lander updates. Or you can also update master functions.php and master styles.scss. See below.
- All the new designs are created inside
Lander comes with a rich Design Settings page that allows you to customize almost all aspects of your design like layout widths, typography, colors and font settings..
- In your WordPress Dashboard, navigate to Lander > Lander Settings > Design Selector. Select a design that you want to tweak and save.
- Navigate to Lander > Lander Design, here you can tweak and configure all the settings that you like.
- Once you are satisfied with the tweaks, you can navigate to Lander > Import/Export to export the Lander settings for future use or backup. Settings for each design are stored independent of other designs in the database.
Editing Existing Designs
Before you edit any core design stored inside
/wp-content/themes/lander/designs/, you must copy the design to
/wp-content/uploads/lander-user/designs/. This will ensure that all your handwork is not overwritten or lost when Lander updates.
For eg. if you need to edit the Femme Flora (lander core design) that resides here:
/wp-content/themes/lander/designs/femme-flora/, copy the femme-flora directory and place inside
/wp-content/uploads/lander-user/designs/ and update the design as you like.
For minor design customizations, prefer adding all the edits to master functions.php and master style.scss. These files are located here:
/wp-content/uploads/lander-user. To add / remove features and functions to existing design, edit
/wp-content/uploads/lander-user/functions.php and to add / override the styles, edit
Note: The customizations that you add in master functions.php and master style.scss will be available across the designs.
Each valid design must have at least a functions.php or style.css. Most designs will have both. Place all your custom functions in your design’s functions.php and all the CSS in style.scss. Lander comes with a built-in SCSS compiler so that the power-users can use SCSS syntax also. You can also place custom page templates inside the design directory and they will show up in the template dropdown in the page editor screen.
WordPress currently does not allow core templates like homepage.php etc. to reside outside the theme directory. So in order to customize core templates you can do either of these:
- Use action hooks and filter hooks in your functions.php (recommended)
- Or place your template inside Lander and disable Lander updates (see
remove_theme_support(‘lander-auto-update’)). In this case Lander will not update.
Creating New Designs
Lander allows you to create new designs from scratch that are minimal, well aligned, comes with custom design defaults and are easy to customize extensively to your requirements.
To create a new design from scratch:
- Please navigate to Lander > Lander Settings > Design Selector.
- Type the name of your design in the create a new design field and click the Save button or hit the return/enter key.
- A new design with the given name will be created in
/wp-content/uploads/lander-user/designs/and will automatically be set as the active design.
- You can continue to tweak this design (see Tweaking Designs section above).
- Once you are satisfied with the settings, you can go ahead and edit the design files (functions.php and style.scss) inside the design directory just like you normally create or customize a theme.