The Customizer of WordPress allows you to tweak the Appearance settings of the theme and gives you a live preview of those changes. Our themes also add options to the Customizer, which let you configure various elements of the theme.
How to use the WordPress Customizer
You can open the Customizer by clicking on Appearance → Customize in your WordPress backend. You can also use the Customizer by clicking on the Customize link underneath the theme screenshot on Appearance → Themes.
You can also click on the Customizelink in the WordPress toolbar in order to open the Customizer.
Default Sections in the Customizer
By default, WordPress adds following sections to the Customizer.
Site Identity You can change the site title and description here, and upload a custom logo image.
Our themes add a new section Theme Options for all theme settings. Depending on the theme you’re using, the section will have different sub sections. Usually there will be sections for general settings, blog and post settings as well as theme colors and fonts (with the Pro Add-on).
The Customizer shows all settings in the left sidebar and a live preview of your website on the right hand side. You can also click on the blue Edit icons to open the setting for this element.
Most of our themes support the header image feature of WordPress Core which allows you to display an extra image in the header area, usually below the navigation menu.
The header image is usally a big fullscreen image. If you are trying to replace the site title with a smaller logo image, have a look at our Logo Image tutorial instead.
Adding a custom header image
You can upload the header image in the Customizer. Please go to Appearance → Customize → Header Image.
Click on the Add new image button to select a header image from the media library or upload a new image. The description above the Current header setting shows you the recommended size for the header image.
After selecting a header image WordPress allows you to crop the image to your liking. If you upload multiple images you also have the possibility to randomize the uploaded header images.
You can remove the header image by clicking on the Hide image button.
Header Image Settings
The location of the header image is defined by the theme and can not be changed. For most of our themes, we chose to display the header image below the navigation menu, while the Logo image is typically displayed in the header area above or beside the navigation.
Some of our themes support extra settings to link the header image to an external URL. Otherwise the header image usually links to the homepage.
There are also settings to hide the header image on the front page, which is great if you want to show the Post Slider or Featured Content area of the theme on the homepage.
Please note that header image settings are theme related and not included in every theme.
Widgets are simple content blocks which allow you to customize your sidebar easily. Our themes often use widgets, not just for sidebars but also for the Magazine template and footer areas.
You can add and configure your widgets on Appearance → Widgets in your WordPress backend.
Adding widgets is easy. Simple drag the widget from the Available Widgets area on the left into the Sidebar area on the right in order to add a widget. You can also change the order of the widgets in the sidebar with drag & drop.
You can add and order widgets of other widgetized areas of the theme in the same way.
You can configure widgets by clicking on the triangle on the right side. It will open the widget configuration options, which is different for each widget. For example the ‘Recent Posts’ widget has other options than a ‘Text’ widget.
Widgets in the Customizer
In addition to the Widgets screen in the WordPress backend, you can also create and edit widgets in the Customizer which offers live preview of your website.
For customizing widgets, please go to Appearance → Customize → Widgets.
Adding your own custom CSS code allows you to override the default CSS of the theme and customize the styling of your website.
Since WordPress 4.7 you can add your own CSS snippets in the Customizer. Therefore go to Appearance → Customize → Additional CSS.
The Additional CSS section allows you to insert your CSS code in a large text area field. The CSS code is immediately applied to the live preview on the right hand side, which means you can try CSS code safely before saving it.
The Screen Options let you choose which sections and columns on the current screen of the WordPress admin panel are displayed or not.
If you do not find a metabox, column or other module on a WordPress screen, always make sure to check the screen options.
Configure Screen Options
The screen options are a pull down menu which is located in the top right corner of your WordPress backend.
You can see a list of the different modules and checkboxes in the Screen Options dropdown menu. You can show or hide something on the current screen of the WordPress backend by simple checking or unchecking the boxes.