Update Nov. 24, 2010: there is an easier and better way to create landing pages for Flexx, which includes full configuration options for pages. Go to article

By popular request, here are step-by-step instructions to create a landing page, or sales page that will contain no navigation links, and no widgets, for the popular and versatile Flexx theme.

Before you continue, two words of warning

Since all themes are constantly being improved and enhanced with new features and functionality, the code as displayed may NOT be exactly the same as used in your Flexx theme. The instructions are based on Flexx version 2.5.2. You should try to understand these instructions, rather then copy and paste the code. That way, you will be able to implement these on your specific Flexx theme version.

For support and help on this, do NOT use the blog comments on this page, but use the support forum. Our Support Forum moderators do NOT check the comment section here. On the other hand, for some friendly words of appreciation, suggestions for improvements or additions to the code, feel free to add a comment.

In the following steps I will explain what the changes are, and why and where they need to be applied:

• Step 1: Create a new page template based on page.php
• Step 2: Modify the page template
• Step 3: Modify the Stylesheet to allow Full width content
• Step 4: Create a new Header file
• Step 5: Create a new Footer file

Prerequisites:

• a Flexx theme installed on WordPress
• the ability to use the WordPress theme editor: WordPress codex on Editing Files
• the ability to upload files to your WordPress theme folder

Step 1: Create a new page template

Use the base code from the file page.php to create a new page template. Name the file landing_page.php and upload/save the file in your theme folder.

More: WordPress codex on Page templates.

Step 2: Modify the new page template

Since most of the flex magic is done in the header (page and or category navigation, widgets) and footer files (widgets), we need to make sure the new page does not use the standard header and footer files. We will include a header and footer that will not have all this fancy magic code, so we end up with a header without navigation, and without widgets.

The get_header(); and get_footer(); functions allow you to specify a name, which will then be used to include the desired files. If you create files called header-name.php and footer-name.php WordPress will make sure these are included.

In this example, we will use header-landing.php and footer-landing.php.

Apply the following changes:

• Add the header info to indicate this is a page template:

  <?php
  /*
  Template Name: Landing Page
  */
  ?>
  

• Change the default get_header(); to get the header-landing.php, we will use a variable $name for this:

  <?php
  $name = 'landing';
  get_header($name);
  global $wp_theme_options; ?>
  

• Change the current content div to content_full to allow full width content:

  <div id="content_full">
  

Change the default get_footer(); to get the footer-landing.php:

<?php get_footer($name); ?>

Your entire landing page template should now look like this:

<?php
/*
Template Name: Landing Page
*/
?>
<?php
$name = 'landing';
get_header($name);
global $wp_theme_options; ?>
<!-- <?php echo basename( __FILE__ ); ?> -->

<div id="content_full">

	<?php if (have_posts()) : while (have_posts()) : the_post(); // the loop ?>

	<!--Post Wrapper Class-->
	<div class="post">

	<!--Title-->
	<h3 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h3>

	<!--post text with the read more link-->
	<?php the_content(); ?>
	<?php ithemes_insert_edit_link(); ?>

	<!--post meta info-->
	<div class="meta-bottom wrap">
	</div>

	</div><!--end .post-->

	<?php endwhile; // end of one post ?>
	<?php else : // do not delete ?>

	<div class="post">
	<h3><?php _e("Page not Found"); ?></h3>
    <p><?php _e("We're sorry, but the page you're looking for isn't here."); ?></p>
    <p><?php _e("Try searching for the page you are looking for or using the navigation in the header or sidebar"); ?></p>
    </div>

	<?php endif; // do not delete ?>

</div><!--end #content-->

<?php get_footer($name); //Include the Footer ?>

Update Nov. 21, 2010: in later versions of Flexx, you will also find a line <?php do_action('before_content'); ?> at the top of the file, and a line <?php do_action('after_content'); ?> at the bottom. These need to be removed as well.

Step 3: Add styling to the stylesheet

