The awesomeness that is WordPress and child themes

After a long long long time, I decided to get back into some actual website experimentation. For a while, I was really lazy with my site design and settled on using the Atahualpa theme. This was a great be-lazy theme, but I noticed that while browsing other sites, it often became too obvious which sites were made using the theme and me, always wanting “my own thing” decided that it was time to get my hands at least a little bit dirty again.

I had posted a little while ago about my excitement and my disappointment over the Google Font Directory and that had inspired me to look into other ways to get some custom fonts online. Font Squirrel offered a great free @font-face generator, so I loaded up my Mr. Grumpy fonts and decided to see what I could do with it.

With my fonts ready, I decided to get back into my own theme design. This time, rather than designing the theme from scratch, I decided to create a child theme for one of the better theme frameworks I found: Thematic.

For those of you who don’t know what a child theme is, think about it this way. WordPress periodically needs to be updated (to fix bugs, add new features, enhance security, and so on). When you host your own WordPress installation, you’re also tempted (at least nerdy people like me are tempted) to customize the themes they use, and in the past, that often meant making edits to the original theme files. But just as WordPress needs to be periodically updated, so to does its themes (for example, when WordPress added widget support or post thumbnail support, theme modifications were required). When you updated your theme, however, all of your customizations would them be lost.

Child themes solve this problem by letting you use a well-structured theme that is up-to-date with all the WordPress features you need, creating a new folder in your WordPress themes directory for your child theme, and creating a new theme by doing as little as creating a new stylesheet that imports the styles from your chosen template. If you need to make more significant changes to the parent theme, instead of modifying the actual theme files, you create a “functions.php” file in your child theme directory. So, for instance, if you’ve decided that you don’t want the “access” div that’s present in the Thematic framework, you can remove it by adding the following to your functions.php file:

// Remove Thematic access
function remove_access() {
  remove_action('thematic_header','thematic_access',9);
}
  add_action('init','remove_access');

Or, if you want to add something to the head of your page (like some extra JavaScript or something) you can add something like the following:

function yourfunctionname() { ?>
  <script type="text/javascript">
    Your Fancy javascript
  </script>
<?php }
add_action('wp_head', 'yourfunctionname');

In the above snippet, the first line starts with naming our function, and ends with { ?> which switches us out of PHP so we can add normal HTML. The last line is where we make the call to the function that we just defined. There are some good instructions at the Thematic Theme Framework Guide for how to use the different Thematic hooks and filters to create a truly customized site.

As I was making these changes, A List Apart published a great article about full-screen backgrounds and, of course, I had to try it out. But, I wanted to take it a little bit further: make the background change with each page. So, for that, I used Matt’s random image script and put that into my stylesheet. This is something I might change though. It seems like referencing the PHP file in the CSS works as I expected with Opera and Firefox (a different background image for each page) but with Chrome, it loads a different background image only once each session (which is also OK, but not what I was looking for). (From A List Apart, I also borrowed ideas for using CSS transparency and rounded corners, as well as their ideas for applying different CSS rules for different window sizes.)

Here are a few snippets of the CSS customization.

For the transparency and rounded corners for the header area and the main text area:

#branding {
  margin-top: 20px;
}
#main, #branding {
  background-color: #F8F8F8;
  border-radius: 12px;
  margin-bottom: 20px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  filter: alpha(opacity=90);
  -khtml-opacity: 0.9;
  -moz-opacity: 0.9;
  opacity: 0.9;
}

For centering the page if the screen is small and floating the content to the right if the page is wider than 1280 pixels:

@media all and (min-width: 1280px)
  {
    #branding, #main
      {
        float: right;
        margin-right: 20px;
      }
  }
@media only all and (max-width: 1024px) and (max-height: 768px)
  {
    body
      {
        background-size: 1024px 768px;
        -moz-background-size: 1024px 768px;
      }
  }

For getting a random image each time the page is rotated. Instead of mentioning an image URL like you normally would, you instead mention the rotate image script I referenced earlier.

body {
  background: #fff url(rotatebg.php) left bottom fixed no-repeat;
  background-size: cover;
  color: #000;
  margin: 0;
  -moz-background-size: cover;
  padding: 0;
}

Maybe eventually, when I get around to tweaking this a bit more and testing it in some other browsers (I’m not even going to bother being nice to Internet Explorer) I’ll package up the child theme and share it….

comments powered by Disqus