Company Profile

This Is an example of a WordPress page, you could edit this to put Information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content Inside of WordPress. This Is an example of a WordPress page, you could edit this to put Information about yourself or your [More About Us)

This Is an example of a WordPress page, you could edit this to put Information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content Inside of WordPress. This Is an example of a WordPress page, you could edit this to put Information about yourself or your [More About Us)

Figure 4.13. This Genesis child theme is truly enterprising

So which framework is the best?

C'mon, SitePoint, just tell us which is the best!

Well, the best theme framework for you to use is, of course, entirely up to you and your needs. In fact, you might decide that none of them are right for you, and that you'd rather roll your own. Whatever works for you!

For our part, we will work through the next four chapters using the free Thematic framework. It produces some terrific markup full of semantic classes to help you work wonders with CSS, and has an SEO-friendly presentation and plenty of possibilities for adding your own custom code. It's been created especially for the child theme method we have recommended in this book, and it is designed with theme developers in mind. It's also free, which makes it easy for you to play along at home with the examples from this chapter.

Building a Simple Child Theme

Enough theory—I bet you're absolutely champing at the bit to start on your theme. Let's make a simple child theme.

Preparing Your Canvas

To start with, we will assume that you have already grabbed a copy of WordPress to use for theme development and testing, as suggested in Chapter 1. We'll also assume that you've populated your development blog with some dummy content.

It's important to road test your theme with a good variety of content. Of course, if you have your own WordPress blog, you could export your blog's content as a WordPress export file (from Tools > Export), and import it into your dev blog (by navigating to Tools > Import, and then clicking on the WordPress link). Another option is to create that test content by hand, ensuring that you've included lots of different content: large and small images, ordered and unordered lists, blockquotes, paginated posts, and the like.

But the fastest way of all is to grab some dummy content and import it. A good way to do so is with WordPress's very own theme unit testing file, which you can grab from the Codex10—it'll fill your blog with posts of all shapes and sizes, pages, tags, categories, and even some attachments. You could also try the WP Dummy Content plugin,11 which can add and remove zillions of posts with a few easy button presses.

Grab a copy of Thematic from its download page,12 or use the theme browser in your WordPress installation, and install it in your WordPress wp-content/themes directory. Feel free to go ahead and activate it as your theme right now—it's a great opportunity to see how a default Thematic theme looks and works.

View the source of your blog's home page, and you'll see what makes Thematic's markup great: it's stuffed with useful class names, ids, microformats, and more. Here's the body element of my test blog:

<body class="wordpress y2010 m05 d01 h14 home blog not-singular loggedin mac firefox ff3">

And here's one for the div element that surrounds the first post on the page:

<div id="post-86" class="hentry p1 post publish author-raena category-uncategorized untagged comments-open pings-open y2008 m04 d01 h11 alt slug-test-post">

Hey, we did warn you that it was stuffed! I bet you're wondering what all these classes are for, and I'm glad you asked. What makes Thematic's HTML output so useful for themers is that there's usually a class for any purpose you can think of, and that means you can achieve a lot of cool effects without the need to modify the templates in any way. Imagine you wanted to decorate your post headers with a little heart every time you used the tag "love." Well, that's easy, because Thematic creates a class for every tag and puts it on the post's div.

What's all this about dummy content?




For our sample post above we had an untagged class because the post had no tags attached to it, but for posts that have tags you'll see classes that look like tag-tagname. So we're looking to target posts with class tag-love:

