How to Customize your WordPress Theme - Tutorial

Comments
How to Customize your WordPress Theme

How to Customize WordPress Theme is a very frequently asked question. WordPress, as known, is a very user-friendly and great platform to start your own website. With the ease to customize and plenty of features, it is one of the best CMS (Content Management System) to create a beautiful and professional website.

If You Haven't Started your Blog Yet, Check my Step-By-Step Guide to Create your Own Blog in Less Than 20 Minutes.

Now that you started your website, we can dive into some more details. WordPress, as I previously said, is an amazing and powerful tool that allows you to customize your site in almost all kinds of imaginable ways.

Do you think that your website design looks very dull?

If so, don't worry!!

In this post, I'll show you a lot of cool tips and tricks to customize your WordPress theme in simple steps without any coding knowledge.

Basic Website Design

In WordPress, the site layout is called a theme.

What is a Theme?

A theme can control the entire layout and design of your website. The theme takes the content of your website and displays it to visitors in the browser, i.e., what users see when they browse your website. When you choose a theme, you determine how your content will look and displayed.

One of the strengths of WordPress is that you can change your entire site design by changing merely the theme with just a few clicks. To change the theme, you need to click on the Appearance tab in the left-hand menu.

WordePress Dashboard

Default Themes

WordPress already comes with three default themes. You will see the Twenty Twenty, the Twenty Nineteen, and the Twenty Seventeen themes that are already installed on your website.

If you are a beginner, I suggest you use one of these pre-installed themes, Plenty of the most known bloggers choose one of these themes. So, if you want to switch between these themes, go to the Appearance » Themes in the left-hand menu.

WordPress Appearance Themes

Get New Themes

Suppose you're not a big fan of these themes that come pre-installed with your website. You can easily install thousands of additional free themes with simple clicks.

Go and click on the "Appearance" tab on the left-hand menu. Then click on the "Add New" button at the top.

Add New Theme in WordPress

You will redirect to the WordPress Theme Directory. There are about 7,693 themes in this directory, and every theme is reviewed and tested by a professional team against a wide range of rules, all of which ensure a secure and satisfying user environment.

WordPress Theme Directory

You can easily find the theme you like with the advanced search filters by color, layout, and specific theme's features with a simple click on Feature Filter.

WordPress Themes Feature Filter

If you need more than a screenshot to select the theme that you like, you can see the demo for the theme with a simple click on the Preview button.

Preview Themes in WordPress

When you find the theme that fits your needs, hover over it and click the Install blue button.

Install Button WordPress Theme

To activate the theme on your website, click Activate.

Activate Button WordPress Theme

Note: Most WordPress Directory themes come with an installation guide, particularly those who may require more steps than the standard theme installation. Please read these instructions and follow them to install the theme successfully. Contact the Theme Author for support if your theme doesn't function following the instructions given.

Adding External Themes

There are so many great themes marketplaces to find the best themes out there, that most beginners will feel a little bit confused by the vast choice possibilities.

You can download any theme you like outside the WordPress Theme Directory, and install it by clicking on the Appearance » Themes in the left-hand menu.

WordPress Appearance Themes

Then, select Add New.

Add New Theme in WordPress

Click the Upload Theme button at the top to upload a zipped Theme that you have previously downloaded to your device.

Upload Button Theme WordPress

Click on the Choose File button to select your theme.

Choose External Theme  in WordPress

Then, click on the Install Now button to install it.

Install External Theme  in WordPress

Once the theme is downloaded, click the Activate button to activate the theme on your website.

Activate External Theme  in WordPress

Customizing Your Blog Design

Now that you have installed the theme you like, you can further personalize some other basics things like colors, background, and logo.

For this, go to the Appearance tab on the left-hand menu, and then click on Customize.

WordPress Customize Tab

This will redirect you to a screen that shows you the customization menu on the left, and your website homepage on the right.

WordPress Customize Screen

Note: Customization options in the menu vary slightly depending on the theme you are using for your website.

This menu offers a varied range of customizations. So let's take a look at the most important of them.

To starting, click on Site Identity on the left-hand menu.

