Customizing WordPress TwentyTen

As promised last week, I’m going to show you how you can create your own WordPress theme. For starters, instead of create your own theme from scratch, I will instead teach you how to create your first child theme. That way, we can get you enough knowledge to get started but not confuse you at the same time.

Our goal is to transform the Twenty Ten theme from this:

to our own “My Twenty Ten” theme that looks like this:

So, let’s get started.

According to WordPress itself, a WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme. This means that we are going to choose an already existing theme and customize it. For this tutorial, we will be using the WordPress 3.0 default theme, the Twenty Ten.

I. Creating your Child Theme

  1. Create a folder named my-twentyten on your Desktop
  2. Open your text editor and add the following text in it:
    /*
    Theme Name: My Twenty Ten
    Template: twentyten
    */
    
    /* Import Twenty Ten Stylesheet */
    @import url(../twentyten/style.css);
  3. Save this file as style.css in our my-twentyten folder.

By this point, you should have a folder named my-twentyten with one file in it named style.css. Congratulations, you have now created your first child theme! But we’re not done yet.

II. Upload and Activate your Child Theme

  1. Fire up your favorite FTP software then upload the my-twentyten folder and its content.
  2. Log in to your WordPress site as admin and activate My Twenty Ten under  Appearance -> Themes

III. Changing the Header and the Background

  1. To do this, we’re going to need two images which I’ve already provided. Download the two image files below to your Desktop by right clicking on the link and choosing Save As.
  2. Go back to WordPress admin and choose Appearance -> Header from the sidebar
  3. Upload wptutorial-header.jpg
  4. Click Save Changes
  5. Then go to Appearance -> Background
  6. Upload wptutorial-background.png
  7. On the same page, under Display Options, choose the Tile Horizontally radio button
  8. Click Save Changes

We have now modified our theme’s header image and background but the site still looks ugly. So we need to edit our style.css file for that.

IV. Final changes to style.css

  1. Go to Appearance -> Editor
  2. Select style.css from the right sidebar
  3. Add the following to your style.css
    /* Set default font */
    body {
    	font-family:Tahoma, Arial, Helvetica, Calibri, Verdana, sans-serif;
    }
    
    /* Set default link colors */
    a,a:visited {
    	color:#06c;
    }
    
    /* Remove white background */
    #wrapper {
    	background:transparent;
    	margin:0 auto;
    	padding:0;
    }
    
    /* Position header items */
    #header {
    	position:relative;
    	height:150px;
    	overflow:hidden;
    	border-bottom:2px solid #ccc;
    	margin:0;
    	padding:0;
    }
    
    #header #branding img {
    	position:absolute;
    	top:38px;
    	left:0;
    	border-top:none;
    }
    
    #header #access {
    	position:absolute;
    	top:0;
    	left:0;
    	border-bottom:2px solid #444;
    }
    
    /* Add vertical border to header navigation */
    #access .menu-header,div.menu {
    	float:left;
    	margin-left:20px;
    	border-left:1px solid #444;
    	height:38px;
    }
    
    #header #access .menu li {
    	border-right:1px solid #444;
    }
    
    /* Lessen the padding between the header and the content */
    
    #main {
    	padding-top:20px;
    }
    
    /* Add boxes to posts */
    #main .hentry {
    	background:#fff;
    	border:4px solid #ccc;
    	margin-bottom:15px;
    	padding:10px;
    }
    
    /* Increase the sidebar width */
    #primary,#secondary {
    	width:240px;
    }
    
    #nav-below {
    	margin:0;
    }
  4. Click Update File

Now, go back and view your website. You may need to clear your browser cache and refresh before you see the final results.

Resources:

In the end, it all boils down to understanding CSS and your creativity. Create your own child theme and show it to us here!

1 Comment on "Customizing WordPress TwentyTen"

  1. To be honest if you are looking to start with a barebone set of files to customise, underscores is now the way to go…

Leave a Reply