• Conditional loading of customizer
• Using relation in widget for querying posts

The customizer panel, sections and controllers we have created should only be visible when we are customizing the page related to our custom CPTs rt-movie and rt-person.

This is where the conditionals in wordpress can be used.

We can check if the current page is a single post or an archive page for a specific post type and if it is then only load the customizer options for our theme. (Basically, early return if the page being customized is not related to a movie or person.)

$is_movie_page  = is_singular( 'rt-movie' ) || is_post_type_archive( 'rt-movie' );
		$is_person_page = is_singular( 'rt-person' ) || is_post_type_archive( 'rt-person' );

		if ( ! ( $is_movie_page ||  $is_person_page ) ) {
			return;
		}

But, this does not work inside the customize object, it does not have access to the global environment of WordPress site and this always results in false!

What to do now? well, there is an argument called active callback that we can pass when registering our panel.

We can use the conditionals there!

// Add the Panel for Theme.
		$wp_customize->add_panel(
			'screen-time',
			array(
				'title'    => __( 'Screen Time', 'screen-time' ),
				'priority' => 10,
				'active_callback' => array($this, 'active_callback'),
			)
		);

/**
	 * To be active or not to be active.
	 */
	function active_callback()  {
		$is_movie_page  = is_singular( 'rt-movie' ) || is_post_type_archive( 'rt-movie' );
		$is_person_page = is_singular( 'rt-person' ) || is_post_type_archive( 'rt-person' );

		return $is_movie_page || $is_person_page;
		
	}

In our related movies and person widget, we are using a taxonomy as a relation, querying the posts according to that taxonomy to display in the widget.

For this, we have to first get the name of the taxonomy, and the terms related to that taxonomy and create a tax query for that.

$query = new \WP_Query(
			array(
				'post_type'      => 'rt-movie',
				'posts_per_page' => $instance['count'],
				'tax_query'      => array( //phpcs:ignore
					array(
						'taxonomy' => $instance['relation'],
						'field'    => 'slug',
						'terms'    => $relation_terms,
					),
				),
			)
		);

The flow to get terms is simple, first, get the id of the current post, then get the terms of that post for the relation chosen in the widget setting.

Use the terms in the query!

$current_person_id = get_the_ID();
		$terms             = get_the_terms( $current_person_id, $instance['relation'] );
		if ( ! $terms ) {
			return;
		}
		$relation_terms = array_map(
			function( $term ) {
				return $term->slug;

			},
			$terms
		);

Webpack is a javascript module that is used to package various modules and dependencies together so they can be loaded efficiently on browsers.

So, using Webpack we can basically combine all the js files or any other asset files in a bundle.

References visited today:

• https://codex.wordpress.org/Theme_Customization_API
• https://code.tutsplus.com/digging-into-the-theme-customizer-overview–wp-27158t
• https://webpack.js.org/concepts/
• http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/