What a Difference a Header Makes! Three Theme Transformations

WordPress.com bloggers create some truly bespoke sites using our 200+ themes as a starting point — the possibilities are endless, especially if you’re willing to give CSS a try.

What if you want something that’s more off-the-shelf, but still feels like you? Using a custom header and background — options that are available with most themes, no upgrade or coding chops needed — can completely transform the look of a theme. Not convinced? Take a look at Chef in Disguise, BKLYN Locavore, and The Modage Cottage. We bet you’ll be as surprised as we are at how they started out, and how far they’ve come with just a few tweaks.

Chef in Disguise

Sawsan explores her passion for Middle Eastern food on Chef in Disguise, where her delicate header and complementary background pattern create a soft, welcoming mood that still allows her photography to shine:

chefindisguise

From a theme perspective, it could just as easily be called “Comet in Disguise” — take a peek at its humble origins:

comet-front-page-showcase1

Comet offers clean typography and a simple, single-sidebar layout. Sawsan takes advantage of both these features, then layers her personal touch on top of them. Her lovely header image, graphic yet muted, provides pops of color, while a faded background pattern pulls from the header’s palette and lends more warmth and depth to her site.

“It looks nice,” some of you may be saying, “but I’m no graphic designer. I can’t create a header, or pay someone to make one for me.” Luckily, the vast resources of the internet are here to help. There are many sites where you can download free patterns and textures to use as a background — re-create this look by picking one for your background, and another for your header. Add a bit of text to the header image yourself, or simply upload the pattern and allow WordPress.com to display your blog’s title and tagline over it.

Not sure how to get started? We’ve got that covered, too: visit Subtle Patterns or Squidfingers Patterns, and find the perfect (free!) pattern.

BKLYN Locavore

A New Jersey native transplanted to Brooklyn, Melissa Brody started BKLYN Locavore to share her twin loves of food and food sourcing, with an emphasis on locally-grown and produced foods:

brklynlocavore

You might not suspect that this bright site celebrating all things green would use the darker, more serious Quintus, but BKLYN Locavore is another testament to the power of a custom header and background.

quintus-screen

Melissa uses the standard Quintus layout, with its mix of serif and sans serif fonts and clean custom menu, then transforms it completely with a relatively simple text header and bold background. We especially love her background image, an extremely zoomed-in photo of plants. It reinforces the focus of her blog, creating a softly blurred image that adds color and texture without distracting from her content.

A photo background is an easy and effective way to add an incredibly personal touch to your blog; using a close-up gives your photo a nice abstract quality. Give it a try: pick a photo you love, use a program like Photoshop or an online tool like Picasa to crop out a piece to use for your background, and you’ve got a one-of-a-kind custom image. For more background inspiration, take a look at The Daily Post’s tutorial.

The Modage Cottage

On The Modage Cottage, Kristin Kaylor chronicles her journey from big-city corporate life to small-town shop owner, offering up recipes, fashion, and home renovation tips along the way:

cottage2

She chose to use the extremely flexible ThemeMin, which starts out looking like this:
thememin-showcase

Beyond its default layout, ThemeMin comes loaded with pre-set options: five different color schemes and a variety of mix-and-match options for a home page layout, and that’s before you upload a header.

Kristin opted to put a sidebar on the right-hand side of the page, and to display posts in a single column. Notably, she’s also removed the carousel on top of the home page; by not making any of her posts sticky, the carousel simply doesn’t appear. Instead, she’s added a bright, airy header image that keeps things cheerful and gives her site a breezy feel. (She also uses the Custom Design upgrade to carry those colors through the rest of her site.)

There are two key things Kristin’s choices teach us: first, don’t underestimate the ways a header can set the mood for your blog (and a header that’s largely text, at that). Second, when browsing the theme showcase in search of your perfect fit, keep an open mind and don’t let form eclipse function. Pick a theme because you like the basics — how posts are laid out, what optional features are offered, the menu and sidebar options — and then add details you love. For detailed instructions, take a look at our support documents on custom headers and backgrounds.

The way a demo theme looks is only the starting place. As long as you’re happy with the basic structure and core features of a theme, you can give it a cosmetic makeover to turn it into your Dream Theme — without buying upgrades or learning CSS. A creative approach to your header and background, using online tools available to anyone, can turn a pre-fab theme into a comfy online home.

Other posts in the Customizing series:


Join 93,358,245 other followers

0.000000 0.000000

Posted by WordPress Guru