How to Customize WordPress Website like a Pro?

How to Customize WordPress Website like a Pro?

The first thing everyone wants to do after starting a website in WordPress is to customize it.

But, the problem is whether you can’t customize your WordPress website like the top websites you’ve seen. Or you’ve missed something important that makes your website “ahh… it’s okay” but not better.

Many of you just waste most of the time customizing something on the website and every time you visit your website you see something undesired with the design.

Nothing to worry about, this is the tutorial made for you that helps to customize your WordPress website faultless in such a way that you’ll fall in love with your website.

WordPress is one of the best blogging platforms, which has different options to customize a website. You can find the complete WordPress Tutorial in a separate post. 

So, let’s start with:

Why follow this tutorial to customize a WordPress website?

The simple answer to this question is to give a website a professional look whether it’s a blog or an e-commerce site or a business site.

But, what does that professional look mean? Does it simply mean a stylish look? Not actually, it goes more than that.

The first thing you want after customizing your website is the fulfillment of the purpose in which the website is made.

Here are something you should consider while customizing your WordPress website.

Is your website gives better UX?

User Experience Chart that should be taken care while customizing your WordPress website

Customizing a website with the intent to make it more stylish is something you shouldn’t do.

It is necessary to take care of user experience (UX) while designing a website.

UX is highly influential in the overall performance of a website. Whether it’s about attracting users or ranking on Search Engine, UX plays a senior role.

This post will help you in the customization of your WordPress website in such a way that it gives the visitors unforgettable user experience.

MUST-READ: 7 Things You Should Know Before You Start A Blog

Is this particular customization helps to rank better on search engines?

Yes, customization affects the SEO of a website. The way you’ve customized your WordPress website impacts your position on search engines.

Now, you may ask how? As you already know, customization of a website affects UX. And guess what, UX directly influences search engine ranking.

If the design of your website is not user-friendly, people would certainly hit back as soon as they visit your site, which is not at all good from the eye of an SEO.

Learn more about SEO and do it yourself.

Customizing your WordPress website with

  • Unnecessary colors
  • Hard to read fonts
  • Bad webpage design
  • Unnecessary stylizing
  • Nonprofessional header

…really ruins UX, which results in getting no or very little traffic.

Is your website ready to build its own brand and trust?

This is the only reason for most of your website customization.

You don’t have to spend much time to customize your WordPress website just for the sake of UX and SEO.

But, to build your WordPress website into a trustable brand for your users, you need to give some time to customize every bit of your website.

Customizing a WordPress website the right way is important for making loyal customers/users and higher sales by building your own brand and trust for users.

This article will help you to achieve everything you’ve read above by customizing your website like a pro web designer.

Now, let’s start the process of customization of a WordPress website.

Step 1: Choose the best theme to customize WordPress website

This is the first thing you should do before starting to customize your website in WordPress.

You can get almost all customization features with a paid theme but with free themes, there are some limitations.

The basic features needed in the customizer to customize your website perfectly include:

  • Typography customization
  • Colors customization
  • Header and Footer customization
  • Widgets customization
  • Customization for general styling

Free themes limit one or more of these features, but don’t worry I’ve shared tips for you so that you can customize your WordPress website as desired with a free theme as well.

You don’t actually need to buy a WordPress theme just for basic customization features.

Reasons for buying a theme?

  • Security
  • Support
  • Features
  • Update
  • Quality
  • Saves time (no need to learn CSS)
  • Uniqueness

…that free themes rarely have.

 

Some features of a good WordPress theme

  • Speed
  • Mobile responsible
  • Customization features
  • Errorless
  • Good customer support

 

Some of the good themes are
  • OceanWP
  • Hestia
  • Astra
  • Colormag
  • GeneratePress
  • Studiopress
If you want more customization with a free version, I recommend OceanWP.

 

How to customize the theme code?

If you don’t have any coding skills, I suggest not to do anything with the theme code. It may destruct your website.

But if you want to do customization with coding you can do it from WordPress theme editor.

Go to Appereance> theme editor you’ll find the whole code of the theme.

Customizing theme code in WordPress

This is not recommended. You can customize the WordPress website from the customizer.

Customize WordPress pages of your website

The second step in customizing a WordPress website is to customize the pages like homepage, about page and contact page.

