# top-10/4.4.0/includes/frontend/class-styles-handler.php

WebberZone Top 10 — Popular Posts, version 4.4.0. 189 lines.

- Page: https://pluginprobe.com/plugins/top-10/4.4.0/code/includes/frontend/class-styles-handler.php
- Raw: https://pluginprobe.com/plugins/top-10/4.4.0/raw/includes/frontend/class-styles-handler.php
- Modified: 2026-07-22T17:09:16+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/top-10/4.4.0/code/includes/frontend/class-styles-handler.php#L10-L20`.

```php
<?php
/**
 * Styles Handler class.
 *
 * @package WebberZone\Top_Ten\Frontend
 */

namespace WebberZone\Top_Ten\Frontend;

use WebberZone\Top_Ten\Util\Hook_Registry;

if ( ! defined( 'WPINC' ) ) {
	die;
}

/**
 * Styles Handler Class.
 *
 * @since 3.3.0
 */
class Styles_Handler {

	/**
	 * Constructor class.
	 *
	 * @since 3.3.0
	 */
	public function __construct() {
		Hook_Registry::add_action( 'wp_head', array( $this, 'header' ) );
		Hook_Registry::add_action( 'wp_enqueue_scripts', array( $this, 'register_styles' ) );
	}

	/**
	 * Function to add CSS to header.
	 *
	 * @since 1.9
	 */
	public static function header() {

		$custom_css = stripslashes( tptn_get_option( 'custom_css' ) );

		// Add CSS to header.
		if ( $custom_css ) {
			echo '<style type="text/css">' . $custom_css . '</style>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
		}
	}

	/**
	 * Enqueue styles.
	 */
	public static function register_styles() {

		$style_array = self::get_style();

		if ( ! empty( $style_array['name'] ) ) {
			$style     = $style_array['name'];
			$extra_css = $style_array['extra_css'];
			$is_rtl    = is_rtl();

			wp_register_style(
				"tptn-style-{$style}",
				plugins_url( self::get_stylesheet_path( $style, $is_rtl ), TOP_TEN_PLUGIN_FILE ),
				array(),
				TOP_TEN_VERSION
			);
			wp_enqueue_style( "tptn-style-{$style}" );

			if ( ! empty( $extra_css ) ) {
				wp_add_inline_style( "tptn-style-{$style}", $extra_css );
			}
		}
	}

	/**
	 * Get stylesheet path accounting for minified and pro files.
	 *
	 * @since 4.2.0
	 *
	 * @param string $style  Style name.
	 * @param bool   $is_rtl Whether RTL stylesheet should be loaded.
	 *
	 * @return string
	 */
	public static function get_stylesheet_path( $style, $is_rtl = false ) {

		$base_path = 'includes/frontend/css/';
		if ( false !== strpos( $style, '-pro' ) ) {
			$base_path = 'includes/pro/frontend/css/';
		}

		$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
		$rtl    = $is_rtl ? '-rtl' : '';

		return "{$base_path}{$style}{$rtl}{$suffix}.css";
	}

	/**
	 * Get the current style for the popular posts.
	 *
	 * @since 3.0.0
	 * @since 3.2.0 Added parameter $style
	 *
	 * @param string $style Style parameter.
	 *
	 * @return array Contains two elements:
	 *               'name' holding style name and 'extra_css' to be added inline.
	 */
	public static function get_style( $style = '' ) {

		$style_array  = array();
		$thumb_width  = tptn_get_option( 'thumb_width' );
		$thumb_height = tptn_get_option( 'thumb_height' );
		$width_value  = absint( $thumb_width );
		$height_value = absint( $thumb_height );

		if ( ! $width_value ) {
			$width_value = 1;
		}

		if ( ! $height_value ) {
			$height_value = 1;
		}
		$aspect_ratio = sprintf( '%d / %d', $width_value, $height_value );
		$tptn_style   = ! empty( $style ) ? $style : tptn_get_option( 'tptn_styles' );

		switch ( $tptn_style ) {
			case 'left_thumbs':
				$style_array['name']      = 'left-thumbs';
				$style_array['extra_css'] = "
			.tptn-left-thumbs {
				--tptn-thumb-width: {$thumb_width}px;
				--tptn-thumb-height: {$thumb_height}px;
				--tptn-thumb-aspect-ratio: {$aspect_ratio};
			}
			.tptn-left-thumbs img.tptn_thumb {
				width: min( var(--tptn-thumb-width), 100% );
				height: var(--tptn-thumb-height);
				max-height: var(--tptn-thumb-height);
				aspect-ratio: var(--tptn-thumb-aspect-ratio);
				object-fit: cover;
			}
			.tptn-left-thumbs li > a.tptn_link {
				display: block;
				flex: 0 0 auto;
				align-self: flex-start;
				padding: var(--tptn-thumb-frame-padding, 0.25rem );
				border-width: var(--tptn-thumb-frame-border-width, 1px );
				border-style: solid;
				border-color: var(--tptn-thumb-border, #ccc );
				border-radius: var(--tptn-border-radius, 8px );
				box-shadow: var(--tptn-shadow, 0 2px 4px rgba(0, 0, 0, 0.15) );
				transition: transform var(--tptn-transition, 0.2s ease), box-shadow var(--tptn-transition, 0.2s ease);
				will-change: transform;
			}
			.tptn-left-thumbs ul li:hover > a.tptn_link {
				transform: scale(1.03);
				box-shadow: var(--tptn-shadow-hover, 0 4px 8px rgba(0, 0, 0, 0.2) );
			}
			.tptn-left-thumbs .tptn_title {
				width: 100%;
			}
			";
				break;

			case 'text_only':
				$style_array['name']      = 'text-only';
				$style_array['extra_css'] = '';
				break;

			default:
				$style_array['name']      = '';
				$style_array['extra_css'] = '';
				break;
		}

		/**
		 * Filter the style array which contains the name and extra_css.
		 *
		 * @since 3.2.0
		 *
		 * @param array  $style_array  Style array containing name and extra_css.
		 * @param string $tptn_style   Style name.
		 * @param int    $thumb_width  Thumbnail width.
		 * @param int    $thumb_height Thumbnail height.
		 */
		return apply_filters( 'tptn_get_style', $style_array, $tptn_style, $thumb_width, $thumb_height );
	}
}

```