05. Adding Devices to Control Stack

Now we have to add our custom devices to the default controls, so search for file named control-stack.php in following directory

elementor/includes/base/control-stack.php

A. Defining Device Constants

In this file check for the following function in line number 19 you will find following codes

control-stack.php

abstract class Controls_Stack {

	/**
	 * Responsive 'desktop' device name.
	 */
	const RESPONSIVE_DESKTOP = 'desktop';

	/**
	 * Responsive 'tablet' device name.
	 */
	const RESPONSIVE_TABLET = 'tablet';

	/**
	 * Responsive 'mobile' device name.
	 */
	const RESPONSIVE_MOBILE = 'mobile';

As you can see there are constant defined for each device so let's add ours too and te result will be as follows

Please use copy button of the code panel, if you do manual select ,copy , paste it might break the code ! Gitbook Bug i guess..

control-stack.php

abstract class Controls_Stack {

	/**
	 * Responsive 'desktop' device name.
	 */
	const RESPONSIVE_DESKTOP = 'desktop';

	/**
	 * Responsive 'tablet' device name.
	 */
	const RESPONSIVE_TABLET = 'tablet';

	/**
	 * Responsive 'mobile' device name.
	 */
	const RESPONSIVE_MOBILE = 'mobile';
	
	/**
	 * Defining New Responsive Devices Control Stack variables
	 */
	const RESPONSIVE_WIDTH480 = 'width480';
	const RESPONSIVE_WIDTH540 = 'width540';
	const RESPONSIVE_WIDTH640 = 'width640';
	const RESPONSIVE_WIDTH700 = 'width700';
	const RESPONSIVE_WIDTH750 = 'width750';
	const RESPONSIVE_WIDTH800 = 'width800';
	const RESPONSIVE_WIDTH840 = 'width840';
	const RESPONSIVE_WIDTH900 = 'width900';
	const RESPONSIVE_WIDTH940 = 'width940';
	

B. Adding Defined Constants to control list functions

Check for following function in the same file more or less at line number 815

control-stack.php

final public function add_responsive_control( $id, array $args, $options = [] ) {
	$args['responsive'] = [];
	$devices = [
		self::RESPONSIVE_DESKTOP,
		self::RESPONSIVE_TABLET,
		self::RESPONSIVE_MOBILE,
	];

You can see line number 3 the $devices array variable, just add our defined constants in Step A here. So the resulted function will be as follows

Please use copy button of the code panel, if you do manual select ,copy , paste it might break the code ! Gitbook Bug i guess..

control-stack.php

final public function add_responsive_control( $id, array $args, $options = [] ) {
	$args['responsive'] = [];
	$devices = [
		self::RESPONSIVE_DESKTOP,
		self::RESPONSIVE_TABLET,
		self::RESPONSIVE_MOBILE,
		self::RESPONSIVE_WIDTH480,
		self::RESPONSIVE_WIDTH540,
		self::RESPONSIVE_WIDTH640,
		self::RESPONSIVE_WIDTH700,
		self::RESPONSIVE_WIDTH750,
		self::RESPONSIVE_WIDTH800,
		self::RESPONSIVE_WIDTH840,
		self::RESPONSIVE_WIDTH900,
		self::RESPONSIVE_WIDTH940
	];

Similarly now do the same thing in another function,check for following function in the same file more or less at line number 915

control-stack.php

final public function remove_responsive_control( $id ) {
	$devices = [
		self::RESPONSIVE_DESKTOP,
		self::RESPONSIVE_TABLET,
		self::RESPONSIVE_MOBILE,
	];

You can see line number 2 the $devices array variable, just add our defined constants in Step A here. So the resulted function will be as follows

Please use copy button of the code panel, if you do manual select ,copy , paste it might break the code ! Gitbook Bug i guess..

control-stack.php

final public function remove_responsive_control( $id ) {
	$devices = [
		self::RESPONSIVE_DESKTOP,
		self::RESPONSIVE_TABLET,
		self::RESPONSIVE_MOBILE,
		self::RESPONSIVE_WIDTH480,
		self::RESPONSIVE_WIDTH540,
		self::RESPONSIVE_WIDTH640,
		self::RESPONSIVE_WIDTH700,
		self::RESPONSIVE_WIDTH750,
		self::RESPONSIVE_WIDTH800,
		self::RESPONSIVE_WIDTH840,
		self::RESPONSIVE_WIDTH900,
		self::RESPONSIVE_WIDTH940
	];

Now save it and let's head to final step.

Files Attachment

In case you need more reference you can check the modified files i have included.

52KB

controls-stack.php