To help you customize your website, the WordPress Customizer is available with a variety of settings and options that are located within panels that you click on.

Accessing the Customizer

There are a few methods of accessing the customizer, but the one that is accessible the most is from the side column in the Admin area under the “Appearance” menu group. However, we will outline all the accesible locations below:

Appearance >> Customize

Dashboard Home

The Admin Bar on the Front-End

Appearance >> Themes >> active theme

Appearance >> Themes >> Theme Details

Default Setting Panels

There are a set of panels that are standard with every WordPress installation:

• Site Identity
• Header Image
• Background Image
• Menus
• Widgets
• Static Front Page
• Additional CSS

If you see other panels included, they will be part of the theme you are using. Themes will offer additional options for your website and will show up along side with the default panels.

Types of Settings

There are a wide range of settings that can be made available to you, many of which are based on the theme that you use. Generally, you will see the following types of settings:

• Text Fields
• Checkboxes
• Radio Buttons
• Range Sliders
• Select Lists
• Text Areas
• Colour Selectors
• Image Uploader

Most settings are associated with basic form elements, so you will be able to recognize many of them. There may also be some custom options added that are specific to a theme.

Colour Selectors

Currently, WordPress only has one type of colour selector that uses HEX colour values. People are still waiting for the implementation of an RGBA colour selector because it would offer a transparency setting too.

Most themes will offer colour selectors to let you customize various elements within your website. Using a selector is quite easy because all you do is drag around a circular cursor and a slider bar to adjust the saturation level of a colour. In our screenshot below, you will see the HEX value #bad631 of the green currently selected.

Customizing your theme styles usually required the use of a plugin to edit the style.css file because if you were to modify this file directly, you would lose your changes whenever there was a theme update.

So the use of a plugin, such as “Simple Custom CSS” which is very popular, was the solution. Actually, we still believe it’s still the way to go when making edits to your theme’s stylesheet(s) because it gives you a lot more room to work with (more on this shortly).

Introducing Additional CSS

WordPress now includes an extra panel in the Customizer called “Additional CSS“. The purpose of this new feature is to let you edit your theme’s CSS without the use of a plugin.

However, it does not give you a lot of room to work in, especially if you plan to do a lot of customization.

If you are making quick simple CSS changes, then this feature comes in handy, but once you start to add a lot more style code, then it gets quite messy and squished to the point it’s hard to read and manage. If you get to this point, then we recommend opting in for the Simple Custom CSS plugin.

Remove the CSS Comment from the Window

As you can see in the screenshot (see further above), you will find this comment:

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

This is a bit confusing for many people because they end up adding their CSS code between the “Your can add your own CSS here” and “Click the help icon above to learn more.” lines and will discover their modification is not working. This is because the comment you see is done in a CSS comment form. Anything between the /* and the */ is a CSS comment, so any code you put in there is going to be seen as only a code comment and not functional code.

We recommend you delete everything there first, then add your CSS code.

IMPORTANT: Whatever code you add to this field, make sure you click “Save &  Publish‘ at the very top of your customizer.

There are times when you need to make changes to your theme that requires modifying theme files. If you were to modify a theme file and an update comes along, you will lose your changes because the update overwrites the theme files.

To reiterate what the WordPress.org website describes why you would want to use a child theme:

• If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
• Using a child theme can speed up development time.
• Using a child theme is a great way to learn about WordPress theme development.

You can refer to the WordPress Child Themes for the full details of creating your own child theme.

Will You be Making Changes?

One thing to consider whenever you are setting up a website, or even if you have an existing website on WordPress, is whether or not you plan to make custom changes. Even if you are not 100% sure right now, it’s something you may do later in time, so I recommend that you give this some serious thought.

Whenever you decide to use a child theme, it means you have to deactivate your theme and activate your child theme. WordPress will see this as a new activation, therefore, you may have to redo all your settings, options, and maybe even widgets. If your website is already established, styled, and many widgets are being used, this makes for a nasty time to put everything back in place and to redo all your option settings.

If you start with a child theme with the possibility that you may customize your theme later in the future, I recommend you start with the child theme right away to avoid the hassles of going back and redoing everything later.

Child Themes Needs a Parent Theme

Before you use a child theme, it’s important to ensure that you have the parent theme installed in your website. It does not have to be active, but it does need to be installed. The child theme will be the one that you activate.

The reason for the need of a parent theme is so that the child theme can inherit the features and functions of the parent. This is important because a child theme is generally going to start out as a blank theme that is waiting for your custom modifications to be added to it. In a sense, because it inherits all the functions of the parent, you are simply adding new functions and styles.

Updating Child Themes

Child themes don’t get updated for the same reason why you do not modify parent themes. The purpose of the child theme is to override and customize the parent theme, so if you updated the child theme, guess what! You lose your custom changes.