These pages need to be customized for making a professional website. See below to know how a homepage is customized.

But, before doing that you need to install a WordPress plugin called Elementor that is used to build and design webpages.

Other page builders are also available there in WordPress but Elementor is the most popular so I’m using this to build a static homepage in the article.

Designing a static homepage for your WordPress website

By default, the homepage of your website in WordPress is a blog post page, in which recent articles appear.

But, for a professional website, it is important to build a static homepage. You can customize the static homepage the way you want it to show your visitors.

You can add the following things on the homepage using Elementor.

  • Forms
  • Categories
  • HTML
  • Custom text, images, and backgrounds
  • Custom posts and pages
  • Buttons
You can encourage users to do certain actions by designing a custom homepage. 

Follow the below procedure to create a custom homepage for your WordPress website.

  1. Add a new page and set its title to ‘home’.
    Add a new page that you want to customize in WordPress
  2. Apply template page attribute to ‘Elementor Full Width’ and click ‘Edit with Elementor‘ button below the title. (Don’t forget to turn off the comments and likes)
    Set elementor full width page attribute to customize home in the WordPress
  3. Select the third icon to choose a page template.
    Select the last icon to add page template that you will later customize
  4. You can create your own page or choose a readymade template. I recommend choosing a built-in template. Here, I’m inserting the first page. You can select any of the available.
    Using the first template as an example
  5. Now, click on any of the items on the page that you want to edit after inserting a page, and start editing by filling your own information.
    Customizing the homepage of the website in WordPress
  6. After editing the whole page click publish.

After creating the custom homepage, you need to set it as your static homepage.

  • Goto settings>reading, then set homepage display as a static page and select home.
    Setting a static page

Customize WordPress website with a logo and a favicon

Before heading to WordPress customizer, you should create a custom logo and a favicon for your website.

A logo is the representation of your website with a graphical symbol. It is very important to build your own brand.

Some examples of the logo are:

A favicon is a symbol shown in the browser in the address bar, bookmark, and history for a website. Google also shows the favicon to the left of the web address in the search results.

You can create a logo and favicon using Photoshop or online tools.

Tips for making them with Photoshop

  • Set width 180px & height 60px (for logo) and 52*52 for favicon; color mode RGB and background transparent.
    Creating a logo
  • Now, you can create any type of logo and favicon within the frame. You need some knowledge of Photoshop to create a logo with it.

To use an online tool, Google for ‘online logo maker’ and choose any of the results shown.

Customize your website from WordPress Customizer

It’s easy for us to customize our website through WordPress customizer.

You can customize your website with the features the theme provides. Free themes have fewer features while paid have more.

In the context of customization, a free theme OceanWP provides almost all the features of a paid theme.

I’m using OceanWP in this tutorial to show you the customization process. It is almost the same for every theme, so, you don’t need to have OceanWP to customize your website following this blog post.

Customizing your website in WordPress with General options

Customizing colors and fonts

In this section, we’ll see how to customize colors and fonts from the WordPress customizer.

Colors and fonts of text should be customized to provide users better user experience.

Theme color: This is the accent color for your website. To build a branded website choose a color for your website.

Hex code is the unique hexadecimal code for a particular color. It is necessary for you to find the hex code of the color you choose for your website.

  1. Google for ‘color picker’
    Searching-on-Google-for-Picker to customize WordPress website
  2. Now, select the color you want and note down the hex code. You’ll need this in the customization of your website.
    Choosing a color that is used to customize WordPress website

Now, open WordPress customizer from Appearance>Customizer.

  • Go to General Options> General Styling> Primary color> enter your hex code for theme code> click publish

Customizing Fonts:

After customizing colors, it now turns to customize font-color, font-size, letter spacing, line height, and font-family.

Don’t use a font that needs more focus to read like cursive or stylish font. Use a simple font like Roboto which is clear and easy to read.

Letter spacing and line-height should also be set for easier readability. Your blog post should be fast readable and easier for skimming.

And, font color should match with the background so that it doesn’t make pressure on the eyes of readers.

Recommended:

  • Font-size: 17px
  • Font-color: #232323 (for white background); black (for grey background)
  • Font-family: Roboto
  • Line height: 1.9px
  • Letter spacing: 0.2px
  • Word spacing: 0.7 px

