I am building a theme which Theme customizer changes colors, sizes, etc. and has also the option to choose a category and style that category specifically.

How can I display that category in the preview (only when the user is changing the corresponding options) instead of the default home/front page displayed by default?


I can access the preview window with customize_preview_init, but I can not apply wp_redirect, which I guess could be a way.

4 Answers 4


If I understand you goal correctly, then will you a select inside the Customizer, there list the Categories and the User can use this for save in your theme settings.

If you will enhance the Customizer for categories, then use this class from this repo here. Include the file and enhacne the default class. You can easy implement a select for the categories of the install. Inside the readme of this repo are two links to gist with a example use, but for other class of the repo. I think is clear and the same way on all extensions for the Customizer.

  • I have the way to create a category dropdown selection. My doubt is with the next step. How to show that category in the preview window. So normally it shows www.example.com and i want to show www.example.com/category/whatever in the preview window (using php)
    – Alvaro
    Aug 24, 2013 at 16:26
  • If you use the class, then was the preview also in the customizer. Alternative you must add this to the js, thet create the preview, with ajax. Also here a example. that create a fast preview of title and description.
    – bueltge
    Aug 25, 2013 at 17:16

Here's an approach I used to show things to users while they are viewing the site through the Theme Customizer previewer:

global $wp_customize;
if( is_user_logged_in() && isset($wp_customize) ) {
  // Show "categories" or things in the Customizer Previewer only

It makes your templates a bit more messy but, as you've probably discovered, there isn't much documentation/development on Theme customizer :/

  • But what Im looking is for that // Show "categories" or things in the Customizer Previewer only. I can manage to apply things only to the theme customizer preview window, but I hope there is some way to alter the preview url. (Javascript could be a way but I was looking for php solution). Thanks
    – Alvaro
    Aug 21, 2013 at 10:15

Just add a javascript that activating only in live preview and redirect: http://www.jquery4u.com/snippets/jquery-redirect-web-page/

as advanced solution, you can create asynchronously working js function with using wp.customize. You can inspect my theme http://theme.firmasite.com/ for example usage.


I ended up with this solution:

1.Require an extra file that will contain the hooks only in the theme preview

function mytheme_customizer_live_preview() {
add_action( 'customize_preview_init', 'mytheme_customizer_live_preview' );

2.What I had to do is modify the query as I would normally do in the page, so just do it in the preview (inside preview.php):

function modify_query($query) {

    $category = get_theme_mod( 'mytheme' )['categories'][0];

    $query->set('cat', $category);

    return $query;

add_filter('pre_get_posts', 'modify_query', 10);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.