Customizing Twenty Twelve Theme With Three Column Through Child

Twenty twelve theme is useful to customize according to your requirement because of its simple layout and code.

As you know you can customize any theme with the help of its child without disturbing its original code. Originally Twenty Twelve has two column layout and here we are going to add just one more column to make three column layout. No need to tell that we will create child to accomplish our goal.


It has three steps.

1. Create child theme
2. Create new widget area
3. Increase the site width

And just need to modify three files.

1. Functions.php
2. Style.css
3. Sidebar.php.


Here is the explanation of three steps:

Step 1. The complete process to create child theme is provided here How To Create Wordpress Child Theme In Few Easy Steps. Here you just need to copy above three files inside child folder.

Step 2. You can add extra widget area in wordpress theme easily by copy paste. After adding widget area open sidebar.php and add the below code to display it in your theme.

<?php if ( is_active_sidebar( 'yoursidebarid' ) ) : ?>
    <div id="extra-sidebar" class="widget-area" role="complementary">
        <?php dynamic_sidebar( 'yoursidebarid' ); ?>
    </div><!-- .extra-sidebar .widget-area -->
<?php endif; // end extra sidebar widget area ?>

Try to add any widget to this widget area. It will look with the default sidebar.

Step 3. By default Twenty twelve has only one sidebar, the original width is 960px or 68.571428571rem. So here we need to increase its width. If you want to calculate rem value simply divide px value by 14.

Now let's see the steps to increase the width.

Step 3.1 - Open functions.php file and add the following code.

// Override content width (for photo and video embeds)
$content_width = 500;

// Display 1000px width content if full width page template
function child_content_width() {
    if ( is_page_template( 'page-templates/full-width.php' ) || is_attachment() ) {
        global $content_width;
        $content_width = 1000;
    }
}
add_action( 'template_redirect', 'child_content_width', 11 ); 

Here the new size for content is 500px and for template is 1000px.

Step 3.2 Now need to change body class.

// Add child theme body class
function child_body( $classes ) {
         
     if( ! is_page_template() )
          $classes[] = 'custom-layout';
         
    return $classes;
}
add_filter( 'body_class', 'mytheme_body' );

It will add .custom-layout class inside body tag of your child theme to modify the layout.

Step 3.3. After completing the changes in functions you need to make changes in css.  As you know Twenty Twelve layout is compatible for mobile. To follow it you can use @media conditional tag to adjust the layout for mobile.

At first, increase the width of main container as well as footer to adjust the layout.

/* Increase theme width to 1000px */
@media screen and (min-width: 960px) {
    .site {
        max-width: 1000px;
        max-width: 71.4285rem;
    }
}

footer[role="contentinfo"] {
    max-width: 1000px;
    max-width: 71.4285rem;
}

Now adjust the post area and widget area width so the left sidebar can take its appropriate place.

/* Left & Right Sidebars */
@media screen and (min-width: 600px) {
    .custom-layout .site-content {
        width: 50%;
        margin-left: 25%;
    }
    .custom-layout .widget-area {
        position: relative;
        width: 20%;
    }

To keep the new sidebar in left add the below css.

.custom-layout #left-sidebar {
        float: left;
        margin-left: -75%;
        width: 20%;
    }

At last, it is easy to make the layout according to your need as you can add both sidebar either right or left, also can change the footer layout like two or three column.