How to Brand Your WordPress Theme: Tips for Making a Template Work for You
First, you’ve got to decide whether to use WordPress.org or WordPress.com?
Then it’s time to tackle themes. Which one is right for your brand? And more importantly, which theme will help you stand out from the thousands — even millions — of business owners using WordPress to build their sites?
If you’re stuck on one these questions, we’ve come up with this straightforward guide to help you not only choose which theme is best for you but also how to brand it to make it work for your needs.
The Basics of WordPress Themes
First, a little vocab lesson. A WordPress theme is a grouping of templates and style sheets that make up the display of a WordPress site. Each theme includes a distinct design and layout, as well as included features.
Within each theme, a template represents the preloaded feature found in your theme. For example, a theme may contain a template for the header, sidebar navigation, and columns of text.
Style sheets (often referred to as CSS — “cascading style sheets”) refer to the visual formatting and appearance of the HTML for a WordPress site. This is the coding that occurs in the backend of your WordPress site.
When you first install WordPress, you’ll be provided with a basic, free theme for your site. While you can stay with this option exactly as is, it may not be exactly what you need for your website.
Instead of just going with the first option provided by WordPress, I recommend thoughtfully choosing a theme and customizing it to create a website that is more personalized to your brand and what your clients are looking for.
How to Choose Your Theme
Before you do anything — and I mean anything — step away from your screen and get analog.
Take out a piece of paper and your lucky pen, and sketch out what you want your website to look like. It may seem silly, but taking this approach is an important step before you even get into looking at all of the available themes.
Knowing which elements you want to include will help you cancel out themes that may look appealing, but otherwise, won’t suit your needs. For example, you may be drawn to the look of some photography-specific themes. But if you’re a small PR firm, a photography theme probably isn’t what you’re looking for — or what your clients need.
For now, ignore everything about style (fonts, colors, images). It’ll be much easier to add these stylistic details after you choose a theme that has the elements you need.
Think of it the HGTV way: If you are designing a kitchen, you need to think about the specific elements you require first — you need cabinets that correctly fit the space, appliances, a sink, etc. Choosing cabinet hardware, backsplash for the walls, and overhead lighting before designing the layout of your kitchen just doesn’t make sense. Those details are easy to swap in and out quickly, but changing your cabinet peninsula to a standalone kitchen island is a much bigger deal.
DreamHost makes professional web design easy! Sign up for a FREE consultation with RipeConcepts, one of the world’s leading creative and web design firms.
Focus on Elements
When you picture your future website, what do you envision? Start by thinking about potential layouts with these questions.
- Do you want a header? Is it going to contain your brand’s logo? Is the header going to be a feature item — i.e. large and in charge — or more subtle?
- Do you want your clients to use a top nav, sidebar, or both? What side do you envision your sidebar on the page?
- Are you running advertisements on your website? If so, where will they go?
- How much content do you need on your homepage? Consider if you want multiple columns or just one. How wide does it go on the page?
- Do you want a footer? Psst, you should.
- Any other must-have elements? Add them to your sketch.
Think About the Competition
As a business owner, you know that your brand does not exist in a vacuum. When coming up with a business plan or thinking about your products, you probably scoped out the competition.
Perhaps you used another brand as an example for you when you started — what did you like about that brand? What didn’t you like? This type of research, even in its most simple form, also applies to your preliminary work with building your web presence.
Open that laptop back up (finally!) and take a look at some of your competitors’ websites. Take down some notes about what you like about these sites as well as what you don’t like. If you love a competitor’s color scheme but think their navigation is clunky, write that down. If you observe that a lot of competitors using WordPress tend to use the same unmodified theme, you’ll know that’s one to avoid so you can set yourself apart from the pack.
All of these notes will help you when you’re looking through themes.
This research can extend outside of your specific industry too. Visit websites you like and take note of what you like about them. Some of the elements may not apply to your brand, but there might be some aspirational pieces you can pull into your project.
Now that you’ve viewed a bunch of other sites, revisit your sketch, and be sure to add any other elements that you may have missed on your first pass.
View the Available Themes
When you go to the WordPress Theme Directory, you’ll notice that there are a lot of options — like thousands of them. Now, you could look at every single available theme, or you could take a few shortcuts to help narrow it down.
Resist your impulse to browse through the themes visually since that would take forever and a day. Instead, select the “Feature Filter” option. This will allow you to select some of those must-have features you came up with during your research phase and apply them as filters to your search.
Say you knew you wanted a left sidebar and e-commerce functionality. You can apply those two filters, and then your search results will just include themes with those options. Applying filters will take you down from a couple thousand to a couple hundred — or less!
You can also use the search bar to help give you a more curated sample of themes to choose from. If you need more options, check out the “Popular” tab, which showcases a couple thousand themes that are sorted by their download frequency.
But before you select a popular theme, be sure that it has what you need — clicking into any theme will give you a summary of what it includes as well as its ratings. You may see a theme with excellent reviews, but it might be designed for authors and not e-commerce retailers. Similarly, you may find a theme that checks a lot of your element boxes but could have poor reviews. Choose a theme thoughtfully to ensure a successful experience.
Customize, Customize, Customize
Once you have a theme that has all of the elements you need, it’s time to dress it up with customization. This will help you stay on brand and separate you from the competition. Now is the time to think about all of the style voices you silenced in our earlier exercises.
Add Your Brand Assets
When a customer or client visits your website, you want them to know right away that they’re visiting your website, and not somebody else’s. That means it is critical to include your brand assets, including your custom URL, logo design, and trademark. If you don’t already have a custom logo, make this important step in your branding process. A well-designed logo — much like a well-designed website — will set you apart from the competition.
Once you have your custom logo design, think about where it belongs on your website. Do you envision your logo on the top header? Is it sized large and bold, or is it more subtle? Does the logo stand alone or overlay a background image in the middle of your page? These are questions you’ll need to ask yourself as you begin to brand your WordPress theme.
Branding-wise, it’s a good idea to have your logo appear on every page of your site. That’s not to say it has to be the center of attention on every page, though. Consider emphasizing your logo on your homepage by increasing its size, placing it more toward the center or even bringing it to life with an animation. This way, visitors connect with your brand from the second they land on your homepage.
Then, to avoid redundancy, choose a smaller, well-situated place for your logo to appear on the rest of your site pages. If you have two versions of your logo — say a text-based wordmark and an image-based combination mark — switch it up by displaying the more visual version on your homepage and the wordmark throughout the rest of your site.
Customize Your Colors
Each WordPress theme comes with preloaded colors, which may make it easy to get started, but they definitely won’t be unique to your brand. Like adding brand assets to your site, you should customize your page’s colors to be consistent with your brand palette.
If you don’t already have a brand palette, consider color psychology when you’re selecting your colors.
People respond and react to colors differently — just think about how you feel when you see a red stop sign. Now imagine if that stop sign was pink; it instantly feels different, doesn’t it?
When it comes to your business, choosing colors can help (or hinder) your communication with potential clients and customers. Here are some quick meanings associated with colors when it comes to emotional psychology:
- Red demands attention. It also signifies passion and importance.
- Orange inspires playfulness. It signifies friendliness and energy.
- Yellow signals happiness and optimism, but can also offer a warning sign.
- Green calls to nature/natural elements and also represents stability and prosperity.
- Light Blue makes people feel relaxed. It inspires trust and openness.
- Dark Blue corresponds with professionalism and security. It is a formal color.
- Purple was originally the color of royalty and still signifies luxury. It also says creativity.
- Pink is the color of femininity and also calls to youth and innocence.
- Brown is both rugged and earthy, as well as old-fashioned.
- White is a clean color and suggests healthfulness. It is a virtuous tone.
- Gray is a neutral and subdued color. It can also make people think of gloom.
- Black means power and sophistication. But it’s also an edgy color.
Color theory can be applied to your logo design, and it can also be used on your website. The idea is that color choice will influence behaviors, reactions, and feelings. Put simply, using the right website colors will get your audience to interact with your brand the way you want them to.
Take a moment to think about major financial institutions — Chase, Visa, Capital One, Barclays, CitiBank, Paypal, Prudential, Bank of America, and American Express. In addition to sharing the same industry, all of these companies have another thing in common — the color blue. Most (or in some cases, all) of their logos and website palettes are comprised of the color blue. Blue, as we know from color theory, inspires trust and makes people feel secure. These brands clearly thought about color psychology when designing their logos and digital platforms.
However, the colors that will be most effective for your website ultimately depend on your brand and your customers. Think about it; the colors and language that resonate with shoppers of ultimate sports apparel, for example, are probably vastly different from customers shopping for life insurance.
Know Your Fonts
Like colors, fonts are a simple yet effective way to brand your WordPress website. Knowing about the different styles of fonts and how to use them together will help make you communicate your message effectively. There are four kinds of fonts, and within those fonts, there are thousands of typefaces. Here are some quick notes on the four font types:
1. Serif Fonts
Serif fonts are the term-paper standard — think Times New Roman and Cambria. These fonts are distinguished by their serifs, the little feet at the end of letters. Serif fonts are generally serious and traditional.
2. Sans Serif Fonts
Sans serif fonts are fonts without, wait for it, serifs. Helvetica and Arial are commonly used sans serif fonts. These fonts are often considered more modern and streamlined than their serif predecessors.
3. Script Fonts
Script fonts are cursive or handwriting-style fonts. These can range from very traditional and ornate to playful and even messy. The different styles of script fonts mean they can be used to invoke a variety of feelings.
4. Display Fonts
As the name suggests, display fonts are very decorative. They are also referred to as novelty fonts and can often be found on book covers or signage. Like script fonts, there is a range of styles for this type of font.
When selecting fonts and typefaces for your website, the key is to have variation. Using different font families keeps readers from becoming bored and helps them navigate the page more easily. Just make sure to avoid fonts that clash with each other.
If you’re going to use a display font on your header, pair that with a neutral font elsewhere on the page. If you choose to use a singular font, use different weights and sizes to delineate between the main header, sub-headers, body text, and other content on the page. Either way, make sure your font choices are consistent across your entire website.
And like your brand color palette, you want to be sure that the typefaces you use on your website align with your company mission. For instance, an innovative, fast shopping platform with a zippy social presence would steer clear of antiquated script styles or Courier New.
If mixing typefaces seems daunting, use online resources to help guide you. You’ll probably have a gut reaction as to whether things look good or bad together, but if you’re second-guessing your gut, check out our guide on font selection to get you on track.
Select Your Images Carefully
If you’ve ever visited a website that is nearly all text, you probably winced.
When looking at screens, it’s important to give our eyes a break from a lot of text, which is why it’s a good idea to include images on your website. WordPress themes come preloaded with stock photography, and it may be tempting to just keep those images as is — they often look really nice! But using your own images on your website will not only make your website feel more customized but will also help you stay on brand.
Another word on stock photography? More people respond to user-generated content (UGC). Stock photography is meant to be universal so that it is useful for a wide range of people, but that also makes it generic!
Recent tests show that when people see a real person or an item being used in the real world, it gets more clicks than the stock image. Whenever possible, use UGC or custom images for your website. This, along with your brand assets, color, and typography selections, will help make your website feel completely distinct to your brand.
If you’re looking for authentic imagery to brand your shiny new website, consider running a UGC contest with your customers. Ask customers to send in photos of themselves enjoying your product — the more Instagram-worthy, the better! Offer incentive like a special promo code or discount in exchange for letting you feature their photos on your website.
Once you have a stockpile of great photos, use them to your advantage by sprinkling them throughout your site. Similar to what we mentioned about fonts, variation is key. Alternate large and small images based on the content they are placed next to. For example, product photos should be large and in-charge so you can show (rather than tell) what you’re all about, whereas employee headshots on your About page may not need to be so obtrusive.
Large hero images are trending in web design right now and are a great way to draw in site visitors. Overlay the hero image with non-obtrusive text to create a strong visual experience for your readers that doesn’t feel salesy.
Build your WordPress site with DreamHost today!
Making It All Work
Think of your WordPress theme as the skeleton to build the perfect website off of. Once you have your foundation, have fun dressing it up in your brand style; add fonts, colors, authentic images and useful content to let site visitors know what your brand is all about.
Adding thoughtful customization will help you create a website that is personalized for your brand and will help you stand out from your competition and other WordPress-powered websites.