WordPress Site Identity

Add a Custom Logo to Your WordPress Site

Now it's time for you to stand out from the crowd and add a Custom Logo to Your website.

What Is a Logo?

A logo (an abbreviation of logotype) is a graphic mark, emblem, or symbol used to aid and promotes public identification and recognition. It may be of an abstract or figurative design or include the text of the name it represents as in a wordmark. Source: wikipedia.org

In other words, a logo is a graphic symbol or a stylized name used to mark a company, organization, or brand. It could come in the form of an abstract or symbolic design or a stylized version of the company name.

So let's start by uploading a logo for your website. Go to the Logo section and click on the "Select Logo" button.

WordPress Select Logo

The "Select Logo" window will appear, and on the "Upload Files" tab, click on the "Select Files" button to locate the image on your device. Then choose your image and upload it.

Please note that some themes have suggestions for logo dimensions (i.e., 120 by 90 pixels) and sizes (i.e., Maximum upload file size: 40 MB) you also can crop the image or leave its original dimensions.

WordPress Select Logo Window

As you download your logo, you can see to preview on your website homepage on the right. Most themes place the logo in the top left-hand corner, while others tend to put it below the menu. This might not be a problem, but typical websites place the logo above the menu in the upper left-hand corner.

Now, that you've learned how to add a logo on your WordPress site. What about creating your own logos? If you already have design experience like me, you probably know how to use options like Adobe Illustrator, Photoshop, or others.

For those who aren't doing well with logo design, here are two suggestions:

Hire a logo designer on Fiverr

Fiverr Freelance Website

Fiverr is the leading online marketplace for freelance services. In other words, Fiverr is a global online marketplace offering tasks and services that are called Gigs. Starting at the cost of $5 per job provided, from which it gets its name.

Fiverr Logo Design

The site is primarily used by freelancers to offer services to customers over the world. You can browse around the site and find the designer you like by looking at their past work and what they offer and the prices they charge. You buy the service, he does your stuff, and everyone is winning. Just like with almost any other service, you need to choose your designer wisely.

Find a Designer on Fiverr

Use a Tool for Building Logos

Tailor Brands is an easy-to-use brand building and automated logo design service. Using Artificial Intelligence with an extensive template library, Tailor Brands' logo maker can create for you unique and stylish logo designs in a matter of minutes. So, you don't need to invest loads of time and money, and you don't need any technical skills to get a stylish logo.

Tailor Brands Logo Maker Website

Here comes the best part, Tailor Brands is free to use. You can design your logo and see what it looks like and download a low-resolution version of your logo without any charge. However, if you're 100% happy with the design, you can buy a high-res Vector file.

Tailor Brands Logo Design

According to the company, Tailor Brands create a new logo in every second and has 14 million users around the world. And with over 500 million designs created on this platform, Tailor Brands will surely be your personal brand tool.

Build your Logo on Tailor Brands

Change the WordPress Site Title and Tagline

The title of your website and the tagline are some of the essential elements that can distinguish your site and help people and search engines to understand what your website is about.

The title works as your website brand name, so try to keep it short and meaningful, while the tagline is a brief description that helps to understand the purpose of your website.

WordPress, by default, comes with a title and tagline that you'll have to change. So make sure you replace them with your own.

Go to Appearance » Customize » Site Identity.

Site Title & Tagline in WordPress

Or Go to your WordPress dashboard » Settings » General

Add Title and Tagline

Upload a Favicon to Your Website

What is a favicon?

A favicon is an icon that represents your brand (or logo) over the web and different devices. It appears next to your website title into the browser. It's a part of your site's visual identity that helps people to identify your website where ever they see this icon quickly. It can also help you to build recognition for your brand and gain trust with your audiences.

To upload the favicon for your website, go to Appearance » Customize » Site Identity tab. In the Site Icon section, click upon the select site icon and upload the image you want to use as your website favicon. At least the image size should be 512x512 pixels.

Upload a Favicon

You can now check your favicon on your website in the browser next to the title.

Change Background Color and Text Color

In the Colors section, you can change the header and footer background color as well as the text color Primary Color.

