Customize WordPress Theme
Wordpress

How to customize a WordPress theme step by step

My guide shows you step by step on how to customize the free version of the Ashe WordPress theme. Many WordPress themes have similar options, if you are not using Ashe, this guide will help you customize your theme.

Let’s begin customizing.

Open the theme customizer in WordPress

First, we need to open the theme customizer in WordPress. To do that, hover your mouse over ‘Appearance’ in the main menu on the left, and select ‘Customize’ from the popup menu. Like this.

WordPress theme customizer

As you can see, the are many options in this theme. Let’s look at what they do one by one.

Customize options in Ashe

About Ashe

The first option is ‘About Ashe’, this tab offers extra information about this theme. You can upgrade to the paid version, get tutorials, demo content, and documentation.

Skins

Skins allow you to change the color tone of your website. In Ashe, you can select the light default tone or dark tone.

This is the default light skin.

Default light skin

Here is the alternative dark skin option.

Dark skin

When you change an option in the menu on the left, the preview will change to show you how your changes will look on your website. You do not have to do anything to generate the preview, WordPress implements your changes automatically.

Colors

The color option allows you to change the color scheme of your website. You can change the colors of the text and background. There is also a link to a video tutorial on how to change these settings.

If you would like to have an image for your website background instead of white, you can upload an image in this section.

Colour options

General layouts

With this option, you can set the style of your content within your website.

General layouts

The sidebar width option allows you to set the pixel width of your sidebar. Underneath that is the ‘Enable sticky sidebar’ option. If you tick this box the sidebar will follow the visitor as they scroll down your post. Unticked, the sidebar will stay at the top.

The ‘Header width’ is for your large image at the top of the page. Below that is the ‘Featured-slider width’ if you enable a slider on your homepage, this will show under your main header image.

If you want to highlight certain posts or categories you can use the ‘Featured links width’ option to set the style.

‘Content width’ sets the width of content on your homepage. ‘Single content width’ sets the width of your individual post content.

Finally, the ‘Footer width’ sets the style of widgets displayed at the foot of your website.

For a walkthrough of each of the above settings in action, check out this YouTube video.

Top bar

Enabling the ‘Top Bar’ gives you the option of placing a menu above your main header image.

Top bar

Header image

Here you can change the header image. The default image for this theme is in the screenshot below. To change your image, select the ‘Add new image’ link and upload your new image. The ideal size for this image is 1300*500 pixels. Ensure your uploaded image is at least this, otherwise, your image won’t be clear.

Header image

For a tutorial on how to change the header image, check out this YouTube video.

Site identity

In this option, you can upload your logo. The logo will display over your main header image. Below that, you can set the width of your logo.

Next, you can set your image title and tag line. If your logo delivers your website identity without having to set a title and title tag, you have an option to disable.

At the bottom, you can upload a favicon for your site. The favicon is the image that sits in the browser tab. For a tutorial on how to can design a favicon for free, check out my ‘How to create a favicon in Canva‘ post.

Site identity

This section is for your menu. You have the option of setting your menu to the right, middle or left. This theme also has an option to create a mini-menu with its logo. There is a width setting for the mini-menu.

Main navigation

Featured slider

Under your header image, you can have a slider with featured images from selected blog posts. If you enable this feature but don’t have any featured images on your blog posts, the slider won’t work.

Featured slider

To see how this feature works, check out this YouTube video.

If you have posts or categories you want to promote, you can use this option. This section will appear below the featured slider, it will display images and text to posts you set. These images will appear side by side.

Featured links

To see this feature in action, check out this YouTube video.

Blog Page

On your homepage, if you opted for your latest posts to be displayed, this option will be important.

At the top, you can opt for a ‘post excerpt’ or ‘post content’. That means a section of your post or all of it.

Underneath that, you can select how your visitors navigate to another page of your posts. The two options are text or numbers, this is at the bottom of the page. You can have ‘Older posts’ or ‘1 2 3’.

The boxes below that option are for what information you want to be displayed for your posts. In this screenshot, I show you what each option enables.

Blog page

At the bottom, you can opt to show related posts or not.

Check out this YouTube video to see how to use the blog page feature.

Single post

This feature is for you to decide what information you want to display on each post. You can enable show categories, date, comments, author, and author description.

Under that, you can choose to show related posts or not.

Single post

Social media

If you have any social media accounts, you can have links to those pages in the top bar on the top-right. Enter your URL details for each account and an icon will appear in the bar.

Social media

Here is a YouTube video on how to set up this feature.

Typography

This section is to select the font for your logo and navigation text.

Typography

Here you can set copyright text for your website. Use the shortcode to generate the year automatically and display the copyright symbol. The text will appear on all pages on your website in the bottom right corner.

Here is a YouTube video on how to set the copyright text for your site.

Preloader

This option enables preloading animation. When a visitor clicks to visit one of your posts they will see a short animation on the screen as the page loads.

Preloader

Responsive

This section is for you do decide what features you want to display on mobile devices.

Responsive

Here you can create menus for your site. If you have already created a menu in WordPress, it will be listed here.

Create a menu

In this theme, there are three places you can set menus. In the top bar, under the main header image, and in the footer.

Menu locations

Widgets

From this section, you can add extra features to your website. In the WordPress admin, there are many widgets you can use to add to your site. You can see from my screenshot, I have a ‘Site Search’ in the right-hand sidebar, that is a widget. Other widgets include recent posts, video, calendar, text, audio, and many more.

Widgets

Homepage settings

In homepage settings, you can select your latest posts to be displayed on your homepage or you can select a page you have created for your homepage.

Homepage settings

Additional CSS

Additional CSS allows you to add code to change the style of your theme. For example, you want to change the default color of links in your blog posts, you add CSS code that can change the color. Another style aspect could be the text font, you can add CSS code to do that.

You paste your CSS code into the box on the left.

Additional CSS

Don’t forget to publish

If you make any changes to your theme, they won’t be active on your site until you select the blue ‘Publish’ link on the top-left of every section in the customizer. Once you select this link, there will be a short delay as your changes are updated to your website.

Publish

Conclusion

Many new bloggers find WordPress complicated and get frustrated that they can’t get things done. I also felt like this when I started blogging. It felt like I was constantly wasting time trying to learn things.

The learning curve is steep with WordPress, but once you get through that, it is worth it. It is better to have control over your site. The free website services limit you to what you can do on your site. They want you to upgrade, but even with an upgrade, you don’t have full control.

I have shown you how to customize a free theme. Paid themes will have more options than I have here. I haven’t bought a paid theme yet because I am happy with using the Ashe free theme. I want to concentrate on producing more helpful content.

WordPress has hundreds of free themes in their library. The settings will be similar to what I have shown you here. Some themes will have less, some may have more. The most used features are in my post.

If you like the Ashe theme I have shown in my tutorial. You can install it from your WordPress theme library, or direct from their homepage at https://wordpress.org/themes/ashe/.

Comments

What theme do you use?

Do you find customizing your theme easy or difficult?

I look forward to reading your comments.

Sharing is caring!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.