Custom wordpress full width page template (Twenty Twelve theme)

my-full-width

This took me a while to work out so I thought it would be worth sharing.


Using the Twenty Twelve Word­Press theme (
on this site), I wanted to cre­ate my own page tem­plate with no side­bar and with full width con­tent (e.g. see here). I thought it would be a simple mat­ter of copy­ing the exist­ing full-width.php page tem­plate (see code) from the Twenty Twelve /wp-content/themes/twentytwelve/page-templates dir­ect­ory, renam­ing it, and mov­ing it to my own child theme page-templates dir­ect­ory. That didn’t work. It turns out you need to change a couple of things in the tem­plate file and add a few lines of script to the functions.php file.

 

Let’s start from the begin­ning (assum­ing you’ve already cre­ated a child theme) and you have access to your Word­Press file dir­ect­or­ies (I’m using FTP):

1. Duplic­ate:
/wp-content/themes/twentytwelve/page-templates/full-width.php

2. Rename this duplic­ated file to say:
my-full-width.php
You can call the file what you like (so long as it has .php at the end and con­forms to usu­al file-naming rules).

3. Move:
my-full-width.php to /wp-content/themes/*twentytwelve-child*/page-templates/
*twentytwelve-child* refers to the name of the child theme folder — yours may differ.

4. Open this new file:
(a) On the line: * Template Name: Full-width Page Template, No Sidebar
Replace the text after the colon with whatever you want the option to be called in the Word­Press admin pan­el (e.g. My Full-width Page Template, No Sidebar)

(b) On the line: <div id="primary"></div>
Replace class="site-content" with class="full-width".** If it mat­ters to you, this is mak­ing ref­er­ence to the CSS class in style.css that sets the con­tent width to be 100%.

That’s all you need to do with your new page tem­plate. Save and close it.

5. Open: 
/wp-content/themes/*twentytwelve-child*/functions.php

If this file doesn’t exist cre­ate a new text file called functions.php and place it in the child theme directory.

6. Paste the fol­low­ing into functions.php

<?php
// Add CSS class by filter
add_filter('body_class','twentytwelvechild_body_class_adapt',20);
function twentytwelvechild_body_class_adapt( $classes ) {

// Apply 'full-width' class to form_page.php body
if ( is_page_template( 'page-templates/my-full-width.php' ) ) $classes[] = 'full-width';

return $classes;
}
?>

I owe thanks to this thread for provid­ing this php script.

Two things you need to look out for here. First, with the directory/file name to your page tem­plate page-templates/my-full-width.php make sure this is right for your spe­cif­ic case — you may have chosen a dif­fer­ent loc­a­tion or file name. Second, with $classes[] = 'full-width';, the 'full-width' refers to a class in style.css either in the ori­gin­al theme dir­ect­ory or in your child theme dir­ect­ory. This is the class in Twenty Twelve. If you’re using a dif­fer­ent theme, it may be the class name is dif­fer­ent (e.g. 'full-width-content') or that you need to add a new class your­self. If you’re adding you’re own class to style.css, it should look some­thing like this:

body.full-width .site-content {
 width: 100%;
 }

 

That should be it. Hope this helps.

 

** The class and file names are spe­cif­ic to the Twenty Twelve theme. If you can work out the details for your own theme (or add your own) this should work for oth­er themes too.

2 thoughts on “Custom wordpress full width page template (Twenty Twelve theme)

  1. Thank you! I am look­ing for this week.I had to make a wide page in the Twenty Twelve theme.I wrote a new style
    .full-width {
    width: 100%;
    }
    It turned out great!

Leave a comment