We will define a 100% width for the content_full div container, which leaves us with a content area spanning the entire site width, and since we’re using a percentage, it will also automatically adjust to the wide or narrow layout.

Add the following code to the end of your stylesheet style.css:

/*********************************************
		Content Full Width for Landing Page
*********************************************/
#content_full {
	width:100%;
}

Step 4: Create a new Header file

Duplicate the default header.php, and name the new file header-landing.php and upload/save the file in your theme folder.

All that needs to be removed are the following lines.

• After the tag:

  <?php do_action('above_header'); ?>
  

  This code inserts page or category navigation above the header image (depending on your layout settins). We won’t need any of that, so we simply remove this line.

• At the end of the file:

  <?php do_action('below_header'); ?>
  

  This code inserts page or category navigation below the header image, and the top widgets, if defined. Again, we will remove this functionality.

Step 5: Create a new Footer file

Duplicate the default footer.php, and name the new file footer-landing.php and upload/save the file in your theme folder.

All that needs to be removed is the following line.

• The second line:

  <?php do_action('above_footer') ?>
  

  If defined, bottom widgets will be inserted by this code, so we need to remove this as well.

That’s it

So there you have a sample of a landing page. I hope you understand these instructions, and perhaps decide to create something even better! If so, do let us know.

Many of our customers have asked for the ability to more easily modify our themes. Recently, I’ve had the opportunity to go through some of our code and add the ability to customize certain parts of the theme easily by using filters.

These initial changes are going to be most useful to developers that use our themes to develop sites for clients, but they can also be used by anyone that would like to customize the back-end of our themes. With these new filters, you can modify the name of the main theme tab, change the “Start Here” text of the first theme sub-menu, and change the URL used for the content of the Start Here page.

In order for you to successfully make use of these new filters, please ensure that your theme has the latest version of the lib/tutorials code. The current version as of this writing is 1.1.2. You can check the version in the lib/tutorials/tutorials.php file.

Modifying the Theme Menu Name

With this latest version of the lib/tutorials code, all the themes are now standardized to use “My Theme” for the main theme menu name. This should help make the experience of using our themes more consistent as you change from theme to theme and should reduce confusion on some of our video tutorials going forward.

You can easily change the theme menu name by using the it_tutorials_top_menu_name filter. For example:

function it_modify_top_menu_name( $name ) {
    return "Chris' Theme";
}
add_filter( 'it_tutorials_top_menu_name', 'it_modify_top_menu_name' );

A good place to put this code is in the theme’s functions.php file.

Modifying Start Here Menu Name and Page Content

The first link under the theme menu has the text “Start Here”. This page is used to link people to tutorials so that they can more easily use the features of the themes. The content shown on the Start Here page is actually an external HTML page that is shown inside of an iframe.

Other developers or end users may have other uses for this page, so two filters were added: a filter to modify the menu link text (it_tutorials_menu_name) and a filter to modify the URL for the content shown inside the iframe (it_tutorials_filter_url). The following example shows an example of using these filters.

function it_modify_tutorial_menu_name( $name ) {
    return "Useful Links";
}
add_filter( 'it_tutorials_menu_name', 'it_modify_tutorial_menu_name' );

function it_modify_tutorials_url( $url ) {
   return "http://yourdomain.com/helpful_links.html";
}
add_filter( 'it_tutorials_filter_url', 'it_modify_tutorials_url' );

As before, a good place for this code is in the theme’s functions.php file.

Future Themes, Features, and Filters

These filters aren’t the only ones that will be added. Eventually, many of the existing features will have similar filters added to them to enable some basic customization of the theme back-end.

All current development is being done with attention to areas where other developers or users would like to make changes to the way a theme works. I look forward to providing everyone with more options in customizing our themes without having to go digging around in the code.

If you have any ideas for hooks or features that you’d like to see in our themes, you can send them directly to me at chris@ithemes.com or post about them on our forum.