Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have found and downloaded a theme. However I want to tweak the CSS some to change the design, colours etc. a bit. How should I go about doing this, while still being able to update the theme without loosing the changes.

share|improve this question
add comment

3 Answers

up vote 18 down vote accepted

While you can't modify it without changing it, you can isolate the parts you change by creating a Child Theme. In summary:

  1. Create a theme directory on peer with your "parent" theme,
  2. Create a style.css file in your new directory that has a Template: declaration in the comments naming your parent theme and an @import url(../%parent-theme%/style.css) to import the CSS from the parent theme,
  3. Activate your new theme in the WordPress admin console,
  4. Add new files and/or copy files from your parent theme directory to your child theme directory and modify them to your preference, and
  5. That's it!

I could give you lots more details but basically this guy does a really good job of explaining How to Create a Child Theme so better for me just to point you to it.

When you want to upgrade the parent theme just upgrade; it will leave your child theme in-tact. Of course your child theme may not work perfectly if they've changed the parent too much and/or if you copied and modified theme files they updated in the new version you won't get the new functionality without modifying them too, but it's a lot better from starting over each time!

Hope that helps.

share|improve this answer
2  
+1 Great answer and that link has tons of good info. –  Doug Aug 13 '10 at 13:03
2  
Child themes are the way to go IMHO –  Ryan Gibbons Sep 1 '10 at 14:30
add comment

If all you want to change is a little css, you can create a custom css file inside the theme directory. Include your custom css file in the theme's header, and write new declarations in the custom css file only, thereby overwriting the theme's default css declarations.

Default stylesheet

body{background:white;width: 960px;margin: 25px auto;}

Custom stylesheet

body{width:800px;}

Your browser will make separate http calls for the two stylesheets and apply styles in the order they are listed. Whatever declarations are made last will overwrite declarations made before them. So make sure to include your custom stylesheet after any other stylesheets are included in header.php.

If you are going to end up changing template files like archive.php, or page.php, MikeSchinkel's answer will let you update your theme if a new version is released, without loosing your modifications. But if all you want is to change some css, This method will work well. Just make sure that you save your custom stylesheet before updating the theme directory.

share|improve this answer
    
This might be problematic if the theme you modify is not your theme, so your changes might get overwritten on theme updates. –  hakre Sep 6 '10 at 21:34
add comment

If your interested in a good 'Lab Exercise' for trying out the steps described above. There is nice step by step guide for creating a child theme off the default WordPress 3.x delivered theme twentyten. It is a simple but useful child theme (named thirtyten). The result extends twentyten theme from a two column theme to a three column theme. It also has some new header pictures.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.