Follow the below process to customize the fonts and its colors in the WordPress customizer of your website.

  • Goto Typography> Body
  • Set the above-recommended data

Alternatively, you can add the following code into the ‘Additional CSS‘ field in the customizer.

body {
font-family: roboto;
}
p {
color: #232323;
letter-spacing: 0.2px;
word-spacing: 0.7px;
line-height: 1.9px;
font-size: 17px;
}

Bonus: If you want to change the link color paste the below code into additional CSS section using colors of your choice.

a {
color: red;
}
a hover{
color: blue;
}

If you want to change the default selection color use the code below.

::selection {
background-color: green;
color: white;
}

Selection customizing example
Example of selecting the texts

Widgets and menus

These are set according to your necessity. In general, you can include home, contact, about page and search button on the menu.

You can add widgets in different parts of a webpage such as a footer, header, and sidebar on the website according to the provision of your theme.

Follow the below process to create menus.

  • Open customizer and select ‘menus‘ (same in every theme)
  • Choose ‘add new menu‘, insert menu name> set as top bar> click next> Add items

To add widget:

  • Open customizer and select ‘widgets‘ (same in every theme) then add widgets like HTML, text, forms, ads, etc.

Customize header and footer

Generally, a header is the top part of a webpage which includes a logo and navigation menu of the website.

With the help of WordPress customizer, you can change the colors and fonts of the header and add a custom logo.

Footer is the bottom part of the webpage which generally includes copyright text and widgets.

Customize header:

  • Open customizer and select header
  • Try adding logo, favicon and customizing the navigation menu

What if your free theme doesn’t provide you the facility of changing copyright text?

If you are using a free theme, you might not be able to change the ‘powered by [theme author]‘ text in the footer.

To change it with your own text follow this:

  • Goto Apperance> Theme Editor
  • Open footer.php panel and press Ctrl+F, then type any of the default words that are in the footer.
    Finding the footer text that needs to be customized in WordPress
  • Find the exact copyrighted text and replace it with your own.

What if WordPress customizer is not working?

For some reason, your customizer might not work.

The most common problem most people face is while publishing the changes made in customizer.

Solution:

  1. Open the WordPress dashboard in a new tab of the browser and go to the customizer.
  2. You’ll see an option for restore auto-save at the top of the side-panel.
  3. Click on restore auto-save and after loading hit publish.
  4. You’ve just published the changes you had made on the former tab. So, you can close that tab.

For other problems:

  1. Open a new tab on the browser.
  2. Close all other tabs.
  3. Delete browsing data of the browser viz. cookies, cache, history, etc.
  4. Restart the browser and try to customizer again.

Where to get help regarding certain problems in WordPress?

If you face any problem regarding WordPress, you may ask for the solutions in the WordPress.org forums.

There are experts who will reply to your query within a day.

Customize WordPress website login page

If you want to go one step further customizing your WordPress website, you may consider customizing the login page.

Normally, the WordPress login page looks like this:

WordPress login screen of a website before customizing

You can change the background, logo, fonts, and colors of this page.

Why customize the login page?

You may want other people like authors, editors, subscribers, clients, and moderators to register into your website. The users are forwarded to the WordPress login page to register or login to the website.

It looks nonprofessional if you keep the default WordPress login page. To be more professional and build own brand its important to customize the default login page.

Follow the below step-by-step procedure:

  1. To do this install a WordPress plugin
    Unable to save due to 1 invalid setting
  2. Go to Plugins> Add New and search for ‘custom login‘.
  3. Install and activate the first plugin that shows up in the search results.
    Installing the first theme that is used to customize the WordPress login page
  4. After installing, go to WordPress customizer> LoginPress
  5. Now, you can see different options to customize your login page like logo, reCAPTCHA, background, form, etc.
    Option to Customize login page

That’s all for customizing a WordPress website.

After doing this you may now start writing your first article. Learn to write an optimized blog post that easily ranks on Google.

MUST-READ: How to get 100K organic traffic from Google in 3 months?

I described every important step to customize a WordPress website to make it more professional.

Comment below any necessary customization I missed to include in this post.

If you liked the post, give a minute to share it.

You can subscribe to the blog to get free blogging, SEO and WordPress courses for free.

If you’ve any feedback or suggestion, feel free to write.

Leave a Reply