post

Customize Twenty Ten

WordPress 3.0 comes with a basic theme, called Twenty Ten, that is easily customizable for your particular application. Of course, there are several hundred thousand themes available for WordPress – both free and those that cost money (called “premium” themes). Until you are ready to take your site to the next level, though, there is no reason to spend your time and money on themes. For the first year of your new blog, you are much better off focusing on writing.

WordPress Twenty Ten ThemeThe Twenty Ten theme is simple and clean, which is important when your blog is hosted on a shared server, because “small and efficient” will overcome some of the speed issues of the shared server environment.

The biggest issue with the Twenty Ten theme is that the banner image is not hyperlinked to the home page, which most readers expect. The theme does include a hyperlinked title above the banner, but if you design your own banner it is likely to include your blog’s title, making this text area superfluous.

Create a Child Theme

There is a right way and a wrong way to modify and enhance a WordPress theme. If you modify a theme’s files, all of your changes will be lost, the first time you update the theme. Fortunately, WordPress 3.0 introduced the concept of Child Themes. A child theme is a way to modify an existing theme, without changing any of the core theme files – and it is very easy to setup.

Use your host’s file manager application and navigate to wp-content/themes, where you should see the twentyten folder. Create a new folder, which will contain your new child theme’s files. I used the name brick-twentyten.

Creating a folder for you new WordPress child theme

brick-twentyten child theme folder

This folder will contain three files; style.css, functions.php and header.php. On your local machine, open your favorite text editor and add the following code:

/*
Theme Name: Brick Twenty Ten Child
Theme URI: http: //www.throwingabrick.com/
Description: Child theme for the Twenty Ten theme
Author: Roy Scribner
Author URI: http: //www.throwingabrick.com/about/
Template: twentyten
Version: 0.1.0
*/

@import url("../twentyten/style.css");

Of course, use your own information in place of mine. The Template tag will tell WordPress that this is a child theme to the Twenty Ten theme, so that needs to point to the twentyten folder. Save the file and upload it to the new child theme folder on your web host, then rename the file style.css.

Launch your text editor, again, and add the following line:

<?php
/**
* Brick TwentyTen Child Theme functions and definitions
*
*/

Replace Brick TwentyTen with the name of your child theme, save the file and upload it to the child theme folder on your web host. Rename the file as functions.php.

Finally, use your host’s file manager application to copy header.php from the twentyten folder, into your new child theme folder.

Contents of the child theme folder

Contents of the child theme folder

All of the modifications we will make will now be on the child theme and the files in the child theme folder. Activate your new child theme, from the WordPress Dashboard, under Appearance and Themes.

Update: Download a blank Twenty Ten child theme that you can install under Appearance | Themes | Install Themes | Upload.

Remove the Text-Title Area

Fortunately, editing this area out of the Twenty Ten theme is an easy process. From your WordPress administration panel, select Appearance and then Editor. The ability to edit theme files inside of WordPress is a new feature, but it should be used with discretion.

Editing the header.php file to remove the text title and description

Editing the header.php file to remove the text title and description

On the Editor page, select the Header file from the list of files, running down the right-side of the page. We want to remove the title and blog description text, which are identified as “site-title” and “site-description” in the header file, as shown above. Highlight these lines with your mouse, delete them and save the file.

Twenty Ten theme with banner text removedWith the change to the header file, the look is much cleaner and more streamlined. The next step is to create your own banner image.

Create a Banner Image

The Twenty Ten theme includes some header customization, right out of the box. Click on Appearance and Header to see a list of other images you could use, along with an option to upload your own image.

Customizing the header image in the Twenty Ten themeWe are not looking to select one of the other canned images, here, since we deleted the blog title and description text, with the intention of integrating that into a custom banner image. This is the screen where you will upload that image, however, and the dimensions are right there: 198 pixels tall by 940 pixels wide.

Remove the Black Lines from the Banner Image

Once you upload your new banner image, you will probably notice a black line, running across the top of the image, along with an area of white-space. This is easily fixed by selecting the Stylesheet, from the list of files on the Editor page, and adding the following lines:

#branding img {
border-top: none;
border-bottom: none;
}
#header {
padding: 0 0 0;
}

Save the file and your custom image is now ready for prime-time!

New Twenty Ten them banner image after modifying CSS

Make the Banner Image Clickable

With your new banner image in place, the next step is to hyperlink it to your homepage, so that readers can easily reach it from anywhere in your blog, by simply clicking the banner. On the Editor page, select the Header file and locate the following line:

WordPress Twenty Ten theme banner code

To make the image clickable, add the following line in front of the code, above:

Add a hyperlink to the Twenty Ten theme banner

Then, remove the / character at the end of the string and close the hyperlink with a forward-slash “a”. Finally, add your blog’s title and description between the quotation marks, after the alt= statement. Your final code should look like:

Fully-clickable Twenty Ten theme header-image

If you are wondering why we added the blog’s title and description to the “alt” statement, just turn images off on your browser and reload the page.

View your site with browser images offThis is how search engines “see” your blog and it is why seemingly minor details, like filling-in alt-text for images, are so important. This is our first foray into search engine optimization, or SEO.

See also…

