WordPress 101 – A Complete WordPress Tutorial for New Bloggers (Part 2) – Customize Your Theme


This post may contain affiliate links. Please read my disclosure for more information.

  • 9
    Shares

In this complete WordPress tutorial, we’ll walk through installing WordPress, choosing and customizing a theme, installing plugins, creating pages and posts, everything you need to get your blog up and running.

In the first part, we installed WordPress, installed your theme, and covered the items in the main dashboard.

In the second part of this multi-part series, we’ll review the WordPress customizer and how to customize your WordPress theme!

Be sure to subscribe to be notified of when the remaining series are published.

I’m assuming, at this point, that you’ve started a self-hosted blog using the WordPress.org platform.

If not, I recommend you read these posts first:

  1. What is a Blog? Is Blogging Right for You?
  2. 3 Things You Must Overcome to Start a Blog
  3. Building a Brand that Wins
  4. Beginners Guide to Hosting: Why You MUST be Self-Hosted
  5. How to Create a Blog Name that WINS

If you prefer a video tutorial, you can follow along below.

In the video, I toggle between three different free themes: Twenty Nineteen, GeneratePress, and OceanWP.

So, you get a more in-depth look at the various elements you can customize.

Enough intro—let’s get to customizing your theme!

 

How to customize your WordPress theme

Now we get to the fun part. I loved customizing my theme. Although it can be time-consuming and tricky at times, this is your opportunity to make your site look the way you want.

Don’t fret though, if you find yourself wanting functionality that’s not included with your theme, there are multiple ways to find a solution which I’ll discuss later in this series (plugins, CSS, shortcode, hook, etc).

Let me preface this section by saying that my theme may not be the same as yours. Therefore, you may see slightly different options and features. However, the overall look and feel of WordPress should be relatively the same.

Now that’s out of the way, let’s get to customizing! From your WordPress dashboard, hover over “Appearance” and click on “Customize”.

Your customizer dashboard will vary based on what theme you chose. Let’s look at a few examples.

We’ll start with the most basic. Let’s say you chose the new Twenty Nineteen theme. It’s the newest them created by the WordPress team.

WordPress Customizer dashboard

The default customizer will look like this. You’ll have six different elements that you can customize.

WordPress theme customizer dashboard

Next, let’s look at the free GeneratePress theme. As you can see, it has a few more elements that you can customize.

GeneratePress theme customizer dashboard

Now, let’s look at the free OceanWP theme (just a random one I chose as an example). It has even more elements that you can customize.

You may be thinking that more is better, which is true to a certain degree. It’s really nice to have the option to customize almost every element on your blog.

However, it can get overwhelming quick. Which is why you need a tutorial like this 😊. Or you can pay a web designer to help you.

If you’re anything like me, you prefer to do things yourself.

On the other hand, sometimes simple is best. It’s easy to get carried away with customizing and adding so many elements that it becomes a distraction and a time waster.

There’s no right or wrong answer here. So, whatever theme you choose is perfect 😊.

I’m going to use the default Twenty Nineteen theme for this tutorial which will cover the basics.

However, I’ll also reference the free GeneratePress theme as well.

Let’s start by getting to know the WordPress Customizer a little better.

First, hover over the question mark icon to the right of your blog name.

WordPress theme customizer hint
WordPress theme customizer edit icon

As you can see, the WordPress theme customizer allows you to preview changes before publishing, from any page. And they give a nice little tip to look for the “Edit” icon for elements you can edit.

Try clicking on one of the icons and you’ll see the dashboard automatically open to that section where that element is housed.

How to Customize your WordPress Theme Pin

Click here to pin this image

Desktop, Tablet, & Mobile views

Next, you can change the display to render via mobile, tablet, or desktop at any point while you customize.

This feature is great as it allows you to see how the changes you’re making render on the different screen sizes.

NOTE: It’s really important that you test any and all changes on all three views to ensure your site is optimized for all device sizes.

It not only needs to be optimized for mobile, but also mobile friendly.

