WP SITES

2669

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

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

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

      • 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

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

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

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

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

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

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

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

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

Leave a Reply