How to Choose Website Color Schemes
Rules and examples for making an effective and eye-catching website design

website color schemes color swatch example
 

Dale McManus

Co-Founder & Web Developer

Jan. 27, 2020

 

Hey, my name is Dale! My partner Alex and I have helped tens of thousands of people build beautiful websites around the world. In this fully-packed, step-by-step guide, you’ll learn How To Choose A Website Color Scheme and we’ll compare different sites and color schemes to inspire your search. Let’s dive in!

  • Level of Expertise:
    Beginner
  • Time To Complete:
    30 Minutes
  • What You Get:
    Working Knowledge

For the record: It’s super important for us to keep this site 100% free for you and 100% high quality. To help us do that, we’ve partnered with some of the products we recommend and earn a commission if you buy through our links. Read our full disclosure and partners list here.

There are a ton of ways you can make your pro site stand out online, but your website color scheme is one of the most important.

It’s one of the first things people notice – and when your visitors have an average attention span of (at most) 8.25, the color palette you use to shade all the buttons, text, and backgrounds of your site is super critical for getting people to stick around.

So how the heck do you go about choosing your website color scheme?

Well, it all starts with this here post…

website color schemes color swatch example

What is a color scheme?

First a quick definition from our friends at Wikipedia (well, we like them; they probably don’t know we exist tbh):

“In color theory, a color scheme is the choice of colors used in design for a range of media.”

In less formal, wiki-style terms: a color scheme (or color palette) is the set of colors you use on your site to create your own unique style and appeal to your visitors.

Types of color schemes

Technically, a color scheme could be any number of colors in any combination – just two shades of blue to every color of the rainbow (heart eyes emoji).

But because some colors look amazing together and others are very wtf, you’ll typically find a website’s color scheme follows one of a few “color harmony” rules.

Analogous

website color schemes analogous wheel

Analogous color schemes use colors that are next to each other on the color wheel (that thing we all learned about in 1st-grade art class – thanks Ms. Zelwiger, hope you finally found a husband!).

Because the colors are all pretty close to one another, websites with Analogous color schemes are versatile and comfortable – but you’ll want to make sure you have enough contrast between different website elements so that things don’t turn into a jumbled mess.

How do you do that?

Use one color as your primary, dominant color used for more important pieces of your site, another color as your main support, and the third, fourth, fifth colors just as accents on smaller pieces.

Monochromatic

website color schemes monochromatic wheel

If you’re active enough on Insta, or you’re really into grammar/Latin, you probably know that “monochrome” means “one color” – usually black and white.

BUT monochrome color schemes can technically be based on any one hue (red/blue/yellow/etc) in combination with 2 or more shades, tones, and tints.

On the plus side, websites that use a monochrome color palette have a simple feel and are hard to mess up by using clashing color combinations.

But using one color for your whole site can make it harder to evoke an emotional response in your visitors that gets and keeps them interested.

And you can have problems with elements like text, buttons, etc. blending together.

So you’ll have to be careful about your use of other website design elements like layout and typography to keep things interesting and understandable.

Triadic

website color schemes triadic wheel

Triadic website color schemes use 3 colors (which you grammar nerds will know because the Latin prefix “tri-” means “three”) that are evenly spaced around the color wheel.

This means your colors will have a good amount of contrast with each other, but not quite as much as a complementary color palette – so you can use these to make a website that pops but not too much.

Complementary

website color schemes complementary wheel

This is the one we all remember from grade school – complementary color schemes use colors that are opposite one another on the color wheel.

Using a complementary color palette on your website can make for a site that really stands out because of the color contrast, but you’ll want to be careful with how you use your colors.

If you go too crazy with them, your site can quickly become super stressful to look at (for example, don’t use green text on a red background; no one loves Christmas that much).

Compound

website color schemes compound wheel

Compound or “split-complementary” color schemes as some design geeks call them use two colors adjacent to your primary color’s complementary color.

It’s a solid choice for beginner web designers because you can get the same kind of visual contrast and interest, but there’s less tension between the colors so it’s harder to make a site that wigs visitors out.

Why are website color schemes important?

Whether you notice it as you’re scrolling through Insta, searching through Amazon, or endlessly clicking the next video in Youtube recommends, colors have a major impact on how we feel – on the web and in the real world.

Example: science has shown red and yellow increase heart rate.

So choosing the perfect color palette for your website color scheme is more than just an “I like blue” or “looks good enough for me” kinda thing.

But before we dive into how to choose the best color combination for your site, let’s look at a few reasons why all that work is important in the first place.

#1: Color helps boost brand recognition (and that’s important)

If you were to picture Starbucks, what do you see?

Those Trenta Triple Caramel Macchiato you “occasionally” drink too late at night might be it.

But it’s more likely you saw the iconic green circle with the fancy fish lady in it.

green color palette starbucks logo
Source: Pixabay

It’s hard to imagine Starbucks without seeing “Starbucks Green,” and that’s the point!

That color serves two purposes for the coffee giant:

  1. It’s a simple, distinctive color that helps them stand out from the crowd and helps you remember them
  2. The color itself is calming and associates them with health and wellness (even though we all know mainlining their coffee as we do is not doctor recommended).

Picking a website color palette is about more than just looking cool – it’s a key part of creating your brand and selling any products or services you’ll offer through your site.

According to research by online marketing master Neil Patel:

  • 85% of shoppers say color is a primary reason they buy products.
  • Color increases brand recognition by 80% (and people are more likely to trust and visit sites with brands they trust).
color palettes in marketing and branding infographic
Source: Neil Patel

And according to a study from Northumbria and Sheffield Universities (they’re in the old UK so they must be solid… always trust a British accent/research we always say!), website first impressions are 94% design-related.

And color is obviously a huge part of web design (which is why we’re talking about it!).

It’s 100% essential that your site makes a solid first impression with people, one that’s memorable enough that they return to your site whether you want to sell them something helpful or just share more interesting and valuable insights (kind of like we do here!).

That’s key reason numero uno it’s important to have a mind-blowingly awesome website color scheme.

#2: Color affects how people feel about your site

Research from the University of Winnipeg (that’s in Canada for those keeping track of our research world tour) found two important things related to website color schemes:

  1. People make their initial judgments of a website/business/product within the first 90 seconds of their first interaction.
  2. 62-90% of that initial judgment is based on color.

Which makes sense: color is one of the easiest pieces of information to “understand.”

Your brain can sense and evaluate things based on color almost instantly, while things like images, words, and ease of interaction take more time and clicking/scrolling around to process.

So how do you use color to your advantage to make people more likely to come back to your site again and again?

By leveraging the power of (echoey voice) “The Psychology of Color.”

What do colors mean?

That’s right kids, there’s a whole field of science dedicated to studying how colors affect our behavior.

Through loads of not-so-top-secret experiments and research, it’s been proven that colors do, in fact, make us feel things.

And when it comes to creating pro websites, that means you’d best pick a website color palette that makes them feel the kind of feels you want them to feel based on your site’s purpose.

But how in the holy heck do you do that?

Well, it starts with knowing what feelings each color makes feelers feel (we’ll stop after this, promise).

Here’s the low-down:

Black
example dark color palette black website
Source: Bornfight

To get it out of the way for those of you who remember 1st-grade art class: yes, black is a color; no, black is not a color.

For our purposes here, though, it’s lumped in the “color” section of the website design tools and that’s good enough for us.

Black is the strongest neutral color (which also includes gray, white, and brown) and represents power, sophistication, luxury, and formality.

Because it’s both neutral and powerful, the impression black can make varies a lot depending on how you use it on your site.

When used as more than just an accent or text color, it can lend a sense of elegance or edginess to your website design.

Depending on the other colors you combine it with, it can also give your site a conservative/traditional or unconventional/modern feeling, as well as senses of sophistication and mystery.

Gray
vintage color palette gray example website
Source: Frames

Gray is another neutral color, which gives sites that use gray a sense of seriousness, precision, control and lack of emotion…

Which can be a good thing on sites meant for technology, banking, legal services, etc.

Gray can also lend a sense of sophistication to your site when you substitute dark grays for places you would otherwise use black, or light grays in places you would have used white.

White
color themes white website example
Source: Miriam Peters

White is the color of purity, cleanliness, newness, and simplicity, which makes it great for healthcare, charity, and technology sites in particular.

Though obviously it’s kind of a default background color for a ton of other kinds of sites on the web because it works well with just about any other color(s).

Brown
types of color schemes for websites brown example
Source: Keepers of the River

Brown is obviously a natural color (dirt and trees and stones and such).

Because of that, it’s typically associated with dependability, earthiness, and reliability.

When used as a replacement for black, white, or gray in backgrounds, it brings a feeling of warmth and wholesomeness to your web designs.

Blue
blue color palette website example
Source: Plink

Blue is a super flexible color – how light or dark the blue you use can change its meaning a good bit.

Dark blues are considered strong and reliable, while light blues are calming and friendly, and really bright blues are refreshing and energizing.

Whatever shades of blue you use, it’s a color that’s great for backgrounds and accents, though it shouldn’t be used for text as it’s hard to read.

Green
green color palette website example
Source: Eslam said

Green can represent a lot of things: new beginnings, growth, wealth, stability, and nature.

In general, greens are calming like blues are but has a bit of the energy of yellow as well, and can help balance out your website designs.

The shade matters here too: Olive greens represent nature, while dark greens tend to represent wealth and bright greens are more energizing.

Yellow
bright color palette website example
Source: Spread Systems Inc.

Yellow is the color of sunshine and happiness and hope that the future is a bright one!

Bright yellows are particularly cheerful and good for sites aimed at kids (or parents).

Light yellows are a bit calmer than the brightest yellows, and dark/gold yellows create an antique, “old money” kind of look.

Be careful with this one though: bright yellows, in particular, can be anxiety-provoking and are exhausting to the eyes – so in general, they should only be used as an accent color.

Orange
modern color palette website example
Source: Emotive Feels

Oranges are typically associated with energy and creativity as well as fall/the changing seasons/movement in general.

