Things you can do with Twenty Ten theme

Twenty Ten theme has been around for a while now, and there’s only a handful of tutorials on how to change this, move that and add something else to customize your child theme. I’ll explain with examples how to start your own child theme and make a few nice changes like move the sidebar to the left, create a 3 column twenty ten, move the menu and make it transparent.

First thing, you’ll obviously need to have Twenty Ten theme installed on your site, next thing to do is create a folder in your themes directory and choose a name for your theme. For my example I’m going to just call my theme “test”

You’re directory should look like this wp-content/themes/Your-Child-Theme

Now create a style.css file (I recomend using NotePad++ to edit .css files) open it, and add this to it.

/*
Theme Name: Theme Name
Theme URI: http://yoursite/yourtheme
Description: A child theme of 2010 default WordPress theme.
Author: You
Author url: http://yoursite.com/
Version: 1.0
Tags: black, blue, white, fixed-width, custom-header, theme-options
Template: twentyten
*/
@import url('../twentyten/style.css');


This tells your theme to use the stylesheet from Twenty Ten and is the beginning to your own theme. What’s so great about this is, we won’t ever make any changes to the Twenty Ten theme, we just add changes to your own. Now go ahead and save this, upload it to your theme folder then activate it. You won’t see anything different from the Twenty Ten theme yet.

By default, Twenty Ten theme has it’s sidebar on the right, this looks great but the whole point in creating a child theme is to make it the way you want. I’ll show you had to easily move the sidebar from the right, to the left.

The sidebars are defined by #primary,#secondary, we just need to tell wordpress to show them on the left, instead of the right. Open your style.css and add this to it. This floats the sidebar to the left, and moves the secondary sidebar along with it.

Sidebar on left:


#primary, #secondary {
float: left;
overflow: hidden;
width: 220px;
margin-left: 10px;
}
#secondary {
clear: left; 
}

Now since we moved the sidebar to the left, we’ll need to move the post are to the right.

#container {
float: right;
margin: 0 -250px 0 0;
width: 940px;
}
#content {
    overflow:hidden;
}

Save and look at your site, if all went well, you should see the sidebar on the left now.

What if we want to have two sidears, one on the left and one on the right? That’s easy to do too, we’ll use the secondary widget area and place it on the right, and move the primary one to the left.

3 Column layout:


#main {
    width:960px;
    margin:0 auto;
    overflow:hidden;
    position:relative;
}
#container {
    width:940px;
    float:left;
    margin:0 0 0 10px;
}
#content {
	margin-left: 210px;
	float: left;
	overflow:hidden;
	width: 520px
}
img.size-auto, img.size-full,
img.size-large, img.size-medium,
.attachment img, img.alignleft,
img.alignright, img.aligncenter {
max-width: 520px ;
}
#primary {
	width:200px;
	float:left;
	margin: 0 0 0 -940px;
}
#secondary {
    width:200px;
    float:left;
	margin: 0 0 0 -200px;
	padding-left: 10px;
}
#footer {
    clear:both;
}
#content img {
    height: auto;
    max-width: 90%;
    width: auto;
}

Now you should see your content in the middle, with a sidebar on the left and right. (once you add widgets) You can adjust the container, primary and secondary menu widths to your liking.

A nice feature of Twenty Ten is the navigation area. By default this is at the bottom of the header area. I’ll show you how to moved it to the top, or overlapping the header which looks nice when transparency is added.

Open your style.css and add this to move the navigation menu to the top of the header.

#header #access{
top: -200px;
position: relative;
}

This pushes the navigation to the top of the header image. Now I’ll show you how to do something nice with this. Lets overlap the navigation menu with the header image and make it semi transparent, this only works on some browsers, it will stay the same in IE.

This will push the nav menu up a bit so it’s on top of the header image.

Move Menubar:


#header #access{
top: -37px;
position: relative;
}

Now we’ll make it semi transparent.

#access {
/* fallback for web browsers that doesn’t support RGBa */
background: rgb(0, 0, 0) ;
/* RGBa with 0.70 opacity */
background: rgba(0, 0, 0, 0.70)

Next post I’ll show you how to add round corners to your site, add text shadow to different areas and a few other things.
As promised here is an example style sheet you can use with the above code already added, please read the comments between the code. Just rename it to style.css and change the info at the top.

Download is now on the downloads page (link at top)

Please refer to this post – Creating Twenty Ten Child Themes for any comments on child themes as I’ll starting a better tutorial from there.
Sites referenced for some of the code used. wpweaver.info, http://aaron.jorb.in/

