Indian Flowers

default 750x427 Indian Flowers

This theme, inspired by vintage Indian batiks and tapestries, exudes grace and sophistication.  6 color palettes are available so you can choose the one to fit your mood, office or season.  Built into the theme are our normal treasure trove of customized social networking icons, automagic Twitter hovercards for @usernames and configurable tweet displays, and social bookmarking options on posts.  The theme is optimized for readability and includes built-in WordPress post thumbnails, custom nav menu and widgetized sidebar and footer.

View Demo | Buy Indian Flowers — $60

default 150x150 Indian Flowers
blush 150x150 Indian Flowers
ink 150x150 Indian Flowers


parchment 150x150 Indian Flowers

You might also be interested in these:

  1. AP Museum zine
  2. Scrapbook
  3. Time Capsule

How to add customizable header images and customizable backgrounds to your WordPress theme

One of the coolest new features of WordPress 3.0 is the ability to customize the site header image and background color or image. The custom header actually goes one step further and lets you set a unique header for each of your pages. This means that you can create unique headers that tie into the content of the page without complex if (is_page()) statements or hard coding them into unique page templates. The only problem is that these features need to be added into the theme for them to show up as options in your wp-admin panel and not every free (or even commercial) theme has those options set up and ready to go.

Not all themes are made for big, changeable headers, but for those that are or would adapt well, this gives users a powerful resource far beyond the custom header features that Kubrick, the previous default WordPress theme, offered with its’ ability to change the header color and gradient. Likewise, I’m tentative about giving users the ability to pick a color at random from the 16 million colors at their disposal – it’s too easy to create clashes worthy of the most gaudy GeoCities or MySpace creations. However, used with discretion and a keen eye, these features add a powerful tool to those WordPress users’ arsenal who are just itching to add a little bit of personality to their site without breaking everything.

Our newest free theme, Color Garden includes both custom headers and custom backgrounds, making it our first theme – free or otherwise – to offer both. I also played with custom headers on my recent redesign of jazzsequence.com. For the headers, it’s not the most intuitive thing to add by hand at all, and few of the resources I have found go far beyond quoting the code from TwentyTen’s functions.php file, so we wanted to give our readers just a little bit more to go on if you want to add these features to your blog theme.

Custom backgrounds are dead simple. A single line of code and you’re done:

// This theme allows users to set a custom background
add_custom_background();

Once this is included somewhere in your functions.php file, you will have a Background link under Appearance that gives you options to set a solid color for the background (by hex code or picking from a color map) or upload an file to use as a repeating background image.

Headers are a bit more complex.

To really understand how custom headers work, you need to know how post thumbnails work. Post thumbnails were added to WordPress core in 2.9 and use the built-in resizing process that happens when you upload images to create the thumbnails that will appear next to your post or post excerpt. This is presumably to replace other third-party scripts like the ubiquitous TimThumb which creates its own thumbnails and stores it in a cache folder usually located in the theme folder (although it could really be anywhere). Since WordPress 3.0, what was previously referred to as Post Thumbnail on the Add New Post page is now called Featured Image. This change is reflects the fact that the Featured Image option now controls the post thumbnail or the custom header, and the way it knows the difference is by the size of the image you are using.

Let’s take a look at how to add it to your theme and then we can revisit how to use it once it’s there. The code I will be showing comes from Color Garden although all of it has been adapted from TwentyTen (including much of the comments). Since most other posts I’ve found don’t discuss each piece of the header image function, I will go over each so you understand just what it is that you’re adding and what needs to be changed or left alone.

The first part is here:

// Your changeable header business starts here
// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
define( 'HEADER_IMAGE', '%s/images/headers/leaves.jpg' );

The key thing to pay attention to in this snippet is the HEADER_IMAGE definition. This is the default header image. If this is left blank or set to an invalid path, no image will show up, and depending on your CSS, the layout might break. In TwentyTen this is set to %s/images/headers/path.jpg. You’ll probably want to put something here even if you plan on changing it later, and you’ll want to make sure the image actually exists where you say it exists.

The next part sets the height and width of your header image:

