Theme Customizer and Live Preview
In this WordPress tutorial we will examine the Theme Customizer added in WordPress 3.4. This nifty tool allows users to have a live preview of their WordPress theme while they make adjustments to it.
WordPress Tutorial Transcript
Hello and welcome to LifeGuard. In this video we’re going to take a look at the Theme Customizer and Live Preview. Theme Customizer allows you make changes to your theme’s appearance and see what those changes look like in real time. Live Preview gives you a quick look at what your site is going to look like. You can make and preview customizations to your current theme, or try out any of the themes you have installed to see what they would look like on your current WordPress site.
Let’s first look at the Theme Customizer. Simply click “Customize” on your currently activated theme. You’ll be presented with some options on the left, along with a preview of your site on the right. WordPress indicates that we’re currently previewing the Whiteboard theme. This is actually the theme that’s being used on the sample site right now. From the Theme Customizer, we can make and preview changes to the theme. If we click “Site Title & Tagline” and change the content in either of these fields, we’ll see the preview update in live time on the right.
Under “Colors”, we can change the Background Color using the color picker.
“Header Image” lets us preview a new header image simply by uploading one. We can also do the same for “Background Image”.
“Navigation” allows you to select different menus for your Header, Sidebar, Footer, and Logged In menu. Different themes will output these menus differently, so feel free to experiment with yours.
The last option is “Static Front Page”. By default, your Front Page is set to show your latest posts. You could select a static page to preview what this would look like on your website.
If you’re not happy with your changes, you can click “Cancel” at any time. When we click “Customize” again, we’ll start back with a fresh preview. If you’ve made any changes and want to save them, simply click “Save & Publish”. Understand that this will immediately display your new changes on the live version of your site.
Back on the Appearance page, while we’ve looked at how to customize the theme you currently have activated, you can also preview any of the other themes you have installed by clicking “Live Preview”. This of course has all the same familiar options we just looked at, but it shows you what your site would look like with the new theme activated. You can make changes just like before, and if you’re happy with how the new theme looks, you can activate it right from this window by clicking “Save & Activate”.