Site Tutorials

Tutorials »Build a Business Website Tutorial

This guide is designed to help you build a complete website for a small business. It will help you:

1) Choose a theme.
2) Add content to your site.
3) Format your site so it works for a small business.

Before you get started, it can be helpful to think about how you’d like to structure your site. What information and images do you want visitors to find? How would you like to organize them? This will help you decide what pages to add, and give you an idea of how you want the site to look.

You can see an example site that was built using these instructions at jsmithbusiness.com. Here’s what the final site looks like:

businesswebsitedemo-1

Let’s get started!

Choosing a Theme

The first step is to choose a theme for your site. WordPress.com has more than 400 themes, and there are many options for a business website. For a simple site like this one, we have a few specific recommendations:

For the demo site, we used Goran, but you can follow along with these instructions using any of these themes.

↑ Table of Contents ↑

Adding Your First Page

Your site is made up of Blog Posts and Pages. Posts are for content that changes often, like journal entries, or news articles. Pages are for static content, like contact info, or an About page.

The example site has 5 Pages: Home, About, Services, Products, and Contact. You can have as many or as few as you’d like, although most small business websites have 4-10 pages.

Click on My Site(s) in the top left corner, to access your site’s options.  To add a new page, click the Add button next to Pages.

This will bring you to the Page Editor, where you’ll create and edit pages. Your site already has two pages – Home and About. Now, we are adding another page, like the Services page.

In the editor, we set the title to Services, then added our demo content to the Editor below. Go ahead and add your own title and content for a page on your site now. When you’re done, click the Publish button to add that page to your site.

At the top of each page on your site, you can add an image. You can see how this looks on any of the pages in the demo site, such as the About page: jsmithbusiness.com/about. This is set in the Page Editor – the screen you’re currently on – by adding a Featured Image to each page.

Each theme uses Featured Images a bit differently. The Goran theme, which we’re using for our demo site, uses Featured Images as the image at the top of each page. If you’re using a different theme, the Featured Image may show differently.

To set a Featured Image, you’ll use the Featured Image section on the left side of the editor. Click on the Featured Image section, and you’ll see a button allowing you to upload a Featured Image. After adding the Featured Image, click Update to save this change to your page.

You’ve successfully built the first page on your website!

↑ Table of Contents ↑

Editing the About page

Next, we’ll edit the About page. On the About page, you can provide a little information about yourself and your work. Let’s edit the About page. To edit a page, click on My Site(s), then on the Pages option. This will show you all of the pages on your site. Click on the About page to edit it.

There, you can add the content of your choice: text, title, pictures, etc.

In the editor, replace the example text with your own text. When you’re done creating this page, click the Update button to save your changes.

If you want to display an image at the top of your page, you’ll need to add a Featured Image to it. You can do this in the Featured Image section on the left side of the editor. After you add a Featured Image, remember to click Update to save your changes.

↑ Table of Contents ↑

Creating a Contact page

Some themes will add a Contact page automatically. If you see a Contact page already, edit that page instead of creating a new one.

The Contact page gives the opportunity to the visitors interested in your work to contact you directly. On the Contact page for your site, we recommend you don’t include your email address. Having your email address publicly visible can attract spammers. Instead, you can use a Contact Form on your site. When visitors fill out the Contact Form, you’ll receive an email with their message, but they won’t see your email address.

To see an example of this step on the demo site, click here.

If your site doesn’t have a Contact page yet, add one as you did with the first page. Click on My Site(s), then on the Add button next to Pages. Set the title of the page to Contact.

After adding the title, add some text explaining how visitors can contact you, and when they can expect a response. Next, add a Contact Form using the Add Contact Form button.

 

You can edit the Contact Form to include any fields you’d like. In our example site, we have three fields: Name, Email, and Message. You can use the Add New Field button to add a new item to the contact form. When you’re done editing the Contact Form, use the Insert button to add it to your Contact page.

Finally, create your Contact page by publishing it using the Publish button.

