WordPress Themes Explained (Step-by-Step)

Home   /   WordPress Themes Explained (Step-by-Step)

We’re going to talk about themes for WordPress.

Themes are the most important factor in controlling how your site looks. Themes are installed in the same way as plugins, but there are some major differences. For example, many plugins can be installed and activated at the same time. Only a single theme can be active at one time.

After this chapter, you will be able to:

  • Find themes.
  • Install and use themes.
  • Analyze themes.
  • Disable and delete themes.

with the help of following featues …

  1. Finding Themes in WordPress
  2. Installing Themes in WordPress

1. Finding Themes in WordPress

So far in this page, we’ve been using a single theme. Let’s see where that theme is located in our site:

  • Go to “Appearance” and then “Themes”.
  • You’ll see at least three themes (some hosting companies may add more themes).
Finding Themes in WordPress
226-Finding Themes in WordPress

These themes are released almost every year. We’re using “Twenty Seventeen”, for the simple reason that I prefer it and think it’s more useful for beginners. The “Twenty Nineteen” theme is a little too plain and boring, in my humble opinion. Oh, and for the first time in many years, the WordPress team didn’t release a theme in 2018 so there is no “Twenty Eighteen”.

These themes are not really intended for professionally designed sites but are for demonstration purposes. They showcase many of the default features in WordPress and make a good starting point for beginners.

If you want to change the design of your site, the place to go is https://wordpress.org/themes/. This operates in a very similar way to the Plugin Directory we saw earlier in the book. There are 1,000’s of themes to choose from, and all of them are free.

Finding Themes in WordPress
227-Finding Themes in WordPress

If you click on one of the themes, you get a better picture, as well as a description of the theme. The layout of these screens is slightly different from the plugins, but you’ll see lots of the same details, including “Last updated”, “Active Installs”, and “Ratings”.

Finding Themes in WordPress
228-Finding Themes in WordPress

If you’re looking for a particular kind of design, the “Feature Filter” will be very useful. For example, this allows you to select whether a theme has one, two, three, or four columns. You can also select what kind of style you want: blog, e-commerce, news, portfolio, or something different.

Finding Themes in WordPress
229-Finding Themes in WordPress

In addition to all the free themes, there are also commercial themes: https://wordpress.org/themes/commercial/

These are themes that you pay for. They cannot be downloaded from WordPress.org or from within your WordPress site.

Finding Themes in WordPress
230-Finding Themes in WordPress

Notice the detailed description on top of this page? “GPL” is the license used for WordPress code. It says that it’s fine to charge people for your code, but you can’t restrict what they do with that code. In many cases, what you actually pay for from these commercial theme providers is support. They can help you to get the theme configured properly and whenever you get stuck.

What’s different about commercial themes is that usually you buy them and then download a compressed file. To install commercial themes, you go to the “Themes” page, click “Add New” and use the “Upload Theme” button.

2. Installing Themes in WordPress

Let’s go through the process of installing a free theme. This process is very similar to installing plugins.

  • Go to “Appearance” and then “Themes”.
  • Click “Add New”.
  • As you are searching for a theme, you can see what they may look like on your site. Click the “Preview” button:
Installing Themes in WordPress
231-Installing Themes in WordPress
  • For our Wordville site, we’re going to use a theme called Astra. Search for “Astra”.
  • Click “Install” and then “Activate”:
Installing Themes in WordPress
232-Installing Themes in WordPress
  • Click the “Customize” button for Astra:
Installing Themes in WordPress
233-Installing Themes in WordPress
  • You will now see Astra inside the Customizer area:
Installing Themes in WordPress
234-Installing Themes in WordPress

The options contained within the Customizer do vary from theme to theme. Some themes have dozens of options here, and some themes have just a few. 

The next step in our site-building process will be to use the Customizer to design the Astra theme. Let’s walk through the steps one-by-one until we get a great-looking site.

None of these changes go live until you click “Publish”. The Customizer allows you to make changes and view them in your own site with your own content before committing those changes.

  • Click “Layout”, then “Header”, then “Site Identity”.
  • For the logo, upload the wordville-logo.png file from /astra-redesign in the Resources folder. Don’t crop the logo when you upload it.
  • Uncheck the box “Display Site Title”.
  • Modify the “Logo Width” option until the logo fits nicely on your site:
Installing Themes in WordPress
235-Installing Themes in WordPress
  • For the Site Icon option, you can use the same image we chose earlier in the book for the Twenty Seventeen theme. That file was called wordville-logo.png. You might have noticed that we now have two images called wordville-logo.png. WordPress does not have a problem with that and you can safely upload multiple files with the same name.
Installing Themes in WordPress
236-Installing Themes in WordPress

Next, let’s update the color scheme to match our site’s logo:

  • Click the back arrow next to “Site Identity”.
  • Click the back arrow next to “Header”.
  • Click the “Colors & Background” link.
  • Click “Base Colors”
  • Change “Theme Color” to a new color: #d54f22. This is the same orange color used in the logo:
Installing Themes in WordPress
237-Installing Themes in WordPress
  • Change the “Link Color” to #d54f22 also.
Installing Themes in WordPress
238-Installing Themes in WordPress

One thing you may notice is that there’s less room for the menu in this theme, compared to the previous theme. If you narrow your browser window, you’ll see that your menu will break onto a new row when the width is too narrow:

Installing Themes in WordPress
239-Installing Themes in WordPress

We can fix this problem by tweaking the text in the menu links to make them shorter.

  • Click “Menus” and then “Main Menu”.
  • Inside each menu link, shorten the title. For example, “Homepage” can be reduced to “Home”.
  • After updating each menu link, click the up arrow in the top-right corner of the box to minimize the settings for that link.
Installing Themes in WordPress
240-Installing Themes in WordPress
  • Keep doing this until all your menu links use just a single word:
Installing Themes in WordPress
241-Installing Themes in WordPress

What else can we do to use the Astra theme as well as possible? We can certainly improve the footer area.

  • Click the back arrow next to “Menus” so you go up to the top level of the settings.
  • Click “Layout”, then “Footer”, then “Footer Widgets”.
  • Choose the four column layout for the footer:
Installing Themes in WordPress
242-Installing Themes in WordPress
  • Click the back arrow so you go up to the top level of the settings.
  • Click “Widgets”.
  • You’ll now see four footer areas:
Installing Themes in WordPress
243-Installing Themes in WordPress
  • Open each of the four widget areas and add a widget. I have some suggestions for you in the screenshot below, but at this point you should be feeling more confident in your own judgement about WordPress. Use this opportunity to experiment with different widgets:
Installing Themes in WordPress
244-Installing Themes in WordPress

Finally, you might want to improve the footer which contains the copyright information at the very bottom of the page.

  • Click the pencil icon shown below:
Installing Themes in WordPress
245-Installing Themes in WordPress

You can use this opportunity to remove the “Powered by Astra” text if you don’t find that useful:

Installing Themes in WordPress
246-Installing Themes in WordPress

As with the widgets, feel free to play around with Astra’s settings. Do some experimentation and see which features you like.

Tags

Categories

Archives

Translate:

Translate »