1

I created a page and selected the "Full-width Page Template, No Sidebar" option in the Twenty-Twelve Theme. The viewed page has the following body tag:

<body class="page page-id-2 page-template page-template-page-templates page-template-full-width page-template-page-templatesfull-width-php logged-in admin-bar full-width custom-font-enabled single-author customize-support">

I want to create a child theme with a custom full width page, but I am not sure why I would need to include so many similar classes, or what the best practice would be for creating them. Most of them do not appear to actually be used in styling the page. For example, I can't see the use for page-template-page-templatesfull-width-php. Perhaps it is a bug.

2

Those classes are output by the body_class function, which can be filtered by plugins to add their own classes. You don't need to (and shouldn't) harcode classes into the body tag in your template, just add that function within the body tag:

<body <?php body_class(); ?>>
0

Twenty Twelve adds for instance the CSS class .full-width to the body_class via a filter function in functions.php of the theme when the buld-in 'Full-width Page Template, No Sidebar' template gets used. Corresponding code from Twenty Twelve:

if ( ! is_active_sidebar( 'sidebar-1' ) || is_page_template( 'page-templates/full-width.php' ) )
    $classes[] = 'full-width';

This CSS class is used within style.css to format the full width pages. To make formatting easier, you might want to consider to do the same for your page template.

Possible code for a child theme (based on the file name and location of the custom page template - example /page-templates/custom-full-width.php):

function wpse_174855_twentytwelve_child_body_class( $classes ) {
    if( is_page_template( 'page-templates/custom-full-width.php' ) ) {
        $classes[] = 'full-width';
    }
    return $classes;    
}
add_filter( 'body_class', 'wpse_174855_twentytwelve_child_body_class', 20 );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.