ThemeGrill AuthorAre you wondering what a WordPress customizer is and how to use it? WordPress customizer might be a tricky subject for many people, especially for beginners.
WordPress Customizer comes with plenty of options to customize and modify your WordPress site. Beginners might get confused about how to get started, and where they can access the WordPress customizer?
Here’s an article which will help you know the WordPress Customizer better. The article contains a complete guide on how to use WordPress customizer.
1. What is WordPress Customizer? (Overview)
The customizer is where you’ll go to take your site’s theme to the next level. The options to customize found in customizer will be different based on different Themes.
Also note that WordPress Customizer and WordPress Theme Customizer are the same thing. Don’t get confused between these two.
The theme customizer allows you to customize many things, which are listed below for you.
- Site title and tagline: Customize your site’s title and tagline
- Swap website color: Change your header text color and background color.
- Header media: Add header video or header image, as per your preference.
- Background Image: Change your background images.
- Widgets: Add widgets such as sidebar and footer.
- Homepage settings: Add your customized homepage which your visitors will see at first.
- Additional CSS: Add additional CSS to enhance your site
These options are discussed below in detail with some other additional customization options in the WordPress.
2. How To Access The WordPress Customizer?
First of all, let’s discuss how to access Theme customizer. Go to your WordPress dashboard. Then go to Appearance >> Customize. You’ll be taken directly to the customizer interface, with your theme preview on the right, and on the left, there will be a customizer menu.
There is an alternative way to access the Theme Customizer. Go to Appearance >> Theme. Now go to your active theme and click on ‘Customize’.
3. Customizer Controls
The customizer controls are just the buttons you can click on to hide the customizer.
The pencil icon
Some elements in the customizer preview will have a pencil icon next to the elements, which is a shortcut to the customizer controls. You can edit that specific element by clicking on the pencil icon.
However, these icons can be seen only by the site owners or administrator, but not by the visitors.
4. How to use the WordPress customizer?
You already know how to access your WordPress Customizer page by now. Let’s have a look at how to use WordPress customizer to quickly launch or modify a website.
Before getting started, note one thing that customizer’s functionality differs according to the theme you’ve activated on your site. However, the basic customization options will be available on almost every theme.
Aside from that, the availability of other useful options relies largely on how much effort the active theme’s developers have put into utilizing it. In this article, we’ll be talking about multipurpose theme Zakra, which makes excellent use of customizer.
Now, let’s see how to customize a WordPress site using the theme customizer step by step.
i. Configure Site Identity and design
It’s better if you start with Site identity first before other customizations. The Site identity gives you control over the name and tagline of your WordPress website. To get started, navigate to Site Identity.
You can fill the two fields under Site title and Tagline. A site title is what your visitor will use to search your site. And a tagline is a brief description of what your website is about.
Also you can upload a favicon or Site icon from this interface, you can even add your website’s logo. A favicon is an image that appears along with your site title in the web browser.
Once done click Save and Publish. You can see the results on the preview window on the right before publishing.
ii. Swap website color
The colors in your Theme can be modified, which will greatly impact the design of your website. In order to do this go to ‘Colors’ on the Customizer menu.
There you will be given two options which you can change – Header Text Color and Background Color.
Header Text Color allows you to change the color of your Site Title and Tagline. Similarly Background color allows you to change the color of your background.
Depending on how many colors your theme makes use of, you can freely change them according to your preference. Zakra has all the necessary colors you’ll need.
iii. Header Media
The WordPress theme customizer also allows you to add Header images as well as Header video. In order to do so navigate to ‘Header Media’ in your customizer menu.
You will see options to add Header video at first. You just need to click on ‘ Select video’ to add a new video. In case you don’t have a video you can also directly add a youtube link in the option ‘ or enter a YouTube URL’.
But if you don’t want to add a video then you can simply add an image. Just click on ‘ Add new image’ to add an image. If you wish to change the image click on ‘Hide image’ and add a new image.
iv. Background Image
To change your background image click on ‘ Background Image’ to get started. You can swap out your background image and also configure a range of display options from within the same, small interface.
You can change and remove the background image. Another option is to preset the image. Originally it is on default however, you can change it according to your preference. The options besides ‘Default’ that you can choose are:
- Fill Screen
- Fit to screen
- Repeat
- Custom
You can select the position of the image and also the image size. Furthermore, you can choose if you want your background image to repeat or not. And lastly, if you want your background image to scroll with page or keep it fixed which can give your page a parallax effect.
v. Manage Menus
Another thing that WordPress theme Customizer allows you to do is configure your website’s menus. In order to do so, simply click on ‘Menus’ on the WordPress customizer menu.
To create your website’s first menu, click ‘Add a Menu’ and type in your menu’s name. After that click on ‘Create Menu’. Now that your menu has been created, you can click on the name of it to adjust its settings.
The WordPress Customizer allows you to do a number of things with your new menu. You can change the name, add new options, adjust the order of the menu options, configure its location. You can also specify if you would like WordPress to automatically update it when future top-level pages are created.
vi. Widgets
A widget is a small application or content block that lets you add useful content your site’s sidebars and footers.
Click on ‘ Widgets’ on the customizer menu to add footer and sidebars. You’ll be given options as ‘Sidebar Right’, ‘Footer one’, ‘Footer two’, ‘Footer three’, ‘Footer four’. On the sidebar, you can add a search option, recent posts, and recent comments, which will appear on the right.
There will be multiple options to add on your footer. They are:
- Archive: A monthly archive of your monthly posts.
- Audio: Displays an audio player.
- Calendar: A calendar of your site’s posts.
- Categories: A list or dropdown of categories.
- Custom HTML: Arbitrary HTML code.
- Gallery: Displays an image gallery.
- Image: Displays an image.
- Meta: login, RSS, and WordPress.org links.
- Navigation Menu: Add a navigation menu to your sidebar.
- Pages: A list of your site’s pages.
- Recent comments: Your site’s most recent comments.
- Recent posts: Your site’s most recent posts.
- RSS: Entries from any RSS or Atom feed.
- Search: A search form of your site.
- Tag cloud: A tag of your most used tags.
- Text: Arbitrary text.
- Video: Displays the video from the media library or from YouTube, Vimeo, or another provider.
You can add four of these options at once, each on one footer i:e ‘Footer one’, ‘Footer two’ and so on.
Note: All widgets provided by the theme might not appear on specific pages of the Customizer. But, if you want to access all of the sidebars, you can go to Appearance >> Widgets.
vii. Homepage Settings
By default, your homepage is set up to show you the latest posts and comments on your homepage. In the homepage settings menu, you can change what visitors can see when they first access your site.
Your latest posts:
It’s a classic blog style, where your latest posts are shown in reverse chronological order ( newest to oldest).
A static page:
It is a fixed, a static ,site page. You can use this option if you do not want to have a blog page to be shown as your homepage.
You can customize your own homepage. To do so go to your dashboard, select ‘Pages’ and click on the option ‘Add New’. You can create as many pages as you want. Then select one of these pages as your Homepage.
You can also simply select Posts page if you want to have a page that shows blog posts.
viii. Additional CSS
CSS stands for Cascading Style Sheets. It’s a markup language that controls the appearance of HTML elements on a web page.
You can add your own CSS code in the Additional CSS panel to customize the appearance and layout of your site. This will allow you to make changes to your site and make changes to your site and see them live on the right side of your screen.
When you start writing some CSS codes, WordPress will automatically suggest attributes to you based on the letters you type. Also, it will display error messages if you have not written a proper CSS statement.
5. Additional WordPress Customizer Options
There are some other extra features that you can use to enhance your WordPress site.
Preview your website on different resolutions
One of the important things a website owner should do is make sure that their site is mobile responsive and looks good on all screens.
At the bottom of your customizer menu, you’ll find three icons next to the ‘Hide controls’ link. These icons will allow you to test your site on different screen resolutions like desktop, tablet, and mobile devices.
Publish, Save or Schedule your Customizer setting
Once you have made the necessary changes,don’t forget to apply them to your site. Otherwise, all your hard work will be a waste.
To apply the change, click on the ‘Publish’ button. Once done, click on the close button present at the top-left corner of your screen, to exit the customizer menu.
In case you need more time to finalize your new design, you can save it as a draft and even share your new design with someone without giving them access to your admin area.
In order to save it, you need to click on the gear icon right next to the publish button. This will open up the Action panel. There you’ll find three options: Publish, Save Draft, and Schedule.
To store your changes, click on the ‘Save Draft’ radio button on the action panel.
Similarly, the schedule option allows you to publish your changes on a specific date and time. You can use this option if you wish to schedule your theme changes to go live at the time when there is the least traffic.
Lastly, in case you want to reset the unpublished changes then you can click on the ‘Discard Changes’ link on the action panel.
Conclusion
That was a complete guide on how to use the WordPress Theme Customizer. We are sure/hope that you can use all the customizer theme options like site titles, background image, color, and so on to make the best use out of it for your website.
Also, some other options you can customize are: preview your website in different resolutions and publish, save a draft, and schedule your customizer settings.
Hope this article was helpful for you and you learned something new. If you liked this article, then you may also want to see our complete guide on how to create a WordPress website (step by step).
