WP SITES

3099 Coded Tutorials & 300 Plugins

Genesis Full Width of Screen Page Template

—

by

Brad Dalton

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 to code & support

Related Solutions

Was this helpful?

Yes
No
Thanks for your feedback!

19 responses to “Genesis Full Width of Screen Page Template”

  1. philr Avatar
    philr

    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
    https://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.

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      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?

      Reply
      1. philr Avatar
        philr

        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

        Reply
      2. philr Avatar
        philr

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

        Reply
        1. Brad Dalton Avatar
          Brad Dalton

          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.

          Reply
  2. philr Avatar
    philr

    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

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

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

      Reply
  3. philr Avatar
    philr

    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

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      1. Upload the file to your child themes root directory

      Reply
  4. philr Avatar
    philr

    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?

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Try this:[code]max-width: 75%;[/code]

      Reply
  5. philr Avatar
    philr

    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.

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

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

      Reply
  6. Alla Avatar
    Alla

    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.

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

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

      Reply
  7. philr Avatar
    philr

    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?

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      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.

      Reply
  8. onthisearth Avatar
    onthisearth

    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

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      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.

      Reply

Leave a Reply