• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

How To Create a Custom Landing Page Template For Genesis

Creating page templates in Genesis is fairly easy. All you need to do is copy an existing page template like the page_landing.php file and make changes to the code in the file.

By default, most landing page templates generate a content area which is fairly narrow which you can change in your themes style.css file or use this code to create a new one.

In this tutorial, i’ll show you how to create both a full width landing template and a narrow width template for people who use the Genesis design framework.

Wide Landing Page Template

Simply create a new file using a code editor like Notepad++ and name it something like page_custom.php.

Paste in this code and upload the new file ( With a opening php tag on the very first line of the file ) to your themes folder.

/**
 * This file adds the Custom Landing template to the Metro Theme.
 *
 * @author Brad Dalton
 * @package Generate
 * @subpackage Customizations
 */

/*
Template Name: Custom
*/

// Add custom body class to the head
add_filter( 'body_class', 'metro_add_body_class' );
function metro_add_body_class( $classes ) {
   $classes[] = 'custom-landing';
   return $classes;
}

// Remove header, navigation, breadcrumbs, footer widgets, footer 
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
remove_action( 'genesis_after_header', 'genesis_do_nav' );
remove_action( 'genesis_before', 'genesis_do_subnav' );
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
remove_action( 'genesis_after', 'genesis_footer_widget_areas' );
remove_action( 'genesis_after', 'genesis_footer_markup_open', 11 );
remove_action( 'genesis_after', 'genesis_do_footer', 12 );
remove_action( 'genesis_after', 'genesis_footer_markup_close', 13 );

genesis();

Here’s what the above code produces using the Metro child theme by StudioPress:

wide landing page

You can style your landing page using the new custom class generated by this code.

Narrow Landing Page Template

Update: Uses the old XHTML markup. The CSS code below creates a template with a narrow content area otherwise use the PHP code above without any styling.

.custom-landing #wrap {
	max-width: 500px;
}

.custom-landing #inner {
	padding-top: 0;
}

New HTML 5 Markup

.custom-landing .site-container {
max-width: 800px;
}

After adding the above CSS code, here’s the result:

narrow landing page

Adjust Width

Simply use this code in your child themes style.css file to adjust the width of your landing page content area by percentage:

.custom-landing #wrap {
	max-width: 100%;
}

New HTML 5 Markup

.custom-landing .site-container {
max-width: 100%;
}

Other Options

  • Add Unique Header Image To Custom Landing Page Template for Genesis
  • Here’s more about how to create a page template for Genesis.
  • Create a landing page without code or plugins.
  • How to design a landing or squeeze page.

Reader Interactions