They’re also associated with health because orange is a fruit and doctors like it when you eat fruit.

Orange is bright yet easy on the eyes and more subdued than red, which makes it fairly flexible in web designs.

You can use it as a primary color for backgrounds or as an accent that gets attention without feeling overpowering.

Red
red color palette website example
Source: MOHAB

Red is one of the most powerful colors, in part because it’s associated with war and violence as well as love and passion.

Those opposing associations create a lot of emotional tension (see “red can raise your heart rate” above).

Brighter reds give a website color scheme an energetic feeling, while darker ones feel more powerful and elegant.

#PowerfulColorRed can be pretty overwhelming if you use it too much, so in general, we’d recommend you only use it as an accent color when you’re starting out.

Purple
cool color palette purple website example
Source: Purple Bunny

Purple is associated with wealth and royalty because, fun fact/short history lesson, in times past purple dyes for clothes were hard to come by.

Thus, only wealthy, royal people could afford purple-colored stuff (and now it’s the color of a bunch of Pokemon and a Teletubby lol).

In modern times of purple abundance, purple is also associated with creativity and imagination, with darker purples taking on the old wealth/luxury meaning and lighter ones lending a soft, sometimes romantic touch.

How do people respond to color based on gender and age?

Beyond the emotional responses each color makes, color can also affect who finds your site attractive and who doesn’t along on gender and age lines.

Neil Patel also compiled a bunch of data on color preferences by gender and created a super handy color preferences by gender infographic.

Let’s take a look at the highlights:

Favorite and least favorite colors by gender
good color combinations gender preferences infographic
Source: Neil Patel

A couple of key takeaways from that:

  • Everyone loves blue, so if that color communicates the information/feelings your site’s aiming for, go wild. Green, red, and black.
  • Everyone hates orange and brown, which are also associated with being cheap, so use them more sparingly (in general; if you really love orange go for it; if you really love brown we suggest you rethink your life).
  • Women love purple, men not so much (it was 23% of women’s favorite color while no men said it was theirs).

And we can add some layers to that with another piece of that same infographic:

best color combinations gender preferences infographic
Source: Neil Patel

Which shows us:

  • Men are way cooler with neutral colors.
  • Men prefer darker shades while women prefer lighter tints.
  • Men prefer brighter colors while women prefer softer colors.

What about age?

Well we had to dig a bit further on this one, eventually finding that study done by Joe Hallock from back in 2003 (aka “the good old days” aka “the reason why the graphics look so old”).

Favorite and least favorite colors by age
good color schemes by age
Source: Joe Hallock
color scheme ideas least favorite color by age
Source: Joe Hallock

The takeaways:

  • Everybody still loves blue.
  • Everybody still hates orange and brown.
  • Purple seems to become more popular as people get older, while green becomes less.

#3: A good website color palette makes your site feel organized

Choosing the right colors for your website and using them in the right places can also help your website feel more organized (aka “these guys know what they’re doing” aka “this site is really easy to use/understand”).

This happens in two ways:

Establishing visual hierarchy

Visual hierarchy helps people figure out what’s most important, the first thing they should look at on your site.

This can be done in a few ways (99Designs has a great post covering these) and as we know smart cookies like you have guessed, color is one of them.

How does this work?

Well, it all comes back to the emotions and our good old eyeballs.

Bold, bright colors like reds, oranges, and yellows are easy for our eyes to see and that makes them great for things like buttons or sections that have particularly important information.

At the same time, grays, blacks, and colors like blue and purple are emotionally less charged and take our eyes/brains more time to process, so these colors are better for elements like the background that are meant to blend in more or make other elements pop.

Contrast between elements is also important thanks to the Isolation Effect, which is a design psychology principle that says the more an item stands out, the more likely it is to be noticed and remembered.

The use of the Isolation Effect has also been shown in a couple of color studies (this one from U of Berkley and this one from the Journal of Consumer Psychology) to actually be something people prefer in color schemes.

The takeaway: using a website color schemes that include a high-contrast, attention-grabbing color is great for both drawing attention to certain elements and creating a website design people love.

Creating a sense of coherence

A good website color scheme also creates order through coherence. 

For example, if you use fire engine red for your “contact us” button on one page, you should use that same color for all the “contact us” buttons on your site.

Or, if you use a blue grid background behind all of your H2 headers (like this post here!), you should use that same color background for all the H2 headers on your site.

A sense of order/coherence is also a factor of the color harmonies/types of color schemes we talked about above.

In this case, using any one of them to choose the set of colors you use in your palette (analogous, monochromatic, complementary, etc), instead of a random mess of colors you like will help your site subconsciously communicate “everything’s organized and tip-top around these parts.”

#4: Choosing a website color scheme makes designing easier

Last on this list but first in our hearts, this is!

Whether you’re building one website and evolving it over time, or you want to build a bunch of sites for yourself or other people (who pay you money!), the less time you spend on basic tasks, the better.

On the color front, you can save yourself a lot of “what color should I use here” time by establishing your website’s color scheme upfront, then applying it anywhere and everywhere you need to.

Especially if you make it into a fancy document like Mailchimp did:

mailchimp color schemes guide
Source: Mailchimp

Now, they’ve got a ton of colors in their palette because they have a super complex website/app.

For most of the sites you’ll create, though, we recommend you stick to just 3-5:

  • 1 primary color that’s used on the most important elements of your site.
  • 1-2 secondary/accent colors that use a little less space on your site and/or are only used on a few elements.
  • 1-2 background colors that make your primary and secondary colors really pop.

This way, you’ve only got a few options any time you’ve got to add a page or element to your site.

But how do you choose that top 3-5?

Glad you asked!

How to choose your website color scheme

website color schemes mock website

A good website color scheme is one that finds the perfect balance between two things:

  1. The brand/business’ values and purpose.
  2. What your visitors like and want.

Easy enough to say, how the heck is it done?

4. Easy. Steps.

1. Know your website’s purpose and audience

Knowing what color palette you should use for your website color scheme will in part come from your instincts and preferences.

But a “pro” website color scheme will start with what the website is all about and who it’s for.

Because that’s how you take the color psychology info we dropped on you above and use it to make the best decisions for your website design!

How do you figure out your site’s purpose?

We’ve got a good bit of info on that in our How to Design a Website guide.

Your goals here: 

  • Determine what industry your site falls into.
  • Determine the values or “personality” you want your site to communicate.

That first part should be relatively simple with a bit of thought:

  • Want to sell fitness courses? You’re in the health industry.
  • Want to offer the website design skills you’re learning here to clients who will pay? You’re in the marketing industry.
  • Want to share stories from your personal travel adventures? You’re in the travel industry.

Etc.

For the second part, let’s use some research to help you pick 1-2 “personalities” you’re aiming to communicate through your site.

Stanford psychology professor Jennifer Aaker’s our go-to for that.

She found that brand personalities fall into one of five core dimensions:

website color palettes brand personality study
Source: Pinterest

You can maybe mix 2-3 of these types of personality, but it’s best to choose just one to start.

Looking to sell watches on an ecommerce site? Go for “sophistication.”

Want to share tips on camping, hiking, hunting, etc? “Ruggedness” it is!

Maybe you’re sharing your knowledge of a hobby like playing guitar. “Sincerity” might be right for you (could be “EXCITEMENT” too).

The brand personality you go with then ties into the color psychology we discussed above: red could be a good primary color for excitement, black for sophistication, or 

How do you figure out your target audience?

Well, if you’re really diligent, you’ll want to do some market research!

A few good resources on that:

To not spend a ton of time learning how to do market research (and actually doing it), you can also just ask yourself a few questions to get started:

  • Are you trying to attract younger or older visitors?
  • Is your site mostly for men or women?
  • What products are services are you selling? Do those attract people who like certain colors or have certain values like sophistication or friendliness?

What colors typically work best for your industry?

A solid shortcut/starting place for choosing the colors in your website’s palette is to look at what other websites with similar goals (aka “in your industry”) usually use.

Because companies offering similar things to the website you’re building are trying to evoke the same kinds of emotions and associations you are, going with their flow is a good place to start.

Lots of visuals from some great research done by other folks here!

First up, an infographic from research done by Towergate Insurance on the most popular brand colors in each industry:

popular color palettes by industry
Source: Towergate Insurance

In their study, Towergate analyzed 520 logos in a bunch of industries to figure out which colors each industry favors.

Here we can see blue, red, and green are solid for just about any type of brand/company website.

Now, with industries like “Courier” and “Specialized Chemicals” on this list, you might not find the exact industry your website will be in.

BUT if you think about what those industries are trying to offer and who they’re trying to communicate with, you can probably figure out where there are overlaps with your goals and theirs.

To help you out, though, we’ve got another similar infographic from marketing software company Marketo:

color palette ideas infographic
Source: Marketo

Loads of good info in there so take some time to digest it!

Finally, here’s another helpful snippet from a Neil Patel infographic on how colors affect particular kinds of buyers:

best colors for website by type of consumer infographic
Source: Neil Patel

Now there aren’t many colors on that chart and we’re not saying you should use those exactly.

Instead, here’s what it tells us:

  • If you’re planning to sell relatively cheap, easy to say yes to products on your site, darker colors, reds, oranges, blues, and blacks are good choices.
  • If you’re looking to appeal to budget-conscious shoppers, blues and greens are good.
  • If you’re looking to get sales from “traditional” (aka “older”) people, lighter tints like pink and sky blue work well.

Now you’re probably wondering: “if I use the same colors as other companies/websites like mine, won’t it be impossible to stand out?”

Well, that’s where choosing particular colors (like seafoam green in the “green” family) and putting together a unique color palette comes in.

Which leads us nicely into…

2. Choose your primary/dominant color

The primary or dominant color in your website color palette is the anchor for your brand, evoking the main emotions and ideas that you want your website to communicate.

Think “red” and Coca-Cola, “green” and Starbucks, “yellow” and McDonald’s.

If you’ve already made a logo, the color that stands out the most is probably the primary color for your website – so this part’s done!

