Let’s suppose the theme New Shop that I mentioned in the article “How to Install a WordPress Theme on WordPress” is installed and activated, it’s time now to start customizing it:

Go to Appearance > Customize. A live preview will open up; the website will look empty and very basic.

On the left side, there’s a sidebar, we can use it to fill the required information.

WordPress site

You can use it to customize your website the way you like: you can add a background image, change colors, add menu/menus, and many other things that vary from one theme to another.

This free theme allows for very basic changes. But, let’s see how easy customizing a theme under WordPress is.

1. Upload a Logo


Let’s start by uploading a logo image to our site by clicking on Site Identity > Select Logo > Select Files.

For this tutorial, we made a basic logo using Photoshop. To know more, please read this article “How to Make a Logo for a Website: a Step by Step Tutorial

On photoshop, be sure to delete your logo’s background so that your logo fits into any website color: By doing so any background color on your website will be your logo’s background.

The following image shows you how it looks on the site.

logo wordpress customization

As you can see in the previous picture, there’s a tagline and a title under the logo. Let’s delete these two by unchecking the box Display Site Title and Tagline.

uncheck the box Display Site Title and Tagline

2. Create a Menu


Let’s add a menu to our site by clicking on Menus, then Create New Menu.

Under Menu Name, enter the name of the new menu, let’s name it Main Menu. Let’s also check the box Top Menu, and then click on Next.

As you can see, this theme supports three types of menus: Top Menu, Category menu, and Secondary Menu.

three types of menus

It’s time now to add items to this new menu: let’s add Home, About Us, and Contact Us pages. Click on Add Items, under pages click on + sign next to Home to add it. In the field, type The name of each page and click Add.

Pages menu, WordPress

The top menu has been created successfully! Click on Publish to save the modifications.

Top menu

3. Create Categories


The second menu will be very important because it shows our website’s categories.

Let’s create the following categories: Sensors, Security & Cameras, kits & hubs, and Lights & Appliances.
We can create categories by opening up a new WordPress Dashboard (don’t close the first one and be sure to have clicked on Publish). Point your cursor to Posts and click categories.

Under Name, type the name of the category. Under Slug, type the name that should be in the URL: Slug is just that name appearing in the URL, it should be written in lower case and no spaces.

For SEO (search engine optimization) purposes, it’s recommended to write a description for the category.

Add New Category, WordPress

4. Create a Category Menu


After creating the categories, go back to the first window; refresh it. You can follow the same method for adding a menu, but, this time, select the second menu: Category menu.

Menu name, category

Click on Add Item > Categories and click on the + sign next to each category in order to add it to the new menu. Click on Publish to save the changes.

Add categories to menu, WP

5. See How Your Website looks on a Desktop PC


In the Customization Page, on the right, there’s a live preview that shows you how your site looks in real-time, however, that’s not how usually your website looks on a desktop (pc) but only on tablets or small screen sizes desktops.

To see the desktop version of the site (how the website looks on a desktop), close the customizer by clicking on the X which is on the top left side of the screen, then point your cursor to your website’s name and click Visit Site.

Visit Site, WP

Here’s how the header of our website looks after making these changes.

Header, WP site

Please note that it is also possible to create a menu by clicking on Appearance then Menus – For an empty website, we prefer the first method because it is quick and easy.

Until now, two menus have been created, we are not going to show you how to create a third menu because it’s going to be the same process as before, we’ve already made it and it contains Deals & Discounts, Flash Sale, and Blog.

– Blog is a page (I’ll show you how to configure it next).

Deals & Discounts and Flash Sales are categories.

The following picture shows you how the third menu looks:
Third menu, WP

Now the website is getting better and better but it’s not ready to sell products yet. In order to be able to sell products on our site, we need to install a plugin that allows us to do that.

Plugins in WordPress help us add new functionalities to our sites.

Before installing a plugin that adds the ability to sell products online, we should first fix our blog: Our site now shows new blog posts on the front page/homepage, but that’s not what a shopping site looks like: A shopping site uses the homepage to showcase products.

We, therefore, need to move the blog from the homepage/front page to the Blog page that we have already created.

6. Show Blog Posts on Blog Page


We should first create a new page called Homepage. To do this, on WordPress Dashboard, point your cursor to Pages and click Add New.

Type the name of the page “Homepage” and click Publish.

On Settings click Reading.

In front of Your homepage displays, select A static page (select below) then set Homepage to Homepage and Posts page to Blog and Save Changes.

Your homepage displays, WP