Meaning, that your reader can easily read and navigate from a mobile device (i.e. font size isn’t too small, font type isn’t hard to read, etc).

To toggle between the views, simply click on one of the display options at the bottom of the WordPress customizer dashboard.

Desktop is first, tablet second, and mobile third from left to right.

WordPress theme customizer screen display

You’ll also see an option to “Hide Controls”. I find it helpful to hide the controls while in desktop view in order to see how things render on the full screen.

Publish

Then, if at any point you’re happy with what you’ve done, be sure to select the “Publish” button.

WordPress theme customizer publish button
NOTE: This will update your live site. The changes will be published for everyone to see.

If you’re not quite ready to publish, but want to save your changes, click the gear icon next to publish and you’ll see options to “Save Draft”, “Schedule”, or “Discard changes”.

WordPress theme customizer publish options

Basic Navigation

Last but certainly not least, if at any point you wish to return to the main WordPress Dashboard, just simply click the “X” button on the upper-left side of the customizer.

WordPress theme customizer exit button

To navigate back to the previous section, simply click the back arrow.

WordPress theme customizer back arrow

Now that you know basic navigation, how to publish and toggle between views, let’s go through the different sections from top to bottom.

WordPress Site Identify

If you recall from part one of this series, while installing WordPress you chose a site name and site description. Well, here it is. Although, it’s called the title and tagline now.

WordPress customizer site identity

This is where you can change this information, if you so choose.

You also have the option to select a site icon. WordPress is quite user friendly. For example, they provide a simple summary of what this icon is and what the dimensions should be.

The example below is what I use for my real blog…

WordPress theme customizer site icon

Here’s what a site icon will look like in an actual browser tab. This example is from Chrome. It’s small, but you can see the icon to the left of the site title and tagline.

WordPress site icon example

Now, you may be wondering how to create a site icon. Don’t worry, I’ve got you covered. It may come at no surprise to some of you that I use Canva to create this.

If you’ve been in the blogging world for any amount of time, you’ve probably heard, seen, or used Canva. If not, welcome to the world of graphic design possibilities.

Canva is a graphic design tool for the Average Joe or Jane. Seriously super simple to use. They have pre-made templates and designs that make creating images a snap.

I’m not going to include a Canva “how-to” in this tutorial. But, I do plan to create one in the near future. So, be sure to subscribe to be notified. Especially if you find this tutorial helpful.

For now, I’d recommend you go search YouTube for a “how-to” and you’ll be up and running in no-time.

NOTE: I used a transparent image for my icon. This feature is only included with a paid Canva subscription.

WordPress Colors

The default color options are pretty basic in the Twenty Nineteen theme.

You have the option to keep the default or select a custom color. If you already know what your brand palette is, I recommend you use your primary color here.

The “Apply a filter to featured…” option was selected by default. I un-checked this so the images would display without the color overlay.

Most other themes, even free ones, will provide a more robust color scheme option.

If you watch the video, I also show the free GeneratePress and OceanWP color options.

WordPress Menus

WordPress, by default, typically creates a “Main Menu” item for you. It’s usually blank. So, you’ll be required to add some items. Let’s take a look.

If you click on the “Main Menu” item, you’ll see options to change the menu name, add items, change the location, auto-add pages to the menu, or delete the menu.

Menu Name

The Menu Name is what displays on your blog. So, make sure you choose something relevant and that readers will understand.

I recommend using the default, “Main Menu” or something like, “Main Navigation” or “Categories”.

WordPress theme customizer main menu

Add Items

If you click the “+ Add Items” button, you’ll see a slide-out with options to add items to your menu.

WordPress theme customizer main menu add items

At this point, you won’t see very many options since you haven’t added any pages or categories. You’ll see whatever pages, categories, or tags your theme or hosting provider created by default.

As you build pages like an “About”, “Contact”, “Start Here” or a “Resources” page for example, you can add them to your menu from here.

You can also add posts, categories or tags.