The only theme that gets updated is the parent theme, at which point the child theme will “inherit” the new update from the parent theme.

If you NEED to update the child theme, you have to do it manually and only change what is required to update. NEVER do auto updates to a child theme, or upload the complete child theme without knowing what was changed.

BACK-UPS! ALWAYS make back-ups of your theme and website.

How to Modify a Theme File

In situations where you need to modify a theme file (from the parent theme), you copy the file over to your child theme and then make your changes from there. Even if the parent theme gets updated, that file you copied won’t be affected because it exists in the child theme; only the parent theme file gets updated.

IMPORTANT: Whenever you copy a file over into your child theme, make sure that you paste it in the same location that it exists in the parent theme. For example, if the parent theme has this file:

/inc/extras.php

The extras.php file would be copied and placed in the child theme in a folder named “inc“. If the folder does not exist, you will need to make it first. Once done, your child theme will have your file in a matching location as your parent:

/inc/extras.php

Modifying CSS Only

If you are using a child theme and only make CSS changes, you can use the child theme’s own style.css file. No need to use the Additional CSS in the customizer or a plugin.

 

If you are using a child theme and need to edit any of the files, including the styles, you can do it directly in the Theme Editor that is found under the Appearance dashboard menu group.

Appearance >> Theme Editor

Normally when you open up a file, it’s going to be without line numbers and without colourized code like you see in the screenshot below:

To make it easier and better managed, I use the plugin WP Editor for this website. It enhances your editing experience much better than the default WordPress version.

From this screen, you can now view and edit your child theme style.css file. You can also navigate to other files in your child theme (see the right side column) to open and edit as well.

You can read more detail from the WordPress site for Editing Files.

IMPORTANT: Before you start editing any file, regardless if it’s the child theme, parent theme, or other, ALWAYS create a backup first whether it’s simply copying the files or using a Backup plugin (recommended).

You may have noticed there are many ways to edit your website and the theme you are using. We’ve talked about using the Additional CSS feature in the customizer, using a child theme, and also using the WordPress Theme Editor.

We still have another option to allow customizing your theme with only CSS changes. Remember from the Additional CSS tutorial, we talked about the limited space you get to work in, but with the plugin method, you get a lot more real estate to work with.

There are a few custom CSS plugins out there, but the one we recommend is called Simple Custom CSS which was listed in our Introduction to Plugins and Recommendations.

The Benefits

When using the plugin method, you get a few benefits:

• More space to work in
• Because it’s a plugin, changing themes won’t delete your custom CSS
• You won’t lose your custom CSS when a theme is updated

Install Simple Custom CSS

This will guide you through the setup of the Simple Custom CSS plugin.

1. Go to Plugins >> Add New
2. In the search, type in Simple Custom CSS
   
   
3. Click Install and then activate it

Once installed, it adds a link to the Appearance menu labeled as “Custom CSS“.

Appearance >> Custom CSS

To start adding your own CSS code, either remove the /* Enter Your Custom CSS Here */ comment line, or add your code on the next line below.

Sidebars and Widgets go hand-in-hand because they generally require each other to make it work. Without sidebars, you cannot show any widgets, and without widgets, your sidebars will be empty on the front of your website.

Sidebars are determined by the active theme. Each theme will have a set of sidebars coded into the theme, but it’s important to know that sidebars are not the same across every theme. Let’s use the Twenty Sixteen theme for an example. When you activate this theme, you will see the following sidebars and widgets that are available:

Widgets are available by going to  Appearance > Widgets. The big panel on the left side shows all available widgets. The small panels on the right are the widgetized areas.

To add a widget: drag and drop the widget from the left panel to the right panel. You can see in the screenshot above that the “Sidebar” position currently has 4 widgets added.

To remove the widget: drag the widget back to the left panel. If you want to keep the widget setting for future use, drag it to the Inactive Widgets instead of the Available Widgets panel.

Widgets will also be placed there if you switch to a different theme. Because this information is stored in the database, when switching back, your widgets will go back into their original sidebar positions.

If you are temporarily holding a widget in the inactive area and you want to retrieve the widget, drag the widget from Inactive Widgets panel instead of the Available Widgets panel to the sidebar position of choice.

Add Widgets Using the Customizer

There is another way to add widgets to your sidebars and website, but although it’s a small area to properly manage, the WordPress customizer has a setting to add widgets….although we recommend managing your widgets from the main Admin area.

• Go to Appearance > Customize >> Widgets
  
• Choose the sidebar position where you want to add or remove a widget.
• Click on “Add a Widget” button.
  
• A list of available widgets will appear, now select the desired widget.
• Title your widget and perform any other settings (depends on the widget you are using).
• Click “Save & Publish” at the top of your customizer

Dynamic Width Sidebars

