The Customizer (using the Twenty Seventeen theme)

Previously on the CogitActive Saga:
I decided to use the Twenty Seventeen theme . . . for its professional, stylish look. In particular, I was enchanted by its immersive header image and eye-catching front page with highlighted featured images. In keeping with its business-centric layout, it allows personalizing your site further with a logo.

After a little interruption in my site configuration (see I will need graphics!), I am back on track. Indeed, now that I have the prerequisite graphics (i.e. a header image and a logo)¹, I can resume the personalization of my site(s) appearance.

Just to recap, I have already configured the WordPress (Multisite) Settings – that includes changing the Site Title and Tagline, among other things – and created my navigation menu (for my website). Of course, Twenty Seventeen can be customized further than this thanks to the Customizer, which allows changing easily the look of your site without any coding knowledge.

The Theme Customizer

Significantly upgraded since its introduction in WordPress 3.4, the Customizer is now a powerful front-end editor. It allows users to tweak theme settings using a WYSIWYG interface. Importantly, you can preview changes to your site before publishing them². Hence, you can experiment all the settings without modifying your live site. In addition, using the Customizer will ensure that your modifications are preserved² (once published); they will not be lost when the theme files are updated³.

With the new WordPress Customizer, you can drastically change the appearance and functionality of your WordPress website from one, manageable interface.Tom Ewer

Note that this feature is only available if the active theme supports a Customize ability². Moreover, the Customizer displays only the settings that can be customized for a specific theme. Indeed, themes (and plugins alike) can add options to the Customizer; hence, it will likely be different for each theme.

The Customizer interface

You can launch the Customizer by selecting the Appearance > Customize menu or by clicking on Customize on the toolbar on the top on any page. This will bring the Customizer interface, with all (available) customization settings on the left side of the screen, and the live preview on the right side. You can navigate to different pages on your site within the preview. You can click on any of the blue pencil icons (on the right side of your screen) to open the settings for that particular item. Alternatively, you can navigate to each customization settings through the menu options (on the left side of the screen).

Before to cover the customization settings available with the Twenty Seventeen theme, let me give you a quick tour of the Customizer controls (i.e. the left pane that you can hide with the Hide Controls link located at the bottom). The three icons (on the bottom right), namely desktop, tablet, and mobile devices are Device Preview buttons. They show how your site looks on different screen sizes – an important tool for testing how responsive your theme is.

The Customizer will remind you the name of the site you are customizing – an unnecessary precaution for some, a useful reminder for others. Just below this, you’ll find the name of your active theme (that can be changed from here). Next, there are a number of different menu options, or panels, which expand to show the available settings (see below). Again, different themes include different options in the Customizer controls.

To apply your changes to your site, you need to click the Publish button on the top right. The gear on the right side allows you to change the action associated with this blue button. Thus, you can either Publish (immediately), Save Draft or Schedule (to a date for your modifications to go live). You can also Share a Preview Link (with people who can’t access the Customizer) or Discard your changes altogether. Last, to exit the Customizer, click the X in the top left corner. Beware that if you did not publish (or save) your modifications before, they will be lost.

Twenty Seventeen theme panels

As stated earlier, I have already performed some customizations, such as creating my navigation menu without the use of the Customizer (i.e. elsewhere in my WordPress back end). Granted, the Customizer would have provided an immediate feedback from the preview, but this feature was not essential. Now, for other settings, it is best – if not required when they are not available elsewhere – to make use of the Customizer. Let me go through all the menu options available in Twenty Seventeen, with some emphasis on the settings that I have changed.

Site Identity

This panel gives you control over your site identity. You can add or change the Site Title and Tagline of your site; a task I have already performed though a different interface: Settings > General. Note that you have the possibility to display these items or not (on your site) thanks to a checkbox Display Site Title and Tagline.

From this section of the Customizer, you can also add a custom Logo, as well as a Site Icon. While the suggested dimensions for the logo are 250 x 250 pixels, the theme doesn’t restrict the proportions of the logo (meaning, it doesn’t has to be square). Twenty Seventeen displays the logo on the left of the Title (and Tagline). Good to know: if you have unchecked the aforementioned box, the logo will become bigger. As for the Site Icon (what you see in browser tabs), it should be square and at least 512 × 512 pixels. Naturally, you can remove or change both items. Something that I will do as soon as I have a better version of my logo (see CogitActive logo – a first sketch).

Colors

Even though this panel is included in Twenty Seventeen, the options are rather limited. Indeed, the theme ships with only few color schemes: Light, Dark and Custom. In reality, the Custom option is a very subtle change from the Light scheme (i.e. various hues) and applies to certain elements only. Anyway, the default light color scheme was an obvious choice (at least for the two aforementioned sites).

You can also change the Header Text Color, i.e. the color of the Site title and Tagline. It is a good idea to adjust this option based on the header media background. As for now, the default white sounds adequate for me.

Header Media

