How to Approach Making Basic Customizations to Your WordPress Theme

4 Comments

When someone installs a WordPress theme, whether it be free or premium, it is not uncommon for that person to want to modify the design a bit.

This isn’t because the design the theme came with is not what they want, but rather because they need the theme to match their brand. It needs to be distinguishable from the theme’s default design–which could potentially be in use on hundreds or even thousands of other sites, depending on the theme’s popularity.

That’s why in this post I’d like to offer up a few basic tips for customizing your WordPress theme that anyone–from WordPress beginners to experts–can use. These tips will help you get the most out of both free and premium themes by keeping the big contributions of the theme author/designer in tact, while changing just the right amount to set your site apart from the crowd.

WordPress-Customization

Most of the customizations covered in this post can take place in WordPress’ customization section. Especially if you install a custom CSS plugin like Jetpack.

Design Tips for Making Basic Customizations to Your WordPress Theme

Most free and premium WordPress themes are meant, more or less, to be used as they are designed without significant editing. However, even when sticking to small changes there are plenty of ways for WordPress users to muck up a perfectly good design as they attempt to create something uniquely theirs.

In fact, it’s quite easy. I’ve found that it’s the seemingly small but site-wide changes that really get you in trouble. Such as your choice of colors, fonts, images, and use of widgets. My tips below are meant to mediate this delicate process and give anyone who needs them easy to follow guidelines–as well as some associated tools/resources for each tip.

Let’s begin!

How to Choose (And Apply) a Color Pallet

Color-Palettes

Websites like this are a great tool for finding color pallets that work.

Choosing the right colors for your site can be difficult. What may appear so obvious when seen in others’ site designs (such as choosing three to five colors that work well together) can feel like trying to speak a foreign language to those not trained in color theory. And that’s because color is a language. One you have to learn and practice in order to be fluent in.

I’m going to go out on a limb here and guess that most WordPress users are not trained in color theory or have any design experience whatsoever. Meaning they don’t exactly have a lot of color language fluency to work with. But even a complete novice can learn a few rules or use a few tools that make it easier.

Following these guidelines below should work a lot like having a phrase book, you may not know the language but you can cover the essentials.

A Few Things to Consider When it Comes to Color

1. Color and mood go hand-in-hand. Think about what you want your site to feel like before settling on your color choices.

2. Think twice before going with true black or true white. Neither are bad, per se, but both can be jarring and hard on the eyes if looked at for too long. I’ve found that true black and true white are best for displaying images and products. Off-black and off-white, on the other hand, can do wonders for readability; promoting a sense of comfort and warmth.

3. Darker colors are best for headers and footers.

4. Brighter colors (when not avoided altogether) are best when used as minimal accents. But rarely as your link color; they’re not very readable.

5. Instead of adding more colors when something needs to stand out (such as your page/post titles and headlines) think in color scales. Various shades of black and grey will help your text feel more readable and harmonious. The same can be said of the relationship between navigation menus and your header/footer.

In many cases another color is not needed at all, but rather a different shade of the same color. Such as two shades of dark blue to separate but tie together your site footer from your footer widget area.

A Few Tools for Choosing the Right Pallet

1. Color-HexA website full of free color pallets with the codes needed to implement them on your WordPress site.

2. ColorPick EyedropperA chrome extension for capturing the exact hex code of any element or image you come across in your browser.

How to Get the Most Out of Your Site’s Typography

Typography

Looking at typography inspiration and resources like this can really help to improve your font decision making.

Ideally, your theme should come with solid typographic choices already picked out. Especially if you’re looking to do a lot of blogging. That said though, it’s not uncommon for site owners to want to put their own font choices into play. In that case…

Some Typography Tips to Follow

1. Don’t use too many. In most cases two different fonts will work best. One for body text and the other for titles and headlines.

2. Focus on readability. No one will care how cool your font looks if they can’t read what you have to say.

3. When it comes to pairing fonts: think in opposites; pair a serif with a sans serif, bold with thin. Or, keep it all in the family by simply choosing two different weights of the same font family.

4. Try to match the mood of your font choices with those of your color. And both to the content of your website.

5. Experiment. Sometimes you just don’t know what works until you try it.

A Few Typography Tools/Resources

1. Google Fonts. They also have a nifty little pairing tool that helps you choose fonts that work well together.

2. Easy Google Fonts Plugin. This plugin brings the whole Google Fonts library into your WP Admin.

3. What Font Chrome Extension. Allows you to see what font is being used on any website you visit.

3. I Font You. An inspiration source.

4. Font Pair. Another inspiration source.

5. Typewolf. A final inspiration source.

Things to Consider When Altering Your Header/Logo Area

Creative-Logo-Design-Fiverr

If you can get a decent logo at a low price, it’s often the best solution.

A lot of themes provide simple ways to alter your theme’s header color and/or image. You are typically able to swap out your site’s title/subtitle for a custom logo.

A Few Things to Keep in Mind During that Process

1. If you decide to use an image for your background, quality is everything. That includes, among other things, that the image is actually large enough to not be stretched or otherwise distorted.

2. A good font choice for your site title is better than a crappy logo.