Change Text and Background Colors

Set a Background Image to your Website

In this section, you can set an image to your website background instead of a solid color. Go to Appearance » Customize » Background Image, then click on Select Image and upload your image.

Set a Background Image

Please note that the size of the header image varies depending on the theme used.

Change or Add Menus to your Website

First of all, you need to know

What is a Navigation Menu?

A navigation menu at the most basic level is a collection or list of links, called a menu item pointing to important website pages, posts, or even external links as your Youtube channel or Facebook profile. They are usually displayed at the top of every page on a website as a horizontal bar. Some menu items may have sub-menu items that appear in a drop-down menu.

Navigation menus give structure to your website and help users to find what they're looking for.

WordPress makes it easy to add many navigation menus and choose which of them you want to use in different places or even different devices. The menu needs to have already been created, which I will show you how to do it on this post in the following steps.

Please note that most WordPress themes have many options to create different menus that can be showing in different places.

Creating Menus

So let's start the next step by creating your first basic navigation menu that can help users to find relevant pages of your website quickly.

To create your navigation menu, you need to click on the Appearance tab on the left-hand menu in your WordPress admin dashboard, then click on Menus.

Menu Button

Now, you need to give a name to your new menu, go to the Menu Name box and enter the name you choose, e.g., "Top Menu", and click the Create Menu button.

Menu Name Box

Now, you can start adding the pages you want to the menu. You can either add specific pages or automatically add new top-level pages.

To select specific pages, click on the View All tab to see all your website's pages. Check the box next to each page you want to add to your menu, then click on the Add to Menu button.

Add Pages to Menu

Once the pages have been added to the menu, you can arrange them as you like by dragging and dropping them.

Arrange Menu

Now, you need to select the location where you want to display your menu, then click on the Save Menu button.

Please note that most themes have several different locations to display menus. In our example, we're using the default Twenty Twenty theme, which has five different locations.

Menu Display Location

To add Custom Links to your navigation menus, WordPress has made it super easy. Click on the Custom Links tab on the menu screen.

Custom Links Section

Simply enter the URL along with the Link Text which is the text you want to appear in the menu, then click on Add to Menu.

And that's it. You have created your first menu on WordPress.

Add Widgets to your Website

In WordPress, widgets are sections of content that can be added and displayed to the website's sidebars, footers, or other areas. Most themes display widgets in the sidebar and footer. In contrast, some show them in lots of places, such as in the header or below or above content.

In most cases, widgets are displayed on every page on the website, but you can also personalize widget areas for specific pages such as the homepage.

Widget button

To add a widget, click on Widgets choose wherever you want to add it (Sidebar, Footer...), for our example, I prefer the Footer section "Footer #1".

Widget Location

This will display a list of the widgets that are already added to the Footer #1 area. As you can see we have six widgets: Search, Archives, Recent Posts, Recent Comments, Archives, Categories, and Meta.

By looking in the right-hand section, you can see how those six widgets are displayed on your website.

If you don't want to keep one of these widgets, so you can delete it with a simple click. To delete a widget, click the arrow next to the widget name then click Remove.

Remove Widget

Now that you know how to remove a widget let's see how to add a new. To do so, click on the Add a Widget button and select the widget you want.

Add New Widget

A menu will be displayed on the right, and you'll find several widgets you can add, so feel free to explore.

Widgets List

For our example, let's add the Calendar widget, which will display the current month's calendar with the dates that you add posts on the footer area. Enter the title if you want, then click the Done button and Publish button on the top.

Calendar Widget

Other Helpful Tutorials

Here are some other tutorials if you need to make some additional changes to your blog before writing posts:

  1. The 19 Most Important Settings to Do After Installing WordPress.
  2. How To Create A Custom Professional Business Email Address.

I hope that after completing these steps, you'll have got an operational and beautiful blog.

Note that you don't have to get all right away. You can always return and make more adjustments later.

As always, if you have any suggestions or you find any difficulty in doing the WordPress settings, feel free to drop me a line in the comments below.

Comments on "How to Customize your WordPress Theme - Tutorial "