If you don’t already have a logo or don’t have a dominant color in mind, a good place to start is this handy quiz from Grasshopper, which will help you learn whether blue, red, orange, etc is the best part of the color spectrum for you to choose your primary color from.

If the color that bad boy spits out jives with your preferences and all the color psychology we shared above, awesome.

Look for that color using the two options we’ve got for you below.

If you don’t agree with the quiz results, then sorry we wasted your 2 minutes lol.

Option 1: Get some inspiration

The first method for finding the primary color in your website color palette is to spend some time looking at examples of sites and color schemes you like.

Just visit the sites below to find color scheme examples you like:

When you find a color you really love, you’ll just need to grab and save its hex code, which you can do using the ColorZilla Chrome extension/Firefox addon to snag it.

You’ll need that hex code to use in website builders or WordPress to color different elements.

Option 2: Use a photo

You can also use Adobe Color to extract colors from an image (which could be a photo of something in the real world, a graphic you found online, or a screenshot of a website you like).

Simply upload a photo to their tool under the “Extract from an image” tab, then you can choose different color palettes based on various moods using the left sidebar.

When you find the set you like best, click back over to the “Color Wheel” tab to copy one of the color codes to use as your primary color.

Or you could just use the complete set as your entire website color scheme!

How to use your primary color on your site

Once you’ve chosen your primary color, where the heck do you put it?

Definitely not all over your site; it’ll make your design overwhelming.

Generally, you’ll want to use your dominant color in the key places you want to draw attention to (like contact us buttons, key information, and your logo):

website color schemes primary color example annotated
Source: Our Wix Demo Site

3. Choose your secondary/accent colors

Once you’ve got your primary color picked, figuring out your website color scheme is a downhill trip.

The next step is to pick your secondary and/or accent colors, which we’ll base off the first.

As we mentioned above, some sites like MailChimp have a ton of colors in their website palette because they make a very complicated web app.

For the rest of us, one primary color plus 1-2 secondary colors is plenty.

How the heck do you figure those out?

By using the color theory harmony rules we mentioned above!

No need to whip out your own color wheel and protractor (to figure out the right angles), Adobe Color once again has our backs.

How to choose your secondary colors using Adobe Color

First, pop on over to their site using this link, then paste the hex code of your primary color in the first box.

By default, Adobe’s gonna show you other colors using the “analogous” harmony method.

For our website design purposes, though, we recommend you choose either Triad, Complementary, or Compound using the sidebar, as these will give you a set of colors that are the easiest to use on a website (aka “it’s harder to f*ck up your web design when you’re still a beginner”).

Note: when you pick a new color harmony rule, you’ll have to re-enter your primary color’s hex code.

As you’re looking at the various options, you can also play with the little circles on the wheel, dragging any of your colors in and out, side to side to change the hue and brightness/darkness.

You can do the same with the sliders under each color.

And you can click the color boxes to change which is your “base” aka “primary” color.

No worries about messing things up doing this: Adobe will make sure it still applies the color harmony to any changes you make, though it will change the primary color/hex code for the primary color.

If you like the new color, though, go with that instead of your original!

As you’re playing around, you’ll be given 4 potential secondary colors (in addition to your base/primary).

You can use all of them if you like, but if you’re going to stick to our “keep it simple with 1-2 accent colors” rule, you’ll want to do this: make sure your base color is in the far left box (you can drag it over there if it’s not), then use that, the middle/3rd color, and the last/5th color.

The 2nd and 4th colors are generally for more complicated designs.

With your secondary colors found, be sure to copy those hex codes to the same place you have your primary color for use on your website.

Speaking of which…

How to use your secondary color(s) on your site

You’ll want to use your secondary/accent colors to highlight less important information/elements like subheadings, active menu items, and content that’s only useful for some of your users.

Aka “things you want to stand out but not too much.”

Here’s how accent colors are used in our website color palette example:

website color schemes secondary color example annotated
Source: Our Wix Demo Site

4. Choose your background colors

Your background colors are going to fill in the spaces where you don’t want to use your primary/secondary colors, like text, the background of blog posts, etc.

Now, typically the safe bet is to just use black/white/gray for these, as they’ll help keep people focused on places you’ve used your other colors and won’t break the color harmony we worked so hard to get playing around with Adobe’s tool.

If you want to just use neutrals, head back to the Color tool, chose the “shades” color harmony, then type “FFFFFF” into the first box (which is the hex code for pure white).

You can then drag the very bottom slider under that box around to use a slightly gray version of white as your base or click one of the other colors to make it your base to play around until you get a “basically white,” “basically gray,” and “basically black” set of colors to use in your backgrounds.

Depending on your site’s purpose, though, you might want to get a bit fancier than that…

Ecommerce or content-heavy site? Stick with neutrals

Sites that sell a lot of products (aka Amazon) or are mostly about sharing information and ideas (aka blogs like this ‘un ‘ere) want to put as much focus on those products/words as possible.

So it’s best to use neutral color backgrounds so that these pop as much as possible.

best background color for website ecommerce example
Source: Carbon

Business-focused website? You could use shades of your primary color

Because color is an important part of branding (like we talked about above), if your website is primarily about sharing background info on a business or charity (while maybe sharing information about services clients can pay for), you can use shades of your primary color for backgrounds.

This will really help plant your brand color into your visitors’ minds to make it more recognizable/memorable.

Neutrals are always the safest, but if you want to have a more colorful set of background colors, use the “Shade” harmony in the Adobe Color tool, put your primary color in, and you’ll get a set of background colors you can use that should look good together.

Just be sure to use more subdued shades, nothing too bright or bold, as you’ll still want people to mostly focus on your content/sections where you use your primary and secondary colors.

good background colors business website example
Source: Critical Software

Going for super stylish? You can use some graphics/images too

If you’re building a site in the restaurant, fashion, beauty, or creative industries, using a lot of images or graphics in your backgrounds can create a super-premium, very stylish feel.

Just be sure of two things:

  1. That your text is still readable.
  2. That your design doesn’t feel like there’s too much to look at because of all the details in your backgrounds.

Part of that will come from choosing images/graphics that don’t have too many elements in them.

But you can also use the “Shades” harmony in Adobe color to find either neutral color shades or shades of your primary color to overlay on your images and make them more subdued (you can either add overlays to the images themselves in Photoshop or in your website builder/Wordpress).

website background colors image example
Source: Maman Corp

Website color scheme examples

When you’re starting out, it can be tough to come up with design ideas on your own.

Which is where a little inspiration from great designs comes in!

So to help you get started with a few ideas for your own website color scheme, here are a few great schemes and designs from around the web.

1. Fun and Playful

Flatiron Collective website color schemes examples
Source: Flatiron Collective

#b200f8
#ff4247
#ffdb6c
#00545a
#002835

Somewhere between a softer and brighter palette, Flatiron showcases a diverse color combination that creates a fun and playful vibe. The colors are featured in animations and used as font colors, in icons and graphics and other creative ways.

2. Strong and Sleek

Martell website color schemes examples
Source: Martell

#8a211b
#b3925f
#f0cd95
#001446
#eaeae2

Featuring a bold, darker tone throughout its site with a midnight blue background, Martell breaks away from the traditional, cookie-cutter designs you see so often on the market. Shades of gold and dark red accent colors provide a stunning contrast to the prominently dark color palette.

3. Corporate and Creative

NetNatio website color schemes examples
Source: NetNation

#e9467d
#113b77
#2565c7
#4bb3f0
#e9e9f3

NetNation introduces a corporate-style website design that uses multiple shades of blue, a color that emits trust and professionalism to its viewers. The magenta color you see used in icons adds a pop of playfulness to the very corporate design. 

And other graphical elements create a contrast that breaks up the mostly blue palette.

4. Natural and Enchanting 

New york times website color schemes examples
 Source: New York Times

#fdc3b7
#f3d982
#a7dac9
#5178b1
#e7f4fd

Pastel, earthy colors produce a playful, natural, and somewhat enchanting look that directly correlates with the company’s core mission. A featured landing page on the New York Times website, this company uses their brand colors in pretty creative ways throughout the page.

5. Vibrant and Energetic

open website color schemes examples
Source: Open

#eeeeee
#cc5245
#58a9a5
#f3d33b
#231f20

This co-working space and start-up incubator, located in Canada, uses lively colors that are intentionally vibrant and meant to evoke creativity and inspire the viewer. Overall, they do a great job using four or five distinct colors in different ways throughout their site.

6. Powerful and Poised

slack website color schemes examples
Source: Slack

#4A174B
#5BB77E
#56C6F0
#E1405A
#ECB230

Slack is a leading enterprise chat app used by millions of people. They’ve invested millions of dollars into perfecting their branding and it shows. 

Their bold-and-bright color palette uses dark plum as its base color, which draws the user in and exudes power and independence.

With energetic accent colors, Slack does a great job pulling in the viewer using color theory.

7. Bold and Happy

the happy hero website color schemes examples
Source: The Happy Hero

#FFFFFF
#000000
#E93F33
#FEE533
#4F5CD6

With a strong 1950’s comic book-style design, The Happy Hero chose bold colors for their website including sunflower yellow, fire engine red, and pacific blue. Their goal is to spread happiness and their design reflects this mission well.

8. Calming and Earthy

titya ravy website color schemes examples
Source: Titya Ravy

#BEBDAA
#F6EEE2
#D4D8CE
#B29578
#000000

Topes, browns, and soft green colors are featured in the design for Titya Ravy’s website. A fine jewelry maker, Titya chose a very non-traditional color palette to showcase her brand.

The earth tones she uses are reminiscent of the natural materials she uses in her jewelry designs.

9. Clean and Bubbly

UMAN website color schemes examples
Source: UMAN

#E94734
#334F6E
#FFFFFF
#F8F8F8
#F9DFDB

The UMAN website may seem to feature a less sophisticated color palette compared to other examples we’ve seen so far, but sometimes, simple is better. 

A professional services company offering retirement and life planning services, Uman’s clean and simple design uses a combination of mid-tone blues, salmon, and red to exude professionalism and urgency.

10. Bright and Playful