If you’d like to see an image at the top of your page, you need to add a Featured Image to it. You can do this in the Featured Image section on the left sidebar of the editor. After you add a Featured Image, remember to click Update, to save your changes.

If you need more information about the Contact Form, take a look at our support page.

↑ Table of Contents ↑

Creating your other pages

If you have other pages that you’d like to add to your site, now is the time to add them. Just as we did before, you’ll want to add a new page using the Add button next to the Pages option.

Repeat this step for each page you’d like to create on your website. You can choose to add as many or as few pages as you’d like. On the demo site, we’ve created an additional page to display Products. Most small business sites also have a page called ‘Home’.

↑ Table of Contents ↑

Creating a menu for your website

Now, we need to add your Pages to the menu. To do that, we’ll use the Menu Editor.

On the demo site, we’ve added 5 items to the menu, one for each page.

businesswebsitedemo-7

To visit the Menu Editor, click on My Site, then on Menus. The Menu Editor shows all of the available menus, and the area that they’re currently assigned to. A theme may have 1 menu area, or more than one menu area. And you can create as many different menus as you want – but only one menu can be attached to one menu area. You’ll want to have one menu area for each menu.

On the demo site, you’ll see a Primary Menu area, at the top of the page. There is another menu in the Footer Menu area, which appears at the very bottom of your site.

When you create a site, a Primary Menu will be created automatically. To add a page to this menu, click the + icon next to any existing menu item, and hit ‘Add menu item below’.

You will see a popup, with your Pages listed. Select the Page you want to add to your Menu and hit Add Item. Then, hit Save on your Menu.

When you’re finished adding items to your menu, remember to click the Save button to save the changes to your menu.

If you want to setup a more complex menu, you can find more detailed instructions on customizing your menu in our support docs.

↑ Table of Contents ↑

Editing Your Home page

A business home page typically is focused on what the business does. Like our example site, most business sites do not feature Blog Posts on the homepage.

To setup a homepage like this, we need to create a Static Front Page:

1) Go to My Sites > Customize (next to ‘Themes’)

2) Then, go to the Static Front Page tab.

3) Under ‘Front page displays’ select ‘A static page’.

4) Then, under the ‘Front page’ dropdown, select ‘Home’.

5) Make sure you hit ‘Save & Publish’ at the top when you are done!

The content of your “Home” page will now appear over the Featured Image on that page. On the demo site for instance, you see “J. Smith and Associates, Inc.” over the picture of the desk.

Below the image, you’ll see that our example has 3 blocks on the front page.

capture-decran-2016-11-15-a-16-49-43

These settings are options offered by Goran, the theme we are using. You can find them in the Customizer (My Sites > Customize), under the Theme Options tab.

You can feature 3 pages of your choice. Each theme has instructions for setting up special features like this. For Goran, you can see those instructions here: theme.wordpress.com/themes/goran

↑ Table of Contents ↑

Selling Products on WordPress.com

If you want to sell products on WordPress.com, you will need a PayPal button. To see an example, take a look at the demo site’s Products page:

Here’s how you can setup a PayPal button:

1) Create the button on PayPal’s site: en.support.wordpress.com/paypal/get-paypal-button-code

2) Follow these instructions to add the button to your WordPress.com site: en.support.wordpress.com/paypal/view-all

↑ Table of Contents ↑

Editing the Widgets on your Pages

Another way to enhance your site’s layout is by using widgets. Widgets are additional content you can add to your site’s sidebars and footer, and can be tailored for each of your pages.

In this example, we are using widgets in two different areas: the footer and the sidebar (on individual pages)

businesswebsitedemo-9

businesswebsitedemo-10

Adding widgets to the footer

The footer of your site is the section at the bottom of each page. On the example site, there are three widgets in the footer. First, you will see two text widgets, displaying some ‘about’ text and some testimonials. You will also see a widget in the middle, displaying contact information and a map.

