An introduction to the Customizer

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

Go to Customize

Dashboard Home

Dashboard home customize button

The Admin Bar on the Front-End

Admin Bar Customize button

Appearance >> Themes >> active theme

Theme Thumbnail customize button

Appearance >> Themes >> Theme Details

Theme Details Customize button

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.

Colour Selector

Use the Additional CSS feature

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.

Additional CSS tab

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

Additional CSS field

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.

Using Child Themes to customize your website

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.

 

Using the Theme Editor to edit your child theme

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:

Theme Editor

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).

Using a custom CSS plugin for CSS only changes

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
    Simple Custom CSS plugin
  3. Click Install and then activate it

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

Appearance >> Custom CSS

Simple Custom CSS screen

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.

An introduction to sidebars and widgets

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:

twenty-sixteen-sidebars

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.

Inactive Widgets

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
    Widgets Customizer
  • Choose the sidebar position where you want to add or remove a widget.
  • Click on “Add a Widget” button.
    Customizer Add 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

Create a custom front page

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
    Page Attributes - Templates
  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
    Front Page and Blog Setting
  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.

Using colour selectors in the customizer

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:

Colour Setting

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

Colour Selector

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.

Show widgets on select pages

WordPress will show your widgets on every page of your website that contains the sidebar where your widget is published to. This is done by default and it’s the only option you have without using a plugin.

This is usually a problem because you may not want your widget to show on every page, but rather have it on select pages of choice.

You have Two Solutions

We touched based on these two plugins with the Introduction to Plugins and Recommendations tutorial.

  1. Jetpack – For users of Jetpack, you get a feature called “Widget Visibility
  2. Display Widgets – a plugin by Strategy11

There are a few other options out there, but we will go with the two methods listed above.

JetPack Widget Visibility

  1. Go to Jetpack >> Settings >> Appearance
  2. Scroll down until you find Widget Visibility and click on the toggle button
    Widget Visibility Setting
  3. When you go to your widgets, you will find each widget will now have a new setting at the bottom:
    Widget Visibility on Widget
  4. When you click on the “Visibility” button, you now get to configure where and how to publish this widget.
    Widget Visibility Options
  5. From here, you can choose to show or hide on any page you select from the drop down.
  6. When done, click “Save

Using Display Widgets

  1. Go to Plugins >> Add New >> and search for Display Widgets
    Display Widgets Plugin
  2. Click to install and then activate it.
  3. When you go to your widgets, you will find new settings at the bottom of each widget.
    Display Widgets Options
  4. You can show or hide your widgets on each page you select (checkboxes)
  5. Click “Save” when done.

Which One to Use?

Personally, I feel the Display Widgets plugin has a bit more flexibility because you can publish widgets to the full post (single post) whereas with Jetpack’s Widget Visibility, this is not as easy.

However, if you use Jetpack, you already have the capability to show or hide widgets with the Widget Visibility feature, so you won’t need to install Display Widgets. It’s more of a convenience with Jetpack, but again, if you need a bit more flexibility such as a single post option, Display Widgets is the one.

IMPORTANT: Make sure you have only one of the two options active on your site as having both running will create conflicts. 

 

Hide Widget Titles when you need to

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 Titlesby 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
    Remove Widget Titles plugin
  3. Click Install and then Activate it

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

Remove Widget Title

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


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match