Dynamic width sidebars/widgets is something we provide in our premium themes. Normally, a sidebar is a single block area that stays as a fixed area. So for example, if you have two (2) sidebars side-by-side and publish one (1) widget to the first sidebar, your second sidebar is going to show an empty space. That does not look very nice.

Dynamic width sidebars are different in a sense that if we take our example above, the single widget published will automatically resize itself to fill the empty sidebar position to the right of it, giving you one full width widget.

Let’s take another example where we have four(4) sidebars side-by-side and how they will be sized based on how many widgets are published. If we have a sidebar group called Top 1, Top 2, Top 3, and Top 4, then publish a single widget to each position…

• Publish 1 widget = 100% width
• Publish 2 widgets = 50% each
• Publish 3 widgets = 33% each
• Publish 4 widgets = 25% each

Creating a custom front page is also known to the WordPress community as creating a Static Front Page. You can read more detail on the WordPress website for Creating a Static Front Page.

When you first install WordPress, your front page is going to be the blog; the location where your post summaries will be published. A custom (or static) front page is when you move the blog to another location in your website so that you can create a custom front page.

The WordPress site layouts your options as four (4) models.

1. Blog: This is the traditional front page format with posts featured in reverse chronological order.
2. Static Front Page: This is a traditional static HTML site model with a fixed front page and content placed in Pages, rarely if ever using posts, categories, or tags.
3. Static Front Page Plus Blog: This model features a static front page as an introduction or welcome plus a blog to manage posts. Pages may be used to provide timeless content such as Contact, About, etc.
4. Dynamic Front Page: Sometimes called the integrated model, the dynamic site design features a static front page plus blog, however the front page is dynamic. It may feature a combination of static and blog content (Page and posts). The Twenty-Eleven WordPress Theme offers that feature as an example with their Showcase Page Template. It features the most recent post in full or excerpt followed by the next most recent posts as post titles. There is an option to add a slider for featured posts set as Sticky Posts above the first post, creating a dynamic mix of content on the front page.

Let’s Create Our Front Page

This will guide you through the setup of a custom front page by moving the blog to a different location in your website.

1. Go to Pages >> Add New
2. Title your page, for example: Home
3. Add any content to your page in the editor
4. If you want to use a page template, select the template from the “Page Attributes” metabox
   
5. Click “Publish” or “Update“

Now Create Your Blog Page

We’ve made our front page, now it’s time to create our blog page.

1. Go to Pages >> Add New
2. Title your page, for example: Blog
3. Do not add any content to the editor and you do not select a page template.
4. Click “Publish” or “Update“

Set Your Pages

Now we need to go to the Admin settings to assign the pages we created for the front page and for our blog.

1. Go to Settings >> Reading
   
2. In the drop down menu for Front Page select “Home.”
3. In the drop down menu for Posts page select “Blog” or the name you created, or leave it blank if you will not feature posts on the site.
4. Save changes.

If you are lucky enough to have a theme that includes colour selectors from within the WordPress Customizer, you get the flexibility of having almost unlimited colours for whatever they are used for.

The Introduction to the Customizer tutorial, we briefly talked about the colour selector setting, so let’s go a bit further with this one.

If your theme offers colour settings, you can go to the “Colour” (Color) tab of the customizer. You will see something like this:

When you click on the “Select Colour” button, you are then presented with this:

The selector gives you a couple settings, one for the main colour and one for the saturation of the colour (represented by the vertical bar to the right). As you move the round O cursor, you will see the HEX colour value change in the box above the palette area while the colour next to the “Current Colour” label/button displays what it is.

The great thing about using the colour selectors, is that you can see the results in the preview window off to the right. When you are happy with the colour of whatever element you are changing, you can then click the “Save & Publish” button at the top of the customizer.

HEX Colours

HEX colours are the more common type used in websites and themes. Hexadecimal color values are also supported in all browsers, which is why they are the most commonly used method in HTML/CSS.

A hexadecimal color is specified with: #RRGGBB

As W3Schools.com describes it, RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.

There are times when you need to hide a widget title from the front of your site while keeping it visible in the Admin area. A good example is when you have a slider or image banner you want to display.

WordPress does not have the ability to disable your widget title, so people are left with only a few options:

• Don’t add a title to the widget – Makes it difficult to know what a widget is when closed.
• Create custom CSS to hide the widget title – Required you to use HTML code.
• Use a plugin that hides your title for you – The best solution

One plugin that we recommend is called “Remove Widget Titles” by Stephen Cronin. A quality plugin and very easy to use because all you have to do is add an ! exclamation mark right before your title.

Get the Plugin

1. Go to Plugins >> Add New
2. In the search field, type in Remove Widget Titles
   
   
3. Click Install and then Activate it

To hide the widget title, just add an exclamation mark in front of your widget title.

This will show the title in the Admin area but not on the front of your website.