To add widgets to your footer, go to My Site → Customize → Widgets → Footer. The About and Testimonial widgets are Text widgets, and the one in the middle is a Contact Info Widget.

Here’s a video with instructions on how to add a widget as well:

Adding widgets to the sidebar

If you take a look at pages on the site, you’ll notice they have a sidebar with a search box and social media icons. These are widgets too and there are located in the sidebar area.

Notice how they’re showing on individual pages and not on the front page? That’s because the sidebar is only available on regular pages.

On the demo site’s sidebar, you will see the Search and Social Media Icon Widgets. To add them, go to My Site → Customize → Widgets. There, click on one of your pages in the preview pane, and you’ll see ‘Sidebar’ appear as an option in the Widget area.

Widget visibility

The Contact page on the demo site, has a sidebar with a picture, as well as a search box and social media icons. Notice how the picture shows only on the Contact page? That’s because you can change the visibility of Widgets, making them visible or hidden, on the pages of your choices.

On the demo site, the picture you see is set via an Image Widget. Its visibility settings are set so that it shows up only on the Contact Page.

↑ Table of Contents ↑

Adding your Brand

Once you’ve added your content and images, there are a few other things you may want. These extras help display your brand, so visitors know your business better.

Adding a Domain

Now it’s time to give your website a unique address, via a custom domain. Custom Domains are included with any paid plan on WordPress.com. To add a custom domain:

1) Go to My Sites → Domains → Add.

2) Type the domain name you wish to use into the search field. You can register a brand new domain by choosing one of the available options. If you already own a domain at another provider, you can ‘map’ or redirect it at WordPress.com. Hit the Map It button to do this.

3) Follow the remaining steps to complete the setup process. Mapping a domain you already own requires updating its name servers, so that it points to WordPress.com.

For more help with adding a custom domain, see our Domains support doc.

Custom Logo

The Goran Theme allows you to add a custom logo to the header of your website. This can be added via My Sites → Customize → Site Identity. In the Site Identity section, you have the option of hiding your Site Title and Tagline. You can also choose how you to display the WordPress.com footer credit.

Custom colors

Your brand may have custom colors you would like to use on your website. With a Premium Plan or higher, you have access to a theme’s custom colors. This can be found in My Sites → Customize → Colors & Backgrounds. The number of colors available to customize will vary depending on the theme you choose. The Goran theme gives the option to change the background color, and three accent colors.

To customize a color, click on the color circle you wish to change. Then, choose a preselected color or click the “pick your own color” link to open the color picker tool. The color picker tool allows you to use a color based on a specific hex value. This list of common colors and hex values may may be a good place to start.

For more help with custom colors and backgrounds, see our Custom Colors support doc.

Additionally, there are preselected color pallets in the Colors & Backgrounds section that will apply a pre-made pallete of colors to your website.

↑ Table of Contents ↑

Turning off Sharing for Pages (optional)

As you create your website, one final decision is about how your site will be connected to other sites and social media. WordPress.com provides Sharing buttons at the end of posts and pages, that can be toggled on and off. Here’s an example of what they look like:
Sharing Buttons

Typically, Sharing buttons are used for posts. You can turn off the Sharing buttons for your pages by going to My Site > Settings > Sharing > Sharing Buttons.

On the Sharing Buttons tab, you’ll see an Options section. You can turn off Sharing Buttons for Pages, by unchecking the ‘Pages’ option under ‘Show sharing buttons on’. Then, hit the Save Changes button.

For Pages you’ve already created, disable Sharing Buttons in the Page editor. Here’s how: https://en.support.wordpress.com/sharing/#disabling-sharing-likes-on-specific-posts

↑ Table of Contents ↑

Conclusion

That’s it! You’ve successfully created and setup your business website. Congratulations!

In the future, if you’d like to add to or grow your site, you can do that with WordPress.com too. Try searching our support site, available at en.support.wordpress.com, for the thing you’d like to do!

Not quite what you're looking for?

Get Help