.post .tag-love .entry-title { background: url(heart.gif) center left no-repeat

Do you need the first post on your home page to have bigger text? Easy! Thematic gives every post a post number class, and there's a home class on the body tag when you're viewing the home page. So we want to do this:

Should the header be taller on a specific page? Thematic shows you a class for every post or page's ID, so it's a cinch:

body.pageid-14 #header { height: 500px; }

Suffering from a terrible case of the IE6 blues? Put away those dodgy hacks; Thematic's browser, version, and platform classes have you covered:

body.ie6 #branding { /* do IE 6 specific stuff here */

Take some time to look through Thematic's markup and learn about some of the useful classes it provides. Chances are that Thematic's dynamic ids and classes will allow you make some very specific style changes without the need to hack away at the markup.

At this point, it's also worth looking inside the thematic directory to see what makes it tick. Let's check it out: we see a number of PHP template files, some directories, a readme file, and, of course, the CSS for this theme. Most of the filenames should be fairly self-explanatory: the header.php file looks after header logic, post.php relates to how posts are displayed, and so forth. Inside the library folder, you'll find a collection of handy helpers—more CSS, JavaScript, and PHP files—that Thematic uses to work some of its magic. We'll find these useful later on, but if you're the curious type, feel free to poke around and see some of the code that drives this theme.

And hey, what's that at the bottom there? Thematic has even provided its own sample child theme to start us off on the right foot, conveniently called thematicsamplechildtheme. Inside it, there's a style.css file, a functions.php file, and a handy readme, inviting us to kick-start our child theme with these files. I think we'll do just that!

Creating Your Child Theme

Copy the thematicsamplechildtheme directory back up to the wp-content/themes directory, and give it a new name. I plan to call my new child theme "Wicked," so I've named this folder appropriately: wicked.

Next, we'll need to make some changes to the theme information, which is all stored within the theme's style.css file. Open it up in your favorite text editor, and take a look at what's there:

chapter_04/v1/wicked/style.css (excerpt)

Theme Name: A Thematic Child Theme Theme URI:

Description: Use this theme to start your Thematic Child Theme development.

Author: Ian Stewart

Author URI:

Template: thematic

Version: 1.0

Tags: Thematic

Thematic is © Ian Stewart

What's happening here? Well, that big comment block at the very beginning of the file performs a very important job: it defines the theme's title, author, URI, description, tags, and version number. This information appears alongside each theme in your WordPress installation's Appearance > Themes panel, shown in Figure 4.14.

There are two items which are absent from the Manage Themes panel, however. The line beginning with Template: tells WordPress that Thematic is our parent theme, so it should use the templates from Thematic by default. The other line with the copyright statement is also excluded from the WordPress admin section; this is a place to put comments, instructions, or even a good knock-knock joke—anything you like.

Figure 4.14. The Manage Themes panel in WordPress 3, showing Twenty Ten and Thematic

Let's personalize this theme's info now. It's okay if you've yet to decide on a name or a description; we can go back and change this whenever we like, but for now, defining a name at the very least is a good start:

chapter_04/v2/wicked/style.css (excerpt)

Theme Name: Wicked Theme

Theme URI:

Description: A Thematic child theme that's just for kicks.

Author: Raena Jackson Armitage

Author URI:

Template: thematic

Version: 0.1

Tags: Thematic, three-columns, blue, grey, gray

This theme is © 2010 Raena Jackson Armitage.

Keep It Compact!

Line breaks matter to WordPress and these items belong on one line each. If your description is so long that it requires a new paragraph, you might want to think about editing it.

Now that we've named our theme, let's address the Manage Themes panel once more. If you've performed each of these steps correctly, you'll see your theme sitting alongside any other installed themes, with your name, description, and additional information as shown in Figure 4.15.

Figure 4.15. Hey, that's my theme! All seems in order here. Let's activate our theme and start styling it up!

Looking Stylish

For now, we'll start by adjusting the CSS to suit our design a little better. Thematic helpfully provides a bunch of nifty reset styles, prepackaged layouts, typography, and other CSS helpers; if you look further down in the styles.css file, you'll see that they've been imported into our sample child theme. Here's what the rest of the theme's style.css looks like:

chapter_04/v2/wicked/style.css (excerpt)

/* Reset browser defaults */

@import url('../thematic/library/styles/reset.css'); /* Apply basic typography styles */

@import url('../thematic/library/styles/typography.css'); /* Apply a basic layout */

@import url('../thematic/library/layouts/2c-r-fixed.css'); /* Apply basic image styles */

@import url('../thematic/library/styles/images.css'); /* Apply default theme styles and colors */

/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */

@import url('../thematic/library/styles/default.css'); /* Prepare theme for plugins */

@import url('../thematic/library/styles/plugins.css');

The ins and outs of how to work with CSS are beyond the scope of this book—we figure that if you're interested in WordPress theming, you already have some understanding of how to use CSS. For an introduction to the wild and woolly world of the style sheet, it's hard to go past Build Your Own Web Site the Right Way using HTML and CSS, 2nd edition (Melbourne: SitePoint, 2008) and the handy online reference text, SitePoint CSS Reference.13

While the basic design Thematic provides is ... well, nice, it certainly falls short in the glamor stakes. Let's make some changes to the typography, colors, and layout.

The first change is easy: at the moment this theme places a sidebar on the right, but I'd prefer it on the left. Thematic's library/layouts folder provides a bunch of layouts we could apply to our theme: two-column left (2c-l-fixed.css) or right (2c-r-fixed.css), three-column with a sidebar on either side of the main content (3c-fixed.css), or three-column with both sidebars right (3c-r-fixed.css and 3c-r-fixed-primary.css, which differ in the order of the sidebars).

Changing the default is as easy as picking out the one we want, and changing the reference to it in our style.css file. In this case, I want 2c-r-fixed.css to move my sidebar onto the left:

Don't Sweat the Style Sheet!


chapter_04/v3/wicked/style.css (excerpt)

@import url(l../thematic/library/layouts/2c-l-fixed.cssl);

Of course, if none of these imported styles suit your ideas, you're free to remove the @import statements and build your own layout, typography, or default reset style sheets. Remember, you're in control!

Next, let's think about color. Did you notice the helpful little comment about default.css in the code example above? It's reminding us to copy the default.css file to our own theme if we plan to do anything outrageous.

What we're about to do is hardly outrageous, but the advice to copy the file over is solid: let's do that now, and change our @import statement to reflect its new location. Copy the default.css file from the thematic directory into your child theme's directory, then change the @import accordingly. Feel free to change its name; you may want to leave yourself a comment to remind yourself that it's a copy of the original. For the purposes of my Wicked theme, I've renamed the file newstyles.css:

chapter_04/v3/wicked/style.css (excerpt)

/* Apply default theme styles and colors -- This is a copy of the Thematic default.css */ @import url('newstyles.css');

Thematic is released under the General Public License; if you copy its CSS for use in your child theme your CSS will also be bound by the terms of this license. While this may pose no problem for you (plenty of successful commercial themes are GPL-licensed), if you plan on distributing your theme and would prefer a more restrictive license for your clients (see the section called "Dual Licensing" in Chapter 8), you'll need to write your own style sheet from scratch.

The file is a big one—too long to reproduce in this book—but here's an excerpt from it. Take your time and look over it carefully; you'll see that selectors are grouped according to purpose, and there's a style for just about any element you think you might use. We'll start by splashing a bit of paint on the theme's header; we're looking for a section helpfully marked =Header. Here's what we find there:

Was this article helpful?

0 0

Post a comment