// The height and width of your custom header. You can hook into the theme's own filters to change these values.
// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'cg_header_image_width', 1000 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'cg_header_image_height', 343 ) );
 
// We'll be using post thumbnails for custom header images on posts and pages.
// We want them to be 1000 pixels wide by 343 pixels tall.
// Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php.
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );

Notice that we’re using set_post_thumbnail_size with the header image’s dimensions. This is because the custom header function uses the existing post thumbnails function from 2.9 and builds onto it. As the comments indicate, images that are equal to or larger than the height and width definitions will be resized to fit and set as the header image when you add it to your post or page. Anything smaller will be ignored and set as the post thumbnail (if post thumbnails are enabled).

The last part of the custom header function is this:

// Don't support text inside the header image.
define( 'HEADER_TEXTCOLOR', '' );
define( 'NO_HEADER_TEXT', true );
// ... and thus ends the changeable header business.

The NO_HEADER_TEXT and HEADER_TEXTCOLOR add the ability to change the color of the text that appears in the header. The alternative (pulled from the WordPress Codex) would be to use:

define('HEADER_TEXTCOLOR', 'ffffff');

and omitting the NO_HEADER_TEXT line.

Now this part is done, you’ve enabled custom headers and defined a default. But what if you want to have multiple defaults like TwentyTen? In that case, we go back to TwentyTen’s functions and keep digging:

// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
register_default_headers( array(
 
'leaves' => array(
'url' => '%s/images/headers/leaves.jpg',
'thumbnail_url' => '%s/images/headers/leaves-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Leaves', 'cg' )
),
 
'sunset' => array(
'url' => '%s/images/headers/sunset.jpg',
'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Sunset', 'cg' )
),
 
'beach' => array(
'url' => '%s/images/headers/beach.jpg',
'thumbnail_url' => '%s/images/headers/beach-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Beach', 'cg' )
),
 
'blueberries' => array(
'url' => '%s/images/headers/blueberries.jpg',
'thumbnail_url' => '%s/images/headers/blueberries-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Blueberries', 'cg' )
)
) );

Again, we’re looking at the code from Color Garden but it’s adapted from TwentyTen’s functions.php. Each item in the array above defines one of the default header image options. Color Garden has four default headers to choose from to go with the four color schemes built into the theme. All we’re really doing here is adding the path to the image, the path to the thumbnail of the image that appears on the Headers page in the WordPress backend, and the description which – as far as I have been able to tell – really only affects the alt text of the image in the backend.

All said, what you should be looking at in your functions.php file when you’re done is this (if you’re including multiple default header images):

// Your changeable header business starts here
// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
define( 'HEADER_IMAGE', '%s/images/headers/leaves.jpg' );
 
// The height and width of your custom header. You can hook into the theme's own filters to change these values.
// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'cg_header_image_width', 1000 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'cg_header_image_height', 343 ) );
 
// We'll be using post thumbnails for custom header images on posts and pages.
// We want them to be 1000 pixels wide by 343 pixels tall.
// Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php.
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
 
// Don't support text inside the header image.
define( 'HEADER_TEXTCOLOR', '' );
define( 'NO_HEADER_TEXT', true );
 
// ... and thus ends the changeable header business.
 
// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
register_default_headers( array(
 
'leaves' => array(
'url' => '%s/images/headers/leaves.jpg',
'thumbnail_url' => '%s/images/headers/leaves-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Leaves', 'cg' )
),
 
'sunset' => array(
'url' => '%s/images/headers/sunset.jpg',
'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Sunset', 'cg' )
),
 
'beach' => array(
'url' => '%s/images/headers/beach.jpg',
'thumbnail_url' => '%s/images/headers/beach-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Beach', 'cg' )
),
 
'blueberries' => array(
'url' => '%s/images/headers/blueberries.jpg',
'thumbnail_url' => '%s/images/headers/blueberries-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Blueberries', 'cg' )
)
) );

What I haven’t said yet is that in every instance that cg appears in the code, this specifically references Color Garden. In TwentyTen it’s twentyten. You can put whatever you want here so long as it remains internally consistent.

