Introduction
As you know, by default, WordPress has a built-in theme customizer. This theme feature allows you to make any changes and designs to your website and preview them in real-time without publishing. All WordPress themes provide you with a list of additional tabs and options to assist you to customize your desired website but don’t need to have a piece of professional coding knowledge.
In today’s tutorial, we will share with you how to access it and a detailed guide to using a list of default panels effectively. Now, let’s keep reading.
How to access the WordPress Customizer?
It is easy to access the WordPress Customizer. Initially, you need to log in to your WordPress dashboard menu. Just navigate to Appearance > Customize.
This will take you to the Customizer interface with your theme preview on the right and the Customizer menu on the left column.
How to use WordPress Theme Customizer?
After you have accessed your WordPress Customizer page, have a look at the left-hand side of the screen. You will see a list of default panels.
In today’s tutorial, we are going to use Hestia themes which is one of the most prevalent and high-quality WordPress themes.
Configure Site Identity
The Site Identity option in the WordPress theme customizer allows you to control the name and tagline of your WordPress site. To do this, let’s click on the ” Site Identity” option to start.
You can change the site title and tagline by filling out the two fields under the site title and tagline. And then, you can see the results immediately on the preview window of the screen.
In addition, the theme customizer enables you to add your site logo by clicking on the ‘Select Logo’ option. You can also add the Transparent header logo( this option depends on the theme you are using) by clicking on the ‘Select Image’ option.
If you want to add a favicon to your website, simply click on the Select site icon option. For a more detailed guide, let’s access how to add a favicon to your WordPress site.
Change Website colors and background image
- Changing website colors
The controls on the colors panel also depend on the WordPress theme you are using. In our example, we are using the Hestia theme, so we need to click on the ‘Appearance Settings‘ option to see the colors option. Then keep clicking on the ‘Colors‘ option.
For example, the Hestia theme allows you to customize the background color and accent color. Simply click on the ‘Select color” option to select your favorite color from the color scheme.
- Changing the background image
If your theme is using a background image, the WordPress Customizer also allows you to make changes to that. Let’s click on the “Background Image” option to start.
Simply click on the ‘Select Image’ option to upload an image from your computer or choose from existing images in your media library. Once you are done, don’t forget to click on the “Publish“.
For a more detailed tutorial, you can access our guide on how to add a background image in WordPress.
Set blog posts display
Some themes include Blog settings or Content Options menu. this allows you to change how your content is displayed on a specific page.
There are some common options in the Blog settings panel including:
- Categories: choose a particular category to display for posts, or disable this section.
- Blog layout: This allows you to choose a structure to showcase your post.
- Blog post content: choose between a full post or an excerpt for the blog and archive pages.
- Post Pagination: choose between the number or infinite scroll to break up long lists of your blog.
Keep in mind that these options can differ for each theme you are using.
Add WordPress navigation menus
The Menus panel enables you to create navigation menus and manage their location on your website. To see all available menu locations supported by your theme, let’s click on the “View All Locations” button
To start creating your new menu, simply click on the “Create New Menu” button.
Next, you need to name your new menu. Then you can also choose the menu location to display. After that, click on the “Next” button to continue the process.
To add more items to your new menu, let’s click on the “Add Items” button to open a new panel next to this panel. It allows you to add custom links, pages, posts, categories, and tags.
If you want to rearrange the items, simply click on the “Reorder” link and use the arrow icons to adjust the order of menu items.
Control widgets on your website
The theme customize also enables you to add and manage the widgets on your website. After clicking on the ‘Widgets’ panel, this will open a list of various locations where you can add widgets.
However, keep in mind that the number of widget locations will depend on the theme you are using. In our case, the Hestia offers 7 widgets locations.
Once you choose one of the widget locations to start, then it will take you to the next panel where you can add widgets.
In order to add a new widget, you need to click on the “Add a Widget” button. Immediately, you will see a list of all available widgets displayed in the right panel.
Simply click on the widget you want to add. You can easily reorder the widgets by dragging and dropping them.
Homepage Settings
WordPress by default will display the latest blog posts on your homepage. However, you can also use a custom home page. To do that, you need to choose the “A static page” option.
This will open 2 more drop-down menu that allows you to select a page for your homepage and another for showcasing your blog posts.
If you still don’t have any existing pages on your website, you can create a new page by clicking on the ” Add New Page” link displayed below the dropdown menu. Then, you need to give your new page a title.
Add custom CSS using Additional CSS panel
WordPress allows you to use custom CSS code to style your website. To do that, you need to click on the ‘Additional CSS panel’.
You can make changes by adding your custom CSS code to the Additional CSS panel. Immediately you see your changes live on the right side of your screen.
When you add some CSS code, WordPress will automatically suggest attributes to you based on the letters you are writing. On the other hand, it will display error messages if you have written a wrong CSS statement.
Preview your website on different screen resolutions
Finally, have a look at the WordPress customizer’s mobile and table preview options. You will see three options including desktop, tablet, and mobile view.
By default, the Customizer will display your website preview in desktop mode. However, you can easily use these options to switch between desktop, tablet, and mobile view.
For example, by clicking on the mobile icon, the preview window will transform to show how your website appears on the mobile screen.
Publish, Save, Schedule your Customizer Settings
By default, the theme customizer displays the ‘Publish’ button on the top of the screen. After you have made changes to your site, you need to click on this ‘Publish’ button. Otherwise, all your changes will be lost. In addition, Once you are done, you can click on the ‘Close’ button displayed at the top left corner of your screen to exit the theme customizer.
However, if you need more time to complete your desired design. In case that you can save your design as a draft.
To switch to the Save Daft button, you need to click on the ‘Gear’ icon next to the ‘Publish’ button. Then, this will open the action panel on the right of it.
Here, you will see three options including Publish, Save Draft, and Schedule. If you want to display the “Save Draft” button to store your changes, you need to select the “Save Draft” option on the ‘Action panel’. Additionally, you can copy the preview link at the bottom of the Action panel to share it with others.
In contrast, once you choose the “Schedule” option, you will set a specific date and time to publish your changes.
Finally, whether you want to reset the unpublished changes, let’s click on the ‘Discard Changes’ Link on the Action panel.
Preview different themes without going live
Sometimes, you want to see how a new theme appears on your website. Nevertheless, you don’t want to activate it on your live website.
Luckily, the WordPress Customizer has an option that allows you to test new themes without going live. To do that, you need to find the name of your active and click on the “Change” button.
This will open up a list of your installed themes on the right side of the screen. You can simply click on the “Live Preview” button to check a particular theme.
Additionally, you can also check themes from the WordPress Themes Repository. Firstly, you need to choose the “WordPress.org themes” option on the left panel.
Immediately, the system will display all themes from the WordPress.org directory on the right side of the screen. Let’s click on the “Install &Preview” button to check your favorite theme.
Final thoughts
Hopefully, this latest guide will help you master the process of using the WordPress theme customizer. If you have any questions or need our assistance, don’t be afraid to leave a comment on the box below. We are always willing to support you.
Last but not least, you can visit our Free WordPress Themes to explore a wide array of beautiful, high-quality themes and templates for your website.
- How to place menu items in helix joomla 5 ? - December 14, 2024
- How to reduce the size of helix 2 layout ? - December 14, 2024
- What’s J4 starter template and how to use it - December 3, 2024
Recent Comments