Now all your blog posts will be posted to the created Blog page.

To create new blog posts, follow the following instructions:

7. Create Blog Posts


1. On the WordPress Dashboard, under Posts click Add New.2. In the field Enter title here, you can enter the post title. You can write your blog post as if you’re using any text editor: you can change the paragraph; add images, type an ordered list, an unordered list, etc.

Text editor, WP

3. You can preview your post before publishing it by clicking on Preview.

Preview post, WP

4. You can also assign your post to an existing category or create a new one.

5. It’s very important to add an image that represents the blog post by uploading an image under the Featured image.

Featured image, WP

Here’s how our blog looks like now:

Blog, WP

It’s time now to add “the e-commerce” functionality which will turn our website into an e-commerce website. For that, as previously said, we need a plugin.

The question now is going to be: how to install a WordPress plugin?

8. How to Install a WordPress Plugin?


To install a plugin in WordPress using the Dashboard:

  1. Under Plugins click on Add New.
  2. You will see many types of plugins, you can install the plugin you which by clicking on Install Now next to it.
  3. You need to activate your plugin in order for it to function.

9. Turning WordPress Website into an E-Commerce Store


Let’s add the e-commerce functionality to our site by searching for the free popular plugin WooCommerce.

1. Using the Search plugin bar, let’s search for the WooCommerce plugin.

Search plugins, WP

2. Install it and activate it.

WooCommerce Plugin

3. When activated, WooCommerce will need to be configured. Fill in all the required information: Location of the storeaddress, currency, whether you sell digital or physical products. Payment, shipping fees.

It will also ask you whether you want to connect Jetpack, a plugin that will give you detailed insights on your website and other great functionalities.

After completing the configuration, the site becomes ready to be used as an E-Commerce to sell products online.

10. Create Categories for WooCommerce Products


Before adding new products, it’s very important to add some categories.

Haven’t we created some categories?

– Yes, we did, but they are only suitable for the blog posts only, not WooCommerce.

Let’s create the following categories but for WooCommerce this time: Sensors, Security & Cameras, Kits & Hubs, and Lights & Appliances.

  1. On the WordPress Dashboard, hover your cursor over Products and click Categories.
  2. Fill in the required information: name, slug, description and upload an image if you’d like to.
  3. Click Add New Category.
Categories for WooCommerce

11. Replace the Old Menu With a New One


We should remove the categories menu that we have created for the blog and replace it with the new one for products because we would like our visitors to see products when they click on these categories, not blog posts.

To replace the old menu with the new one:

1. Hover over Appearance and click Menus.
2. Next to Select a menu to edit, choose the menu we created earlier ‘Categories’ and click Select.
Menu for WooCommerce Replacement, WP

3. Under Menu Structure, you’ll see the old menu elements, open each element, and click Remove.

Remove menu, WP

4. On the left side, open Product Categories > click View All then select the new elements.

Product Categories, WP

5. Click Save Menu to save the new changes.

12. Add Products to the Store


Now it’s time to add products to our store, to do that:1. Hover your cursor over Products, and then Add New.

2. Add your product information: Title, description, price, category, featured images.

3. Click Publish.

When you fill the store with various products as we did, when your visitors click on a category from the menu, they will see a list of products of that particular category.
Preview website product category WooCommerce

13. Configure the Website Homepage


Now, at this point, you may have noticed that the homepage/front page is empty.

It’s totally normal because we have not configured it to show products yet.

To set it, it’s possible to use “Woocommerce shortcodes”: WooCommerce shortcodes help us show products by different criteria: recent, featured, category, best-selling, etc.

But because it’s a little bit difficult for a beginner, we’re not going to use them in this article.

We will instead set the Shop page as Homepage and we’re done.

To do this:

1. Hover your cursor over Settings, and then click Reading.

2. Set Homepage to Shop.

Set Homepage to Shop, WooCommerce.

3. Click Save Changes.

The website is now complete and ready to sell products.

WooCommerce Website.

Summary


In this tutorial, I tried to answer questions that should be answered before, during, and after website creation.

Making a website today is a very easy thing to do. All is needed is a domain name, a hosting service, and a tool like WordPress.

But, before getting a domain & hosting, one should first plan their websites, set their website’s interests, and choose an adequate name for their business. If you have any questions or suggestions, don’t hesitate to use the comment box below.

< Previous: How to Install WordPress Using Softaculous

Comments to: How to Customize a WordPress Website

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

Subscribe toour newsletter!

Sign up here with your email address to receive updates from this blog in your inbox.