Comments

  1. Mike says

    November 5, 2014 at 5:28 am

    Thanks for this.

    I want to add a Wufoo form to the bottom of my custom page template. When I add it the page errors out. Any help?

    Log in to Reply
    • Brad Dalton says

      November 5, 2014 at 9:34 am

      Hi Mike

      Help for members http://wpsites.net/members/

      Log in to Reply
  2. Carolyn says

    September 18, 2014 at 3:08 am

    Thanks for the helpful, easy-to-follow info, Brad!

    Log in to Reply
    • Brad Dalton says

      September 18, 2014 at 1:42 pm

      Glad you find it useful Carolyn.

      Log in to Reply
  3. Irene says

    August 23, 2014 at 6:47 pm

    Hi Brad,

    Thank you for this tutorial. I use child theme Genesis Jane unfortunately the navigation and footer remains, could you please help me make it work here as well?
    Thank you so much!

    Kind regards Irene

    Log in to Reply
    • Brad Dalton says

      August 23, 2014 at 7:15 pm

      Because they have been re-positioned to another hook position.

      The code in the template above removes both the footer as well as both the primary nav menus from the before and after header hook positions.

      If your theme has re-positioned them, you’ll need to change the hooks in the remove_actions or ask your theme Developer as it is a non StudioPress child theme

      Log in to Reply
  4. Mary Lou Kayser says

    February 23, 2014 at 8:11 pm

    Hi Brad,
    Great tutorial. I was able to follow it to the letter, which I appreciate in a training. I now have the ability to create a full width custom page.

    The code looks like it removes all elements of the page except the body section, yet when I create a test page using this new custom template, my nav bar and footer are appearing. Any idea why this happens? Did I miss something or do I need to remove some code? I want the custom page to be stripped of all elements except the main content area.

    I’m using the Lifestyle Pro Theme.
    Thanks!

    Log in to Reply
    • Brad Dalton says

      February 23, 2014 at 11:22 pm

      All themes are coded differently so the code may need tweaking for some themes.

      This is the code used in the Lifestyle Pro theme which already includes a landing page by default.

      Log in to Reply
      • Mary Lou Kayser says

        February 24, 2014 at 1:55 am

        Hi again,
        Do you have a tutorial about how I could tweak the existing Lifestyle Pro Theme landing page code and create a new custom page that has a wider content area and won’t show any other elements, or point me in the direction of a place that would offer such a tutorial?
        Thanks so much! 🙂

        Log in to Reply
        • Brad Dalton says

          February 24, 2014 at 2:18 am

          You can simply change the value for the width in the CSS.

          1. Open style.css using Notepad++
          2. Search for landing
          3. Line 484 you’ll find this:

          .lifestyle-pro-landing .site-container {
          	max-width: 772px;
          }
          
          .lifestyle-pro-landing .site-inner,
          .lifestyle-pro-landing .entry {
          	padding: 0;
          }

          For remove actions, simply use any of the StudioPress Code Snippets.

          Go to Resources > Code Snippets and find the code in the section you want to modify.

          Log in to Reply
  5. tom says

    February 5, 2014 at 2:07 pm

    Thanks Brad

    I’ve fixed it – for some reason the contents of the php file wasn’t being read by wp but i added it a different way and it works perfectly – thanks for the code!

    and the help!

    Log in to Reply
    • Brad Dalton says

      February 6, 2014 at 8:26 am

      No worries Tom

      Log in to Reply
  6. tom says

    February 5, 2014 at 12:33 pm

    Hi Brad

    Thanks for this

    I followed instructions and uploaded the new php file to my themes folder but there is no option for the new custom template in the wordpress pages dropdown.

    any thing i am missing here?

    Log in to Reply
    • Brad Dalton says

      February 5, 2014 at 12:41 pm

      Hello Tom

      Under Page Attributes on pages only?

      Log in to Reply
      • tom says

        February 5, 2014 at 12:54 pm

        thats it. when i’m looking at a new or existing page i go to the page attributes module and the dropdown menu only allows me to select from the four defaults that are included with the generate theme:

        default template
        archive
        blog
        landing

        it should be showing up here right?

        could i have uploaded it incorrectly?

        Log in to Reply
        • Brad Dalton says

          February 5, 2014 at 1:50 pm

          Here’s what i get when i use the code and tested it so you must have missed something

          landing

          Make sure you copy all the code including the opening PHP tag and upload the template into your child themes riit directory.

          The file name for the template should be page_custom.php

          Log in to Reply
  7. Richard says

    January 19, 2014 at 1:11 am

    Hi,

    Thanks for this tutorial! It really makes life easy. I have a huge problem though and it’s quite frustrating. I am currently trying to code me a landing page where I would have sections being in 3 columns. And I want to give that section a background color that stretches infinitely (at the top most container level) but I am unable to do that because I do not know how to edit genesis code to let me control how containers should be implemented. Any tips? I would really appreciate it.

    Thanks

    Log in to Reply
    • Brad Dalton says

      January 19, 2014 at 5:24 am

      Its a fair bit of work to do that Richard.

      Log in to Reply
  8. Chrissy says

    December 3, 2013 at 4:43 pm

    Awesome tutorial Brad! Tried this for the Latitude Theme and it worked ! Thank you so much for your tutorials I learn quite a bit from you. Also if you could have categories listed or even a search function on your site that would be tremendously helpful! I come here looking for tutorials on themes but then get frustrated because the navigation isn’t user-friendly! Thanks again 🙂

    Log in to Reply
    • Brad Dalton says

      December 3, 2013 at 6:30 pm

      Hello Chrissy.

      You can always contact me if you need a link to a tutorial or code snippet.

      Another way is to put wpsites.net before the keywords in a Google search query.

      Trying to find a good solution to make my content easy to find.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.