128 thoughts on “Things you can do with Twenty Ten theme

  1. turiya

    Hello,

    Thanks for sharing such helpful information here!
    I am using twenty ten with a child.

    Is there a way to create and add a page template for a three column layout? What you have above in the three column is pretty close to what I want, but I only want it for the home page and to leave the others as they are with two columns. So I would also want to leave the right sidebar as it is in both page styles.

    Any help or direction would be greatly appreciated! (at this point I have a lot of work put into the child, so hoping I don’t need to switch to weaver or something like that)

    thanks!
    turiya

    Reply
    1. Zeaks

      Post author

      Hi Turiya, yes that is possible to do. Using conditionals for body classes http://codex.wordpress.org/Function_Reference/body_class you could have the 3 column layout for only the index page, while showing only 1 sidebar on others.

      Here is a rough example (only meant as an example, not to be used)

      /* Use the #home conditional to show 3 columns */
      #home #content {
      width: 550px;
      margin-left:200px;
      }
      #home #primary {
      float: left;
      width:190px;
      }
      #home #secondary {
      float: right;
      width: 190px;
      }
      
      /* for single we hide the left column and increase the content width */
      #content {
      width: 750px;
      }
      /* or you could move the #primary under the right sidebar so it looks like 1 sidebar */
      #primary {
      display: none;
      }
      #secondary {
      float: right;
      width: 190px;
      }
      Reply
      1. turiya

        thanks for your quick reply!

        I’m pretty new at this. But i’m good at finding my way through. I have never used conditionals and don’t really know where to start. I did read the page you linked, but it’s just a bit ahead of me.

        Can you point me in the right direction with some links or some steps?

        http://www.teachingsofyogananda.com/

        thanks again

    1. turiya

      Hey,
      I just decided to go for making the whole site a three column. Your information above made it super easy. I’m really thankful for your help and I’m going to be lurking around here more.

      looks like you are a skater. I ride a little too. :-)

      Peace

      Reply
  2. Bup

    Hi, I try to add extra sidebars outside the wrapper on both sides on my test side in the TwentyTen child theme. But, for some reason the menu is being pushed to the right?! And how do I add google adsense on both sides in the new sidebars? Thanks!

    Reply
    1. Zeaks

      Post author

      You’ll need to open a forum post for this. But just looking at your CSS, you’ve only increased the width of the wrapper, not moved the sidebars.

      The menu is floated to the left, if you increase the width of the wrapper, the menu will follow it to the left, you’ll need to add padding or a margin to put it in place. But again, this still won’t put your sidebars where you want.

      Reply
  3. Phil Golding

    Hi, I am using twenty-ten and would like to make the main body background color (#fff) of the blog semi transparent so that the solidand vivid background image shows through a bit, but I still need all of the text and images that fall within that block.table of white color to remain solid as well for good appearance and readability. is this possible? It sure has been interesting trying to figure it out anyway. Thank you!

    Reply
  4. Kitty

    Hi there, this post was really useful to me a while ago, I used it to play around with the Twenty Eleven on my site to move the menu bar over the header image and it’s looking good, but there’s one last thing I can’t manage to sort out… I now need to get rid of the space it was sat in, so that there isn’t a huge gap under the bottom of my header. I’ve looked around the area with Firebug to see if I could identify some CSS to modify, but had no luck…. And I’ve posted in the Themes forum on WP but got no replies, so thought I’d come back to this post and see if you had any ideas?

    Cheers,

    Kitty

    Reply
    1. Zeaks

      Post author

      Hi Kitty.
      Usually applying a negative margin on #main does the trick, but it’s not moving for me in firebug. Try using

      #access { margin-bottom: -20px; }

      You might also need to adjust the padding around the breadcrumbs, something like

      p#breadcrumbs { padding: 0 75px 10px; }
      Reply
      1. Kitty

        Brilliant, that did the trick! Thanks a lot for your help. I’m getting there slowly, one little tweak at a time!

  5. Pingback:

    WordPress téma bez odkazu v pätičke « Užívateľov blog

  6. Mohammad Yaseen محمد یاسین

    Hello,
    Thanks for such a helpful post,
    I want to replace the default ‘Archives’, ‘Meta’, ‘Recent Posts’ text in sidebar widgets with translation or other text in my native language (urdu), which is written right to left.
    Is there any way to do this?

    Reply
    1. Zeaks

      Post author

      I’m not sure what theme you are using, but WordPress default themes should have translation files and they would be used if your WordPress is set to yoru language.
      Could you open a forum post Mohammad and let me know what theme you’re using, thanks.

      Reply
  7. Peter

    pls, how do i hide parent pages from not showing when it is click, for there is nothing there. 2. when the link to any post on my homepage is click, the page of the post will not show in full one has to click continue reading to show in full. how do i make the post pages to show in full at the first click of the links.thanks

    Reply
    1. Zeaks

      Post author

      Hi Peter.

      Edit that menu to direct to the page you want. If you don’t want the link to go anywhere you can place a # in the url.

      I don’t know what theme you are using so I can’t answer your second question

      Reply

Leave a Reply