After you’ve got your functions.php set up, you still need to add in some code in your header.php to actually display the custom header image. What we have in Color Garden is taken almost verbatim out of TwentyTen.

	  <?php
          // Check if this is a post or page, if it has a thumbnail, and if it's a big one
          if ( is_singular() &&
                  has_post_thumbnail( $post->ID ) &&
                  ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
                  $image[1] >= HEADER_IMAGE_WIDTH ) :
              // Houston, we have a new header image!
              echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
          else : ?>
              <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" class="masthead" />
          <?php endif; ?>

This is where the theme asks “what is the size of the featured image?” and, based on the size, determines whether it is a header image or a post thumbnail.

Now, obviously there needs to be some CSS styling involved and you may or may not want your header image to be 1000 pixels wide by 343 high like ours is in Color Garden. We added a “masthead” class to the image so we could isolate styles to our header image. But, if you’ve made it this far, you’ve got everything you need to tweak the code to suit your theme. The custom headers function is exciting because it doesn’t need to be limited to just header images. You can use it wherever you might want a customizable image in your theme, and there’s more than a few creative uses I can think of beyond headers for something like that.

You might also be interested in these:

  1. How I fixed the “cannot redeclare _checkactive_widgets()” error in WordPress child themes
  2. How to upgrade your Museum Theme to the most current version after you’ve made changes to the files
  3. 12 Free WordPress Themes I Like (and you should, too)

12 Free WordPress Themes I Like (and you should, too)

Just because we built free WordPress themes and Museum Themes doesn’t mean we can’t appreciate the good work of others.  In fact, it’s through watching what’s going on in the greater WordPress theme community that gives us ideas, keeps us on our toes, and informs us of trends and what people are interested in.  Here are some interesting free WordPress themes that I like.

In no particular order:

1. P2, by Automattic

P2 is a revolutionary concept for a WordPress theme, namely — make WordPress act like Twitter.  P2 live updates allowing realtime commenting on posts.  Anyone with an account can post something, and, since it’s WordPress, what you can post ranges from a short tweet, to a full length post with multimedia content.  Matt Mullenweg even said that P2 changed the way Automattic communicated.

p2 750x432 12 Free WordPress Themes I Like (and you should, too)

View Demo | Theme Homepage | Download

2. Modern, by Ulf Petersson

Modern has been around for a few years (when it was released in its final 0.9 version, the latest browsers were Opera 9 (beta), Firefox 1.5, and Internet Explorer 6), but it still looks…well…modern.  The reason is its minimalist simplicity which gives it a timeless look.  The subtle splashes of color against the mostly white and light-gray backgrounds give the theme a playful and welcoming feeling.

modern 750x432 12 Free WordPress Themes I Like (and you should, too)

Theme Homepage | Download

3. Motion, by 85ideas

Motion’s dark, textured light and watercolor background and dark semi-transparent borders and frames tell me that this is a designer after my own heart.  It’s truly a gorgeous blog theme with a cool ocean-on-a-clear-day palette.

motion 750x432 12 Free WordPress Themes I Like (and you should, too)

View Demo | Theme Homepage | Download

4. Pixel, by 85ideas

Another theme by 85ideas, pixel also uses semi-transparent backgrounds, this time playing with concepts of light and dark.  A mostly-dark theme, Pixel has a lot of the same design ideas as Microsoft’s Windows Aero, responsible for that attractive glass-like effect in Windows Vista and Windows 7.  Pixel is perfect for a tech- or design-centric blog.

pixel 750x432 12 Free WordPress Themes I Like (and you should, too)

View Demo | Theme Homepage | Download

5. Piano Black, by mono-lab

Piano Black is a stunningly beautiful theme that makes you feel like you’re inside the machine.  The use of light and shade, dark transparencies, and bright hover colors over the gray and black background allude to LED displays on dark plastic and metal.  This theme uses WordPress 3.0 custom menus and jQuery sliding effects for dropdowns, back to top links and a lovely image zoom feature.

pianoblack 750x432 12 Free WordPress Themes I Like (and you should, too)

View Demo | Theme Homepage | Download

6. Retromania, by Jay Hafling

