.
-as of [19 JULY 2024]–
.
.
.
.
.
.
.
.
.
.
.
.
.
.
*WIDGETS*
.
*HOMEPAGE SETTINGS*
.
.
.
*ADDITIONAL CSS*
.
.
*RELATED POSTS*
.
*WORDPRESS CUSTOMIZER*
*WPLIFT LINK*
While drag and drop page builders help you style your actual content, the WordPress Customizer is where you can customize important details about your WordPress theme.
It’s also a major focus for the WordPress team and likely to play an increasingly important role in WordPress.
So if you’re not already familiar with this powerful area of WordPress, join me for a beginner-friendly WordPress Customizer tutorial.
What Does The WordPress Customizer Let You Do?
The name is kind of a giveaway here…
It might sound a little silly to spell out.
But at a basic level, the WordPress Customizer simply helps you…customize your site
.
It lets you do things like:
Change the title of your website
Customize the navigation menus on your site
Manage widgets in your sidebar and other widget areas
Change colors for various parts of your theme
And potentially lots more, depending on the specific theme that you’re using!
How To Access The WordPress Customizer
There are two ways to access the WordPress Customizer.
First, you can always access the WordPress Customizer from your dashboard by going to Appearance → Customize:
Article Continues Below
how to access wordpress customizer
Second, you can also access the WordPress Customizer for the specific page that you’re looking at from the WordPress Toolbar (assuming you’re signed into WordPress).
All you need to do is click the Customize button:
how to access wordpress customizer via toolbar
Both methods take you to the same place, so use whichever method that you prefer.
A Quick Introduction To The WordPress Customizer Interface
Once you use one of those methods to access the WordPress Customizer, you should see an interface that looks something like this:
how to use the WordPress customizer
On the left side, you have a number of different menu options. This is where you’ll actually make changes to your site.
And on the right side, you’ll see a live preview of your site. As you make changes with the menu options in the sidebar, this preview will automatically update to reflect those changes.
Finally, you can also use the three buttons at the bottom to see how your theme looks on different types of devices (like a smartphone), which is helpful for making sure your theme looks consistently great.
Article Continues Below
Bluehost
Why Your WordPress Customizer Might Not Have The Same Options As My Screenshots
At this point, you might be saying, “wait a minute, my WordPress Customizer interface looks a little different.”
Don’t worry if it does – that’s completely normal.
While the WordPress Customizer is a core WordPress feature, it’s also built to make it easy for WordPress developers to add on functionality.
For that reason, the actual options that you see largely depend on the specific WordPress theme that you’re using, though the basic principles for using the WordPress Customizer are universal.
There are two areas where you’ll likely see differences:
differences
First, there’s probably a good chance that you’ll have additional menu options in the sidebar of your WordPress Customizer.
Second, you may or may not see the blue Pencil icons on the live preview of your site. These pencils are a somewhat recent feature that allow you to quickly jump to specific edit interfaces (I’ll show you how they work in a second).
How To Use The WordPress Customizer
I’m going to show you how to use the WordPress Customizer using the default Twenty Seventeen theme.
As you learned in the previous section, you might have additional menu options in your sidebar, though.
Article Continues Below
Bluehost
While I can’t show you specifically how to use those menu options, the concepts that you learn from my examples should give you all the skills you need to use anything theme developers throw at you.
How To Jump To Edit Specific Parts Of Your Theme
Remember those pencil icons from a second ago?
Here’s what they do:
They let you jump straight to a specific menu section without needing to manually dig through all the settings.
Rather than try to explain it, let me show you how it works:
wordpress customizer pencil links
Again – this is still a relatively new feature, so your theme may or may not support it.
But if you do see the pencil icons, they’re a great way to quickly edit specific parts of your site.
How To Change The Title Of Your Site And Add A Favicon
The first menu option, Site Identity, is universal to all WordPress themes.
In it, you can edit your site’s title and tagline, which are often displayed prominently at the top of your website.
And you can also use this section to add a logo and set up your favicon:
How To Change The Colors Used By Your Theme
While this option isn’t universal, most themes include some settings that let you customize the colors used on your theme.
In Twenty Seventeen, you can access these options under the Colors menu:
As soon as you select a new color, you should see the live preview of your site change right away.
How To Configure Menu Items
Like Site Identity, the Menus area is another universal option that applies to all themes.
From it, you can manage all the menus on your site. While you can also do this from your WordPress dashboard by going to Appearance → Menus, I actually like this method better because it allows you to see how your final menu will look in real-time.
Once you open the Menus interface, you can click Create New Menu if you don’t already have any menus. Or, you can select an existing menu:
Once you do that, you’ll be able to add menu items in real-time by clicking the Add Items button:
How To Configure Widgets
Just like menus, you can configure widgets both from the WordPress Customizer and by going to Appearance → Widgets in your WordPress dashboard.
And again like menus, I prefer using the WordPress Customizer because it lets you see what your widgets will look like in real-time.
To use the WordPress Customizer to manage widgets:
Go to the Widgets menu
Choose one of your theme’s widget areas
Click Add a Widget to add a new widget
You can also manage existing widgets by clicking the arrow to expand their options:
How To Create A Static Homepage
By default, WordPress displays your latest blog posts on your site’s homepage. But if you want to display a static page instead, you can do that via the Homepage Settings option.
If you check the box for A static page, you’ll need to use the drop-downs to select:
The page to use as your site’s homepage
Which page to display the list of your latest blog posts on
How To Add Custom CSS
This menu option is advanced. But if you know what CSS is and what to add some custom CSS to your site, you can do so in the Additional CSS area without needing to edit your child theme’s files directly:
How To Make Your Changes Live (And Why You Should Feel Free To Test New Things)
Here’s the best part about the WordPress Customizer:
None of the changes that you make will affect your live site until you hit Publish, so there’s zero chance of you breaking anything.
Feel free to explore all of the options that your theme offers. Tweak and customize to your heart’s content!
And when you find a setup that you like, you can either make it live right away by clicking Publish. Or you can click the Gear Button to select the options to:
Save Draft – saves the changes that you’ve made internally but doesn’t make them live.
Schedule – schedules the changes that you’ve made to go live at a future date.
You can even use the Share Preview Link option to share a preview of your changes with someone else before you decide whether or not to make them live.
Get Out There And Start Customizing
The WordPress team has made the WordPress Customizer a key focus point for WordPress going forward. So even if your theme doesn’t already support it, that may change in the future.
And in the future, most new WordPress themes should be built with WordPress Customizer support in mind.
So if you aren’t already friends with the WordPress Customizer, dig in there and start playing around with it!
wplift.com /how-to-use-the-wordpress-customizer
Beginner’s Guide: How To Use The WordPress Customizer
Colin Newcomer
8-10 minutes
If you want more control over how your WordPress site looks, learning how to use the WordPress Customizer is one of the best investments that you can make.
.
.
*👨🔬🕵️♀️🙇♀️*SKETCHES*🙇♂️👩🔬🕵️♂️*
.
.
👈👈👈☜*“WP VIEWER TOP MENU BAR”* ☞ 👉👉👉
.
.
Did you know that WordPress comes with a built-in theme customizer that allows you to easily make changes to your website design in real time.
While every theme has some level of support for the default customizer options, many themes include additional tabs and options to the WordPress theme customizer, so you can easily customize your theme without any coding knowledge.
In this article, we’ll walk you through the default panels and show you how to use the WordPress theme customizer like a pro
.
How to Use WordPress Theme Customizer Ultimate Guide
How to Access the WordPress Theme Customizer
Theme customizer is a default WordPress feature, and it is part of every WordPress website.
You can access it by logging into your WordPress admin area, and then going to Appearance » Customize from the left sidebar of your WordPress admin panel. This will open the Customizer interface with your current theme.
How to access WordPress Customizer
You can also use the WordPress theme customizer page for any of the installed themes on your website even when they are not active.
This allows you to see a live preview of that theme and make changes before you activate it.
To do that, you need to head over to Appearance » Themes page.
Next, hover your mouse cursor over on any installed theme and click on the Live Preview button to open the WordPress theme customizer page.
WordPress Theme Live Preview Option
How to Use the WordPress Theme Customizer
After opening the WordPress theme customizer, you’ll see all customization settings on the left side of your screen, and the live preview of your website on the right side.
WordPress Theme Customizer
WordPress theme customizer comes with a set of default panels regardless of the theme you’re using.
You need to click on the individual panels to make changes to it. You can also click on any of the blue pencil icons on the right side of your screen to open the settings for that particular item.
Note: advanced WordPress themes will add additional setting panels for extra customization options (more on this later).
Let’s take a look at the default options available in the WordPress theme customizer.
Site Identity Panel: Add Title, Logo, and Favicon
The Site Identity panel in the WordPress theme customizer allows you to add or change the title and tagline of your website.
By default, WordPress adds “Just Another WordPress Site” as the site tagline.
It’s recommended to change it after installing WordPress on your site. You can also keep it as blank if you want.
Site Identity Settings to change Site title, tagline, logo, and favicon
Site Identity panel in the WordPress theme customizer also allows you to add your site logo. Simply, click on the Select logo option to upload the logo of your website.
Want to add a favicon to your site? You can do that by clicking on the Select site icon option. For detailed instructions, you can follow our guide on how to create and add a favicon to your site.
WordPress Theme Customizer: Change Colors on Your Website
The controls on the Colors panel will mostly vary depending on the WordPress theme you’re using.
For example, the Twenty Seventeen theme allows you to choose the header text color and select a color scheme for your entire website.
Change Colors on Your Website
Other WordPress themes may offer different color options for site elements like: headings, links, body text, background of your website, etc.
Adding Navigation Menus in Theme Customizer
The Menus panel allows you to create navigation menus and control their location on your website.
On this tabl, you’ll find all existing WordPress menus that you’ve created previously. You can click on the “View All Locations” button to check the available menu locations that your theme supports.
Menus Panel in Theme Customizer
To create a new menu, you need to click on the Create New Menu button.
After that, you will need to give a name to your menu, so you can easily manage it later. You can also select the menu location and then click on Next to proceed.
Create a new navigation menu
To add items to this menu, you need to click on the Add Items button to open a new panel. You can now add custom links, pages, posts, categories, and tags as menu items.
Add items to navigation menu
To reorder the items, you can click on the Reorder link and then use the arrow icons to adjust the menu items.
Control Widgets on Your Website in Theme Customizer
The Widgets panel allows you to add and manage the widgets on your site.
Clicking on it will show you the different locations where you can add widgets. This will vary depending on the theme you’re using.
For example, the Twenty Seventeen theme offers 3 widget locations, whereas the Twenty Nineteen theme comes with just one location.
Widgets panel
When you click on any one of them, you’ll see the widgets that you’ve previously added to that location.
To add a new widget, you need to click on the “Add a Widget” button. This will open a new panel where you’ll see a list of all available widgets.
Add Widgets to your site
You need to click on the one that want to add. You can also make changes to the newly added widgets and adjust its position by dragging them up or down.
Homepage Settings Panel in Theme Customizer
By default, WordPress displays the latest blog posts on your homepage.
However for business websites users prefer to use a custom homepage. It allows you to have a proper landing page that displays your products and services.
To use a custom home page, you need to select “A static page” radio button on the Homepage Settings panel.
Homepage Settings in theme customizer
This will open up two new dropdown menus that you can use to select a page for your homepage and another for displaying your blog posts.
In case you don’t have the pages on your site, you can create a new one by clicking on the “+ Add New Page” link present below the dropdown menu. This will create a blank page with the name of your choice.
Additional CSS Panel for Adding Custom CSS
Do you want to add custom CSS code to style your website? You can do that in the Additional CSS panel.
Intermediate and advanced WordPress users often customize their site by adding CSS code directly to the style.css file of their theme. This adds additional steps like having FTP access to your WordPress hosting, modifying theme files, etc.
An easier solution for beginners is to add your custom CSS code to the Additional CSS panel in the WordPress theme customizer. This will allow you to make changes to your site and see them live on the right side of your screen.
Add Custom CSS code to Additional CSS pane;
When you start writing some CSS code, WordPress will automatically suggest attributes to you based on the letters you type. It will also display error messages if you have not written a proper CSS statement.
Note: If you want to customize your website without writing any code, keep reading. We will share two beginner friendly options that will allow you to easily customize your theme and even create a custom WordPress theme.
Other Theme Customizer Options
Some free and premium themes offer more theme customizer options.
Depending on the theme you’re using, you may be able to change the font style, add a background image, change the layout, modify colors, add random header images, and much more.
You can also add specific features to your theme customizer with the help of plugins. For example, you can add custom fonts in WordPress using the Easy Google Fonts plugin.
Preview Your Website on Different Screen Resolutions
It’s important for every website owner to make sure that their website is mobile responsive and looks good on all screen sizes.
Thanks to the WordPress theme customizer, you can easily check how your website looks on different screen sizes.
At the bottom of the Theme Customizer panel, you’ll find three icons and the “Hide Controls” link.
Preview website on different screen resolutions
These icons allow you to test your site on different screen resolutions like desktop, tablet, and mobile devices.
The Hide Controls link is useful for hiding the WordPress Customizer panel so that you can view your site properly on the desktop mode.
Publish, Save, or Schedule Your Customizer Settings
Once you have made the necessary changes, you need to apply them to your site. Otherwise, all your hard work will be lost.
Go ahead and click on the Publish button to apply the changes. Once done, you can click on the close button, present at the top-left corner of your screen, to exit the theme customizer.
Publish WordPress Customizer settings
What if you need more time to finalize your new design? In that case, you can save it as a draft and even share your new design with someone without giving them access to your admin area.
To do that, you need to click on the gear icon right next to the Publish button. This will open up the Action panel.
WordPress Customizer Save Draft option
Here you’ll find three options: Publish, Save Draft, and Schedule.
You need to select the Save Draft radio button on the Action panel and then click on the Save Draft button to store your changes.
You can now copy the preview link and share it with others to get feedback.
On the other hand, the Schedule option allows you to publish your changes on a specific date and time. You can use this option for scheduling your theme changes to go live at the time when you receive the least traffic.
Schedule Customizer settings on a specific date
Lastly, if you want to reset the unpublished changes, then you can click on the Discard changes link on the Action panel.
Preview Different Themes Without Going Live
There are times when you want to check how a new theme would look on your site. However, you don’t want to activate them on your live website.
In that case, you can open the WordPress Customizer to test new themes without going live.
On the Customizer panel, you’ll find the name of your active theme and the Change button.
Change WordPress Theme from Customizer
If you click on that button, then WordPress will display all your installed themes on the right side of the page.
To check a particular theme, you need to click on the Live Preview button.
Preview Installed themes on Theme Customizer
You can also preview themes from the WordPress Themes Repository. To do that, you need to select “WordPress.org themes” checkbox on the left panel.
This will show themes from the WordPress.org directory. You can click on the “Install & Preview” button to check the theme you like.
WordPress themes directory
You can also filter the themes by clicking on the Filter Themes button present at the top-right corner of your screen.
Note: we recommend using a WordPress staging website to test out new themes instead of using the customizer on a live site.
Import or Export Theme Customizer Settings
Did you know that you can import and export your theme customizer settings?
This is extremely helpful when you are making changes to your theme on your local server or a staging site. Instead of copying the settings manually to your live website, you can simply export the theme customizer settings to save your time.
For detailed instructions, you can follow our guide on how to import and export theme customizer settings in WordPress.
WordPress Theme Customizer Alternatives
Although WordPress Customizer allows you to make changes to your site, the number of controls will vary depending on the theme you’re using.
What if you like your theme, but wish that it had extra customization options?
In that case, the best solution is to use one of the two customization plugins that works alongside the WordPress theme customizer.
CSS Hero
CSS Hero plugin
CSS Hero is a WordPress plugin that allows you to customize your site without writing a single line of code. You have the freedom to style every element of your site without any hassle.
Do you want to customize the login page of your WordPress site? CSS Hero allows you to do that within a few minutes.
You can also edit and preview the changes in the frontend to make sure that your design looks perfect on every device.
Beaver Builder
Beaver Builder plugin
Beaver Builder is one of the best WordPress page builder plugins in the market. It allows you to build stunning pages for your site using a drag and drop interface.
The best part is that Beaver Builder works with almost every WordPress theme. This allows you to use it with your current theme.
Beaver Builder supports the use of shortcodes and widgets. It also offers different types of modules that you can use to easily style your website. See our guide on how to create custom layouts in WordPress for detailed instructions.
You can also use Beaver Builder to create a completely custom WordPress theme without writing any code.
We hope this guide helped you to learn how to use the WordPress Theme Customizer like a pro. You may also want to see our guide on the best WordPress plugins and tools for your website.
If you liked this article, then please subscribe to our YouTube Channel for more WordPress video tutorials.
You can also follow us on Twitter and Facebook.
www.wpbeginner.com /beginners-guide/how-to-use-wordpress-theme-customizer/
How to Use WordPress Theme Customizer (Ultimate Guide)
About the Editorial Staff
12-15 minutes
6/4/2019
.
.
*👨🔬🕵️♀️🙇♀️*SKETCHES*🙇♂️👩🔬🕵️♂️*
.
.
👈👈👈☜*-WORDPRESS THEMES-* ☞ 👉👉👉
.
.
💕💝💖💓🖤💙🖤💙🖤💙🖤❤️💚💛🧡❣️💞💔💘❣️🧡💛💚❤️🖤💜🖤💙🖤💙🖤💗💖💝💘
.
.
*🌈✨ *TABLE OF CONTENTS* ✨🌷*
.
.
🔥🔥🔥🔥🔥🔥*we won the war* 🔥🔥🔥🔥🔥🔥