253 thoughts on “Customize Twenty Ten

  1. Hi Roy, thank you for the useful insights here.

    I am using Twenty Ten for a membership site and WishList Member for the script to power it. I have six pages in the nav bar at top. Four of the six work fine, but with two links when you click on them a message… “Sorry, we cannot find the page you are looking for” comes up.

    When logged in as the Admin it works fine, but when logged in as a subscriber the two nav bar links will not find the pages. I have tried everything I know. Have you ever encountered anything like this?

    Thanks for any suggestions!!!

    • Mike – it sounds like two of the pages/posts are set to “Private.” Open each of those in the editor and check the “Visibility” settings under the “Publish” box:
      WordPress Publish Box

      • Hi Roy, thanks for the fast reply. Yeah, I checked that but they are all set to Public. I tried adding a new page… and it shows in the nav bar, but if a subscriber clicks on it they get the “Sorry can’t find the page you are looking for” note. The thing is, I know the pages are there and it works when signed in as the Admin. When you hover over a link in the nav bar the correct permalink shows in the bottom of FireFox but you won’t be taken to that page if you click on it. Befuddled!

  2. Remove the Black Lines from the Banner Image-I have copied and pasted the code given into my child theme but the black line remains above the banner, any help would be appreciated

    • The changed code does not show-up on your site, Diane. Possibly the original CSS is being cached.

  3. Thank you so much, Roy!!! I really, really appreciate your clear step-by-step help! So many other posts are written in ways that only pros understand. Thanks for writing with the rest of us in mind! Very, very nice and helpful!

  4. Hi Roy,
    thank you very much for your tutorial!
    Just one question: how can I change the font of the posts to some sans serif font?
    Thanks in advance,
    Matteo

    • Matteo – if you look in the style.css file for “/* = Fonts” (no quotes) you will see:

      body,
      input,
      textarea,
      .page-title span,
      .pingback a.url {
      	font-family: Georgia, "Bitstream Charter", serif;
      }

      Copy this block of CSS into your child theme’s style.css file and change the font-family:

      body,
      input,
      textarea,
      .page-title span,
      .pingback a.url {
      	font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
      }

      Good luck!

  5. I would like to be able to have my posts stand out by giving them a subtle background color rahter than default white and also to have a separator/divider between posts; I did not realize this was possible until I started using a plug in called sticky clicky to move posts to the top; though not documented sticky clicky seems to give sitcky clicky posts a nice thick divider and a light blue color to the posts; I have tried a few plugins that are supposed to allow one to add background colors to posts but can’t seems to get any of them to work. I am using twenty ten with the thirty ten child theme and latest version of wordpress. Could you explain a way to accomplish these goals? THx.

    • Ed – you can customize the look of posts by adding CSS styling to the .hentry class in your child theme’s style.css file, e.g.:

      .hentry {
      	background-color: #fbf2ce;
      	border-bottom: 3px solid #fbe072;
      }
      • Hey Roy, Thx for the reply; actually while I was waiting I experimented and found the following code in the css and copied it into my child theme and changed .home .sticky to .post and it seems to work; so whats the difference between .post and .hentry and would you recommend that I change .post to .hentry . THx.

        .home .sticky {
        background: #f2f7fc;
        border-top: 4px solid #000;
        margin-left: -20px;
        margin-right: -20px;
        padding: 18px 20px;
        }

        • Ed – the .hentry class controls the styling of all posts, both on the home page and on individual post pages. The .home .sticky classes control the styling of sticky posts (any post can be made “sticky” via the Visibility link above the Publish button in the Edit Post screen) only – the styling does not affect regular posts or individual post pages. Hope that helps!
          Roy

  6. Hi –

    I have modified the twenty ten theme. I have dumped the old footer for a new one. What copyright or license information must I post, if any?

    Thanks — this is a great site and I wish I had seen it two days ago….

    • Thanks, Peter – you will find a license.txt file in the original Twenty Ten folder. The contents of that file should match this page – http://wordpress.org/about/gpl/

      I may be wrong, but I do not believe the license requires any kind of attribution. I like to put something in the style.css file –
      /* Theme Name: TaB13 based on Toolbox */

      • Roy –

        Thank you so much for your prompt response.

        I appreciate the work done by those who developed the Twenty Ten theme and want to make sure they receive all required attribution.

  7. Hi Roy, again a BIG THANKS on the tutorials you do.
    I took your advice regarding using a child theme and set it up the way you instructed. It’s worked great on what I wanted it to. I seem to be having trouble changing the index page. I am a rookie using WordPress but I can follow instructions and I don’t think it’s me (I hope I’m worng). I hate to bother you about it, it’s just that I’ve tried what seems like everything I can find in WordPress searches and nothing seems to work. I was wondering if the fact that I am using a child theme might be a factor. It seems no matter what I do, I can’t get my Main page to show up when typing in http://www.mywebsite.com. It always goes to that blank page with 3 small links: cgi-bin/ db/ and wp/ . I have to click on wp/ to find my main page. I have tried changing the Settings General wordpress url and /or site url (which seems to kick me out) as well as changing these settings in cPanel’s phpMyAdmin wp_options. Maybe it’s something simple I’m missing?

  8. Hi Roy, This post has guided me well through many site installs. What I am having trouble with is getting a favicon to work. Any other info i have found online using a child theme to get the favicon to work has not been successful. Thanks for the great information.

  9. Hi Roy, I followed your very helpful guide but I must have done something wrong because when I activated the child theme the following appears in a white bar above the header image:

    <?php
    /**
    * Blush TwentyTen Child Theme functions and definitions
    *
    */

    Any help you can offer at all would be great, thanks!

  10. I tweaked the actual css and php files without first creating the child themes and all worked, thank you! As I go back and create the funtions.php child I noticed I don’t have any body content changes. Am I uploading Functions with just the child header and no body content? Have you addressed creating an small clickable image map on the header image? Terrific job, thanks again.

  11. Your site has been extremely helpful! Many thanks! I set up my first child-theme from Twenty Ten. I have one problem that I am struggling with. The “leave a comment link” on the blog page does not work, it’s there but the comment box does not open up for users to leave comments…any ideas?

    thx, Kathie

    • Thanks, Kathie! Do the comments work if you select the Twenty Ten theme, instead of your child theme?

  12. Great tutorial, the only issue I have is in making the header clickable–it reloads my page to 20%chazzsweet.com rather than the homepage. I’ve looked at my code and it is identical to yours (as far as I can tell), is there a copy/paste version of that part of the tutorial?

    Thanks!

    • Jaspinder – look in the header.php file (setup a child theme, if you have not already) and locate this code:

      <div id="access" role="navigation">
      ...
      </div><!-- #access -->

      Move that block of code (cut and paste) up in the file, right after this line:

      <div id="site-description"><?php bloginfo( 'description' ); ?></div>

      Good luck!

  13. Roy,

    I’ve been wanting to create a child theme for my website for quite some time and I really couldn’t find an easy to follow guide until I read this one. This is really great!

    I have a site using the twenty ten theme that I’ve customized to my liking and the first time there was an update to this theme…well, I updated and lost all my customized settings. There is a new update to this them, but I’m scared to death to update and have the same thing happen all over again.

    I have numerous videos, pictures and customized pages on this site. The site is over a year old and I’ve added numerous pages to the sites during this time. If I follow the instructions you’ve given would this work for an existing site with a ton of pages, or is this something that should be done when you first install the theme?

    The thought of me losing all my customizations is making me want to vomit. lol

    Thank you.

    Cheyenne

    • Hi Cheyenne,

      If you have heavily modified the Twenty Ten theme files, your safest bet is to not upgrade, at this point. Going forward, you can copy the “twentyten” folder and rename it to something unique, like “mytwentyten” (which you can then select as your theme) and then you can upgrade – as the upgrade will not change anything in your new folder.

      Once you have upgraded, then you can create a child theme and play around with it, until you get the look you are going for. Good luck!

  14. Hi Roy
    I have a page labeled “Event Details”. When clicked on I would like to have the visitor linked directly to a PDF. Right now I have to link by typing “Schedule of Events” in the body of the page. When clicked on it takes you to the PDF. I’d like to short-cut by making the Event Details the link. Is there an easy way to do this.

    Thanks in advance for your help.

    Joe Johnston

    • Joe – assuming your navigation to Event Details is via the WordPress navigation menu, just edit or create a custom menu and use the PDF link as the hyperlink for the menu item, Event Details.

  15. I am building a new homepage in WP but it is new to me. I have already made changes to style.css before making a child theme. This looks like a mistake – I’d welcome your guidance!

    In order that a WP or Theme Update does not delete my settings, are the correct steps now:

    Option 1
    set style.css back to its original form
    make a child theme
    rewrite the changes into the child theme

    Option 2
    Can I somehow save the changed stylesheet as/in a child theme? Please tell me how.

    Option 3
    Have cup of tea and do something else? Please tell me what

    By the way, my website address in your reply form links to my existing homepage, not the emerging new one.

    James

    • James – the safest option would be to create a child theme (you can use my blank one above or create your own) and then copy the CSS code from your modified style.css file, into the child theme’s style.css file. You would not want to replace the file with your modified one, since there are some required lines at the top of a child theme’s CSS file, that are not in the one from Twenty Ten.

      Once you switch to your child theme – and everything looks the same, you can begin stripping-out the unmodified Twenty Ten CSS from the child theme’s style.css file, if you want to. You can also update WordPress and not worry about losing any changes. Good luck!

  16. HI again….follow-up question. I installed your child twenty ten theme. I like the looks of the twenty ten. I will be a happy camper if you can show me how to remove the search button/box, the archive reference, Meta and log in option, as well as the powered by WordPress at the bottom. I am not using this site a a blog.

    Thanks again

    Joe

    • Joe – the archive & meta widgets will disappear once you put your own widget in the sidebar. Probably even a blank text widget (have not tried that), if you don’t want anything displayed there. For the search box and the “powered by” text, just copy this code into your child theme’s style.css file:
      .widget_search {
      display: none;
      }
      #site-generator {
      display: none;
      }

    • Joe – when you go to the Themes page in the Administration / Dashboard, you will see two tabs at the top: Manage Themes and Install Themes. Click the Install Themes tab and you will then see five text-menu options just below the tabs:

      Search | Upload | Featured | Newest | Recently Updated

      Select “Upload”. Note that if you downloaded my blank Twenty Ten child theme, you will need to modify the style.css file to point to your Twenty Eleven theme. Good luck!

      • HI again….follow-up question. I installed your child twenty ten theme. I like the looks of the twenty ten. I will be a happy camper if you can show me how to remove the search button/box, the archive reference, Meta and log in option, as well as the powered by WordPress at the bottom. I am not using this site a a blog.

        Thanks again

        Joe

  17. I have created a child theme for my prototype website and activated it.

    What I do not see or can find is your instructions to “Update: Download a blank Twenty Ten child theme that you can install under Appearance | Themes | Install Themes | Upload” . I see the Appearance/Themes but do not see or can find Install Themes/Upload.

    What I want to do is increase the width of the site and change the header. I want to put a logo in the header.

    Thanks in advance for your help.

    Joe

  18. Super fantastic! I had been struggling with switching themes but thought I could use a child theme to get to my goal and you posts made it easy even on a full stomach from Thanksgiving.

    Now I just need to change my font size to be more sensible and figure out the Connect and Follow text widget html ‘bleeding’ into other widgets issue.

  19. Stuck with style-less page, trying to run a child theme with WordPress 3.2.1 and Twenty Eleven 1.2 theme

    Uploaded three files to child-theme folder, activated it and i get the simple style-less layout. All contents on a linear vertical layout, i have double checked style @import to make sure it’s pointing correctly to the Twenty Eleven style sheet.

    help please

    • Hard to say, Manu, but for whatever reason it is not finding the Twenty Eleven folder. Try downloading my child theme files, above, and change just the import line to twentyeleven.

  20. Help! When I go to my dashboard, the left hand navbar is gone. This is not a new blog. There’s a skinny little bar on the left side that allows me to update my profile or go to my dashboard but the navbar allows me to get to my plugins, create a post, change my settings is missing. Please help me.

  21. Uploading an image had been super easy until this week idk what going on! I keep trying and it seems to slip the image in 2 and it asks me to crop and publish but I can’t select the whole image, Any ideas of what’s going on?
    Thanks!

  22. Hi again,

    I have managed to copy the files into my child subfolder and copy pasted the codes towards the end of each of style and functions docs. However when I go to my WordPress dashboard I can’t see my child theme appearing in appearances-themes. Not sure how to find it?

    Apologies, I am not very technical and just starting setting up the website.
    Many thanks in advance,
    Jolita

  23. Hello, many thanks for adding this post. I’ve tried installing a child theme, but I am stuck at a rather early step – I can’t copy any of the 3 mentioned files from the theme folder to my child theme folder. I tried specifying the path, I tried dragging the document – doesn’t work.

    Once the above issue is sorte, do i understand correctly that I need to copy and paste the code to style.css – simply at the end of the existing text?

    Many thanks for your help,
    Jolita

  24. Wonderful tutorial, thank you so much. The only thing I’m still wondering how to do is how to add the Blog title and description overlaying the header image, like some themes do. I’d like it to be left aligned to the image borders and make them certain colors to match my color scheme.

    Any advice?

  25. Hi Roy, thanks for this helpful tutorial and the great info on all comments.

    I’ll like to change in the menu the word “Home” with “Blog” and I don’t know where to change that ….

  26. Hi Roy!

    I have a doubt. I have tried to copy and paste a text as it it. But the twenty ten theme have changed the font and line-height of it.

    http://www.tumediconaturista.com/enfermedades/sindrome-metabolico/

    I am tryng to copy in a Verdana style and with the minimal spacing between lines.

    Do you know what should I changue in the style.css? or what plugin should I install to let me changue the font and height line in same pages?

    Thank you very much for your wisdom

    FB

  27. Hi Roy!

    Built this website in wordpress twenty ten- with a child theme. The header is working beautifully in firefox, chrome and even IE7 and above but not in Safari. The background image is hiding behind the banner and the logo is on top of the banner. If I make any changes to the css or the header.php file, the other browsers do not look right. Any suggestions why Safari is not reading the header like the other browsers and how to fix the problem.
    Thanks
    Jenn

  28. Is there anyway to just remove the date/time from the Twenty Ten 1.2 theme? I would like to leave the posted by:Author,but just want to get rid of the date and time.

  29. Hey Roy, I installed everything as you instructed but when I go to make a change to the files in the Editor, nothing happens. I make the change, click ‘update file’ and get taken to my home page. I go back to see the code again and it just went back to the original file. Any ideas?

    Also, when you say go to the Editor, am I making changes to the header file under the child theme or do I go on the scroll down menu and choose to change the Twenty Ten theme files?

    Thanks for your help!

  30. Roy Scribner,
    Thank you so much for helping me out. Transforming to lowercase worked. I couldn’t reply to to your comment because there is no reply button on my end for some reason. Anyway thank you so much!!!!!

  31. Hi. Can you please help me achieve a very simply thing on the site that I am building. The home link in the header displays the word “Home” with a capital H. I need it to be “home” so that I can apply small caps and make the whole menu look uniform. I have modified the theme quite a bit (with the wrong method because I have read your post after the modifications). Can please please tell me how to change the html from capital H to regular! Thank you so much

        • Corey, I tried that but then it’s a pain to get the “home” to dissapear and position the custom menu in the header…It’s so much easier to just edit the one letter in the HTML…I just want to know how to edit that HTML..where is it?
          Thank you for responding :-)

          • Heya, Lara – no need to edit any HTM, just open-up the style.css file and search for the line;
            “#access .menu-header li,”

            This class has a float and position property. Add another line;
            “text-transform: lowercase;”

            (no quotes) and all of your menu items will be in lowercase!

  32. Nice explanation! Much appreciated…

    Is there any way to take this a step further and in addition to the logo, place a banner ad over the logo image to the right? In other words, I want to put a full width logo up there at the top (leaving some clear space in the design) and position a google 468×60 banner over it to the right.

    Thanks.

    • I think so, Anthony – see my latest post on modifying the Twenty Eleven theme banner area. You should be able to use absolute positioning to place an ad over the logo, similar to how the WordPress team positions the search box.

  33. Fantastic tutorial!!!!!! It was so easy to follow and cleared a few confusions I had about child themes. I absolutely love the twenty ten theme, although wanted to be able to have to have more control over it. This article gave me everything I wanted, taking the title out, linking my header so thanks very much! I will subscribe to your updates :)

  34. Hello Roy —

    You probably get this all the time, but I just wanted to throw in a comment to thank you for this spectacularly straightforward post. Following your instructions, I created a simple Twenty Ten child theme with some small customizations of my own. I would never have figured out how to do it on my own, but with your tutorial I got it straight in about ten minutes without any problems. Brilliant!

    Nathan

  35. Thanks anyway thought I ask, yes I was considering downloading Firebug for Firefox.

    I hope you don’t mind I do have 2 questions. I am using Twenty Ten theme which I feel comfortable with, I seem to be a little confused with pages, posts and categorys. I basically know what each one does but I want to create a page
    ie Pets and in this page I want to write about different types of pets like dogs, cats, etc. I want this page called Pets to be shown with Home, About Us, etc. I know how do that but how can I show the different types of pets on this page, is it by posts which only show up on the home page? or by categories which can appear on the side. This is where I need a little quidance.

    The other question is I also want to have a page called Weekly Videos where I want to place one or 2 videos on this page, I know how to place videos by using the plugin Embedd It, works great by the way, but it only works under posts where you the custom fields and you are able to place the video code, but I do not see that under pages.

    Sorry for 2 long questions but both of these problems are driving me nuts. Thank you Roy for your help.

    • A.D. there may be other ways to do it, but I would probably just use posts and have “Pets” as a category and then use a tag for each type of pet. The landing page for “Pets” would be the category archive page and you could customize that with its own menu (see Improve Your Blog Navigation with Custom Menus).

      You could do #2 in a similar way, with “Weekly Videos” or “Videos” as your category. Hope that helps!

      • Hi Roy,

        Hope you had a good weekend. Thanks for the info. So I can use posts and than have categories for Pets or Videos. If I do it that way the posts will only appear on the first page ie Home page, right? I don’t think I can place posts on seperate pages. Ahh, if I can just get a bit clearer on this it would be so much easier.
        So if I have a page called Pets and another called Weekly Videos how will I eb able to posts articles on each page.

        It is a good feeling that there are helpful people like yourself who take the time to help us noobies out.

  36. Hi! Thanks for the tutorial. I have a problem and maybe you can help me out. I added the code to the stylesheet to remove the black line and whitespace just as you said and it’s still there. Am I missing something? I added the code to the bottom of the stylesheet or am I supposed to put it somewhere else? Thanks for your help:)

    • Jen – it is displaying the CSS code from the Twenty Ten style.css file, is your child theme not active?

  37. Hi,

    My header image doesn’t load on Safari (iPhone Safari neither) and I can’t get it to work no matter what changes I do to the image file. My last header worked fine, but this one just won’t work. I’ve done all the modifications you’ve suggested in this tutorial along with changing the height of the header. Other than that it’s a Twent Ten theme.

    Thanks!

    • Viktor – I cannot try it on Safari until this evening, but I see from your page source that you are terminating the header string with [cc lang="html"]/>[/cc] and not [cc lang="html"][/cc] so maybe Safari is not as forgiving as the others. Your complete string would be:
      [cc lang="html"][/cc]

      • Thank you for the quick reply. I made the change in the child theme with no success. The banner on top of the sidebar has the same problem I just realizes.

        When I change back to the parent theme, the header displays like it should (diffrent image though). So, there has to be a size issue somewhere, with both header and sidebar banner, right?

        I am a total rookie, so if you have any “hardcore” solutions, please don’t spare on words when explaining. Thanks a lot!

  38. Hi Roy,

    Just got around to adding the code- .entry-utility {display:none;} like you said to get rid of date posted and leave comments from the homepages…….and………IT WORKED!!!… yeahhh! Thank you so much. This gave me confidence I need to continue.

    I have a question is the a place, book or site that I can go to find answers to questions like this other than bothering you here, you know like a cheat/info sheet. Once again thanks Roy for taking the time to help us all.

    A.d.

    • Unfortunately no, A.D., particularly now that WordPress is changing the default theme on an annual basis. I just finished-up my Twenty Eleven themed site this weekend and it was a bit painful. My favorite tool for CSS issues is the Firebug extension for FireFox:
      http://getfirebug.com/
      Using Firebug, you can click on any element of the web page and it will show you the CSS that is controlling that element.

  39. Wait! I just deleted, then re-installed both my twentyten and my child theme. For whatever reason, that seemed to work. Thanks anyway!

  40. Hi Roy,
    Thanks so much for your website!! I have a question. I’ve created a Child Theme and I am importing TwentyTen. I’ve only got a style.css.

    I wanted to get rid of the “Category Archives” header in my categories, so I added the following code:

    .archive-meta {
    font-family: Garamond, sans-serif;
    font-size: 12px;
    }

    .page-title {
    display: none;
    }

    After I did that, however, now no matter what I do, the following code shows up at the bottom left hand corner of my website anytime I go to a category post (rather than a page). I have tried to comment out the added code, get rid of my categories, and all manner of other things. No matter what, I can’t seem to get rid of this code on the bottom left of any category screen:

    function custom_cat_header(){ $content = ‘
    ‘.single_cat_title(false, false).’
    ‘; return $content; } add_filter(‘headway_category_archives_title’, ‘custom_cat_header’, 1);

    Would you know what this is?
    Thanks!!!

  41. Hi Roy,

    Just remembered to re-visit this site again and was happy to see your reply. I will try it out and see how it works. Thanks so much. I can sure use help putting this site together.

    A.d.

  42. Hi Roy,
    I would like to customize the “Post Comment” button with a bright color and make the font bold. I tried to modify the CSS but that has not worked.
    Where and how can I do this?
    Thanks!

  43. Hi Roy,

    Came across your site yesterday and really enjoyed it. I am using WP Twenty Ten and have been playing around with it, learning bit by bit. My question I have been able to remove from the homepage – posted on date and admin, but I want to remove from the bottom posted in category/leave a comment.

    What is the easiest way to remove them? I have downloaded the plugin called Admin Manage0ment Extended, but not installed, will that help.

    Mind you I am still very wet behind the ears, but have been progressing slowly. Thanks again Roy.

    A.D.

    • A.D. – the easiest way is to add the following CSS code to your child theme’s style.css file:

      .entry-utility {
      display: none;
      }

      Likewise, you can do the same thing with the “posted on” meta:

      .entry-meta {
      display: none;
      }

      Hope that helps!

  44. Hi Roy,

    Thank you very much in avance for your help to all of us.

    I’m using slideshows in my blog using the Good Old Gallery plugin. I’d like to use one of these slideshows in the header, keeping the required size of the header images. It’s possible?

    thak you

  45. Hey,
    Thanks for all the work. I have been asked to revise a child theme I made and the user wants the “Post Comments” button color and text color changed. But, I am having a real hard time finding where that particular style is. Here is the button code:
    The site owner wanted the background black and copy white. The “Post Comments” appears in white so it is hard to read.
    I tried to make a custom id in the child theme CSS for it but it has no effect.
    If I could adjust the color of the text in the button or the button color that would do it. Thanks for your help!

    • The button code got stripped out so here it is with out the brackets:
      input name=”submit” type=”submit” id=”submit” value=”Post Comment”

  46. Superb customization is possible in Twenty Ten. Many thanx Throwingabrick.
    I am able to move menu to the top, then the logo in place of site-name.
    Below that is the simple link menu again.
    But how would I replace the site-description thing with an image (400px wide), it aligns to right… help.

  47. Roy,

    I have two questions concerning formatting the archive post pages:

    1.) How may I remove the byline information: “Posted on [date]“, “By [author's name]” from the lists of posts?
    Example: http://www.margies-art.com/wp/?cat=4

    I have used a child theme to try modifying the .css and have tried modifying theme pages, all to no avail.

    2.) I would like to have a small thumbnail image appear at the front of the post excerpt on the post archive pages. Is that possible?

    Thanks, if you can help with either or both of these questions!

    AG

    • Aldene – I hacked the Posted on / Posted in information in the loop.php file. It is difficult to explain here in the comments, but if you want to send me an email, I can send you a copy and you can see how I did it.

  48. Pingback: Goodbye Kubrick, hello twenty ten | Ruth Stalker-Firth

  49. Hi Roy,

    Thank you for this great tutorial – it’s been super easy to understand. But, I am having two slight problems:

    1 – I don’t know how to remove the black lines from the banner image because I’m not sure where exactly I’m supposed to add the coding you provide. When I click on the Stylesheet file in my wordpress editor (self-hosted), there is already code. I tried adding your code to the top of the page, and also to the bottom, with no effect. What am I missing here?

    2 – I followed your instructions and got my banner image to be ‘clickable,’ but when I click on it, I get a ‘page not found’ message, and not my home page. I double-checked your final coding against mine, and they seem identical. Again, not sure what I’m missing here! :)

    Thank you in advance for your help!

    Ava

  50. How can I remove the titles from my pages. I’ve looked everywhere. I’ve messed up code a few times, tried to find a plugin but nothing has worked. Please help me as soon as you can (PLEASE).

    • If you are referring to the titles of the posts, they are controlled by the .entry-title class in the style.css file. One method of removing them is to use the CSS display property…

      .entry-title {
      display: none;
      }

  51. I hate to be the moron in the thread, but I couldn’t get past the first step:


    Use your host’s file manager application and navigate to wp-content/themes, where you should see the twentyten folder.

    I downloaded a utility called “Gas Mask” to do this, but I’m not smart enough to find the twentyten folder. Where is it? Perhaps I downloaded the wrong utility for Mac.

    Thanks!

    Jgroup

    • James – any FTP program will allow you to easily navigate and transfer files from your computer to your hosting folders and vice-versy. I use FireFTP, it’s a free add-on for Firefox and I love it. Your hosting company can guide you through the setup if needed.

  52. Roy, my heartfelt thanks for your generosity in helping us learn how to customize WP. I’ve learned so much from your clear, well-written posts and helpful replies to comment questions!

    My question pertains to the footer widgets in Twenty Ten. If I understand the CSS correctly, the four footer widgets should float, displaying the four widgets horizontally across the footer, however, my footer widget content displays vertically, each stacked below the previous.

    Thinking I inadvertently messed up my child theme, I reverted back to the original Twenty Ten theme but the issue remains. Any guidance you can offer to resolve this annoying issue will be greatly appreciated. Thanks in advance for your help!

    Best regards,
    Alex

  53. aha I have solved the problem. I was viewing the homepage when logged into the editor. now that I have logged out and refreshed everything is working how I thought it was going to work.

    Sebastiaan

  54. Hi,
    Great stuff. I was wandering, even though it seems rather useless, how to get the image linked on the frontpage to link to the frontpage. I used your code, but when I hover the header on the hompage it does not change in anything clickable. I though you might have an idea as to why that happens.

  55. Roy thanks for this great post! I am super new to all of this and I was able to follow your instructions easily… everything seems to have worked properly except that when I upload a new header all I see is a red x in the upper left hand corner. The file is a JPEG and is exactly 198 x 940 pixels. Any ideas on what I am doing wrong? I have been trying to figure this out for days! Thanks :)

    • If you used the WordPress administration interface to upload the header image, then their might be a permissions issue with the folder. Try using your FTP client, or your host’s file manager app, to set the permissions of the theme folder (include all subfolders) to 755.

  56. Hi Roy,

    I just started using WordPress and Twentyten and your tips are very helpful! Thanks for that. It looks like the most important thing it to have a child theme, which I haven’t. I made a lot of changes to my parent style.css and I take it they will all be gone as soon as I update the theme. As a consquence I’ve created a child theme now. What I’m not sure is: what will happen to the changes that I’ve already made in the original style.css when I update the theme next time? Will they all vanish? I really can’t remember what changes I’ve done (for me it’s mostly “try and error” in Firebug first and then make the changes in the original style.css). Do you have a suggestion how I can prevent a disaster when the next update is due? Would it help to make a backup of style.css, header.php and functions.php and restore them back to the main theme after the update?

    Thanks for your help!

    Regards,
    Jurg

    • Hi Jurg – yeah, you will lose everything on the next upgrade unless WordPress changes the folder name from twentyten to twentyeleven, then of course your original Twenty Ten theme files will remain intact. I have not looked at the WordPress 3.2 beta lately, so I am not sure if that is the case, or not.

      Probably make a backup of your entire twentyten folder, just so you have a copy of everything. One thing you might think about, if WordPress does release a new Twenty Eleven theme with version 3.2, is to switch to that theme and reproduce your customizations in a new child theme. It might not be that much work, since you have a copy of your changes.

      • Why not just create a child theme and move your customized style.css into it. Then put a fresh copy of the default style.css into the twentyten theme folder.

  57. Hello Roy,
    Just wanted to say a big thanks for this article. I had spent all weekend customizing my theme, only to update it this morning see it go back to the start.
    Thanks to your advice and a backup, I got this thing running on all engines now. I can’t wait to read more articles from you.

    • We’ve all been there, John :) Both of my blogs use modified loop.php files in their child themes, so it is always a struggle whenever new features are added to that, in the WordPress core.

  58. How can I make the “Leave a Reply” and the actual reply box a bit smaller? Right now, it is the same size as the title.

  59. HI Roy. I built a site using twenty ten before i’d heard about child themes. So today i’ve built a child theme, (twentytwo), becaue WP has just notififed a new update, added the cild directory in themes, then added the style sheet from the first version (which i’d modified quite heavily) into the new twentytwo folder, plus the footer.php, header.php and functions.php files (also modified). I added the declarations into the new style.css –

    /*
    Theme Name: twentytwo
    Description: Child Theme of Twenty Ten.
    Author: Myself
    Template: twentyten

    */

    @import url(“../twentyten/style.css”);

    Then went to dashboard – themes – twentytwo and activated it. My site vanished as did the admin area, just white screens. So i deleted the child theme folder and all returned to normal. Being new to this i’m baffled as to what went wrong. I wanted to use the files i’d customised in the main folder, and the stuff i;ve read online suggests one can import as many files as required from the parent theme.

    Some FAQs i’ve looked at say the info I have in my new style.css is all that is required, but I noticed you have more info in your style. header.

    Any suggestions as to what might be the problem please. Thanks in advance.

    Will

    • I have had that happen before, Will, and I am pretty sure it was from leaving some of those header tags out of the style.css file (even though some resources say all you need is the @import url line – seems that is not the case). You can download mine, above, and copy your css code into it, or just copy the header tags out of it and into yours. That should do it.

      • HI Roy

        Thanks for the information. I copied the code the way you suggested, uploaded etc, then went to the dashboard and activated my child theme, still blank white screens (even after hitting F5 a lot). As soon as I deleted (via ftp) the childtheme, everything came back to normal. This is puzzling, as from what I read these childthemes should run okay. Could it be a server setting, a read-write permissions for the folder perhaps? (My current folder setting is: drwxr-xr-x, which works for the parent theme, so should I guess, work okay for the child theme?) Thanks again!

        • Will – try it with just the blank (header tags only) style.css file and, if that still does not work, an empty functions.php file. There is an error in one of those – the most common are an empty line before the opening <?php statement in the functions.php file, and a missing : or ; in the CSS code, in the style.css file.

          • HI Roy

            Thanks for the quick reply. I had a close look at my style.css sheet and found a missing ;. I’d set uyp a moz-box shadow top go around the main text content onneach page – rather than just use borders on the wrapper (looks neat btw!). Once I added the ; to the last line of the three moz-box lines, the child theme worked. Then I loaded in the modified functions.php – all went white, so I added the original fiunctions.php – same issue. There appears to be no blank line above the <!php declaration, so i'm kiind of puzzled by that. Apart from an odd issue with a background image i'd added to my text areas (inside the moz-boxes/content) all has gone well so far. (I added a new images folder to the child theme and uploaded that one image file to get it to work) .

            So, apart from the functions.php file fall-over, my first child theme is going well. Many thanks for your help. If anyone is interested , i can post the code for the shadow effect by way of a 'thank you'. It;'s good to share!

            Thanks again ~ Will

  60. Hi, One of my clients has a twenty ten blog she keeps wanting tweaked; under the leave a comment box the “Notify me of Site updates” check box is not showing nor is the notifiy me of of follow up comments and I don’t see when I can enable them in the admin. I ended up creating a child theme but an still new to this. Any ideas? Is it running WP3.1.2 Her blog is scyllastrangefire.com/scyllablog
    thanks for your help

      • Hey Roy,
        thank for the quick follow up. Much appreciated here. It is a rarity to find someone like you who will actually follow up. Thanks and a perma link to your site. take care.

  61. How do I modify the “leave a comment” or “3 comments” (for instance) button at the bottom of a post so that it is bigger or more offset or more noticeable. I’ve had folks tell me they can’t find it. It’s set up as tiny and grey text.
    Any help?
    Thanks!

    • It’s a challenge to make that stand out – I should probably do a whole post on how to modify the meta data and comment links. You can make it bigger by adding the following code to your child theme’s style.css file:
      .comments-link {
      font-size: 16px;
      }

      My strategy was to go minimal and eliminate most of the meta data, showing only the category and the comment link.

      • Hi I just can’t get the comments-link class to modify in any way. Using a child theme and one css file – all other changes in the css work including .entry-date for example but nothing for comments-link. I’ve tried the !important override and removing everything else from the css just in case. Any further thoughts. Many thanks

        • Sorry a bit more info – it’s only color that won’t change for comments-link class other attributes including background-color work just fine and color works for other classes.

  62. Hi Roy !
    “Long yime listener, first time caller…”

    Using Twenty Ten.
    2 problems:

    1) Can’t get the page nav buttons off the bottom of the header; and,
    2) Can’t remove the page title from the “Home” page (static landing).

    Please be gentle. I thought “CSS” was a new cop show until last week !

    Thanks,
    B

    • Hey B – I took a look at your site and it looks like you got rid of the menu. Did you just create an empty menu (Appearance, Menus from the Dashboard)?

      To get rid of the page title and description, create a child theme and in the style.css file add the following code:
      #site-title, #site-title a {
      display: none;
      }
      #site-description {
      display: none;
      }

  63. How do I relocate the byline to the bottom of the post. I want the footer to say:
    Posted in [category]
    on [date] by [author] | Leave Comment

    • Grey – I’m sure there are other ways to do this, but I just moved loop.php into my child theme and then deleted the “entry-meta” divs (there are two – one under the gallery format and another under the “all other posts” format). I then changed the “entry-utility” div to my custom meta data:

      Posted in < ?php the_category(', ') ?> | < ?php comments_popup_link( __( 'Comment on this', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?>< ?php edit_post_link( __( 'Edit', 'twentyten' ), '| ', '' ); ?>

      Of course, you can display anything you want, like the_author – see http://codex.wordpress.org/Post_Meta_Data_Section for more info on that.

  64. Do you know if it would be possible in TwentyTen theme to have the site-title and site-description display superimposed over the header image in specified positions rather than above the image on the page?

    • Dave – I made a little tutorial today on one method of doing this. Let me know if you have any questions.

  65. Hi Roy,

    Re: Full Width Content
    Thanks for the answer. I tried that but it didn’t get the result I’m after.
    What is want is t make the Text Content area of a Child Theme page to be the same as the header – e.g 940 px.

    At the moment it is a slim, central column. How do I make that wider? Any thoughts?

    Thanks and best wishes,

    Andrew

    • Andrew – copy index.php and page.php into your child theme. Edit each file and change


      to


      At the bottom of each file, remove
      < ?php get_sidebar(); ?>
      Now your dynamic and static pages will be single-column, with no sidebar. You can control the column using the .one-column #content class, e.g.
      .one-column #content {
      margin: 0 auto;
      width: 900px;

      Good luck!

      • Thanks Roy – I’ve edited the page.php & index.php, but no change yet, so I assume I have to use the…
        .one-column #content {
        margin: 0 auto;
        width: 900px;
        to make it wider… but where do I put that “one-column” code?

        Thanks again.

        Andrew

  66. I need to change the font inside pages (not page title but the page`s main body of text) Found nothing in style.css
    How do I do this, please ?

    • There are two classes that you can change, depending on what you are trying to do:
      #content, #content input, #content textarea {
      color: #333333;
      font-size: 16px;
      line-height: 24px;
      }

      and
      body, input, textarea, .page-title span, .pingback a.url {
      font-family: Georgia,"Bitstream Charter",serif;
      }

      You can modify just the elements that you want, e.g. in your child theme you could use:
      body, input, textarea {
      font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
      }

      Hope that helps!

  67. Hi Roy,

    I’ve used your advice successfully so far – thank you.

    But can you tell me how to make the content of a twenty-ten child theme go full width (or nearly full width to allow for a slight margin?).

    many thanks,

    andrew

    • Andrew – if you look in the Twenty Ten theme’s style.css file, you will see…
      /* The main theme structure */
      #access .menu-header,
      div.menu,
      #colophon,
      #branding,
      #main,
      #wrapper {
      margin: 0 auto;
      width: 940px;
      }

      Changing “width: 940px;” to “width: 100%;” will give you a full-width theme that scales to the width of the display.

  68. I got this error when I tried to implement my “child theme” – what did I do wrong?

    Fatal error: Cannot redeclare twentyten_page_menu_args() (previously declared in /srv/disk1/680511/www/sugarconfessions.com/wp-content/themes/sugarconfessions-twentyten/functions.php:221) in /srv/disk1/680511/www/sugarconfessions.com/wp-content/themes/twentyten/functions.php on line 224

  69. Hi Roy,

    Thanks so much for your site. I’ve been following it since Sept. and it has been helpful. I have a question about working with a Twenty Ten Child Theme.

    I created a Twenty Ten Child Theme for a site which using a logo in the upper left hand corner. Now I’d like to reuse that child theme on different site. When I install the theme on the new site, it works, but the logo in the upper left hand corner does not appear — it uses the Twenty Ten defaults “Blog” Text. When I use Firebug the path for the logo is correct (and the logo image is in the images folder). Any suggestions for getting the logo to display?

    • Not sure, Yazmin – have you tried adding “position: absolute;” to the #branding img class? Feel free to email me a link, if you would like.

  70. I think this site and post are great but how can I unsubscribe from the follow-up comments from this post?

    • Is the “Manage Subscriptions” link not working for you? I’m actually having problems with it right now, but I don’t know if that’s because I’m the admin. Let me know – I can nuke it if it’s not working.

  71. Wow, thanks for the quick help and the link, Roy! I really appreciate it. I am trying to get a rudimentary website going by tonight or tomorrow, and you are making it possible! I did a quick browse of the info at the link you provided, and I’m sure that will fix that problem.

    As for the code and what I’m trying to achieve: If you look at the right side of all of my website pages (just below the header), there are several links under the heading “metadata”. There are, among others, a “site admin”, a login, and RSS type links. I want to hide all those or make them disappear (as well as the “powered by WordPress” at the bottom of the page. If I can do those bare minimum things, I will feel like the site will look professional (if extremely basic), and I will feel alright about giving out the address and coming back to refine the site in a couple of weeks when I’m not so busy making product to sell on the site… Lol.

    I know that only I, as the admin see some of the text (like “edit”) on the pages. I am concerned about getting to my admin panels if I remove the “site admin” and login links…

    Thanks again, very much for all your help! I am really under the gun, but now I really feel like I stand a chance. Thank God!

    Ken

  72. Just realized they are being placed in alphabetical order, with the exception of “home”, which is apparently the default title of the page I left untitled…

    I may have to rename it “You Email Us” to get it to the far right… Lol.

    Ken

  73. Ok, sorry to be a pain…

    Now I’m wondering how to put my pages in the order I want. I keep trying to put my “Contact Us” page at the extreme right of the menu (list of pages with titles that link to them in the header, in case I am calling it the wrong thing), but it keeps getting defaulted to third in line. Even after I delete in and recreate it, the button gets moved back to the same place!

    Thanks again.

    Ken

  74. Thanks very much! I don’t know anything about the CSS code; but I copied the code you supplied and pasted it in over what I thought was the correct spot. My page links disappeared! Lol. I hadn’t made a back up, but I went back and found it and put it back how it was from memory (just deleted the additional code), and all is back how it was…

    If you don’t mind, can you point me in the right direction as to where to paste that code? I found “.entry” code in several places. I would like to make the text “Meta”, and all text under it, on the right (Meta
    ■Site Admin
    ■Log out
    ■Entries RSS
    ■Comments RSS
    ■WordPress.org
    )
    disappear…

    Actually, if “Site Admin” is only visible to me, it can stay. If I make it leave, I guess I can get there some other way?

    Well, thanks again. I’m having fun playing around, but my time is short and it looks like I’ll have to go with a very rudimentary site for now. I’ll look forward to tweaking it more in the future.

    I’m really glad for your help!

    Ken

    • Ken – I cannot tell from your message exactly which code you are referring to, what are you trying to achieve? Regarding the meta information, that is under Appearance | Widgets in the WordPress Dashboard.

  75. Ok, I managed to turn off the comments, and all that bloggish stuff disappeared. Yay! I hadn’t been able to find the “Allow Comments” box and uncheck it. To find it, I went to “Pages”, and for each page, selected “quick edit”, and unchecked the “Allow Comments” box.

    Now I need to make the “meta data” and “edit” text disappear (unless they only show up for me, the site admin?), and start adding photos, menus, and buttons…

    Sorry for the dumb questions. This is my first website.

    • Some of that, like “Edit”, only shows-up when you are logged-in. The easiest way to turn the post meta stuff off is in CSS;

      .entry-meta {
      display: none;
      }

      Don’t worry about dumb questions – we’ve all been there (whether we admit it or not)!

  76. I want to remove the blog type format features from all my pages (except and unless I dedicate some pages to a blog) and just make my website look like a website.

    How do I remove the “Leave a Reply”, “logged in as”, comment/reply box, HTML notification (“you may use HTML…”), and “Post comment” button? I saw a lot of good information above, but couldn’t seem to apply it to this question. I couldn’t find the “screen settings” option mentioned above, either.

    Would it just be easier to find a theme or template that is closer to what I want for my website?

    Thanks very much for your help.

  77. Hi Roy,

    Thanks for your awesome site! I have a question: How do I get a trackback url to be listed at the bottom of a post? I have “allowed” comments and trackbacks, but there is no trackback url appearing after my posts. Is there a specific plugin that I need to use for this? Thanks!

    Wayne

  78. Roy
    I’ve set up the twenty ten child theme as directed, but I’m getting the following error on my dashboard. I’m not sure what I need to do to correct this. Any suggestions? (This is set up on a wamp local host if that makes any difference.)
    Warning: fopen(C:\wamp\www\wordpress/wp-content/themes/twentytenchild/style.css) [function.fopen]: failed to open stream: Permission denied in C:\wamp\www\wordpress\wp-includes\functions.php on line 4284

    Warning: fread(): supplied argument is not a valid stream resource in C:\wamp\www\wordpress\wp-includes\functions.php on line 4287

    Warning: fclose(): supplied argument is not a valid stream resource in C:\wamp\www\wordpress\wp-includes\functions.php on line 4290

    • You got me there, Scott – I would probably start by ensuring the permissions on the twentytenchild folder are 755 and the contents are 644.

  79. I was wondering if you knew a way to add a thin black border line down the sides of page like the one on the bottom of the page that separates the main page and the footer?

    • AJ – you should be able to do something with the #wrapper class. Try adding a border-left and border-right to that.

  80. Hey Roy!

    Just recently came across your website and I’m definitely finding it helpful; keep up the great work!
    I want to make my header stretch from edge to edge across the top of the screen. How do I go about this? Is there a way to make it work for all browsers?

  81. Roy,
    Great article and I was going to look for how to remove the “title section”. My question is how the HECK do I remove the “leave a reply” box underneath my page posts? I have tried everything and searched for to long. Any help or suggestions would be great. The site is http://www.BUZZRestaurantMarketing.com Thanks

    • Andrew – just edit the page or post and scroll down to the bottom of the page. There is a checkbox for allowing comments & trackbacks – just un-check those and you should be all set!

      • Roy,
        There is no area for picking an admin or allowing comments at the bottom of pages or posts? I just installed WP 3.1 onto a new URL. Any idea why those options are not there?

        • Andrew – do you mean that when you are logged into the WordPress administration screen (the “Dashboard”) and edit your existing page or post, you do not see an option to enable/disable comments, at the bottom of that screen? I do not think there has been a change to this in 3.1, but I can look in my test environment (I am not running 3.1 here, yet).

          • Roy,
            I’m running 3.1 and just installed 3.1 on a clients account. There is no longer a comment check box or change author section under the text body. Feel free to shoot me an email so we can discuss this further and maybe come up with a solution for you to post on here. Thanks.

          • Hey Andrew – just looking at 3.1 in my test environment and your right! There is no checkbox for the post comments – however I discovered where it has been hidden. In the top-right corner of that screen you will see a tab for “screen options” – click that and select the “discussion” checkbox. That will add the ability to turn comments on/off back to the post screen. Good luck!

  82. Hi. Thanks for a helpful tutorial, but I must say the first directions are a bit unclear when you instruct vaguely this: “open your favorite text editor and add the following code:” you don’t specify to which exact file? You mention header.php, style.css and functions.php but never really specify where to put what code nor is it clear into which of these files (to replace what or add to what’s there…?) Can you please clarify this with some more detailed explanations? Thanks!

    • Hi – sorry about that. I am referring to creating a new child theme, so I am not editing existing files, but creating new ones. Specifically, I am creating style.css and functions.php, in that order (see the “rename the file…” line at the end of each section). I use notepad, which always appends .txt to the file, which is why I rename them after the upload to my site. Hope that helps!

      • Yes, I understood that you were creating new files. It was just unclear to me (at first) exactly where/in what ‘new’ file that bit of code was to go. That could be explained a little better I think with a “Now, at the top of the new style.css page, replace ___ with this: ___” At the top of your new functions.php file, replace ___ with this: ___”, etc. It just seemed to me, when I was reading this, that info was missing.

        I’ve tried to do this child theme set up as you describe but I’m getting horrible errors such as this:
        Fatal error: Cannot redeclare twentyten_page_menu_args() (previously declared in /home/sitename/public_html/wp-content/themes/My-Child-Theme/functions.php:173) in /home/sitename/public_html/wp-content/themes/twentyten/functions.php on line 217

        I've inadvertently made what I see now are referred to as "child themes" but have done so only by changing the existing TwentyTen .php and .css files directly, thus creating a whole new look and layout while keeping a backup of the original TwentyTen files in case I messed it up. I like the idea of the child theme, now that you've been so kind as to show us here, just what it means, how it works and what is the benefit. I just wish I could figure out why I keep getting this fatal error and can't use my child theme.

        • Okay, it sounds like you have all of the Twenty Ten theme functions.php code in your child theme’s functions.php and WordPress is balking when it tries to set things up. Your child theme’s functions.php file should just have the opening php command and, if you like, the “Child Theme functions and definitions” comment.

  83. Hey thanks a lot Roy. I got the help I was looking for re: the clickable header to home and the margin/padding on the header.
    I love wordpress and these tutorial pages sure help along the way.
    thanks again.

  84. I’m so glad I found your site – it contains a TON of useful information!

    Can you help me with the following: How do you remove the white space above the header?

    thanks

  85. Roy, thanks so much for this. I’m brand new to CSS and to say I was nervous about tweaking it is an understatement. This has been a *huge* help.

  86. Your site doesn’t meet the WAI accessibility standards as it doesn’t have a title. How can I hide the site description but still have a heading? Thanks

        • Interesting. I thought screen readers needed an h1 heading but I could be wrong. Anyway sorry if my initial post seemed a bit churlish. This is a great, clearly-written article which helped me to build my first child theme in WordPress. Thanks very much!

          • No worries at all, I’m definitely not an expert in this area. I did try to check into it back when I first contemplated removing the text title & description, and could not find anything detrimental. The information is not very clear, though.

    • Robert – there is an “upload” button in Appearance | Themes | Install Themes. You can download a blank Twenty Ten child theme here.

    • Hey Tom,

      The font-type is specified at the top, in .entry-title (along with a bunch of other classes) and the size is specified in two places; .entry-title & #content .entry-title. I over-ride the color on TaB by adding a #content .entry-title class to my child theme (I also add display: inline; so it appears on the same line as my calendar icon). You can probably over-ride the size & font style the same way.

  87. Great job Roy. Thanks for the details and examples. I was using the WP 3.0 tutorial on Lynda.com but it hasn’t covered the awkward placement of the header and the header rules. Your input helped.

    I can’t seem to position my header correctly and it is still flush to the top of the page. I’m just guessing at where to make the changes in:
    #header {
    padding: 0 0 0;
    }
    I made various tries and any value moves the image further down than I want. Also, where can I make a change to align the page to the top of the screen and not show any background?

    • Hi Dean – you can erase that last little bit of margin at the top of the page by zeroing-out the margin-top in the #wrapper class. There is 20px in there by default, which is probably what you are seeing. There are several instances of #wrapper in style.css, so keep going until you see the margin-top: 20px; line.

      Regarding your header – the #header class controls the Twenty Ten header-images, but if you have replaced that code in header.php with your own header code, than you may have it under the #branding div. You can use padding in there (the #branding class), just like you would in the #header class, to position your image. Also add a display:inline; if you have something else positioned beside it. Good luck!

  88. Pingback: Twenty Ten WordPress Theme « iTank / Ideas Tank

  89. Great tutorial, I worked it perfectly on a fresh install, thanks very much.

    Just to confirm for anyone, ADDING this to the css file removes the white space to the sides of the header image;

    #wrapper {
    padding: 0 0 0;
    }

    One question; what happens if you already have a site up, do you lose content? How does this apply, will it affect the existing site?

    Again, great tutorial!!

    Mark

  90. Hi Roy,
    Thanks for the great info. Your directions were very easy to follow. I was able to remove the black line on the top of my custom banner on each of my blogs that use the Twenty Ten theme. But I am having trouble removing the white space that remains above and on the left and right side of my banner. I have already set the padding to all zeros in the stylesheet. I need to remove this white space, and then be able to increase the size of my banner to fill that space. Can you point me in the right direction. Thanks.

    • Thanks, Joe – if you look at the #header class in the Twenty Ten theme CSS file, there is 30px of padding. You can take that out by adding that class to your child theme;
      #header {
      padding: 0 0 0;
      }

      I cannot remember if the other whitespace you are seeing is in the #wrapper class, or not. It does have 20px of right and left padding, which you may have to zero-out, in the same fashion.

  91. I really like the simplicity of this theme.

    For SEO purposes, how do you add alt text to the header? I added my text in between the quotes on the alt=”" code in header.php, but nothing changed. What did I miss?

    • Darren – you will not see the text unless you turn images off, in your browser, or use your browser’s View Source function which displays the html source for the page.

      • Actually, I also tried adding text between the quotes in the alt=”" for the header image, but it doesn’t show up in view source either.

        • I see it, Art – it says “Top GPS Units” in the source and with images turned off. Maybe your caching plugin (e.g. WP Super Cache) was storing the old version of the page.

  92. I’ve been tinkering with Twenty Ten Child themes on one of my sites. It worries me that getting rid of the site title might make it harder for people to find the site on Google.

    Any thoughts on that?

    • Instead of getting rid of the site title entirely by deleting from header.php, I just hid mine with the following css –

      #site-title {visibility: hidden; line-height: 0;}

      #header {padding:0;}

      This will hide the site title when viewed in the browser, but leave it in the source code for google to see.

    • Hey Bill,

      The h1 tag is not much of a factor, anymore. See this SEOmoz post for more info: http://tinyurl.com/lu4ee7

      Neither of my blogs have h1 tags and it certainly has not hurt my more mature one, which ranks in the top 5 on Google for a lot of terms – even some pretty competitive ones.

      This is the case for many SEO topics, like h1 tags, that were important years ago, but something that was exploited so much that Google changed to more sophisticated methods.

    • Hi David – looks like there is 40 pixels of padding above the main content area;
      #main {
      clear:both;
      overflow:hidden;
      padding:40px 0 0;
      }

      • No space at top of functions.php page.

        I should mention I am making mods on a child theme and I believe the space developed when I moved the nav bar to the top of the banner image.

        I tried just putting the code below into the child css but it didn’t alter anything:

        #main {
        clear:both;
        overflow:hidden;
        padding:2px 0 0;
        }

        Did I do that right? Is there something I can put in the child css to correct this?

  93. I tried customizing my theme as you did in this post, but I get the following message now whenever I try to (pre-)view my blog:

    Warning: Cannot modify header information – headers already sent by (output started at /home7/mathfor1/public_html/wp-content/themes/Oopstwentyten/functions.php:1) in /home7/mathfor1/public_html/wp-includes/pluggab

    Do you know what I have done wrong? Thanks.

    • Megan,

      You probably have a blank line at the top of your functions.php file – make sure there is nothing above the opening php statement. If that does not do the trick, revert back to the default functions.php file and see if the error goes away.

  94. Hi Roy, Thanks for the information. I think a text title is useful however. Consider that some people can’t see banners. They will miss your all-important title.

    • Hi Minna – that is an interesting subject that I need to look into, further. I would think that a screen reader would pickup either the meta title for the page, or the alt text for the (logo) image.

  95. Hi Roy,

    thanks for the tips. Very helpful.
    One suggestion, if you put
    < ?php bloginfo(‘name’)?> | < ?php bloginfo(‘description’)?>
    in the alt text for the header image, then any changes made to the site title or description will automatically flow to the header, rather than needing to be manually updated.

    regards,

    Wayne

    • Thanks, Wayne – that is a great way to go, if you envision changing your blog’s title or description, at some point in the future. I tend to hard-code (maybe to my detriment :) ) as many elements as I can, in order to cut-down on database calls.

  96. Hi Roy, sorry my bad english, i´m from spain. So .. i´m trying to delete the image from the header, how can i do it? could you help me ? I wonder is php staf??? i´m a beginer in css.

    • Hi David – just make a copy of header.php then edit that file (in WordPress dashboard or with a text editor) to remove the code between < div id="branding" role="banner"> and < /div>< ! -- #branding -->

      I have not tried this (I am traveling, sorry) but I think it should work just fine – it is a good idea to make a copy first, though.

      Cheers,
      Roy

  97. Thanks heaps Roy, I wasnt clear about some of the great info but managed to rename my own variation to the Twenty Ten theme and its now safe from being overwritten :) Great information.

Comments are closed.