Site Tutorials

Tutorials »Build a Business Website Tutorial

This guide is designed to help you build a complete website for a small business. We’ll start by choosing a theme, then help you add your content to your website and format it the way you’d like.

You can see an example site that was built using these instructions here. Each step will include links to the example site, too. Here’s what the final site looks like:

businesswebsitedemo-1

Choosing a Theme

WordPress.com has more than 300 themes that you could use for your website. For a business website, there are many good choices. For a simple site, like this one, we have a few specific recommendations:

  • Goran
  • Edin
  • Gateway
  • Shoreditch
  • Sequential

For the demo site we used Goran, but you can follow along with these instructions with any of these themes. We’ll indicate where the themes are different from Goran.

↑ Table of Contents ↑

Turning off Sharing for Pages (optional)

As you create your website, one decision to make 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 page, which you can turn off it you don’t want them. Here’s an example of what they look like:
Sharing Buttons

Typically, Sharing buttons are used for posts, but aren’t used always on a page. You can turn off the Sharing buttons for your pages by using the Sharing settings. To access the Sharing settings, click on My Site, then on the Sharing option on the left side. Finally, click on the Sharing Buttons tab at the top of the page.

On the Sharing Buttons tab, you’ll see an Options section. If you don’t want to have Sharing buttons on your pages, you can turn it off by unchecking the Pages option under ‘Show sharing buttons on’. Finally, on that page, click the Save Changes button to save.

↑ Table of Contents ↑

Adding Your First Page

Each separate page on your site will be a separate page on WordPress.com. 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 business websites like this have 4-10 pages.

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

businesswebsitedemo-2

If you click on My Site in the top left corner, you’ll see a menu full of options appear. These are the options you’ll use to build your site. To add a new page, you’ll use the Add button next to the Pages option.

businesswebsitedemo-3

This will bring you to the Page Editor, where you’ll create and edit pages. Your site already has two pages – Home and About, so you’ll want to create a new page that’s not one of those two, and not the Contact page either – we’ll create that later. In the example site, the Services page would be a good place to start.

If you’d like an explanation of what each button in the editor does, you can find one here.

In the editor, we set the title to Services, then added our content to the Editor below. Go ahead and add your 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. Each page on the demo site has this image. This is set in the Page Editor – the screen you’re currently on – by adding a Featured Image to each page.

Different themes use Featured Images differently, but 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. To edit a page, click on My Site, then on the Pages option. This will bring you to a view which shows all of the pages on your site. Click on the About page to edit it.

businesswebsitedemo-4

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

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’d like to see an image at the top of your page, you’ll need to add a Featured Image to this page as well. 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

On the Contact page for your site, you will not want to include your email address – that will get used by spammers. Instead, you can use a Contact Form on your site. When visitors visit your site and fill out the Contact Form, you’ll receive an email with their message, but they’ll never see your email address.

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

To make a new Contact page, we’ll add a new page the same was as we did for your first page – click on My Site, then on the Add button next to Pages. The title of the page is Contact.

In the editor for the page, add some text explaining how they could contact you other than the Contact Form. Next, add a Contact Form using the Add Contact Form button.

businesswebsitedemo-5

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’ll need to add a Featured Image to this page as well. 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 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. On the demo site, we’ve created a Products page as an additional page, but you can choose to add as many or as few pages as you’d like. You’ll want to create one called ‘Home.’

↑ Table of Contents ↑

Creating a menu for your website

businesswebsitedemo-6

Now that you’ve added all of the pages for your site, it’s time to add them to the menu, so that they appear as links on your site. 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.

businesswebsitedemo-8

For the demo site, you’ll see one menu for the Primary Menu area, which we see at the top of the page, and one menu for the Footer Menu area, which appears at the very bottom of your site.

You’ll already see a menu created for the Primary Menu area for your site, and you can now add any other pages to this menu. To add a page to your menu, you’ll use a new menu item. To add a menu item to your menu, click the + icon next to an existing menu item. It’ll give you the option of what you want to add to the menu – in this case, we’ll add a Page to the menu.

For your business site, you’ll probably add most or all of your pages to the menu; however, if you want to setup a more complex menu, you can find more detailed instructions on customizing your menu in our support docs.

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

↑ Table of Contents ↑

Editing Your Home page

A business home page typically is focused on what the business does. It’s not focused on the recent blog posts from your company, or on trying to sell something.

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

To make a home page that’s focused on what your business does, you’ll want to setup a Static Front Page. To do so, go to My Site → Customize → Static Front Page and select your page called “Home” from the list. Save your changes and see your new page as your front page on your site.

Noticed how our example has 3 blocks on the front page?

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

These are an option from the theme. If you go to My Site → Customize → Theme Options, you’ll see you can feature 3 pages of your choice.

↑ Table of Contents ↑

Selling Products on WordPress.com

Selling products on WordPress.com is possible thanks to PayPal button integration. To see an example, take a look at the Products page:

You can learn how to to set up a PayPal button thanks to these instructions.

↑ 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’ sidebars, header 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. In the example site, there are three widgets in the footer: two text widgets, displaying an About text and some testimonials; and the 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 “Contact Info.”

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.

For the sidebar in the demo site, the widgets used are “Search” and “Social Media Icon” and to add them, you’ll want to go to My Site → Customize → Widgets. There click on one of your pages in the preview and you’ll see “Sidebar” appear as an option in the Widgets areas.

Widget visibility

If you take a look at the Contact page on the site, you’ll notice it has a sidebar with a picture, as well as a search box and social media icons.

Notice how the picture is showing on the Contact page only and not on other pages? That’s because you can tweak widgets visibility, making them visible or hidden on the pages of your choices.

For the sidebar in the Contact page, the picture widget is “Image” and its visibility settings are set to “Show only on Contact Page.”

↑ Table of Contents ↑

Adding your Brand

Adding a Domain

Now it’s time to give your website a unique address by adding a custom domain name. Custom Domains are included with any paid plan. To add a custom domain, go to My Sites → Domains → Add. Type the domain name you wish to use into the search field. You can either register a brand new domain by choosing one of the available options, or choose the “Map It” option for a domain you already have registered elsewhere. Follow the remaining steps to complete the setup process. Keep in mind that mapping a domain you already own requires updating the 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 in the Theme Customizer. My Sites → Customize → Site Identity. While you are in the Site Identity section, you have the option to disable the display of your Site Title and Tagline, and choose how 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 and 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 hexadecimal value.

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 pallet of colors to your website.

↑ 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 grown 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