WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

  3. 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

    • 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

  4. 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!

    • 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.

      • 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! 🙂

        • 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.

  5. 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!

  6. 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?

      • 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?

        • 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

  7. 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

  8. 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 🙂

    • 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.

Leave a Reply