3. If you must have a logo (and are not a designer) try using an affordable service instead of patching something sub-par together.

4. Bigger is not better. Take a look at most of the larger blogs/websites you’re aware of. Take note of the size of their site title/logo. In most cases it is not some massive, all header dominating thing. It’s reasonably sized and elegant.

A Few Tools/Resources for Header/Logo Design

1. Fiverr. A very reasonably priced way to get a logo done.

2. Unsplash. A great resource for high quality royalty free images.

3. All of the color and typography stuff above!

Remember: Less Really Is More

And finally, it pays to remember that adding another image, widget, color, or whatever is usually not the answer. Stripping your site down to just the essentials–and making sure those are really well done–is what makes a web design shine. It will give your site a feeling of balance, sophistication, and beauty.

An Example: My Recent Site Re-Design

Like many of you, I am not a designer. But I can follow the advice I’ve read about and gleaned from working with designers. Which is how this post came to be. So it’s only fair I share with you where following my own advice got me and my site.

I began with what was essentially the default setting of WooThemes’ flagship theme, Canvas.

WooThemes-Demos-Canvas

WooThemes’ Canvas Theme’s Default Design

As you can see, it is very black and white. The font choices are O.K. They’re readable but not necessarily pleasant for long reads, which I’ve been known to produce from time to time.

Additionally, the only real splashes of color are the social links. Nothing wrong with that per se, but it also doesn’t promote my brand. It promotes the various brands of the social networks I’m linking to.

So I took my own advice from above and ended up with the following.

Example-Blog-NathanBWeller.com

This is what my blog looks like after following my own advice above to modify the Canvas theme.

I ditched the hard black and whites. Instead I opted for various levels of muted black and grey for my top navigation, title, headlines, text, footer, and background.

When it came to choosing my color pallet I thought about what I write about and how I could incorporate that into my design.

I write about stories and storytelling. One of my hobbies is collecting campy art based on campy stories–usually detective or sci-fi from the 60’s. I don’t know why, it’s just always been something I found funny and cool. Simple as that.

As I thought about this I realized that the background of my computer was a painting for the 1960’s classic Barbarella. Why not work with that?

barbarella

Image via

As you can see, there is this great burnt orange, yellow, and green color pallet in there that I wanted to see what I could do with. So I pulled up the color hex website I linked to above and found approximate matches for the three colors I liked the most in the piece. After I had the hex codes it was just a matter of changing the associated settings and/or CSS.

I also decided that I wanted to put a premium on my typography choices. I’m a writer after all, and if I’m doing what I do well then people will be sticking around for some long reads. So I looked around at some of my favorite blogs and use the What Font chrome extension to identify a few fonts that would work well together.

Example-Blog-Post-NathanBWeller.com

This is an example of a blog post and how the font/color decisions I made are working together for readability.

I also opted for an attractive font instead of a logo. As I said earlier, I’m not a designer and so I didn’t feel up to the task of creating a great logo. But beyond that, it felt true to myself and my content to make another design choice based on words.

And there you have it! It’s not going to win any design awards, I know, but I think it is fair to say it is more attractive than the default version I was using. On top of that, I was able to make it true to my content and personal brand.

Ultimately though, I’m taking my queue from my readers. If my analytics are any judge, they appreciated the design update too. Traffic is up by almost a 1/3!

In Conclusion

Having a beautiful, highly readable, highly sharable website does not require a design genius. Just a few solid guidelines and some good choices. If you follow the tips in this post you may not blow away the top designers on the web, but what you will get is a website that is pleasant to visit and gets out of the way of the most important thing of all–your content.

What are your thoughts on the tips above? Did I miss anything? Take a minute or two to share your thoughts with the community here in the comments below.

Newsletter

We never spam. Subscribe to receive inspiration, news, and ideas in your inbox.

 

Nathan is a professional writer and digital publisher. He's been using and writing about WordPress since 2010 and enjoys supplying useful WordPress news, reviews, tips, tricks, and tutorials. You can connect with him at his personal website or on facebook and twitter.

 

Our Themes

Zap

Zap is a premium business theme with an amazing set of unique features like before/after slider, team profile, testimonials, and…
This is a premium WordPress blogging theme that is well suited for all kinds of blogs. Whether it is a travel…

Guide to Getting Started with WordPress

Twelve free easy-to-follow blog posts covering all the essentials every WordPress user needs to know.

Cohhe WordPress tracks

Get news by email

We never spam. Subscribe to receive inspiration, news, and ideas in your inbox.

More from our blog

Top 20+ WordPress Music Themes For Musicians

WordPress is the most popular online platform for building websites. It is…
Continue reading

20+ Best WordPress Directory Themes

Are you looking to create a directory for a car dealership, real…
Continue reading

WordPress Popup plugin

Popups is a great tool for marketers but you have to be…
Continue reading

Leave a Comment

4 Comments
    • anna d
    • April 13, 2015
    Reply

    Hey, Thanks for sharing this information. I was searching that kind of article since 2 hours to make a report. I am really happy that I found it on your site.

    • Samedi Amba
    • March 3, 2015
    Reply

    thanks Nathan. Liked the way you turned around canvas. your advice is noted for future adoption