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

WP SITES

2762

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Premium Access
  • Log in

Genesis Full Width of Screen Page Template

This tutorial provides the code to make a full width page template in any Genesis child theme.

The background extends full width regardless of the screen size and height like this:

full-width-page

If you want to make the background of any page like your front page, full width, you can use this template as a starting point. Another option is to use the CSS with an existing template like a front-page.php file and change the body class.

There’s 2 parts:

  1. A file containing PHP code for the page template
  2. CSS to be added to your child themes style sheet

Here’s the code for logged in members:

Register for full access

Related Solutions

  • Remove Site Inner Div From Template File
  • Full Width Blog Page Template for Genesis
  • Parallax Child Theme & Page Template for Genesis
  • Custom Fields In Genesis Page Template
  • Genesis Custom Fields Template With Full Screen Width Sections

Reader Interactions

Comments

  1. philr says

    February 13, 2016 at 7:07 pm

    If you scroll back up the page, you instructions say
    “There is 2 parts:
    1. PHP code to create the page template
    2. CSS to be added to your child themes style sheet
    Here’s the code for logged in members:
    1. Upload the file to your child themes root directory.”

    There is no code, just a download button/link to Download full width template
    http://wpsites.net/private/full-width.zip

    I don’t know how to upload the files here, but if you use the same link, you will see the files. None of which seem to be the code you are talking about.

    Log in to Reply
    • Brad Dalton says

      February 13, 2016 at 7:10 pm

      The code is in the file. Simply upload the unzipped file to your child themes root directory.

      Why are you saying there’s more than 1 file in the zip when there’s only 1?

      Log in to Reply
      • philr says

        February 13, 2016 at 8:25 pm

        I see now. The first zip I downloaded was full-width-posts-page.zip and this seemed to be a complete child theme. I just downloaded again and I see one file full-width.php, so not sure what happened there.
        Sorry for the bother

        Log in to Reply
      • philr says

        February 20, 2016 at 11:15 pm

        Hi Brad
        If I also wanted to make some pages only about 1/2 width, would I make another page template, or just add some CSS to that page?
        Would I add the code to “Custom body class” ?

        Log in to Reply
        • Brad Dalton says

          February 21, 2016 at 12:22 am

          Either way. You can view the source code of the page, scroll down to the body class and gran the i.d.

          Another option is to copy the page_landing.php, change the name of the body class in the file, copy the CSS and rename the class.

          Log in to Reply
  2. philr says

    February 13, 2016 at 6:41 pm

    I seem to be missing something here. Which file do I upload? full-width.zip has a few files inside it. none of them seem to be what you are describing

    Log in to Reply
    • Brad Dalton says

      February 13, 2016 at 6:58 pm

      Send the files to me please. There’s only 1 file inside the zip folder.

      Log in to Reply
  3. philr says

    February 13, 2016 at 12:27 pm

    Hi Brad
    I am not following your instructions?
    ‘1. Using a code editor, create a file named page_full-width.php in your child themes root directory and add the following code to the file.’
    The code following is a child theme. I see 2 php files in this, but neither is page_full-width.php

    Log in to Reply
    • Brad Dalton says

      February 13, 2016 at 6:36 pm

      1. Upload the file to your child themes root directory

      Log in to Reply
  4. philr says

    February 12, 2016 at 8:52 pm

    Hi Brad
    I my case I have set full-width for the whole site, so don’t need to add a full-width template. How would I change this code to make a 75% width page template rather than a full width?

    Log in to Reply
    • Brad Dalton says

      February 12, 2016 at 9:52 pm

      Try this:

      max-width: 75%;
      Log in to Reply
  5. philr says

    February 12, 2016 at 5:39 pm

    Hi Brad
    I have set whole site to use full-width, but if I want to have a page (calendar or such like) using a narrower template, ho would I do that? It would be nice if there were the option on page to select different template. I guess like the old default template.

    Log in to Reply
    • Brad Dalton says

      February 12, 2016 at 8:25 pm

      Try the layout settings or the Landing page template under Page Attributes.

      Log in to Reply
  6. Alla says

    February 12, 2016 at 2:55 pm

    How do I make my div/sections have full-width backgoud color.
    I’d like my entry content have max-width: 1280px, but I’d like the background color to go all the way to the edges for some divs on a page.

    Log in to Reply
    • Brad Dalton says

      February 12, 2016 at 5:22 pm

      Like this? http://wpsites.net/wordpress-themes/theme-with-full-width-posts-page-template-for-genesis/

      Log in to Reply
  7. philr says

    January 24, 2016 at 6:02 pm

    I don’t see any code. I just see a black box
    Were you saying (sep 29 answer in this post) that there is a WP bug that is preventing your website showing us the code?

    Log in to Reply
    • Brad Dalton says

      January 25, 2016 at 9:45 am

      Thats right and they haven’t fixed it yet but thanks for the notification as i have now provided an accessable solution.

      The code is there in the text editor so i’ll add it to a file and link to a download so members can access the code.

      Log in to Reply
  8. onthisearth says

    September 29, 2015 at 7:44 am

    Hi Brad,

    I have my difficulties creating a responsive full-screen (not only full-width) template and would like to have a look at this code example. But the code in the post above seems to be missing (tried Chrome and Firefox).

    Thank you for a short feedback,
    Annette

    Log in to Reply
    • Brad Dalton says

      September 29, 2015 at 8:56 am

      Hi Annette

      I’ll email it to you.

      Code Display: WordPress has a problem with escaping the opening PHP tag when using the text editor so the code doesn’t display. Submitted a bug report but they won’t be fixing it.

      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 WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
 

Loading Comments...
 

You must be logged in to post a comment.