whoa mama website color schemes examples
Source: Whoa Mama

#7a00f8
#ff003e
#f39190
#f3e513
#00bfd2

Whoa, Mama is a suitable title for the color palette featured on this website. Bright and playful with tons of 90’s digital art infusions, Whoa Mama is a gleeful example of branding done right.

Purple, red, yellow, and teal are paired perfectly with each other and featured prominently throughout this epic design.

11. Inviting & Trusting

nu website color schemes examples
Source: NU

#56909a
#b3d2d7
#aeaf71
#717b44
#df8956

NU is a unique project with a unique goal and uses an equally unique color palette on its website. Many purpose-driven projects use a softer color palette to appear inviting and mission-oriented, and NU is no different.

This compound color palette consists of deep-sea blue, summer sky blue, olive green, soft green, and sunburnt orange.

12. Creative & Professional

raiseyourwebsite website color schemes examples
Source: #raiseyourwebsite

#455799
#5f7add
#af6ac6
#f09686
#f7be3e

Raise Your Website is an online website testing tool and its website features a creative color palette that uses a unique combination of two complementary blues, along with magenta, peachy orange, and sunset yellow.

This compound color palette brings out a creative yet professional aesthetic that can easily be replicated on your website.

13. Professional & Inviting

access is website color schemes examples
Source: Access IS

#155799
#1d76d1
#0f7ce0
#53c3f6
#e9f2fe

The Access IS site uses a range of blues in their web design color palette, creating an intentionally corporate feel to their site that is inviting and professional.

With tons of custom illustrations that feature the four-tone color palette, Access IS shows us that a monochromatic color palette is not only doable but can work out quite well in website design.

14. Energetic & Playful

spotify website color schemes examples
Source: Spotify

#e85db6
#ea5467
#f2af37
#cdf564
#6fd862

As a leader in the music streaming space, Spotify’s bold branding speaks loudly throughout its website design. Spotify has been known to push the boundaries of web design.

This landing page uses 1990’s inspired neon pink, orange, and green color tones splashed throughout its site to create an energetic yet playful color palette that inspires users to download their app.

15. Wise & Illuminating

the ronin society website color schemes examples
Source: The Ronin Society

#ead6b7
#cba978
#9ea3a9
#14222d
#e34234

As a financial advisory service, The Ronin Society stands out from other players in the industry with unique sepia-style web design concepts used to create a trusting, professional brand appearance.

Royal gold, navy blue, and fire engine red are used in perfect harmony on Ronin’s site and, together, add a feeling of illumination and wisdom.

16. Familiar & Futuristic

psych x86 website color schemes examples
Source: Psych X86

#050c3f
#6474b9
#4a2c96
#9b75c5
#70edf0

“Psych” is a digital solutions company, so their futuristic color palette is a good choice, with deep blues and purples featured throughout the site. A bright turquoise accent color breaks up the mostly dark color tones creating a futuristic vibe that’s somewhat familiar.

Purple was a popular web design color in the late 2010’s and will likely continue to be used in many site designs.

17. Earthy & Complementary

care website color schemes examples
Source: Care

#333333
#a5502f
#e36f30
#f2bf20
#4b7803

Care is on a mission to combat climate change and its branding and color palette is a perfect representation of their social impact.

With an intentionally earthy color palette filled with oranges, yellows, and complementary colors including mid-tone green and dark brown, this is a perfect example of a complementary color palette done right.

18. Calm & Collected

slumber website color schemes examples
Source: Slumber

#deba93
#081521
#001f33
#23628b
#53b5c1

This website is calm, cool, and collected. With a dark overtone using several dark blues against a mid-tone aqua color, Slumber’s website breaks from the standard “minimalist” design approach and uses warm illustrations to elevate its branding and showcase their inspiring, analogous color palette.

19. Edgy & Vintage

mountain man website color schemes examples
Source: Mountain Man

#e3d279
#9faf8b
#efb48d
#c96346
#414042

Indie pop group Mountain Man wastes no time showing the world exactly who they are.

With a naturally-edgy and vintage vibe, this music group’s website uses peachy pink lettering against a yellow-filtered background with other complementary colors such as sage green to create a stunning, dusty, earthy tone on its website.

20. Warm & Comforting

cowboy website color schemes examples
Source: Cowboy

#fffafd
#fcf3f7
#f8dbe3
#e94363
#131414

Cowboy is an e-commerce brand and its website design uses four different shades of pink. The monochromatic, all-pink color palette is a bold choice, but one that sells its products with confidence.

Pink is a warm and comforting color that can relay a feeling of hope and alleviates feelings of stress or anger — making it a great option for web design.

More website creation resources

And that, folks, is what we have for you today.

The full low down, the full monty, the whole shebang on website color schemes.

On a hot streak with learning about all this website design stuff?

We’ve got you fam!

Here are a few more super sweet posts we’ve created re:web design.

And we’ve got plenty more over on our Youtube Channel if you still want to get after it but are just about done with reading for the day.

We’ll see you over there kids!

How to Use WordPress Tutorial
Tutorial [2020]

Your step by step guide to creating a WordPress site!

 

Dale McManus

Co-Founder & Web Developer

Jan. 9, 2020

 

Hey, my name is Dale! My partner Alex and I have helped tens of thousands of people build beautiful websites around the world. In this fully-packed, step-by-step guide, you’ll learn How To Use WordPress and how to create a website and publish your first post. Let’s dive in!

  • Level of Expertise:
    Beginner
  • Time To Complete:
    1 Hour
  • What You Get:
    A Functional Website

For the record: It’s super important for us to keep this site 100% free for you and 100% high quality. To help us do that, we’ve partnered with some of the products we recommend and earn a commission if you buy through our links. Read our full disclosure and partners list here.

What’s up y’all!

If you like the video and want more tutorials on creating a professional website you can also subscribe to our YouTube channel!

More the reading type?

Looking to start a website?

The post:

WordPress is definitely a solid choice for creating awesome, professional websites.

Now you’ve just got to figure out how to use WordPress…

Good news: as always, we’ve got your back fam!

Here we’ve got a complete walkthrough of one of the best tools for building a website best website builders around including what you need to know about the dashboard, how to add pages and posts, install themes, and a ton more.

And because we were once beginners ourselves, we’ve got it all nice and organized in an easy-to-follow, step-by-step fashion so you can tackle this beast of a project and learn WordPress a piece at a time (it’s not as hard as you think, we promise!).

Alright, let’s get after it!

how to use WordPress tutorial featured image

What is WordPress and how does it work?

Short answer: WordPres is free to use open source software called a “Content Management System” (CMS) that lets you build your website and share it with the world – without knowing how to code.

With the help and support of a huge community of web developers and designers from around the world, it’s one of the most popular website publishing platforms in the world (an estimated 30% of the Internet is powered by WordPress and that’s a damn impressive accomplishment in our book).

Long answer: Check out the video above and our complete written guide on the what is WordPress question!

Now onto today’s how to build a WordPress website tutorial…

Step 1: How to get a domain name and web hosting

wordpress web-hosting-domain-name

So step number one in our “WordPress for dummies” tutorial is to get a domain name and web hosting.

Quick reminder/low down a domain name is the address people type in to get to your website (example: createaprowebsite.com) and web hosting is basically just a way to “rent” space on the internet so you can host all the images, text, videos, and code on your website.

More details aka the “high up” on what is a domain name and what is web hosting in our posts linked in this sentence for your convenience (oh how handy!).

Now, for this tutorial, we use HostGator to get both a domain name and hosting.

If you use this link you’ll be able to get a special discount we’ve worked out with them for both your domain name and hosting.

Note: we will make a bit of a commission if you buy through that link, but we used and loved HostGator for years before we started working with them so while we’ll earn a bit of cash as a thank you for recommending them (and you’ll get a discount), that’s not the only reason we recommend them.

In fact, we like a few different sites to buy domain names and get web hosting, so if you want to learn more about your options you can check out our Best Domain Registrars and Best Web Hosting Services guides.

For the rest of this section and for step 2, we’ll go through the process of buying a domain name, hosting, and installing WordPress using HostGator.

If you decide to get hosting/your domain name somewhere else the process will basically be the same.

But things will be exactly the same whether you work with our friends over at the big HG or not starting with step 3 (how to login to WordPress).

Alright, so with HostGator we recommend the Hatchling plan because it’s the cheapest and more than enough when you’re starting out with your first site.

With that, you’ll get one website/domain name, one-click WordPress install, unlimited bandwidth, and a free SSL certificate.

wordpress website hostgator hatchling plan

A proverbial “complete package.

So go ahead and smash that buy now button and you’ll land on a page where you can choose your domain name.

wordpress site hostgator domain name

Now if you’ve already grabbed your domain name just click the “I already own this domain” tab and enter it in, you’ll be able to connect your site to that domain name later.

If you’re still in the pre-domain days then those days are about to be over because you can buy one now.

Just type one into the search bar, in this example we’re going with “beginnerwptutorials.com.”

Hit enter and…

wordpress site tutorial domain name available

Boom, this one was available so we’re gonna buy it!

If your #1 domain name choice was taken (and, unfortunately, a lot of times they are), you’ll see a red warning and will have to try another domain name.

You’ll likely see some other variations of your chosen domain name like “[yourdomain].club” or “[yourdomain].site” but we highly recommend sticking with a “.com” or “.co” – those are the most professional for most sites (though there are cases where “.org” or “.io” are solid choices too).