Let’s say you create a pillar post that’s part of the foundation of your blog (this is referred to as cornerstone content in WordPress). Basically, something you’ll want everyone to see and read, then you could add it to a menu.

Get the latest blogging tips, strategies, and Learn to Earn content delivered straight to your inbox




We hate spam — unsubscribe anytime!

 

Categories or tags are often items included in a menu. This allows your reader to quickly find categories or specific topics that are relevant to them.

Spend some time researching other blogs to see how their menus are set up. It’ll help give you some design ideas.

Menu Locations

Menu locations give you the option to choose where your menu appears. This will vary based on your theme design.

By default, we see options for Primary, Footer, and Social Links.

WordPress theme customizer menu locations

From here, you can select which Menu (even if you only have one) to display in each section. If you don’t want any Menu displayed, select the “— Select —” from the dropdown.

NOTE: You’re not required to display a Menu in each of these sections. You just have the option to.
Primary

The “Primary Menu” will typically be one of the top elements on your page. An element that would be higher than this would be a top bar.

This particular theme doesn’t have an option to add a top bar. But, some themes may. (Like GeneratePress or OceanWP which I show in the video).

You can think of the “Primary Menu” as a place where your readers can learn about the categories or pages within your site.

Here’s an example.

WordPress theme customizer main menu example

The is the default menu that displayed right after I activated this theme. It’s not the prettiest menu by any stretch. But, it gives you an example.

Footer

The Footer element is the bottom element on your page. You also have the option of adding menu items to this section.

You can see an example from this theme below. You have the option to further customize this which we’ll cover a little later.

WordPress theme customizer footer menu
Social Links

Social links is a Menu Location designed for social share icons or buttons. These are really basic but will do the job.

However, there are a handful of free plugins that look way nicer than these which I’ll cover later in this series.

WordPress Widgets

As mentioned in the first part of this series, “Widgets” are content blocks within WordPress that add additional content.

There are around 17 standard widgets types within WordPress. But, you can also add widgets using a plugin or custom HTML.

With this particular theme, you can only add widgets to the footer. However, most themes have a few areas where you can add widgets like sidebars, top bars, headers, and more.

You can add new widget items by clicking the “+ Add Widget” button.

WordPress theme customizer add widget item

A new slide out will display with various widget items. This list will include the 17 default WordPress widgets items, plus any additional items your theme or plugins add.

WordPress theme customizer widget options

You’ll have a handful of widgets active by default.

You can edit them by clicking on the blue pencil icon next to the item or by clicking the dropdown next to the widget name.

For example, if you click the dropdown next to “Search” you have the option to add a title or remove this item.

WordPress theme customizer widget search

There are different settings for each item type. So, play around with those and customize to your liking.

Just remember to keep your reader’s customer experience in mind.

Just because an item is available to add, doesn’t mean you should add it. I see “cluttered” sidebars and footers all the time, littered with widgets and it creates a negative experience, in my opinion.

Make sure the items you select are relevant and are, in some way, useful to your reader.

You may choose to display ads or products, which is perfectly ok. Just don’t overdo it.