We’re well acquainted with how hard a sell it is for niche themes to catch on.  The general rule is to appeal to the critical masses, get lots of hits, links and downloads, but it’s often at the risk of doing something really interesting and creative with design.  But by no means does that mean that they shouldn’t be done, and Retromania’s kitchy 50s throwback feel is definitely worth checking out.  He even has PSD source files available to download if you don’t like the default header images (of course, you’d need PhotoShop or something else that knows what to do with a .psd).

Theme Homepage/Demo | Download

7. Urban Life, by Jay Hafling

Another one by Jay Hafling, Urban Life shares Retromania’s light grunge, but rather than being vintage-centric, this one has an inner city vibe, with a city skyline in the header (silhouetted in the footer) and a striped band in the header and behind the sidebar boxes evocative of Warning! signs or caution tape.  Urban Life also has a built-in contact form (some configuration required), which lightens up the load on your site by eliminating the need to pull in a plugin to do that for you.  For those inclined to work in Photoshop, he also has his Photoshop source files available for this one as well.

Theme Homepage/Demo | Download

8. Mimbo, by Darren Hoyt

Darren Hoyt’s name is known in the WordPress theme community, and part of that is a result of this theme.  Mimbo is an oldie-but-goodie, packing dual-navbar action, configurable sidebars, and a home page layout that could make lesser news sites weep.  For developers, it can be used as a theme framework, upon which child themes can be built.  Darren Hoyt is also responsible for TimThumb, the little script that’s been pretty much single-handedly responsible for displaying post thumbnails on blog pages until WordPress added that feature in 2.9.  Now almost 3 years old, Mimbo still holds its own in magazine-style themes.

mimbo 750x432 12 Free WordPress Themes I Like (and you should, too)

View Demo | Theme Homepage | Download

9. Dark Zen, by DailyBlogTips

Dark Zen is a minimalist theme suitable for just about anything you could want to use it for.  It has a simple, stylish design with a spacious sidebar, built-in social bookmarking and room for adding banner- and sidebar ads.  If you’re looking for something to use as a theme framework for something new, the bullet-proof layout of Dark Zen is a good choice.

dark zen 750x432 12 Free WordPress Themes I Like (and you should, too)

View Demo | Theme Homepage | Download

10. Structure, by Organic Themes

Structure knocks my socks off.  It’s simultaneously bold and minimalist, with huge post thumbnails and multiple columns.  In that sense, it’s similar to Mimbo with a bigger featured content area, but it’s taken to a whole new level with the jQuery slider for featured posts (only available in the premium version).

structure 750x432 12 Free WordPress Themes I Like (and you should, too)

View Demo | Theme Homepage | Download

11. The Morning After, by WooThemes

The Morning After is quite possibly my all-time favorite theme, ever.  The story goes that the author, Arun Kale, surveyed WordPress users and asked what they’d like to see in a magazine-style theme and The Morning After is the result.  Just a few weeks ago, the Arun contacted WooThemes and asked them if they’d be interested in taking the reigns for developing and maintaining TMA, and it is now, officially, a WooTheme.  TMA has a unique, slim header image that can be customized for different pages.  It’s got different styles for Asides (now called Updates) and built-in post thumbnails.  It’s got a little configurable description area above the sidebar on the home page and different page layouts depending on what you’re looking at.  It is, in short, awesome.

the morning after 750x432 12 Free WordPress Themes I Like (and you should, too)

View Demo | Theme Homepage | Download

12. Mansion, by Graphpaper Press

Wow.  I’ve seen some interesting grid layouts for themes, and I’ve seen some awesome photography themes, but this one tops both.  Bearing more in common with an image gallery than a blog, Mansion creates a mosaic of images pulled from your posts that can be sorted by category.  It also comes with a page template for your blog, which takes a similar approach to your posts.  Images gently light up when hovered over, as does the navigation area.  And all of it sits on top of a black background, giving it a lightbox-like effect.

View Demo | Theme Homepage | Download

Of course, I can’t end a post on free WordPress themes without so much as a nod at our own free themes area.  And as I said, we often take inspiration from other themes.  So, you think there’s some ideas brewing for new themes in our devious little brains?  As Sarah Palin would say, “you betcha.”