Now with an available domain name chosen, scrolling down you’ll see some other recommended options but we can just ignore those for now (you only need one domain name for a website and we recommend you don’t start your website creation journey buying domain names that seem cool but you’ll probably never use #beentherelol).

“Add domain name privacy” should be automatically checked, make sure you leave it that way.

getting started with wordpress domain privacy

The reason being this keeps your contact information, which is needed to register your domain, from being posted publicly (which is the default; weird, yes, but people thought that was the right way to do it when the internet was being built).

That will lead to a flood of calls from people who will scrape the public listings and call you eight times a day saying they can build your website for you (another #beentherelol).

Scrolling down some more, you’ll see some plan options:

wordpress tutorial video choose hosting plan

Hatchling plan yes, 36-month billing cycle probably not.

You’ll get the best discount if you buy your domain name and hosting for 3 years, but that’s a long time, especially when you’re starting out.

We recommend going with a 12-month billing cycle as, no matter what, you’ve gotta get your domain name for 12 months so you might as well save a bit of money with your hosting as well (you can get hosting on a monthly cycle but that’s the most expensive option – even with our discount).

Next up, enter a username and security pin:

learning wordpress hosting username security pin

Then enter in your billing info just like you do for every other thing you buy online: 

wordpress basics hosting billing info

Heading down to the additional services, you’ll get a free SSL certificate which is great because it helps keep your site secure for visitors and is now essential if you want to rank in Google through SEO.

So go ahead and make sure that’s checked, but uncheck anything else they’re offering – a lot of stuff offered here like backing up and securing your site can be done for free in other ways (which we’ll get into below!).

wordpress for beginners hosting additional services

Continuing on, make sure the coupon code “createaprowebsite” has been applied so you can get our special discount.

wordpress tutorial hosting coupon code

Then you can just check the box to agree to the terms of service then click that checkout now button:

learn wordpress hosting checkout now

You’ll then be sent over to a thank you/“setting up your account” page (which will take just a couple of minutes to do).

wordpress tutorial for beginners setting up account

And now we’re ready for…

Step 2: How to install WordPress

Alright so after that few minutes you’ll be taken to a page that might have a “tell us about yourself” popup just go ahead and click out of that (you can answer it if you want to but it’s not gonna help you with installing WordPress lol).

Then go on over to the Marketplace tab.

how to install wordpress hostgator marketplace

From there, just scroll down until you see the big blue “one-click installs” button and… click that bad boy!

installing wordpress one click hostgator

Then just click on “WordPress,” conveniently, oh so conveniently located at the top of the page.

hostgator one click wordpress install

Then just select your domain and click that next button.

how to install wordpress select domain

This’ll take you to a little settings form, fill out all the details, check the box to agree to the terms of service, then it’s time to click the install button.

hostgator installing wordpress details

Once WordPress is finished installing, be sure to copy your installation information and save it somewhere safe because you’re going to need that info/ridiculous password to log into WordPress (and change that password to something much more reasonable).

how to install wordpress login details

Now, if you open up a new tab and go to your domain name you’ll see a page that looks something like this:

installing wordpress domain name propagating

Why? Well, because your domain name has to “propagate” – basically, HostGator has to tell the world about your new domain name so people all over the place (including you) can access it from the web.

HG will tell you the process could take up to 24 hours, which is technically the case…

But in our experience, it’s never taken more than 20-30 minutes so go ahead and grab yourself a break then come back in a bit to keep truckin through step 3.

Step 3: How to login to WordPress

So once you’re back after that 20-30 break (hope snack time was awesome) time to check on your site and find your WordPress dashboard login page.

To start just type in your domain name again/refresh the page (if you’ve been waiting on the edge of your seat #beentherelol) and you should see a page that looks like this:

wordpress tutorial for beginners after propagation

Which means propagation has finished!

We’re going to ignore that that WordPress “Admin Login” button here because once you publish your site this will go away.

Because you should know how to access WordPress your admin section/dashboard always and forever (or at least for the year you bought hosting for).

To do that, just add “/wp-admin” to the end of your URL.

WordPress dashboard login url

In the future, if you’re already logged in this will automatically take you right to your WordPress dashboard!

If you’re not logged in (like we are now, there’s a first time for everything), it’ll take you to the WordPress admin login page that looks like this:

WordPress dashboard login page

Copy/paste your username and password and you’ll get taken to your dashboard.

This’ll look a little crazy at first because of a ton of “your new, you must need to know this” popup boxes.

Let’s just go ahead and click the “x’s” on all of those, we’ve got you in this tutorial.

wordpress tutorial for beginners dashboard

Step 4: How to navigate the WordPress dashboard

Now that we’re in the dashboard, let’s explore!

First off, the WordPress admin page has a couple of main places where you’ll make changes to your site.

The first is this here dashboard, where you’ll find the majority of tools to make changes to your site.

It’s only available to you/people you make WordPress accounts for.

There are also some “customize” options when you’re viewing your main site (and logged in), we’ll cover those below.

First, let’s go over the most important parts of the WordPress dashboard.

Those needles in the proverbial haystack of buttons and pages and options WordPress just dumped on you.

First, you’ll find the name of your site in the top left corner – mouse over this and click “visit site” to go see what your website looks like at the moment (and every time you make updates and changes):

wordpress tutorial for beginners visit site

On the left is the main menu where you’ll find all the tools you’ll use when creating your WordPress website.

wordpress tutorial for beginners dashboard options

Any WordPress website will include the following tools:

  • Updates is where you’ll be able to find and install updates to the WordPress platform as well as any plugins and themes you’ve installed.
  • Posts is where you’ll create new blog posts or update existing ones – things like “Top 10 WordPress Secrets” or “How to Use WordPress Tutorial”. Here you can also view and create categories and tags to help organize your posts.
  • Media where you can add or update all of the pictures, images, or other files on your site.
  • Pages is where you can create or update pages that aren’t part of your blog like the all-important “About” and “Contact Us.”
  • Comments is where you can read, approve, delete or respond to all the comments people leave on your posts and pages.
  • Appearance has a ton of options underneath it, for our purposes the main thing you can do here is install themes. BUT you can also manage widgets, menus, edit your blog’s header, and a few other things depending on the theme you install.
  • Plugins is where you can install different pieces of code that add apps and functionality to your website.
  • Users is where you can create or update accounts for other people on your site, as well as change your WordPress profile (name, password, etc.)
  • Tools by default, here you’ll be able to import and export blog content; plugins can add other options here.
  • Settings has… settings for a whole bunch of things like your blog, the WordPress page/post editor, comments, media, and permalinks.

On top of all that, you’ll also find menu options for plugins you install.

Depending on the plugin’s functionality and how it’s coded, you might find it in the main left-hand menu, or as an option underneath any of the above main menu items.

For example, in our tutorial, HostGator automatically installed a few extra things:

  • WP Forms is actually from a plugin; if you install WordPress through HostGator, they’ll automatically add this plugin for you, if you went with another host that didn’t include it you can add that later – it basically makes it super simple to create contact forms for your site (check out that tutorial here).
  • Marketplace is also something installed by HostGator specifically, it’s a place to get premium themes. We use other sites so this usually gets ignored.

For those of you who really like to be in the know, we’re about to deep dive into all of this.

If you’re looking to just follow along in a quick tutorial fashion, you can go ahead and skip on over to step 5 – how to install WordPress themes.

The WordPress dashboard: A deeper dive

Updates

wordpress dashboard updates option

Like any popular software (content management system or otherwise), WordPress releases a lot of updates – some that make major changes like new features, some that make minor bug fixes and security patches.

These days, WordPress will automatically install minor updates on its own and prompt you to make major updates (because these can sometimes break plugins and themes and they’re smart enough not to do that to you for the sake of everyone’s stress levels).

You will have to update plugins and themes yourself though, which can be done on this page or on the plugins/themes pages.

Posts

wordpress basics post settings

The Posts menu lets you control the content you add to your blog, a few options here:

  • All Posts takes you to a page that lists all of the posts in your dashboard. From here, you can quickly edit one or more posts to change things like categories, tags, and author, or you can click on a particular post to view it or edit its content.
  • Add New will automatically fire up a page where you can create a new blog post.
  • Categories lets you view all the categories your posts are listed under, then edit those and add new ones.
  • Tags is just like Categories, only for tags options-wise. The basic idea here is that each post should only have one Category that groups it with other posts that are similar, while a post might have a lot of Tags based on topics or keywords mentioned in your post.

Media

wordpress dashboard media options

The Media menu item lets you upload videos, images, audio and other files to your site then manage them (change meta details, add them to posts, pages, sidebars, etc).

You’ll find a couple of options here:

  • Library lets you view and edit all of the media you’ve uploaded to your site.
  • Add New is just like it sounds… a quick way to upload new media to your site!

Pages

wordpress dashboard pages options

Unlike blog posts, which show up on a “blog” page that lists all your blog posts in reverse chronological order (aka the last one you post is at the top), Pages are places on your site that don’t change much; things like About, Contact, Our Services, etc.

The usual suspects as far as options:

  • All Pages is basically the pages version of the “All Posts” option above (you can quickly edit all your pages or deep dive into editing one).
  • Add New lets you create a new page. Whoda thunk it!

Comments

wordpress dashboard comments option

Comments lets you manage messages left on your site from other people – both on pages and blog posts.

Clicking on this option will let you read comments that have been left across your site, approve, disapprove or delete them (because spam happens), and leave responses as well.

Appearance

wordpress dashboard appearance options

This menu item is how to a lot of the options for changing the design of your site (though not all of them – see below!).

Lots of options here (these are what any WordPress site will have, if you install certain themes and plugins you’ll find more):

  • Themes is where you can search for and install new themes from the WordPress themes directory, or upload and install themes you’ve found somewhere else online.
  • Customize this one changes a lot depending on the theme you’ve chosen. The basic options are your site’s title and tagline, color, background image, and whether or not you have a static homepage (or one that shows your latest blog posts). Themes/plugins will add a ton of other options to this list.
  • Widgets are boxes of special code you can add to various places on your site, like your homepage, header/footer, or sidebar. What’s “special code” mean? Anything from calendars, social media links, and recent posts to videos, audio players, and contact forms.
  • Menus are lists of links to pages/posts on your site; any WordPress website will have a header and footer menu, certain themes will have more.
  • Header will provide options for customizing your header menu; those options depend on the theme you’ve installed but generally include changing the background color and uploading your logo.
  • Theme Editor is for advanced users as you’ve gotta know at least a bit about coding to use it. Basically, this gives you access to the backend code files that WordPress uses to generate your site so you can add CSS, HTML, JavaScript, and PHP to change the look and functionality of your site.

Plugins

wordpress dashbord plugins options

Plugins are pieces of easy to install code that change how your site looks, feels, and functions.

They can add entirely new features like contact forms that integrate with an email management software like Mailchimp, extend your theme’s capabilities with a drag and drop editor, or let you do backend things like manage page redirects.

Options here:

  • Installed Plugins is the plugin version of “All Pages/Posts” – lets you manage and update the plugins you’ve already installed.
  • Add New lets you find and install new plugins.
  • Plugin Editor is like the theme editor – only for advanced users, definitely requires coding skills.

Users

wordpress dashboard users options

This menu item lets you create new accounts for people on your site (for example, for someone to write blog posts for you or for a web developer to make changes), as well as edit existing users and your own user account preferences.

Options you’ll find:

  • All Users lets you manage all the user accounts on your site.
  • Add New …we’ll let you guess this one.
  • Your Profile is where you can update your user account preferences (email address, password, profile image, etc.)

And each new user you add can have the following roles:

  • Administrators can do anything on your blog from adding new pages/posts/users, to installing plugins and themes and editing everything.
  • Editors can access all posts, pages, comments, categories, and tags but can’t edit appearance, themes, plugins or add new users.
  • Authors can publish and edit posts as well as upload media.
  • Contributors can write and edit their own posts, but can’t publish them or edit other posts/pages.
  • Subscribers can comment on posts and pages (by default anyone can comment, but you can enable “only people who are logged in can comment” in the settings).

Tools

wordpress dashboard tools options

Tools is kind of a catchall bucket for backend functions.

Plugins will add to this list but by default you’ve got three options:

  • Available Tools takes you to a page with a list of tools from certain plugins.
  • Import lets you import data from other website platforms (either another CMS or a website builder) into WordPress.
  • Export Lets you export content so you can import it into another WordPress installation.
  • Site Health shows stats, tips, and info about your site so you can make sure it stays running optimally.
  • Export Personal Data lets you export any personal information about users with accounts on your site.
  • Erase Personal Data lets you erase any personal information about users with accounts on your site.

Settings

wordpress dashboard settings options

This menu holds most of the general settings options for your WordPress site.

Plugins will add more options, the defaults include:

  • General – which lets you configure basic options like timezone, date format, site name, URL, etc.
  • Writing – which lets you set default categories and post format.
  • Reading – which lets you set your homepage to either a static page or your latest blog post and the number of posts to show on your blog page.
  • Discussion – which has settings for controlling how comments work on your site.
  • Media – which lets you change the default sizes for images you upload.
  • Permalinks – which lets you customize the structure of URLs on your site.

Step 5: How to install WordPress themes

Now that we’ve got the basic lay of the WordPress dashboard land, let’s add a new theme.

A WordPress theme is basically just a template you can install with a couple of clicks to drastically change (aka improve) the look and style of your website.

With the right WordPress theme, you can quickly and easily make a website that drops jaws and waters mouths.

So from the main dashboard mouse over to “Appearance” and click on “Themes.”

wordpress tutorial for beginners themes

From here you’ll see that the active theme at the moment is the basic WordPress default “Twenty Nineteen,” and that there are a few other themes (past year’s defaults, when you add a new theme they’ll show up on this page as well).

wordpress tutorial for beginners active theme

But we can do so much better fam, so scroll down a smidge and click on the giant “Add New Theme” box.

wordpress tutorial for beginners add new theme

From here, you can use the little bar to search by featured, popular,  and latest themes to find the one that speaks deeply to your website-building soul.

wordpress tutorial theme filters

By far our favorite “WordPress for beginners” theme is Hestia, which you can find by just typing that into the theme search bar next to the options we mentioned above.

Hestia’s great because it’s super clean, easy to use, and fairly customizable.

If that’s not quite your jam, check out our Top 5 Best Free WordPress Themes for Beginners and Top 10 Best and Responsive WordPress Themes [2019] posts!

Once you’ve picked out a theme (for our WordPress tutorial for beginners, we’re using Hestia), just click on the “Install” button then click that same button again once it becomes  “Activate.”

install theme wordpress tutorial for beginners

You’ll then get taken back to the Themes page, there’ll be a congratulations message at the top, and you’ll see Hestia in your themes list.

Boom, done, got it, nice job, theme installed!

Step 6: How to add plugins to WordPress

Once you’ve got a super sweet theme installed, plugins are the next major thing you’re going to want to look into/install.

Plugins allow you to expand the functionality website.

For instance, if you want to make an online store, you’re going to need product pages, a shopping cart, payment processing, etc.

A lot of work to set up on your own, done for you in like 4 seconds when you install the WooCommerce plugin.

To install plugins, go over to the “Plugins” tab in the main menu, then click “Add New”.

add new plugins wordpress tutorial for beginners

From here you’ll see all the featured plugins and have sorting options just like with themes.

wordpress tutorial plugin page

Click on any of these and you’ll get a popup to learn more about what each does.

wordpress tutorial plugin details

For demonstration purposes here we’re going to install a WordPress plugin called Orbit Fox which adds a bunch of awesome customization options to whatever theme you installed.

So we’ll just search that in the plugin search bar:

search plugins wordpress tutorial for beginners

Click on “Install Now”:

orbit fox wordpress tutorial for beginners

Then once again, Activate once the install button changes over:

install plugins wordpress tutorial for beginners

You’ll then be able to find it in the list of installed plugins, also under the “Plugin” menu in your WordPress dashboard.

If you go there now, you’ll see there are a bunch of default plugins installed and as a WordPress beginner, you don’t really need any of these.

So to get rid of them, just click the checkboxes next to each one you want to deactivate:

bulk select plugins wordpress tutorial for beginners

Go up to the “Bulk Options” dropdown then click “Deactivate”:

deactivate plugins wordpress tutorial for beginners

Then smash that apply button.

Then to delete them, just follow the same checkbox process, just click “Delete” in the dropdown instead of “Deactivate.”

Ahh, feels so much cleaner now!

WordPress plugins: A few of the best

For the sake of keeping our WordPress tutorial quick, we just installed a few plugins and for the sake of time, those are a good place to start.

There are 100,000+ plugins out there so don’t go trying to find and explore them all. Please. For all our sakes.

But if you want to take a slightly longer route working your way through all this “how to use WordPress” stuff there are a few more plugins you’ll want to check out.

We’ve got a big ol’ post on the best WordPress plugins for you here.

If you don’t want to go that deep here’s a nice little starter list:

Features Plugins

Website Optimization Plugins

  • Yoast SEO – the go-to search engine optimization plugin for WordPress.
  • WP Rocket – helps speed up your website’s load times (good for both SEO and your visitors).
  • Autoptimize – makes your site faster by optimizing CSS, JavaScript, images, fonts and more.

Security Plugins

Step 7: How to customize your WordPress theme

Alright, for the next step in our WordPress tutorial, let’s customize the look and feel of your site using your new theme.

We choose Hestia and Orbit Fox for this tutorial because they give you a lot of options and is easy to customize.

If you chose a different theme, you’ll have a lot of similar options but some might be different/missing.

So, to start customizing your theme, head back over to your actual WordPress site by clicking your website name and the “Visit Site” link at the top of the dashboard.

Once you’re there, start customizing by clicking the “Customize” button at the top of the page.

customize wordpress tutorial for beginners

Bam, the website changes to show all the cool stuff Hestia includes by default.

customize homepage wordpress tutorial for beginners

This is exactly how our site is gonna look, minus all the stock images and text and the little pencil buttons.

And we’re gonna make all of it even more awesome!

All the items in the left-hand menu are the controls you can use to change your theme, every WordPress theme will have these (though different themes will give you some different options here).

customization settings wordpress tutorial for beginners

But with Hestia, if you want to change anything on your page, all you have to do is click one of the little pencil icons next to it – not something every theme has, definitely very “WordPress for beginners” friendly and that’s why we love it.

So if we want to change the title or header image, all you have to do is click that little blue icon:

customize element wordpress tutorial for beginners

That’ll open up the options on the left side to make those changes.

new homepage title wordpress tutorial for beginners

So if we change our title here to “Beginner WordPress Tutorials,” it’ll instantly be updated on the page!

new homepage title wordpress tutorial for beginners

Once you’ve made a few changes you’ll want to save your work, just like we used to do for those grade school English papers (this is very arguably more important than lol).

The “Publish” button at the top of the left sidebar will save your page changes and make them live on the internet, go for that if you want.

But, if you’re not quite ready to show your work to the world, click that little gear icon next to the Publish button.

page publishing settings wordpress tutorial for beginners

Click “Save Draft”

save draft homepage wordpress tutorial for beginners

Then that Publish button will now save a draft – your changes will be safe but they won’t be visible on your actual site when you click this.

So now that we’re safe and secure from the “internet is down” demons, let’s swap out the image in our header (that’s the section behind the page title we changed earlier).

Find that image in the sidebar.

update header image wordpress tutorial for beginners

Click “Remove” then “Select Image” when it appears once the image is removed.

homepage select image wordpress tutorial for beginners

From here, you can upload your own images by dragging/dropping them or clicking the button to search the files on your computer.

upload image wordpress tutorial for beginners

Upload an image, click on the “Choose Image” once it’s been uploaded, and boom

choose image wordpress tutorial for beginners

Now let’s say we don’t want the words of our title right in the middle, just click on the “Extra” tab in the sidebar.

customization back button wordpress tutorial for beginners

And you’ll get some layout options to move this over to the left, right, or middle.

font alignment wordpress tutorial for beginners

If you want to change the color of the button underneath our website title, click the back arrow twice to get out of the customization settings for this section:

extra customization options wordpress tutorial for beginners

Then go down to “Appearance Settings,” then “Colors.”

appearance settings wordpress tutorial for beginners

And you can change that pink accent color to whatever you want. We do love blue!

change button color wordpress tutorial for beginners

Now let’s change our fonts and font sizes, click that same back button again to get out of the Color settings and go to “Typography.”

typography settings wordpress tutorial for beginners

Here you’ll get options to change the “font family” for your headings and body text (that’s the text that’s not super big in the titles).

font settings wordpress tutorial for beginners

As well as your font sizes when you click on the, you guessed it, “Font Size” tab.

font size wordpress tutorial for beginners

Step 8: How to add pages in WordPress

Awesome, now that we know how to make our site look super spiffy, time to add some pages like “About” or “Contact” – things aren’t your homepage (always included) or blog posts (we’ll add those next).

Back in the trusty ol’ WordPress dashboard, go down to Pages and then Add New.

add new page wordpress tutorial for beginners

That’ll open up a new page to edit/create.

blank new page wordpress tutorial for beginners

The background around the “Add Title” is pink because that’s what Hestia comes with by default, change that by finding “Featured Images in the right-hand sidebar and add any image you want just like we did when customizing above.

set featured image wordpress tutorial for beginners

Now you can change the title text by clicking on it and typing in something new.

change page title wordpress tutorial for beginners

Then, we can start adding other text to our page by clicking the “Add Block” plus icon in the top right corner.

add block wordpress tutorial for beginners

We’re going to start by selecting a heading from the list here.

add heading wordpress tutorial for beginners

Then type in a heading, hit enter, and you can start typing in body text for your page.

add body text wordpress tutorial for beginners

When you’re at a good stopping point with your page content, hit “Save Draft” at the top of the page to save your work.

save page draft wordpress tutorial for beginners

Then the “Preview” button to see how your page will look when published.

preview page wordpress tutorial for beginners

Do that by clicking the “Publish” button next to the preview button, twice (WP wants you to be extra sure, thanks for having our backs WordPress!).

Now if you want to add this page to your header menu, go back to your main site using the “Visit Site” button at the top, then click “Customize” again, then on the right you’ll see the little blue pencil icon next to “Home” and “Blog” at the top of the page.

Guess what we’re gonna do?

Yep. Click that bad boy.

add menu option wordpress tutorial for beginners

On the left sidebar, the menu options will pop up.

This is our “Primary Menu” so we’re going to click the “Edit Menu” link underneath that.

edit menu wordpress tutorial for beginners

Then “Add Items.”

add page to menu wordpress tutorial for beginners

Then, in the case of this WordPress for beginners tutorial, click the “Our Mission” under “Pages” to add it.

add mission page to menu wordpress tutorial for beginners

Donzo.

mission page added to menu wordpress tutorial for beginners

Some key pages you’ll probably want to have

We just whipped up one page for our WordPress tutorial to show you what’s up on that front.

You’ll probably want a few pages for your site though (unless it’s a one-page design which is a thing these days).

Which pages you’ll want exactly depends on what your site is for, but we’ve got a list of the essentials in our How to Design a Website post here.

Step 9: How to create a blog post in WordPress

Blog posts. They’re what WordPress was built for. 

The how-to guides.

The top 10 tips.

We’ll show you how to add them to your site below.

First, a brief explanation of…

WordPress blog posts vs. pages

wordpress posts vs pages graphic

Well, both posts and pages will:

Posts, pages, what’s the big deal/difference?!

  • Have a title/headline (like “How to Use WordPress Tutorial” or “5-Day Free eCourse”)
  • Have body content (like all the words and images in this post)
  • Have meta info (author, publishing date, etc
  • Can be added, edited, and deleted.
  • Can be seen by anyone or password-protected so only certain people can see them.
  • Can contain text, video, auto, links, and images.
  • Can be spruced up visually and functionally with plugins and themes.

The difference is this:

Pages are less fluid, you tend to have a limited number of them that doesn’t change much over time, and they cover general info about your site, your services, products, etc. 

You might have an about page, contact page, and home page, and that’s it (in addition to your blog posts). 

Posts are displayed on a special “blog” page (like our Written Guides page) and you’ll continually create a lot of these. 

If you’re helping people out with a tutorial (like this ‘un ‘ere), sharing a travel story, recipe or your thoughts on proper deadlift form, that’s probably going to be a post.

Now back to the tutorial stuff…

Back in the dash, Posts -> Add New.

add new blog post wordpress tutorial for beginners

And you’ll have something that looks a lot like the page we made earlier.

That’s because they’re basically the same as far as creating them is concerned, a couple of differences with blog posts.

When it comes to creating your blog posts, the biggest difference is that posts can have “Categories” – groups of posts that all relate to a certain topic.

To add a category to a post, just find that option in the right-hand sidebar.

add new category wordpress tutorial for beginners

Then you can either click the checkbox on a category you’ve already created, or create a new category by typing one into the “New Category Name” box that pops up.

You might also use some different types of blocks like images, galleries, lists, quotes, etc. (You can add these to pages, too!).

Find all the different things you can add to your post in that “Add Block” plus icon at the top left of the page.

types of blocks wordpress tutorial for beginners

One other thing you might do a bit differently with your posts is have multiple heading sizes so that you can have sections of your page (like “Step 8: How to Create a WordPress Blog Post”) as well as sections within sections (eg we could have a “How to Change Your Heading Sizes” subsection inside of this section).

Heading sizes are labeled H2 through H4 in WordPress (H1 is reserved for the page/post title), just click on a heading block and click one of those labels to change that heading’s size.

change header size wordpress tutorial for beginners

When you’re done creating your posts, just hit that Publish button on the top right and you’re set!

Step 10: Creating WordPress Menus

When you smash that “Publish” button on a blog post, it’ll show up on your blog page right away.

BUT if you want your pages to show up in your header menu (which is where you usually link to pages), you’ve gotta add it to your site’s menu by hand (if you don’t have the “Automatically add new top-level pages to this menu” setting checked).

So once you’ve got your WordPress website pages built, jump on over to “Appearance” then “Menus” in the sidebar.

wordpress for dummies modifying menus

If you’re building a website with WordPress 100% from scratch, you won’t have any menus here (though sometimes themes like Hestia or WordPress page builders like Elementor will automatically add them).

Assuming you’re in the creating a website with WordPress 100% from scratch camp, start by creating a name for your new menu and selecting where it’ll be displayed (“header” is nice and clear, and you’ll probably want the “Primary” location though again, your theme might have a different name for the header menu location like “top” or “header”).

creating a website with wordpress make a menu

Tap that “create menu” button and you’ll be taken to the page where you can add pages; select all the pages you want people to have easy access to anywhere on your site, then give that “add to menu” a good clicking.

add to menu building a wordpress website

Now you can drag and drop your menu pages to change their order or make one page a sub-menu item of another.

changing menu order how to make a wordpress website

When you’ve got them where you want them, click the “save menu” button and jump over to your website to give your work a look and yourself a good pat on the back!

Step 11: How to publish your WordPress site

So we’ve definitely smashed that publish button a few times to save our work, but for a new WordPress site, your work won’t be live on the internet for the world to see until we publish… the website.

On the WordPress dashboard, you’re gonna see a little notification at the top that says “Your site is currently displaying a ‘Coming Soon’ page.”

Once you’re locked, loaded, ready to explode it (there’s a reason we’re not pro rappers)…

Crush that “click here” link and let the sparks fly!

publish website wordpress tutorial for beginners

Step 12: How to speed up WordPress

Ahh but we’re not done there yall!

Well, you could be for now – the above steps are all the basics to go from zero to “grandma can visit my website via the internet tubes.”’

BUT. WE’RE. NOT. GOING. TO. LEAVE. YOU. HANGIN’. THERE. FAM.

Because, in addition to creating your actual pages and blog posts and fully customizing your site to your heart’s content, there are a few other things you’ll want to do (on an ongoing sort of basis) to keep your WordPress site running in tip-top shape.

Starting with site speed.

This one’s important for 2 reasons:

  1. If you want free traffic from Google, they’ll want your site to be fast.
  2. If you want people to like using your site instead of leaving out of frustration, you’ll want your site to be fast.

As your website grows, so will the amount of text, images, code, etc.

The more you have, the longer it will take to load, in general.

BUT there are ways you can optimize your WordPress website to keep your pages loading faster than an Olympic 100 meter sprinter (much faster, if your site takes 9.58 seconds to load like our boy Usain took to run no one will visit you).

AND thanks to plugins and the bit of knowledge we’re about to drop, you can keep your site blazing fast and optimized without knowing how to code.

Here are your basic WordPress speed optimization tools and techniques.

WordPress caching plugins

wordpress caching plugins graphic

Step one in the optimization game is Caching using a plugin.

Without getting too technical, a “cache” is a temporary storage of data so it can be loaded faster, in the case of WordPress this include caching on your web hosting server and in the browsers of people that visit your site.

WordPress caching plugins work by creating static versions of your websites so they can be delivered to your visitor’s computers and loaded by their browsers a lot faster than if your web server had to send all the PHP and other code for their browser to compute first.

Some of the most popular WordPress caching plugins include:

WordPress image optimizer plugins

wordpress image optimizer graphic

On the whole, images are probably going to be the largest kind of file on your site.

And large files mean slow loading times.

But we’ve gotta have them in the highly visual world we live in, so what do you do to keep your site as fast as possible while having tons of super sweet images for people to drool over?

Well, there are two main reasons images might slow your loading times down:

  1. Your images are too large

For example, if you upload an image that’s 1080×1080 pixels but your site resizes that down to a 500×500 space when loaded, you’re losing speed for two reasons – you’ve gotta send that larger file over the internet, then your visitor’s browser has to scale down that image before it can be properly displayed.

  1. Your images aren’t fully compressed

Let’s say you’ve done the above work and have that same 500×500 scaled-down image. At full resolution, uncompressed it might be a 3MB file. You can then compress that image – maybe losing a bit of quality that no one will notice, maybe while maintaining full quality – and get that file size down to 2MB. Smaller file = faster loading speed.

Now, you can manually scale and compress your images before you upload them to your site.

But that takes a lot of time when you’re creating a lot of content!

That’s where a WordPress image optimizer plugins come in, including:

Enable gzip compression for WordPress

wordpress gzip compression graphic

Enabling gzip compression increases your WordPress site speed by manipulating the code and text to make it smaller.

It does this by finding similar pieces of text in files and replacing them (temporarily, when your page is loaded everything will show up just as you wrote it lol) which, because HTML and CSS files have so many repetitive pieces of text, can reduce the size of a WordPress page by 50-75%.

There is a technical way to enable gzip compression via your sites .htaccess file that’s less likely to break something… IF you know what you’re doing.

So in the meantime, let’s use plugins like:

Yep, the caching plugins we recommend above all have gzip compression built-in!

Defer parsing of JavaScript in WordPress

wordpress defer javascript parsing graphic

Most of the themes and plugins you’ll use in WordPress use a lot of JavaScript code to make fancy things like sliders and smooth scrolling happen.

By default, browsers will load that JS code first, which makes HTML and images only show up afterward, which makes the site feel slow.

The hack for this: make visual elements load first so people who visit your site see something, then load the JavaScript after so your page’s full functionality is up and running.

Plugins that’ll do that for ya:

Use a WordPress CDN

wordpress cdn servers in the sky graphic

A Content Delivery Network (aka “CDN” because that’s a mouthful), speeds up your WordPress site by caching (saving copies of your site’s files) in multiple data centers around the world.

Example: let’s say your website host has your site on a server in Los Angeles, and someone tries to access your site from London (UK).

It’s going to take time for your website’s files to get sent from LA across the pond to jolly old England (we’re talking milliseconds but it makes a difference).

Would be much faster if those files were already on a server in London; with a CDN, they could be.

To get these speedy speed improvements, you’ll need both a plugin to enable the CDN for your site, and an actual CDN service to distribute and host those files.

Plugins:

WordPress CDNs:

WordPress lazy loading plugins

wordpress lazy loading man snoozing

Normally, when someone visits a page on your site, all the content is loaded at once.

That’s called “eager loading.”

But some content, like images way down at the bottom of your page, doesn’t need to be loaded when someone first gets to the top of your page.

Instead, they could be loaded when, say, a visitor gets 75% of the way down your page, which means the top of the page will load faster.

Another WordPress speed hack!

Plugins that’ll let you lazy load images:

Step 13: How to secure your WordPress site

how to secure wordpress site laptop lock shield

Definitely don’t want your shiny new site to get hacked!

And since WordPress powers around 30% of the internet, there are plenty of hackers (tens of thousands? millions?) trying to break into WordPress sites 24/7.

So you’ve gotta make sure you keep your seals tight and your WordPress site secure.

That means a few things:

Use unique usernames and passwords

“Admin” is the username set by default for the first user created in all WordPress installs.

Definitely want to change that by creating a new Administrator account with a unique name and password.

Because there are a variety of ways a hacker can get or guess your password but not your username.

If that’s the case and you’re still using the “admin” username, well that part of the login equation is done for them.

If your WordPress username is something unreal like “donthackmebro69” well, that’ll be harder for them to get at.

Unless you use that same username on other sites (though you probably shouldn’t use it at all lol).

“Unique password” means all the things it usually does: include numbers, capital letters, and symbols; longer is better.

We recommend using a password manager like LastPass to manage your online/website making passwords – keeps them all in one easy to find place and lets you use unique ones for all your accounts without forgetting them.

Restrict access to your WordPress admin area

This one’s a bit more advanced but a good idea once you get comfortable with making changes to website files on your web host’s server.

As we showed above, you can access your WordPress dashboard – which lets you change pretty much anything on your site – by going to “[yourdomain].com/wp-admin”.

It’s actually possible to restrict access to that page on your site to only people from certain computers!

To do this you’ll need to first find your home IP address by visiting whatsmyip.com.

Then, you can go edit your .htaccess file in your WordPress folder and add the following code, replacing “xx.xxx.xxx.xxx” with your IP address.

<Files wp-login.php>

order deny,allow

Deny from all

Allow from xx.xxx.xxx.xxx

</Files>

If you need access from multiple computers (either for yourself or for people you work with), you can simply add the “Allow from xx.xxx.xxx.xxx” line with other IP addresses again.

All that might be a bit convenient and technical, though.

So as an alternative, you can limit the number of login attempts using:

WordPress security plugins

There are a lot of security plugins that have different functionality, but in general, these are going to offer a few things: 

  • Active security monitoring (to check for hacks in real-time)
  • Notifications for when a security threat is detected (so you can secure your site fast)
  • Malware scanning (to check for malicious code)
  • File scanning (to make sure nothing gets infected)
  • Blacklist monitoring (to protect your site from visits by people at IP addresses known to be used for hacking)
  • Post-hack help (to recover your site if it gets hacked)
  • Firewalls (to limit access to your website’s files)
  • Brute force attack protection (aka “limiting login attempts”)

A few of the top security plugins:

Keep your site up to date and backed up

Which we’re covering… now!

Step 14: How to update your WordPress site

On top of adding cool new features and stomping out annoying bugs, updates also patch up security holes.

With WordPress, you’ll have three things to keep updated:

  1. WordPress itself
  2. Your themes
  3. Your plugins

WordPress will automatically make small updates on its own, bigger ones will wait for your approval (because they might break your plugins/themes).

You’ll also have to do theme and plugin updates yourself.

For any of that, the easiest thing to do is go to your updates tab.

There you’ll be able to update all your plugins, themes, and WordPress itself at once.

Here’s what it’ll look like when everything’s up to date (know it’s not the most helpful screenshot we’ve taken, for security reasons we’re not gonna show you what plugins we use/what needs updating on the sites we care about lol):

how to update wordpress site updated example

Step 15: How to backup your WordPress site

Setting up WordPress backups is super easy but a key part of your security game.

No matter how much you lock your sh*t down using the above recommendations/plugins, accidents and hacks happen.

When they do, you’ll want to be able to get back up and running fast.

That’s what backups are for.

If you want a bit more on how to do this than we cover in the video above, check out our How to Backup a WordPress Site for Free post!

WordPress website tips, tricks

wordpress website tips and tricks rabbit magic hat

Alright, rounding out our WordPress tutorial we’re going to drop a few hot tips to help you get started.

Let’s dive in.

  1. Definitely be sure to customize your homepage and spend a bit more time here than you might on other pages. It’s likely going to be the most visited page on your site, so you want to make sure you have all the important info on what your site is about and that it looks super slick to make a solid first impression.
  2. WordPress has some great online support in the form of documentation and forums you can lean on when you get stuck. We also recommend Stack Overflow for technical questions (with WordPress, hosting, really anything web development related).
  3. In the “Reading” settings under “Settings” be sure to set “For each article in a feed, show” to “Summary” so people don’t have to scroll through each entire post when they get to your blog page. Instead, they’ll just get the first few sentences and can then click “read more” to get the full diggity.
  4. Use images and videos to help break up the text on your pages and posts! (This post is a decent example of that though we could probably stand to include even more visuals lol).
  5. Your “About Us” page is likely to be one of the most visited on your site, so be sure to tell your website’s story and mission in a compelling way here.
  6. We highly recommend using the “Post name” permalink setting (on the Permalink page under “Settings”) – it’s cleaner and better for SEO than including publishing dates in your post URLs.
  7. Make sure your WordPress website looks good on mobile; it’s almost guaranteed that most of your visitors will be reaching your site from their phones.
  8. Include your most important pages (and maybe posts) in your header menu.
  9. Disable comments on pages like “About Us” and “Contact” since you don’t need them there; that can be done by editing the page, you’ll find the option to enable/disable comments under “Discussion” in the right sidebar of the editor.
  10. If you use a sidebar on your site, keep the widgets there organized and at a minimum. You want people focusing on your page’s/post’s main content without getting distracted.
  11. Learn how to add google analytics to WordPress in our tutorial here!

WordPress Tutorial Frequently Asked Questions

Still have questions?

TBH we worked hard on this how to make a WordPress website but we get it – there’s a sh*t ton to know.

Here are a few As to Qs you might still have:

Is using WordPress the only way to create a website?

Most definitely not, there are a ton of website builders like Wix and Squarespace you can use.

We like WordPress because, while it’s got more of a learning curve, it’s cheaper to build websites with WordPress and you get way more control over your site.

What do I need for building a website with WordPress?

Just three things (two of which you can get from our pals over at HostGator):

  1. Hosting (where your WordPress website files will be stored/accessed from)
  2. A domain name (the name people will use to get to your website)
  3. 60 minutes of your time and attention (the resources you’ll use to follow/complete the steps in this using WordPress tutorial 🙂

Do I need to know coding (HTML/CSS) when creating a website with WordPress?

NOPE!

Knowing these coding languages is helpful… eventually.

BUT you’ll pick up what you need to know about them along the way, and they definitely aren’t required to when building WordPress websites!

Is building a WordPress website free?

There are some free WordPress hosting sites, but we don’t recommend using them if you want to build pro websites like we teach you here.

Because?

Because they’ll place branding/ads on your site (ads you won’t get paid for) and most won’t let you use a custom domain name either.

How much does creating a website with WordPress cost?

It definitely depends on the kind of WordPress website you want to build, how many visitors your site gets per month, and which WordPress hosting site you use.

That being said, HostGator (our recommended WordPress host) will get you hooked up with a free domain name and a year’s worth of hosting for $5.95 per month when you get an annual subscription using our link!

How do I get a free domain name for my WordPress website?

Sign up for at least one year of hosting at HostGator using this here link!

Can I make money from my WordPress website?

You sure can!

The 4 main ways that’s done these days:

  1. With display advertising like Google Adsense (people visit your site, you get paid when they see your ads)
  2. With affiliate links (like the ones we use on this site – when you click a link to one of our partners, we get a small commission at no additional cost to you; sometimes you even get special discounts!!)
  3. By selling services (like building a WordPress website 🙂
  4. By creating an online store like we show you how to do in this post!

For even more online business ideas check out our big ol’ post on the topic!

Other WordPress tutorials

Alright y’all, that’s it for today’s tutorial but we’ve got so much more for you.

First, here are a few more WordPress tutorial written guides:

And there are a ton more how-to and tutorial videos on WordPress and anything else website creation related on our YouTube channel!