Get your creative juices flowing by seeing what other bloggers are doing. Both in your niche and outside your niche. Go to their site and see how their widgets (are laid out.

You can also reorder the existing items. If you click on “Reorder”, you’ll see an option to move the item up or down using the arrows.

You can also just drag and drop any item.

WordPress theme customizer widget reorder

Homepage Settings

Most themes give you the option to set a static homepage or show your latest blog posts.

If you choose static, you’ll need to already have a homepage built, otherwise nothing will show in the dropdown.

If you plan to have a static homepage but don’t have one built, you can click “+ Add New Page”. This will create a blank page that you can build later.

I’ll cover pages later in this series and show you how to build a nice homepage using a page builder like Elementor.

WordPress theme customizer homepage settings

If you choose your latest blog posts, they’ll show in reverse chronological order, meaning the most recent first.

I’ve seen this type of homepage work well for lifestyle, food, and other niche blogs. Take Chasing Foxes for example.

Their homepage displays their latest posts by category. Another example is Jamie over at Savory Savor. His homepage goes right to his latest posts.

A static homepage is a page you create that doesn’t change often. You can obviously change it as often as you’d like. But static means there’s not fresh content being published on the regular.

It really boils down to personal preference for which type you choose. I recommend you research blogs in your niche to see what their homepages are like.

I personally like to have a static homepage to give readers a chance to get to know my brand, what I’m all about, and how I can help. You can check it out here.

Additional CSS

This section is an opportunity for you to directly change the style of your site using CSS.

WordPress theme customizer CSS

CSS stands for Cascading Style Sheets which allows you to add certain layout and color details directly to your site via code. But, it’s separate from your HTML structure.

CSS can definitely be intimidating. But it really shouldn’t be. Once you learn the basic structure and syntax, it fairly simple to do.

I recommend W3Schools to help you learn the basics.

If you take the time to learn CSS, you’ll have greater control over the layout, colors, and overall presentation of your site.

Plus, it will potentially save you from having to hire a web developer to perform some simple styling changes.

Additional Options

Your theme may also have other additional options. The Twenty Nineteen theme doesn’t have them, but the free GeneratePress theme does.

If you click “General Options”, you’ll see a subset of additional options.

I’m going to keep this section pretty high-level because it will vary quite a bit based on your theme and any additional options or features it has.

With this section, you may see options to set primary colors, link colors (including hover—which means the color of your links will change if a reader hovers over it). I recommend this as it enhances the reader experience.

In addition, you may see options to include a background image or several other general settings.

If you include a background image, you’ll see options for position, attachment, and repeat. Let’s go through those briefly.

Position gives you the option to move your image around on the screen a certain way. Select the dropdown to see all the different options and choose the one that best fits your needs.

The nice thing about WordPress is that you always see a rendering when you make a change.

Attachment gives you the option to make your image fixed or scrollable. Fixed means, as you scroll up or down the page, the image remains in the same place.

This adds a neat element and experience sometimes. Scroll obviously means the image with scroll along with your page.

Repeat is pretty self-explanatory. The image will repeat itself to fill the space.

Layout Settings

Your theme may include some sort of layout options.

If so, you may see options to set your page width to full-width or contained and may see options to separate the different content areas creating blank space between them.

Play with each one of these to get a feel for what each one looks like and set your preference.

Generally speaking, it’s best to contain content. Which means to set a maximum width for your body content.

This is especially useful for readers on desktops. You won’t want your text to be the full-width of the monitor if someone is viewing your content from a large screen.

I’d recommend you keep your content contained no wider than 1100-1200px. If it’s a percent, no more than 75%.

You may also see options to see the default page type. Will you want to have a right sidebar, left, both, or none?

Typically you can select a default for the different content types (i.e. page, post, etc).

However, you can usually always override the default layout on each individual page or post.

For example, my blog posts have a right sidebar. But my pages (i.e. About, Contact, Disclaimer, etc) have no sidebar.

You may see more options, but these are typically the most widely used.

To see even more options, watch the video at the beginning of this post.

Conclusion

At this point, you should have a good understanding of the WordPress customizer and how you can customize your theme.

Since theme options and features vary, I’m sure there was stuff I didn’t cover for your particular theme.

If so or if you have additional questions, leave a comment or shoot me an email.

Let’s recap:

We reviewed how to customize your theme using the WordPress Customizer.

Specifically:

  • Site Identity
  • Colors
  • Menus
  • Widgets
  • Homepage Settings
  • Additional CSS
  • General and Layout Options

In part three of this series, we’ll cover WordPress Pages. How to create them using a page builder like Elementor and which pages you need as a new blogger.

P.S. If you found this post helpful, please share. The blogging gods will reward you. 🙂


  • 9
    Shares

Leave a Comment

 


Blogging Phase


 


We hate spam — unsubscribe anytime
 
 


We hate spam — unsubscribe anytime