Written by on

How to create a landing page for Flexx

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:

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.

Comments

Respond

×

Sale Ends Today! Save 35% OFF BackupBuddy with coupon code BACKUPWP35