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:
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:
- A file containing PHP code for the page template
- CSS to be added to your child themes style sheet
Here’s the code for logged in members:
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.
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
Send the files to me please. There’s only 1 file inside the zip folder.
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
1. Upload the file to your child themes root directory
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?
Try this:
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.
Try the layout settings or the Landing page template under Page Attributes.
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.
Like this? http://wpsites.net/wordpress-themes/theme-with-full-width-posts-page-template-for-genesis/
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?
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.
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
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.