This panel controls one of the most appealing feature of this theme, namely the full-screen header on the front page. As explained in the previous post (see Which header media for this blog?), I opted for a Header Image representing a blueprint. Yet, at the time of this writing my illustration is nothing but a blue background. Nonetheless, in order for the header to fit in the theme seamlessly, I uploaded an image (in PNG format) with the recommended dimensions of 2000 × 1200 pixels. Of note, the image will appear in full only on the front page. On single posts or pages, Twenty Seventeen doesn’t display the full header. Similarly, different devices (i.e. screen sizes) will provide different outcome – something worth considering when choosing your image.

You can also upload multiple images and click on the Randomize uploaded headers button. The theme will serve a different header each time the page is loaded – a nice way to provide users with a different experience each time they come to the site.

Twenty Seventeen also allows you to add a Header Video in place of the header image. You can either upload your video MP4 file (2000 x 1200 pixels as well) directly or include a video link from YouTube. Either way, the theme will loop the video without audio and allow the visitor to pause it. Importantly, if you choose to use a video, you also have to add a header image as a fallback (for when the video doesn’t play). Indeed, the video will not be displayed on smaller screens (e.g. phones), as well as on single posts or pages.

Keep in mind that – for either media file – smaller file sizes will help make sure your site is loaded quickly.

Menus

As previously stated, I have already created my navigation menu (without using the Customizer) as detailed in this post:

Creating the structure of my website: from pages to menu

Obviously, the Customizer also enables you to configure your menus, offering an extremely comprehensive set of configurations, squeezed quite comfortably into a small and manageable interface.

Widgets

As for the above panel, Widgets can be managed from two locations: Appearance > Customize > Widgets or Appearance > Widgets. Although the preview feature of the Customizer may prove useful in this scenario, I personally favor the latter option because of the Inactive Widget functionality. Hence, Widgets will be covered in a different post.

Of note, if you prefer to see what your widgets will look like in real-time (still using Appearance > Widgets), things may change with Gutenberg Phase 2.

Homepage Settings

This panel is visible if and only if you have already published at least a page!

Again, a task that I have accomplished from elsewhere on the WordPress back end (Settings > Reading Settings) as explained in this post:

Configuring WordPress (Multisite) Settings

Theme options

This panel is visible if and only if you have set “A Static Page” as your Homepage!

From this panel, you can pick between a one- or two-column Page Layout, a configuration that will apply to all pages. For my website, I have opted for the two-column layout (with title on the left and content on the right) as this provides a more professional look to my site. However, the blog (this site) defaulted to displaying the content on the left and sidebar on the right. Note that if I were to remove all the widgets of the side bar, I will have the two-column layout for the index and the one-column layout for single posts⁴ (even if the theme defaults to the two-column layout).

By the way, even though the sidebar is a classic approach to blog design, I have to acknowledge that the one-column layout for single posts could be more appealing than the two column (with widgets), especially for long posts with comments. Indeed, the two-column layout will result in a lot (as in too much) of white space below the widgets. However, this has also an impact on the right-aligned pullquote location. For that matter, I have a clear preference for the two-column layout configuration. As exemplified earlier with the Customizer Controls screenshot, the sidebar can become a piece of virtual real estate to add supporting material to your main content.

Another prominent feature of Twenty Seventeen is without a doubt the eye-catching front page with content and highlighted featured images from different pages on your site. You can also select your Blog Posts page, and the panel will display your three latest blog posts. By default, there are four different sections you can assign pages to – the magic (assigning pages to each section) taking place in the Customizer: Front Page Section 1 Content.

Select pages to feature in each area from the dropdowns. Add an image to a section by setting a featured image in the page editor.

Additional CSS

Last, but not least, you can make changes to your site appearance using Cascading Style Sheets (CSS) and see them live on the right side of your screen. Of course, you need to know about CSS, the styling language that describes how HTML elements are to be displayed. Fortunately, WordPress will display error messages if you have not written a proper CSS statement. It also comes with coding features such as syntax highlighting, indentation and auto-completion.

The CSS statements you add here will override the current theme. However, even though I definitively take advantage of the live preview to test my CSS statements, I am not adding my custom CSS via this interface (as I will explain in the coming posts).

Final thoughts

The Customizer is worth using to personalize your site quickly (despite the limited set of default panels in Twenty Seventeen). As pointed out, you can do (most of) the same customizations elsewhere on the WordPress back end, but the obvious benefit of making use of the Customizer is its live preview feature. Furthermore, none of the modification you implement will affect your live site until you hit Publish. Thus, you can experiment at will – in particular with the Additional CSS feature – without breaking your site.

Again, I am looking forward to seeing what the customization experience would be like when implemented with Gutenberg. However, in the meanwhile I will have to get into the coding side of things (coming next).

---

¹ Undeniably, these two graphic elements are still “under construction”, but as explained in the previous two posts, these temporary graphics should do it for the task to come, i.e. to finish my guiding tour of the Twenty Seventeen theme. ^
² See Appearance Customize Screen. ^
³ Indeed, if you directly modify theme files (instead of using the Customizer), the modifications may be lost when the theme is updated. Another way to keep your customizations from being destroyed when the theme is updated would be to use a child theme (coming next). ^
⁴ I haven’t tested this myself, but get the info from Morten Rand-Hendriksen (LinkedIn Learning – WordPress Themes: Twenty Seventeen). ^