How to customize WordPress theme

Everyone has a different idea to display their sites. Site layouts in WordPress are known as “Themes” and the entire design of your website is controlled by themes. In this step by step guide, we will show you how to setup basic website design and how to customize theme in WordPress.
Let’s start!!

Basic WordPress Website Design

You can build a professional website with absolutely no technical knowledge because in WordPress, just by a few clicks you can change the entire layout and design of your website. You could got access to over thousands of free themes and customize for a site that’s all your own. Here are just some examples of WordPress Website designs that are completely free.

Free themes of WordPress

To install a new theme, click on the “Appearance” tab on the left menu. On the screen that comes up you are going to click on the button at the top that says “Add New”.

theme-addnew

Appearance >> Add New

You will then be taken to the theme search screen. There are lots of different ways to find a theme you like. You can search by color, layout, and more by clicking “Feature Filter”. In the Feature Filter, check the boxes that you want and then click “Apply Filters”.

theme filter

Feature Filter

You can use filters or search for specific keywords to find themes that suit your site (you should also look for themes that are “Responsive”, it means that they will be resized to fit  on screen of any mobile device)

responsive-design-businesses

Responsive

Now you can browse the themes that have the characteristics that you want. When you find one that you like, hover over it with your mouse and click the blue “Install” button.

theme filter 1

Once the theme is installed click “Activate” to activate the theme on your blog. Now you can go to your site and take a look at your new theme in action.

theme active

Activate theme

As you can see, installing a new theme for your website is very easy. Just choose and click one theme, you’ll be all set!

Customizing your Website Design

After having a basic blog design, the next step in the process is customizing things to your liking. For example, I am using one of defaul WordPress themes called “Twenty Sixteen”.
To customize WordPress theme, firstly clicking on the “Appearance” tab on the left-menu of your Dashboard and click on the “Customize” button.

theme customize

Appearance  >> Customize

This action will bring you to a screen that shows you the customization menu on the left with your blog homepage on the right (If you are using a different theme with me, your options for customization may vary slightly)

theme customize 1

There are a variety of customizations you can do from this screen. Let’s take a look at them one-by-one.

  • Site Identiny: This section allows you to change logo, the Site title and Tagline (display below title) that appear at the top of your Website. You will be able to remove these entirely by unchecking the “Display Site title and Tagline” box. You also can change or remove Site-icon which used as a browser and app icon for your site.
  • Colors: With this option you can change the header text color, primary color as well as your background color.
  • Header Image: Here you can add an image to your liking for the header (each theme will have a different recommend image size)
  • Background Image: This option will allow you to use an image as your background instead of a solid color by uploading the image that you want to use.
  • Menus: In this section you can do all things about menu on your site(create, delete, update)
Attribute Description
Menu Location Choose menu display on Main location. Your theme supports one menu. Select which menu you would like to use. You can also place menus in widget areas with the Custom Menu widget.
Footer Menu Add/delete/update menu item for Footer menu here
Main Menu Add/delete/update menu item for Main menu here
  • Widgets

Widgets are various items that you can add to your website sidebar menus. In this section allows you add new or remove widgets from your sidebar menus.
Clicking on the “Widgets” tab and then click “Sidebar”. This will show you a list of the widgets that are currently being used in the “Sidebar” area. 

theme widget1

theme widget2

 Customizing widgets

You can see 3 widgets: Search, Recent Post, Archives and how those 3 widgets appear on my site, by looking in the right sidebar area. The “Search” widget creates a search box, the “Recent Posts” widget will create links to my most recent posts in the sidebar area and the “Archives” widget shows a monthly archive of my posts.

theme widget3

  • If you don’t want to keep any of these, you will delete them one-by-one. In such case, I just click the arrow next to the widget name and then click “Remove” to delete it.
  • If you want to add other widget in the sidebar area, you can click the “Add a Widget” button and select the widget you want. Once that has been added, click the “Save & Publish” button.

theme widget4

There are a variety of other widgets so feel free to explore and customize your website to your liking.

Although you can customize to make theme look attractive and inviting with the visitors, however, many free themes are very limiting when it comes to design customizations (unless you’re a programmer).
WordPress offten updates its software every few months,. That means your current theme may not be completely compatible anymore. So if you’re using a free theme, often times the developer won’t support it anymore and you’re stuck with a broken site.

If you want more professional or elegant themes than what you find in Free WordPress themes Library, you can head over to ThemeForest.net where there’s a HUGE library of themes to pick from at varying costs.

————-

I hope this tutorial helped you learn basic website design in WordPress and how to customize your theme. You may also want to check out our guide on what are plugins and how to add plugins in WordPress or other instructions in this series.
See you soon in next step!! ^^

Leave a Reply

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