Create Custom Page Template With Widgets Like Your Home Page

Creating a custom page template which is the same as your home page template isn’t difficult.

There’s different ways to do this depending on which child theme you are using.

Lets take a look a one method you can use to duplicate your home.php file and use a page template anywhere on your site.

Copy & Rename Home.php File

Here’s the code you can use in a new file named custom.php for your page template.

It includes all the home page widgets which have been renamed to custom.

Copy & Rename Register Widgets in Functions.php

Next step is to copy the functions for registering the homepage widgets and rename them from home-top etc to custom-top etc.

Copy Home CSS Classes & Rename to Custom

The final step is to use a text editor like Notepad++ and search and find all CSS code using the home class.

Paste this code into a new text file and search, find and replace home with custom. You can then paste the code at the end of your child themes style.css file.

Modifications

Clearly, you’ll need to modify the CSS code so it only effects the styling of your custom page template with widgets. Some of the styling for the home page is also used for styling sidebars so you may want to remove those classes from the code.

More Than One Slider

If you’re using the Genesis Responsive slider on the home page you won’t be able to use it on your custom page template unless you want it to output exactly the same images as your homepage.

Try using another slider plugin like Easing Slider or Slide Deck if you want to display videos or other custom content in your slider.

Using the Easing slider you can add another Slider which displays unique content by changing the is_home conditional tag to is_page (007) in the code and paste it into the Genesis Simple Hooks field in the location you want to display the slider.

Custom Sidebar For Custom Page Template

You could also easily display a custom sidebar with widgets on the same page you display your custom page template using Genesis Simple Sidebars or the custom Sidebars plugin.

More Widget Area’s

You could also add more custom widget area’s to your custom page template using conditional tags.

Here’s a tutorial about how to add a widget area before your content sidebar wrap (before custom-top widget). Simply change the conditional tag to is_page() and add the post i.d for your custom widgetized page template.


Comments

10 responses to “Create Custom Page Template With Widgets Like Your Home Page”

  1. jmelee1221 Avatar
    jmelee1221

    HI Brad,

    Random question but would this tutorial work for something like this >> https://amongotherthings.com using the BRUNCH PRO theme? I am curious if this could be used to create like the content/sidebar then a break and have a few full-width flexible widgets followed by content/sidebar after.

    Let me know your thoughts if you think this tutorial would work.

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Jamie

      It could however i think you’re better off with a new tutorial written specifically for the Brunch Pro child theme. I’ll have a go at this over the next few days.

  2. Is there a way for this to work in the Parallax Pro theme? I would like every page on my site to have the same layout as the PP homepage, but I’m having trouble getting there. I’ve copied the front-page.php to make a custom page template, and registered the new widgets in the functions.php, and I’ve added the custom changes in the css file. When I try to add a page, I’m able to select my custom template, but it looks just like the default template.

    If I can do this correctly, how do I add background images and such to each page with my custom template? Is this possible? Or am I just blissfully ignorant? Haha – thanks for your help Brad!

    1. Brad Dalton Avatar
      Brad Dalton

      Sure Meg. This code can be modified to work on any theme.

      There’s a bit of work involved to get it working properly.

      1. I’ve finished all of the code updates according to this tutorial, and the pages using my new custom template now display nothing – which is progress from the default template, but I’m not sure how to access the widgets for these pages. Or if the widgets are even working at all. Any ideas of what I’m doing wrong? Or do you have another tutorial that would work more specifically with PP?

        1. Brad Dalton Avatar
          Brad Dalton

          What you see in the screenshots is exactly what the code produces.

          Would need to see all your theme files to find out what you have missed.

  3. Hi – great tutorial – thanks

    I’m trying to use this on centric pro and wonder if you can assist with how to set up the first part of the template

    centric doesn’t seem to use a loop?

    For now I have added copied front-page.php and renamed home to my custom page name (au) in this case, but wonder if I need to add a remove genesis action part back in?

    mynew page template
    [code]
    <?php
    /*
    Template Name: au
    /**
    * This file adds the au Page to the Centric Theme.
    *
    * @author StudioPress
    * @package Centric
    * @subpackage
    */

    add_action( 'wp_enqueue_scripts', 'centric_enqueue_au_scripts' );
    /**
    * Enqueue Scripts
    */

    From wpsites

    <?php
    remove_action( 'genesis_loop', 'genesis_do_loop' );
    add_action( 'genesis_loop', 'magazine_custom_loop_helper' );
    /*
    Template Name: Custom
    */
    [/code]

    Many Thanks

  4. Pieter Avatar

    Hi! Is this still aplicable with Genesis 2? I am trying to do this for the Metro Pro theme but can’t find the same files.

    Great site!

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Peter

      It will work but the code could be written differently.

      This is the correct way to code widgets for HTML 5 themes:

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.