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.
Menus
This section lets you choose menu positions as well as create and edit custom menus.
Widgets
This section allows you to add and configure widgets in the Customizer.
Static Front Page
Configure what will appear on your front page.
Additional CSS Add own CSS code to customize the styling of your website.
Theme Options
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
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.
By default, our themes display the site title in the header area. This short tutorial describes how you can replace the site title with your own custom logo image.
Open the Customizer
You can set your own theme logo in the Customizer. Please click on Appearance → Customize to launch the Customizer.
Go to Site Identity
You can find the Logo setting in the Site Identity section at the top.
Select your logo image
Please click on Select Logo to choose your an image from the media library or upload a new image.
Hide Site Title
You can easily hide the site title after you have uploaded your custom logo image by turning off the Display Site Title checkbox.
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.
The majority of WordPress themes let you pick a background color or set a background image by supporting the Custom Background feature of WordPress core.
Pick a background color
You can select a different background color in the Customizer. Please go to Appearance → Customize → Background.
Set a custom background image
As an alternative, you can also set a background image. After you have selected a custom background image you are able to configure in detail how the image is displayed.
Our themes display all static pages in the theme navigation by default. If you want an individual navigation you can use the Custom Menu WordPress feature described below.
Create a menu
You can find the Custom Menu feature on Appearance → Menus in your WordPress backend.
You can select a menu to edit it or create a new menu at the top of the Menus screen.
Add items to your menu
After you have created your menu you can add items to it on the left side of the Menus screen. Therefore select a page, post or category and click the Add to menu button.
By default you can add static pages, custom links and categories to your menu. You can use the Screen Options to allow more item types to be chosen from.
Nesting menu items
You can nest your menu items via drag&drop. Nested items are shown as dropdown navigation in the theme. Our themes usually support dropdown menus up to 3 levels deep.
Set menu location
Themes can have different spots to display menus, for example locations for a top, main and footer navigation.
After you have created your menu you can add it to a certain theme location where it should appear. Therefore please go to the Manage Locations tab at the top of the Menus screen.
Create and edit menus in the Customizer
In addition to the Menus screen in the WordPress backend, you can also create and edit menus in the Customizer which offers live preview of your website.
For customizing menus, please go to Appearance → Customize → Menus.
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.
Widgets Screen
You can add and configure your widgets on Appearance → Widgets in your WordPress backend.
Adding Widgets
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.
Configure Widgets
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.
By default, WordPress shows your latest blog posts on the front page of your website. This tutorial describes how you can set a static page as front page instead.
Configure front page in Customizer
You can change the front page of your website in the Customizer. Therefore go to Appearance → Customize → Static Front Page.
By default, your website shows the latest posts.
As alternative you can set a static front page. Therefore select any static page as your Front page and a second page as Posts page.
The Posts page will then show your latest posts instead of the normal page content.
Set front page in WordPress backend
You can also configure the static front page in your WordPress backend on Settings → Reading.
Please select A static page (select below) first.
Then choose a static page as Front Page. In order to display your latest posts, you can select a Posts page which will then display your posts instead of the normal page content.
Adding your own custom CSS code allows you to override the default CSS of the theme and customize the styling of your website.
Adding CSS
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.
Every post and page in WordPress can have a single featured image.
Our themes use featured images for post thumbnails on blog and archive pages, as slider images and for thumbnails in Magazine widgets.
Set Featured Image
In order to set a featured image, you have to add a new post or page or edit an existing one.
On the Editor screen, keep looking for the Featured Image metabox. If you do not see it, make sure it is enabled in the screen options.
You can add your featured image by clicking on Set featured image.
Then upload a new image or select an existing one from your media library in the media popup box. Click on Set featured image on the bottom right corner after you have selected your image.
As result you should see your selected featured image in the Featured Image metabox.
Do not forget to save your post or page by clicking Publish or Update on the Publish metabox, otherwise your featured image is not saved.
Featured Image display settings
You can use the Customizer to configure where featured images appear. You find the settings on Appearance → Customize → Theme Options → Post Settings.
Please note that post settings are different for each theme.
Our WordPress themes include additional templates for static pages. These templates usually add certain features or layouts to a normal page when used.
Example Templates:
Slider Page
Centered Layout
Full-width Layout
Magazine Homepage
Assign Page Templates
You can assign templates to a page on the Edit Page screen which you can find by editing a page on Pages → All Pages → Edit Page or by creating a new page.
If you do not see the Pages Attributes metabox, check your screen options.
You can select the template for the page in the second option of the Page Attributes metabox.
Do not forget to save your page in the Publish metabox afterwards.
If you have assigned a different template, WordPress will use that template to render the page. Depending on the selected template, it can happen that your page content is not displayed anymore.
Excerpts can be described as introduction or summary of your posts and represent only a small part of the full entry.
They are often used by our themes to display shortened parts of your posts, for example on the homepage, archives page or in the featured posts slideshow.
Manual Excerpts
WordPress will automatically generate the excerpt from the first words of your blog post’s content.
However, you can also add a manually excerpt to your post in the Excerptmetabox. It is usually located below the post editor. If you do not see the Excerptmetabox, check your screen options.
Text formatting
Please be aware that WordPress excerpts are text only. WordPress does remove all text formatting, images and other media from the automatically generated excerpts.
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.
