Inspired by the number of support requests for a Landing Page in Flexx, aka Squeeze or Sales Page, I decided to revisit the tutorial I wrote, and create a fully configurable landing page for Flexx by harnessing the power of Child themes. By using a Child theme, no modification to the core Flexx code is required, so that updates to the parent theme will not result in loss of functionality.
Fully configurable? well yes, by using a child theme, you can create not only one, but endless (landing) pages, each with its own configuration.
So what can be configured?
The page will take into account your default “Flexx Layout” settings. Sections from that layout can be “stripped” all the way down to the bare page content only. The following image shows what can be included/excluded on your page, on a per-page basis.
So how does this work?
- First of all, you need to have Flexx theme installed. The theme version needs to be at least 4.0.0, so that Flexx is able to handle child themes.
- Then, download, install and activate the Flexx_landingpage_Childtheme as you would download and install any other theme. Make sure the child theme is uploaded to the same directory as the Parent theme (your version of Flexx). In order for the child theme to recognize its parent theme, you need to adjust the stylesheet style.css of the child theme for your Flexx theme specifics as follows:
/* Theme Name: Flexx Configurable Landing Page - Child Theme Theme URI: http://ithemes.com/purchase/flexx-theme-wordpress-blog-themes/ Description: Child theme for all Flexx versions (<strong>requires Flexx version 4 and up</strong>). Adds a configurable landing page template, adds support for featured images in the blog posts, to be displayed on the blog index page, archive pages, and on single post pages. <strong>Instructions and more information on using a Child Theme with Flexx <a href="http://ithemes.com/codex/page/Flexx_Child_Themes">here</a></strong>. Author: iThemes Author URI: http://www.ithemes.com Version: 0.9.0 Template: FlexxYYYYYYYY Requires: Flexx Parent theme version 4.0.0 and up Instructions: Change the "Template" and the @import Flexx value to your Flexx version, e.g. FlexxProfessional, FlexxBlue etc. */ @import url("../FlexxYYYYYYYY/style.css"); /*
important: Make sure that the “Template:” (line 08) and the url for the stylesheet @import (line 13) refers to the exact name of the directory where your Flexx theme is installed, e.g.
- Write a new page, and make sure to select the
Configurable Landing Pagepage template. The configuration options will work for this page template only. For a new page, the configuration fields will not be visible until the page is either “published”, or “saved as draft”. Only then will the page “exist” for WordPress, and will the page template become active.
- If you have saved the page, reopen the page, and tick the sections you wish to include on the page. The options will be visible below the main Editor window.
And that should be it.
The settings in your WordPress dashboard > Theme selection.
The modifications to the Child theme’s stylesheet.
Add a new page, select the page template, and “save as draft” to add content later, or “publish”.
The configuration settings.
What is what?
The child theme is based on the existing default child theme, so it will also include the additional functionality to facilitate Featured Post images. For more information on Child themes in Flexx, visit the iThemes Codex, from where you can also download the Landing Pages Child Theme.
Comments, recommendations and more regarding this article are very welcome in the comments section of this blog. Please do not post support requests in the comments section of this article, these are not actively moderated. If you have any questions or issues, please post in the Flexx support forum.