Month: July 2010 (page 1 of 2)

Before WordPress 3.0 the default Kubrick theme was called, um, “Default”. In the support forums people would update to the latest and greatest WordPress version and become shocked when their edits to the Default theme were lost.

It’s part of the WordPress distribution. When you override the WordPress files, those get included as well. Now with 3.0 the Default theme is gone and replaced with Twenty Ten. People will still make the mistake and modify the theme directly.

It’s not necessary and by creating a few simple file and directories, using a child them on your own is easy.

I’m a fan of the Hybrid theme and have been using a child theme already. The Vigilance theme caught my eye and I thought I’d give it a try. It was even easier when I located their instructions on how to start off.

1. Start with a pristine copy

I downloaded a copy of Vigilance from the Theme Foundry website and extracted it to my wp-content/themes directory. The version on their website is 1.51 which is slightly more up to date than the version on WordPress.ORG’s site.

2. Create your child theme directory

In wp-content/themes I create a directory called mostlyharmless-vigilance and extracted the files from this zip file into it. This is outlined in The Theme Foundry’s instructions.

3. Modify the CSS on the child theme

In the child theme directory I modified the style.css and added  a few lines:

.center-ad { text-align: center; margin:10px 0 10px 0; }
ul li.widget ul li a {
 display: inline;
 padding: 0;
 background: none;
}
embed {
 background: #fff;
 border: 2px solid #eee;
 }
#wrapper {
 background-color: white;
 border: 1px solid #ccc;
 padding: 15px;
 margin: 25px;
 margin-left: auto;
 margin-right: auto;
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}
body {
 background-color: #ecf1ef;
}

This was to do provide me a CSS class to

1. Provide a class to center my 2 ads
2. Modify how the sidebar links look
3. Put a border around and embedded videos
4. Mess with the wrapper ID
5. And change the color of the body background.

Nothing dramatic and the rounded corners are very 2004.

4. Modify the child theme’s functions.php file

My child theme has one useful line in it like so

php
$GLOBALS['content_width'] = $content_width = 600;
?>

I use oembed to insert YouTube and Vimeo videos into my posts. By adding this line, the embeds become 600px wide when the content supports that.

5. Start modifying files (if you want to)

The Vigilance theme will display that posts featured image if it exists. I comment out that line in index.php to disable the from happening. I copied index.php from wp-content/vigilance into wp-content/mostlyharmless-vigilance and edited line 15

<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail( array(250,9999), array( 'class' => 'alignleft' ) ); ?>

and commented out the if function.

<div class="entry clear">
<?php // if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail( array(250,9999), array( 'class' => 'alignleft' ) ); ?>

Next I copied the header.php file into my child directory and modified the second line DOCTYPE from strict to transitional. Some plugins I use look better in transiti0nal.

Last, I made a copyof single.php and modified it to insert my second ad.

6. Upgrades wont worry me now

The whole point of this exercise was to make changes to the Vigilance theme while not touching the Vigilance theme’s files. When an update to the parent theme comes out, I won’t have to worry about what I’ve changed.  The three files I have modified are easily determined and simple for me to support.

If you only want change the CSS, then it’s even less work and you can skip step #5.