Twenty Twelve theme customization

Twenty Twelve theme is clean responsive theme.I had used this theme on this very blog for sometime but due to some reasons changed to current theme.It is great theme but not easily customizable.I had to customize the theme according to my requirement.I am listing down all the customizations here so that others may also find it helpful.

It is better to create child theme and make customizations in child theme.If you are making changes to parent theme if you update your theme changes will be lost and you will have to again make changes.You can find details about creating child themes at this link.

Aligning Twenty Twelve theme header text

The theme header text by default is aligned left (means the header is on top left hand side of the page).This does leave lot of space on right.You might not like to leave so much white space on right.It is good to align the header text to middle to as to lessen the white space on right.Center aligned header text does looks good.

Now to align your Twenty twelve theme header text towards middle follow below steps

Open style.css file of your theme and paste the code as shown below (you should edit the style.css file in your child theme or just copy below code in your child theme style.css file)

.site-header h2 {
     text-align: center;

In case you want to align header text towards right replace center in above code with word right.

Modifying Twenty Twelve theme sidebar width

Twenty twelve theme is a responsive theme.But for desktop the maximum width is 960px.The sidebar width and content area width are based on this grid system.Now in case you want to increase sidebar width and decrease content area width or vice verse follow below steps

  • Copy the code as shown below in your style.css file of your child theme
.site-content {
		float: left;
		width: 63.541666667%;
	.widget-area {
		float: right;
		width: 32.291666667%;
  • Above code will make your content area width (610 px) and sidebar width (310 px).You can adjust the widths according to your requirement based on simple formula mentioned in next step (the sum of content and sidebar should be less than 960.
  • I divided 610 with 960 and got .63541666667.Just see the code under site-content you will see width written as 63.541666667.You need to divide your content width with 960 and the result should be written in width area of site-content (the first two digits should be written before decimal as shown above)
  • Similar approach should be carried out for widget area as well and result should be written in width section of widget-area.(I divided 310 with 960 and wrote the result there).Making sidebar 310 is important to accommodate 300 width widget (do not use same width as that of widget)
READ  Bing Webmasters tutorial for traffic and SEO

Show excerpts on Tag,Category and Posts pages of Twenty Twelve theme

Twenty Twelve theme shows full posts on category archives,tag archives and posts pages.It only show excerpt on search results pages.Showing full post on these pages may be a good idea for visitor but may not be great idea for webmaster.

Visitor need to visit post page to read the article he/she finds interesting.This will increase your chances of making money from your post page.Follow below steps to show excerpt on tags,category and posts pages

  • If you have created child theme then copy content.php file from twenty twelve theme folder to your child theme folder.If you are not using child theme then skip this step.
  • Open content.php file
  • search for code shown below in the file.It is around line 33.
<?php if ( is_search() ) :
  • Replace the above code with the code fragment shown below
<?php if ( ! is_singular() ) :

This is the only change required.Save the file and you are good to go.All of your pages will show excerpt except the single post page.

Show Ads on Twenty Twelve theme single post page

Twenty Twelve theme uses single file to show single post page,tags archive page,category archive page,posts page and other archive page.This makes it tough to place advertising code on single post page without using any plugin.

In case you insert the code in slightly wrong place then you might get banned by Google for more than 3 adsense ads.It is quite a possibility if ads get displayed on archive pages so care should be taken while placing the ad code.

READ  WordPress Errors and their fixes tutorial

Follow below steps to place ads below content on single post page of Twenty twelve theme

  • Locate below code in your content.php file.
<?php twentytwelve_entry_meta(); ?>
<?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
  • You need to insert below code after the code shown above in the file.
<?php if ( is_singular() ) :  ?>
/* paste your ads code here,remove this line as well */
<?php endif; ?>

If you want to show ads in between contents then follow steps mentioned in this post.This process mentioned in that post will work for all themes.

Twenty Twelve theme and W3 Total Cache issue

Twenty Twelve theme is not compatible with W3 Total Cache HTML minify option.I had HTML tidy selected in HTML minify option earlier.Using this value my site looked weird.You should use default value of HTML minify.The default value of HTML minify works well with Twenty twelve theme.

Twenty Twelve theme footer text customization

To remove or replace default Twenty twelve footer text follow below steps

  • Open footer.php file of the theme (if you have created child theme then first copy this file to child theme and then open it)
  • Locate below code in the file
<?php do_action( 'twentytwelve_credits' ); ?>
<a href="<?php echo esc_url( __( '', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>
  • Delete the code to remove the line Proudly powered by WordPress from footer
  • You can also add your copyright information and other links replacing the above code with below mentioned code.You should modify the code according to your website.Currently below code is linking to my site and author as me.
All content on <a href="" title="Udinra">Udinra</a> is copyright of <a href="" title="Esha Upadhyay">Esha upadhyay</a>.

Hope you found this tutorial helpful.Consider sharing the post if it seems helpful to you.

READ  Linux certification sample question paper with answer set 11

13 comments Twenty Twelve theme customization

  1. This code should display side bar clearly

    .site {
    max-width: 68.5714rem;

    .site-content {
    width: 65.1042%;

  2. I wanna increase the “content + sidebar” board from 960px to 1080 px. How can i do this? Plz help me.

  3. Go to Appearance –Widget option.There you will see Recent Posts widget..Drag this widget to sidebar..You can see recent posts in sidebar..this method works for all themes

  4. Hi ,

    I am beginner to wordpress can you please tell me how the recent post is added in twenty twelev side bar.

  5. Hello Esha

    I am using twenty twelve theme and while i am put code for customize menu menu will not be display can u help me with that… i am using ‘Project Nav’ )); ?> this code..

  6. I've figured out how to center my sidebar titles. How do I center the content in the sidebar widgets as well?

  7. hi Esha, is there a simple way to remove the 2012 sidebar and the width that goes with it? while keeping the site responsive…no fixed width.
    that would result in a slim site content body.
    thanks for your time.

Leave a Reply

Your email address will not be published. Required fields are marked *