Pages

Sunday 14 April 2013

Custom Page Template in Genesis Child Theme - Page Layouts

genesis-page-template-page-layout-child-theme-layouts
Page template is one which are created in WordPress template when you publish a new page there is an option on the left hand side to select the page template. Few page templates are applied by default. for example if you create an home.php it will automatically be applied when Home Page of the site is loaded. similarly single.php is applied when a page is viewed. in this tutorial we will create a Home Page Template for our Genesis Child theme.


How to create Genesis Page template :

Creating a page template for the Genesis Child Theme is same as we create in other frameworks or custom WordPress Template but a little few changes to call the header,footer and footer widgets.

Creating Custom Page template :

<?php
/*
Template Name: Template Name Here
*/
?>

you can see a new page template has been created. all the code that we will enter in this template will be applied on the page which will use this template.

at the end we will call a function from Genesis to call the rest of the page elements (title, header, menu, footer widgets, footer)

<?php genesis(); ?>

Complete code :

<?php
/*
template name: Template Name Here
*/
?>

<!-- Start Custom Loop -->

<!-- End Custom Loop -->

<?php genesis(); ?>

Force Layout for Page Template :

if you want a full width, sidebar content, content sidebar or any other Genesis Layout for a Page Template you can use the following filter to force the layout of the page.

add_filter('genesis_pre_get_option_site_layout', 'name_of_the_layout');
Replace the second perameter with the name of the layout

List of Genesis Layout for Page Template :

// Force Full Width Layout

'__genesis_return_full_width_content'

// Force Content-Sidebar Layout

'__genesis_return_content_sidebar'

// Force Sidebar-Content Layout

'__genesis_return_sidebar_content'

// Force Content-Sidebar-Sidebar Layout

'__genesis_return_content_sidebar_sidebar'

// Force Sidebar-Sidebar-Content Layout

'__genesis_return_sidebar_sidebar_content'

// Force Sidebar-Content-Sidebar Layout

'__genesis_return_sidebar_content_sidebar'

Creating Full Width Home Page in Genesis Child Theme :

<?php

// GENESIS HOMEPAGE TEMPLATE //


// FORCE FULL WIDTH LAYOUT
add_filter ( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

// Homepage CUSTOM LOOP
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'my_custom_loop' );
function my_custom_loop () {
?>
 <div id="main_container">
  <div id="single-post" class="entry-content">
  
  // Add WP Query or Custom Columns for Home page Here
  
  </div> <!-- end single post -->
 </div> <!-- end main container -->
<?php } ?>


<?php genesis(); ?>
Your suggestions in the code are appreciated please leave a comment.

