How to Customize a WordPress Website

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.

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.

Contents

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.

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.

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.

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

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.

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.

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.

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.

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

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:

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.

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.

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

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.

Here’s how our blog looks like now:

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:

Under Plugins click on Add New.
You will see many types of plugins, you can install the plugin you which by clicking on Install Now next to it.
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.

2. Install it and activate it.

3. When activated, WooCommerce will need to be configured. Fill in all the required information: Location of the store, address, 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.

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

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.

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

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

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.

3. Click Save Changes.

The website is now complete and ready to sell products.

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.