Customizing a WordPress theme without changing it?

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

You can definitely create a child theme. A child theme keeps your main theme in its original format.

What I personally do is, I am using a premium WordPress theme from MyThemeShop. In that, I keep my style.css and theme options file as it is. I just copy the file's data to another file and name it a little different. For example, if I am using SociallyViral Theme, for creating its child theme, I will copy the data from its style.css file and save it to another file naming it childstyle.css.

After this, I will now design specific functions and can redesign my theme by adding more functionalities in the childstyle.css file.

This keeps my original style.css file as it is and enables me to update it in the original format.

Answer 4

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.