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: 240px;
margin: -20px 0 0 0;
}
#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: -20px -240px 0 0;
width: 100%;

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:


/* content area position */
#main {position:relative;}
div#container {margin-left:250px; width:50%; margin-top: -30px;}
div#content {margin:0;}
/* left menu position and width */
#primary {position:absolute; top:10px; left:0; width:25%;}
/* right menu position and width */
#secondary {position:absolute; top:10px; left:740px; width:25%;}

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/

Related Posts

Permalink

27 Responses to Things you can do with Twenty Ten theme

  1. Pingback: Twenty Ten Child Theme-How To | 看世界博客

  2. HelpSpa.com says:

    Is Twenty Ten now seen as the new baseline theme? E.g., for those people who want to stick with the WP codex and not go to a WP framework, is Twenty Ten the one to build upon for making a custom theme?

  3. Zeaks says:

    I don’t think Twenty Ten is made to be the end all to new theme creation. I think one reason it was made was to give the average user an easy way to implement the various functions wordpress 3.0 has available with the use of child themes. I know I could not create a theme from scratch myself, my lack of php knowledge prevents me from doing that, but I don’t need php with child themes, only css.
    If creating a new theme, Twenty Ten could be used, but the functions for the menu system and header/backgrounds are there and can be used in ways different to what Twenty Ten uses them I’m sure.
    The codex is definitely the best way to go about creating a new theme from scratch for more advanced users In my opinion.

  4. Kristy says:

    Thank you for an excellent tutorial.. just what I needed (to add a second sidebar to twentyten) and super glad you decided to show how to make use of the child theme feature :) Thank you!

  5. Dr.T. says:

    Hi!

    If I create a new theme directory: … themes/ MyTheme and a new style.css file inside that directory, how do I instruct WordPress to use the new style.css?

    Thank you.

    Dr. T.

    • Zeaks says:

      Just log into your admin, goto Appearence>themes and choose the theme you want to use. If you have a child theme installed it’ll show the child theme as well.

  6. Dr.T. says:

    Zeaks,

    I activated MyTheme and, as you stated, the right sidebar does not show up (no widgets); the left sidebar does show up (I had made the change before to WP’s style.css in the default Twenty Ten theme)

    As a test, I added the calendar widget to the Secondary Widget Area. The calendar does not show up in the right sidebar; the calendar shows up at the bottom of the left sidebar.

    What did I do wrong?

    Dr. T.

  7. Zeaks says:

    If that sidebar shows other widgets fine, then it may not be wide enough to display the calendar, so in turn it’s pushing it to the bottom under the content area.

    If you’re using the demo theme, that could be the case, just adjust the width of the sidebar, and reduce the width of the post area to compensate.
    Like this (using the code from above)
    /* content area position */
    #main {position:relative;}
    div#container {margin-left:250px; width:40%; margin-top: -30px;}
    div#content {margin:0;}
    /* left menu position and width */
    #primary {position:absolute; top:10px; left:0; width:30%;}
    /* right menu position and width */
    #secondary {position:absolute; top:10px; left:740px; width:30%;}

    I changed the sidebar from 25% wide to 30% and reduced the content to 40% from 50%. I used % instead of actual pixels to make it easier and work for any width theme.

    If you still have problems, link your site and I’ll take a look.

  8. Dr.T. says:

    Zeaks,

    You misundersood. The right sidebar showed nothing. The calendar widget — which I added to the secondary widget area — appeared at the bottom of the left sidebar.

    FYI, prior to creating a child theme, I had changed the style.css in the parent theme — the default Twenty Ten theme — as follows:

    #container
    {
    float: left >>>>> float:right; [This is what I changed]
    margin:0 -240px 0 0;
    width: 100%;
    }

    Does it matter?

    Dr. T.

    • Zeaks says:

      Yes it does matter, if using the code posted for 3 columns above. The code assumes the container is float:left so it adds a left margin of 250px, to push the container past the left sidebar, when normally it’s aligned to the left.
      You can either change the float: right back to left in twenty ten css. or change the margin-left: 250px to margin-right: 250px; in the above code.

      I did have to make the right sidebar 5px wider to make room for the calendar, and made the content area 5px more narrow. This code should work for you.

      /* content area position */
      #main {position:relative;}
      div#container {margin-right:250px; width:45%; margin-top: -30px;}
      div#content {margin:0;}
      /* left menu position and width */
      #primary {position:absolute; top:10px; left:0; width:25%;}
      /* right menu position and width */
      #secondary {position:absolute; top:10px; left:740px; width:30%;}
  9. Lee says:

    Zeaks great blog, seriously thinking of sorting out a child theme for my site now. Your header is crisp! Love it, I am looking to do the same with my site yet cant seem to upload my image through wordpres desktop without it looking stretched and blurred. Can you give me any advise or guidance in how you uploaded your header image? The last think I am going to try is uploading it to direct to my server within the header folder that the twenty ten theme images are. I have set the size to 940 X 148 yet when it comes yo upload wordpress still crops the image? Not sure why. Let me know if you can shine any light.

    Lee

  10. Zeaks says:

    The header for twenty ten is set to 940x198px by default. If your header is not that exact size it will crop it to fit. Since your’s is 148, it would come out blurred I guess. You can change this in the functions when you make a child theme. (if you don’t want to edit the Twenty ten files directly)
    Either copy functions.php to your child theme folder, or edit the Twenty ten one, find

    // The height and width of your custom header. You can hook into the theme's own filters to change these values.
    	// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
    	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
    	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );

    Change the 198 to 148 or whatever size your header is, then try and use the header.

  11. Cobi says:

    Hi there, thanks a lot for your helpful posts!
    rounded corners, shadow … working perfectly.

    But I have two questions:

    I moved the sidebar te the left (and container to the right) according to your instructions, and this worked fine (http://www.verzameldewerken.cc/). But this also seems to have affected the way the “one-column, no sidebar” page is displayed, the text seems to have an indent approx the size of the left side bar, as you can see here: http://www.verzameldewerken.cc/?page_id=25

    I pasted your code in the /*LAYOUT: Two columns DESCRIPTION: Two-column fixed layout with one sidebar right of content */ section of style.css

    one thing is: I didn’t make a new child stylesheet, as I had been editing things in the original twentyten style.css before I discovered your instructions. But before switching sidebar/container, the “one-column, no sidebar” was displayed allright.

    What went wrong, and what can I do about it? any suggestions?
    thanks again,
    Cobi

    • Zeaks says:

      You’re right, and I never thought about the one column page. The one colum uses the same classes as the normal post page. Without trying, I think this should fix the one column..

      .one-column .entry-content, .one-column .entry-title {margin: 0 0 0 -120px !important; width: 640px;}

      Just add that to your style sheet and adjust it if needed.

      I’ll look into it later and see if there might be a better way of doing this and thanks for pointing it out.

      • Cobi says:

        Thank you, this works!

        I replaced this in the original twentyten style.css I’m working in

        .one-column #content {
        margin: 0 0 0 20px;
        width: 640px;
        }

        with your code (in stead of just adding yours) and adjusted some values,
        now looks fine (http://www.verzameldewerken.cc/?page_id=25).

        Are any more adjustments needed should I also try your two sidebar code, or is
        or is the “one column” now ok no matter what I do with any sidebar(s)?

        thanks again for your work and quick reply!

  12. Cobi says:

    Zeak, something else I noticed today:
    I have pages with and without sidebar (left-sidebar, moved from right according to your instructions). In Firefox and IE the pages are displayed as they should be (although of course no shadow etc in IE), but in Google Chrome there is a difference in the position of the wrapper (I’m not sure this is the right name, I mean everything that is visible except the background of the page). When clicking from one page to another the page jumps a bit to the left/right. This happens after the “move right sidebar to left” procedure you described. Any idea what might be the problem and how this can be fixed?

    • Cobi says:

      maybe relevant: in a previous post you gave some code to sort out the one-column “problem”, I used this but changed the values to this:

      .one-column .entry-content, .one-column .entry-title {margin: 0 0 0 -238px !important; width: 900px;

      The 900px in stead of your 640 was necessary to have the text fill the page to the right side, in stead of having a (very) large white margin on the right.
      The -238 to align the text nicely with the menu just above it

  13. Zeaks says:

    I think the best fix would be to simply change the ID in the one-column.php. It seems to solve all the issues easily.
    Either make a copy of onecolumn-page.php and put it in your child theme folder, or edit it directly.
    Near the top you’ll see

    <div id="container" class="one-column">

    change that to

    <div id="container-single" class="one-column">

    Then if you want to style that page, use the ID #container-single instead of #container.
    This is basically how I made the custom page template for weaver theme, just changing the ID’s let me style it completly different than the rest of the site.
    You can view the one column page here, I’ve only changed that one line of code. http://zeaks.org/demo/ (switch to tutorial theme)

  14. Cobi says:

    again: this works! now everything working in Chrome as well. I’m amazed, not by your answer but by the fact that I actually managed to do all this, as I’m not too familiar with working in code (but learning a lot this way) …
    In future I might try your other tutorials about three-columnpage and moving the transparant menu around. Thanks voor your helpfulness :)

  15. Anne says:

    Thank you for the post, it’s very helpful. I’m having a problem with the 3 column thing. The footer hides the bottom half of my sidebar: http://www.constellationsedinburgh.org.uk/
    any idea what I’m doing wrong? thanks for your help

    • Zeaks says:

      It’s just because you don’t have much content in the post area and the sidebars are longer, usually it’s the other way around. You could add a 5-10px margin to the bottom of the longest sidebar and it should push the footer below it.
      I see you’ve imported a 3 column css from thematic, same idea as http://aaron.jorb.in/ uses in Thirty Ten theme which is great too.

  16. Jo says:

    Really fantastic tips! I used your code to create the left sidebar as well as fix the single-column problem in my child theme – perfect. However, I was just trying to overlay the menu and make it transparent as you instructed, but can’t notice any changes when I reload my page. I am developing locally and tried it on both Firefox and Safari – no luck. Any suggestions? Thanks!

    • Jo says:

      Actually – nevermind. I figured it out: I needed to put a } at the end of the transparent menu code, and that fixed it! Thanks again for the great tips!

  17. What type of gallery plugin do you use for displaying images? It looks and reacts a little different displaying images than the standard wordpress gallery, I like it!
    Thanks!

  18. Pingback: Add search form in Twenty Ten theme Header - Updated