Feeling kind of penned in?

Thematic's CSS and the GPL

#branding {

padding:88px 0 44px 0;

font-family:Arial,sans-serif; font-size:34px; font-weight:bold; line-height:40px;

#blog-title a { color:#000; text-decoration:none;

#blog-title a:active,

#blog-title a:hover { color: #FF4B33;

#blog-description { color:#666; font-size:13px; font-style:italic;

Changing the colors is simple: I've chosen a dark blue for the background, and that means the text and link colors also need to change:

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

background: #07426c;

#blog-title a { color:#fff; text-decoration:none;

#blog-title a:active, #blog-title a:hover { color: #f47920;

#blog-description { color:#eee; font-size:13px; font-style:italic;

How's that looking? Let's find out: the result is shown in Figure 4.16.

My Wicked WordPress Site

A wicked Thematic child theme.

About Parent page Page with comments Page with comments disabled


To search, type and hit enter

» Page with comments « Page with comments d ► Parent page * Child page 1 • Child page 2

Hello world!

BylfAENA FubiisAed: MAT 19, £uiO lidit

Welcome to WordPress. This is your first post. Edit or delete it, tlien start blogging!

Maecenas ante nisi, placeratvel viverra a, pretium vitae nunc. Dnneclaoreet mollis mauris. quis vehicnla dui vehicula id!

Posted ]n Uiicategorized 11 Comment |Edi:

Figure 4.16. Looking sharp

As I add and adjust more styles, my theme begins to take shape. We'll omit all the gory details from this book, but if you're curious to see what I came up with, feel free to dive into the code archive 14and examine my CSS.

Keep Poking Away at Those Styles

Seems reasonably straightforward, right? It's simply a matter of examining the theme's markup, and finding a way to bring your design to life with your sharp CSS skills. With some keen CSS, and a few hours' poking, prodding, and refreshing, you should have a sharp-looking template. You can see what I achieved in Figure 4.17 using only CSS changes. You can poke through the styles I used in the v4 folder in the code archive for this chapter.15

14 Grab the archive from http://sitepoint.com/books/wordpress1/code.php

15 The header image is licensed under Creative Commons [http://creativecommons.org/licenses/by-sa/2.0/] by Flickr user Seo2. [http://www.flickr.com/photos/seo2/]

Figure 4.17. Wicked!

A Frame to Work With

We've learned how easy it is to boost our theme development efforts with a theme framework—using a framework will save us heaps of tedious setup time, leaving us free to dive into the fun part of making it all look great.

Many themers will find that simply modifying the CSS is all it takes to create a nifty, original child theme. But what if you want to spread your wings a little further? In the next chapter, we'll explore how to add more functionality to a theme.


Advanced Theme Construction by Raena Jackson Armitage

In the previous chapter, we explored how to create a new child theme from the Thematic framework using a few files and some CSS smarts. Now you're probably wondering how to make that child theme work a bit harder for you and put your own stamp on it. If so, this is the chapter for you!

Before we start messing with code, however, it's time to reiterate what we learned in Chapter 4: hands off the parent theme! Even if you decide you absolutely detest the way a particular part of your parent theme works, and you're desperate to change it, it's best to avoid hacking the guts out of the parent theme. We have ways to modify it in a safe, simple fashion.

Understanding how to do so first requires some explanation of how WordPress thinks about your templates—here's the backstory.

How Templates Work

Template files are a blend of HTML and PHP and can contain your own code, as well as calls to WordPress's core functionality. When developing your theme, one of your main tasks will be to look through your parent theme's templates and find the places where the markup you want to modify is being generated. In order to do that you need to have some background knowledge of how WordPress templates work, so we'll start there.

When WordPress renders a page, it checks in the active theme's directory for the right template to use for the type of content it's going to display. How does it know which template file to pick? It depends on the type of page being rendered at the time, and which templates are available for use.

Was this article helpful?

0 0

Post a comment