Thread: Finally! How to Create a Full-Width Page (step-by-step tutorial with screenshots)

Finally! How to Create a Full-Width Page (step-by-step tutorial with screenshots)

I needed one page to be full width for a custom landing page we are creating.

I've seen numerous thread throughout Vantage but they've either been abandoned, or don't include ALL the steps I needed to make it work.

Here was how I did it:

1. Download page.php

/----------------------------------------------------------------------------------------------------------------------------------/

2. Create a copy and rename file to page-full-width.php

/----------------------------------------------------------------------------------------------------------------------------------/

3. Add a template name to the top of the file. See attached screenshot titled "A-Add-Template-Name.png" and add what's in blue font.

/----------------------------------------------------------------------------------------------------------------------------------/

4. Remove the sidebar from the PHP code. See attached screenshot titled "B-Remove-Sidebar.png" and delete what's in struck out red font.

/----------------------------------------------------------------------------------------------------------------------------------/

5. Save your changes to the new PHP file and upload to your child theme (ideally).

If you are not using a child theme, you can place this file in the parent theme as well.

Either way, make sure to take note of the steps you've done, so you can have this handy for future needs/changes.

(TIP: print this post to PDF & save screenshot attachments for a quick reference when needed)

/----------------------------------------------------------------------------------------------------------------------------------/

6. Create a new page via Pages > Add New (or use an existing page).

Then go to WP Dashboard > Pages > All Pages > and hover over the page and click "Quick Edit".

See attached screenshot titled "C-Quick-Edit.png".

/----------------------------------------------------------------------------------------------------------------------------------/

7. Then under 'Template' drop down menu select "Full Width Custom Template".
See attached screenshot titled "D-Quick-Edit-Select-Template.png".

/----------------------------------------------------------------------------------------------------------------------------------/

8. Now take a look at your new page. Yikes! It's pretty ugly with an empty sidebar and large vertical line.
See attached screenshot titled "E-Issue-With-Line-and-Sidebar.png" to see what I mean.

Let's fix that with a little CSS...

First, we need to get the Page ID Number. Go to your page editor and look in the address bar.
See attached screenshot titled "F-Get-Page-ID.png" so you know what I mean.

Now that we have your Page ID Number, add the following into your style.css file:
(you will most likely need to make adjustments to color)

/* ADJUSTMENTS FOR FULL WIDTH CUSTOM TEMPLATE */
.page-id-3558 #content-mid {
top: 15px;
background: #FAFAFA;
margin-top: -38px;
}

.page-id-3558 #content-inner {
padding-right: 0;
background: #FAFAFA;
}

Things should be looking better now.

See attached screenshot title "G-Looking-Much-Better.png" to see the example.

/----------------------------------------------------------------------------------------------------------------------------------/
/----------------------------------------------------------------------------------------------------------------------------------/

BONUS:

For us, we wanted a custom landing page so we can focus on email opt-ins.

We wanted to hide the header, footer, page title, WP admin bar and more (to make it a true landing page).

To see what I mean, see the attached screenshot titled "H-Full-Width-Landing-Page.png"
(note: the opt-in is not placed on page yet. This is just for example purposes to see how "clean" the layout is.)

My full CSS is below if you'd like swipe it and create your own page-specific landing page(s) as well:
(think email opt-ins, sales pages, thank you pages, etc.)

Enter this in your style.css file.
(another tip: Make sure save all custom CSS inside of a text file for backup)

/* ================================================== = */
/* LANDING PAGE #1 */
/* ================================================== = */

.page-id-3558 #masthead {display: none;}
.page-id-3558 #main-navigation {display: none;}
.page-id-3558 #breadcrumbs {display: none;}
.page-id-3558 #footer {display: none;}
.page-id-3558 #post-footer {display: none;}

/* HIDE H1 PAGE TITLE - WHICH HIDES ALL H1s... BUT SOLUTION IS BELOW - SEE "H2" */
.page-id-3558 .page H1 {display: none !important;}

/* H2 */
.page-id-3558 H2 {font-size: 40px; line-height: 40px !important;}

/* ADJUSTMENTS FOR FULL WIDTH CUSTOM TEMPLATE */
.page-id-3558 #content-mid {
top: 15px;
background: #FAFAFA;
margin-top: -38px;
}

.page-id-3558 #content-inner {
padding-right: 0;
background: #FAFAFA;
}

/* REMOVE CUSTOM BACKGROUND IMAGE AND CHANGE BACKGROUND COLOR SO ALL IS THE SAME */
.page-id-3558 {background: #FAFAFA !important;}

/* HIDE WP-ADMINBAR */
#wpadminbar {display: none;}

[----------------------------------------------------------------------------------------------------------------------------------]

I hope this tutorial was helpful for you.

If you have any questions, let me know, and if I will do my best to help

-Matt

Improving slightly...