27 comments:

  1. Thank you!

    I've been trying to understand for days what __genesis_return_full_width_content meant!

    ReplyDelete
    Replies
    1. welcome, you can also use this snippet

      add_filter( 'genesis_pre_get_option_site_layout', 'child_do_layout' );
      function child_do_layout( $layout ) {
      $layout = 'full-width-content'; // or any other layout
      return $layout;
      }

      Delete
  2. So very helpful, and exactly what I've been looking for! Thanks Amer :)

    ReplyDelete
    Replies
    1. welcome Rob. there is another thing that you will like. if you want a blank page template and only want header and footer. you can use this

      <?php
      /*
      template name: Template Name Here
      */
      ?>

      <?php get_header(); ?>

      // content here

      <?php get_footer(); ?>

      and for responsive homepage please use genesis CSS classes with DIVs

      if you want three columns see example

      <div class="one-third first">Content of the Div</div>
      <div class="one-third">Content of the Div</div>
      <div class="one-third">Content of the Div</div>

      further classes are
      - one-half
      - one-third
      - one-fourth
      - one-fifth
      - one-sixth

      use first to clear the first div floats in each column.

      Thanks

      Delete
  3. Hi,

    is there any reason why you remove genesis_loop twice in the Creating Full Width Home Page in Genesis Child Theme section?

    I take this opportunity to thank you for sharing this good information

    ReplyDelete
    Replies
    1. sorry.. by mistake, it does not create problem but code should be one time. thank you.

      Delete
  4. I just want to remove the background picture for one page - the colours of my event calendar monthly list are grey and clash with the background image for the site. I though of using a custom page, this is the only page where I wish to remove the background image. Is there a way to do this or should I be considering CSS changes.... somewhere.

    Sorry for my newbie style question.

    Craig R.
    Brisbane, Australia

    ReplyDelete
    Replies
    1. every theme has a tag called body_class which automatically generates a body class for each page you visit. then you can target each page with CSS

      for example if you load blog page main body tag will have class of blog and you can target any element on this page. if you target container on blog page then code will be like this.
      .blog .container {
      background: none;
      }
      this code will only apply when blog page is loaded.

      I hope this will work.

      Delete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Thanks for the tutorial. I tried both of your methods to force the full page layout, but neither responded (additionally, setting the Genesis layout in the editor to full page didn't work either). Do you have any suggestions as to what could be wrong?

    Here's my code:

    php
    /*
    Template Name: Testimonials
    Description: Automatically displays Woo Testimonials
    */

    // FORCE FULL WIDTH LAYOUT
    add_filter('genesis_pre_get_option_site_layout', '__genesis_return_full_width_content');

    ?>

    php do_action( 'woothemes_testimonials' ); ?>

    php genesis(); ?>






    Also, if I wanted to add an h1 tag to show above the first testimonial, what needs to be added? I tried adding the following without success.
    /** Custom post titles */
    add_action( 'genesis_post_title','genesis_do_post_title' );

    ReplyDelete
  7. Is there a way to create a template for custom post types that I created? I want to show just the title of each post (No content) on the page (archive?) and then have it clicked to open on a custom single.php page
    Should I created a page template as demonstrated above and loop the CPT info? If so, how would I loop the CPT info?

    ReplyDelete
    Replies
    1. Create a new page template as described in the post and remove the default loop and add this custom loop, I have done this to list agents and It worked perfect, however there are other ways too.
      // remove default loop
      remove_action( 'genesis_loop', 'genesis_do_loop' );

      // custom loop for agents
      add_action( 'genesis_loop', 'agents_custom_loop');
      function agents_custom_loop() {
      $args = array(
      'post_type' => 'agents',
      'order' => 'ASC',
      );
      $agents = new WP_Query( $args );

      while ( $agents->have_posts() ) {
      $agents->the_post(); ?>
      <div class="hentry agents">
      <h2 class="entry-title"><?php the_title(); ?></h2>
      <div class="entry-content">
      <span class="agent-thumbnail">
      <?php
      if ( has_post_thumbnail() ) {
      the_post_thumbnail( 'agent-thumbnail' );
      }
      ?>
      </span>
      <?php the_content(); ?>
      </div>
      </div>
      <?php }
      WP_reset_query;

      Delete
  8. Incredibly helpful, thank you. Not so easy to find this essential information for template building. There is one error I believe in the code - you need to remove the single quotes around function 'my_custom_loop()' and then it should work.

    ReplyDelete
    Replies
    1. Yes you are right. I have updated the post. Thank you.

      Delete
  9. Hello friend i want to change the width of the sidebars. I use content - Sidebar layout. I want to increase the size of the content area (Width) and want to reduce the size of Right sidebar (Width). Please suggest me solution... My website www.presentstudy.com

    ReplyDelete
    Replies
    1. HI,
      Your theme ".wrap" width is 1140,
      content width is 725 and sidebar width is 340,
      between content and sidebar you theme has 75px of padding,
      to increase you theme content area find ".content-sidebar #content, .sidebar-content #content" in your theme style.css and change it from 725 to 825 and ".sidebar" from 340 to 240. or add the below code at the end of your theme's style.css

      /* overwrite content and sidebar */
      .content-sidebar #content, .sidebar-content #content {
      width: 825px; /* width of the content area */
      }
      .sidebar {
      width: 240px; /* width of the sidebar */
      }

      Delete
  10. I wish more people realized that NOT posting the date of an article makes people immediately suspicious of relevancy. I needed information on this subject for instance, but spent the first periods on the site scrolling up, then down, then up, then down, trying to find the date! If I see something like this is from March 2013 or something I can be sure it doesn't apply to Genesis 2.0.. but I'm forced to find other indicators..

    Don't remove the post date from article meta info!! This stuff is important to us readers!

    ReplyDelete
  11. thanks... Actually, I suffer for my site www.steptoinstall.com with this problem.

    Now it's clear for you. Thank you so much

    ReplyDelete
  12. not working for me please help ? my websit is http://hamxa.com/

    ReplyDelete
  13. This comment has been removed by a blog administrator.

    ReplyDelete
  14. Thanks for writing on this particular topic. I hope you will share more topics.

    ReplyDelete
  15. Hello! Why Page template dropdown doesn't display?

    ReplyDelete