Astuces de développement Elementor

Au fil de mes missions freelance dans le développement de sites avec Elementor, je découvre plusieurs fonctionnalités de ce constructeur de page qui sont plus ou moins documentées (voir pas du tout). J’ai décidé de regrouper ces « astuces » dans un article afin qu’elles profitent au plus grand nombre.
Je viendrais donc alimenter cette liste au fur et à mesure de mes découvertes, et n’hésitez pas à participer dans les commentaires 🙂 !

Sommaire

• Définir programmatiquement des palettes de couleurs Elementor
• Ajouter des polices personnalisées
• Injecter des contrôles à un endroit précis
• Ajouter des attributs à un widget existant
• Mettre à jour un contrôle existant
• Créer une catégorie de widget personnalisée

---

Définir programmatiquement des palettes de couleurs Elementor

Depuis la version 3 d’Elementor, les couleurs ne sont plus sauvegardées en tant qu’options, mais en tant que méta données d’un modèle Elementor (nommé Default Kit). Pour mettre à jour les couleurs programmatiquement, il faut donc mettre à jour ses posts meta.

Dans un premier temps, il faut créer un tableau de couleurs pour les réglages du site (primaire, secondaire, texte et accent).
Chaque couleur doit comporter un ID (primary, secondary, text ou accent), un nom (title), et enfin un code couleur. Voici une fonction qui permet de définir nos couleurs :

function prefix_color_scheme( $colors = array() ) {
	$colors = [
		[
			'_id' => 'primary',
			'title' => __( 'Primary', 'matricehello' ),
			'color' => '#016512'
		],
		[
			'_id' => 'secondary',
			'title' => __( 'Secondary', 'matricehello' ),
			'color' => '#010203'
		],
		[
			'_id' => 'text',
			'title' => __( 'Text', 'matricehello' ),
			'color' => '#010203'
		],
		[
			'_id' => 'accent',
			'title' => __( 'Accent', 'matricehello' ),
			'color' => '#D34D4D'
		]
	];
	return $colors;
}
Langage du code : PHP (php)

Une fois nos couleurs définies, il faut les mettre à jour au niveau du Kit par défaut.
L’identifiant du Kit par défaut est sauvegardé dans une option de la base de données qui a pour nom elementor_active_kit, nous allons donc récupérer cet identifiant, puis la post meta qui contient les réglages du Kit et qui a pour clé _elementor_page_settings.

$elementor_active_kit = get_option( 'elementor_active_kit', $default = false );
$active_kit_settings = get_post_meta( $elementor_active_kit, '_elementor_page_settings', $single = true );
Langage du code : PHP (php)

Ensuite, il nous faudra effacer la valeur existante pour les couleurs, et insérer notre propre tableau de couleurs :

// get our custom colors
$colors = prefix_color_scheme();
// delete existing colors and replace them
unset( $active_kit_settings[ 'system_colors' ] );
$active_kit_settings[ 'system_colors' ] = $colors;
// update post meta
update_post_meta( $elementor_active_kit, '_elementor_page_settings', $active_kit_settings );
Langage du code : PHP (php)

Voici la fonction complète, que l’on peut déclancer sur un changement de thème par exemple (after_switch_theme) :

function prefix_update_elementor_scheme_color() {
	// get elementor Default Kit template
	$elementor_active_kit = get_option( 'elementor_active_kit', $default = false );
	
	if ( $elementor_active_kit ) {
		// get Active kit post meta (settings)
		$active_kit_settings = get_post_meta( $elementor_active_kit, '_elementor_page_settings', $single = true );
		if ( ! $active_kit_settings ) {
			$active_kit_settings = [];
		}

		// get colors
		$colors = prefix_color_scheme();

		// update system colors
		if ( $colors ) {
			// delete existing colors and replace them
			unset( $active_kit_settings[ 'system_colors' ] );
			$active_kit_settings[ 'system_colors' ] = $colors;
			// update post meta
			update_post_meta( $elementor_active_kit, '_elementor_page_settings', $active_kit_settings );
		}
	}
}
add_action( 'after_switch_theme', 'prefix_update_elementor_scheme_color' );
Langage du code : PHP (php)

Si vous souhaitez ajouter d’autre couleurs, il faut procéder de la même façon : créer un tableau de couleurs, puis mettre à jour la post meta custom_colors.

Ancienne façon de procéder (avant la version 3 d’Elementor) :

Elementor propose de gérer des palettes de couleurs à deux endroits :

La palette de couleurs générale :

Les sélecteur de couleurs des widgets (color picker) :

Ces palettes de couleurs sont enregistrées en base de données, en tant qu’options, il est donc possible de les définir et les mettre à jour programmatiquement.
Pour définir les couleurs générales il faut mettre à jour l’option elementor_scheme_color, et pour le sélecteur de couleur c’est l’option elementor_scheme_color-picker.

Voici deux fonctions qui servent à déclarer les tableaux de couleurs, notez les clés  :

// define a main colors scheme
function prefix_color_scheme( $colors = array() ) {
	$colors = [
		'1' => '#ddd',
		'2' => '#000',
		'3' => '#454545',
		'4' => '#D34D4D',
	];
	return $colors;
}

// define a colors scheme for color picker
function prefix_color_scheme_picker( $colors_picker = array() ) {
	$colors_picker = [
		'1' => '#fff',
		'2' => '#000',
		'3' => '#ccc',
		'4' => '#F20000',
		'5' => '#1EBA0E',
		'6' => '#182FC2',
	];
	return $colors_picker;
}
Langage du code : PHP (php)

Voici la fonction qui permet de mettre à jour les options en base de données lors d’un changement de thème (à adapter sur une autre action au besoin) :

// update elementor color scheme on switch theme
add_action( 'after_switch_theme', 'prefix_update_elementor_scheme_color' );
function prefix_update_elementor_scheme_color() {
	$colors = prefix_color_scheme();
	if ( $colors ) {
		update_option( 'elementor_scheme_color', $colors );
	}
	$colors_picker = prefix_color_scheme_picker();
	if ( $colors_picker ) {
		update_option( 'elementor_scheme_color-picker', $colors_picker );
	}
}
Langage du code : PHP (php)

---

Ajouter des polices personnalisées

Elementor propose un outil pour ajouter des polices de caractères personnalisées depuis le tableau de bord en téléversant ses fichiers.
Cependant si vous souhaitez ajouter de nouvelles polices sans passer par cet outil, pour par exemple avoir la main sur le CSS, ou parce que vos fichiers existent déjà, il existe deux filtres :

elementor/fonts/groups qui permet d’ajouter un nouveau groupe de polices, par exemple « Theme fonts » :

/**
 * Add Font Group to Elementor
 */
add_filter( 'elementor/fonts/groups', 'prefix_elementor_custom_fonts_group', 10, 1 );
function prefix_elementor_custom_fonts_group( $font_groups ) {

	$font_groups['theme_fonts'] = __( 'Theme Fonts' );
	return $font_groups;
}
Langage du code : PHP (php)

elementor/fonts/additional_fonts qui permet d’ajouter de nouvelles polices à notre groupe précédemment créé :

/**
 * Add Group Fonts to Elementor
 */
add_filter( 'elementor/fonts/additional_fonts', 'prefix_elementor_custom_fonts', 10, 1 );
function prefix_elementor_custom_fonts( $additional_fonts ) {
	// Key/value
	//Font name/font group
	$additional_fonts['Custom font'] = 'theme_fonts';
	return $additional_fonts;
}
Langage du code : PHP (php)

Votre nouvelle police s’affichera maintenant dans tous les sélecteurs de police d’Elementor 🙂

Si ce n’est pas fait, il vous reste à charger vos fichiers de polices dans votre thème ou extension et à ajouter les règles CSS de @font-face à votre feuille de style.

---

Injecter des contrôles à un endroit précis

Elementor dispose d’une méthode qui permet d’injecter des éléments à un endroit précis d’un widget, par exemple avant ou après un contrôle existant.
Les méthodes à utiliser sont start_injection pour commencer l’injection, et end_injection pour la terminer (documentation de start_injection).

La fonction ci-dessous permet d’ajouter au widget Bouton un nouveau contrôle de type texte, avant ('at' => 'before') le contrôle existant « Lien » ('of' => 'link').

/**
 * Add injection
 *
 * Used to inject controls and sections to a specific position in the stack.
 *
 * @param Element_Base $element The edited element.
 * @param array  $args Section arguments.
 *
 */
function add_injection( $element, $args ) {
	// start injection of control before an other control
	$element->start_injection( [
		'at' => 'before',
		'of' => 'link',
	] );
	// add control
	$element->add_control(
		'button_custom_control',
		[
			'label' => __( 'Custom control', 'textdomain' ),
			'type' => \Elementor\Controls_Manager::TEXT,
			'default' => 'default value',
		]
	);
	// end injection just after
	$element->end_injection();
}
Langage du code : PHP (php)

Ensuite, il faut ajouter la fonction à la fin de la section où se situe le contrôle sur lequel on se positionne.
Ici, c’est la section principale qui a pour identifiant section_button, on peut donc utiliser le hook elementor/element/{$section_name}/{$section_id}/before_section_end (documentation) comme ceci :

add_action( 'elementor/element/button/section_button/before_section_end', 'add_injection', 10, 2 );
Langage du code : JavaScript (javascript)

---

Ajouter des attributs à un widget existant

Après avoir injecté un contrôle à un widget existant, vous souhaiterez peut-être ajouter un attribut (HTML) au widget en fonction de la valeur de ce contrôle.

Pour ajouter des attributs HTML dans le rendu d’un widget Elementor, on utilise la méthode add_render_attribute (documentation). On lui passe en paramètres :

• l’élément HTML (utilisé plus tard pour afficher les attributs)
• la clé de l’attribut (classe, ID, ou ce que l’on souhaite)
• la valeur de l’attribut
• overwrite (si l’on souhaite surcharger les attributs existants ou pas)

Pour ajouter un attribut à un widget existant, il faut agir avant que le contenu du widget soit affiché, il existe pour cela le hook elementor/widget/before_render_content.
En se basant sur l’exemple précédent où l’on ajoute un contrôle de type texte, on peut imaginer utiliser la valeur de ce contrôle pour alimenter un attribut « data-custom-control », on le fera avec le code suivant :

/**
 * Before widget render content.
 *
 * Add custom attributes to button widget link
 *
 * @since 1.0.0
 *
 * @param Widget_Base $this The current widget.
 */
add_action( 'elementor/widget/before_render_content', 'prefix_add_button_custom_attribute', 10, 1 );
function prefix_add_button_custom_attribute( $widget ) {
	
	if ( 'button' === $widget->get_name() ) { // if button is current widget
		$settings = $widget->get_settings(); // get widget setting
		// if setting exist and not empty
		if ( isset( $settings[ 'button_custom_control' ] ) && ! empty( $settings[ 'button_custom_control' ] ) ) {
			// add custom attribute to button
			$widget->add_render_attribute( 'button', 'data-custom-control', $settings[ 'button_custom_control' ] );
		}
	}
}
Langage du code : PHP (php)

Avec cette fonction, le contenu du contrôle qui a pour identifiant button_custom_control sera affiché sur le lien du bouton, dans l’attribut data-custom-control.
Remarquez que l’on accède, via la variable $widget, à l’objet du widget courant et toutes ses propriétés et méthodes, notamment get_settings() qui permet d’en récupérer les réglages.

Si vous vous demandez comment sont ensuite affichés les attributs, jetez un œil à la classe du widget Bouton (elementor/includes/widgets/button.php), fonction render :

<div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
	<a <?php echo $this->get_render_attribute_string( 'button' ); ?>>
		<?php $this->render_text(); ?>
	</a>
</div>
Langage du code : PHP (php)

C’est la méthode get_render_attribute_string qui est utilisée, et c’est ici que l’on retrouve l’élément HTML button qui est passé en premier paramètre de add_render_attribute.

N’hésitez pas à utiliser ces méthodes dans vos propres widgets, elles nous permettent de construire notre logique en amont, d’ajouter plusieurs attributs selon différentes conditions, et d’afficher le tout proprement en une fois.

---

Mettre à jour un contrôle existant

Elementor dispose de la méthode update_control qui permet de mettre à jour un contrôle existant, elle ressemble beaucoup à add_control : on utilise l’identifiant du contrôle ciblé et on définit dans un tableau les paramètres que l’on veut mettre à jour. Vous pouvez modifier et/ou ajouter n’importe qu’elle option disponible pour le contrôle. (documentation d’update_control)

Par exemple, pour définir une valeur d’alignement par défaut au widget Bouton et également masquer le contrôle d’alignement si le type de bouton est différent de la valeur « info » :

function prefix_update_controls( $element, $args ) {
	// update "align" control, set default value to "center"
	// add condition : show control only if button type is not "info"
	$element->update_control(
		'align',
		[
			'default' => 'center',
			'condition' => [
				'button_type!' => 'info',
			],
		]
	);
}
Langage du code : PHP (php)

Un autre exemple, pour ajouter une nouvelle option de style (« Fiesta ») pour le contrôle « Bordure », et définir la couleur de bordure à #000 par défaut :

function prefix_update_controls( $element, $args ) {
	// update "border" control, add custom style option "Fiesta"
	// update "border" control, set default value to "solid"
	$element->update_control(
		'border_border',
		[
			'options' => [
				'' => __( 'None', 'elementor' ),
				'dashed groove double dotted' => _x( 'Fiesta', 'Border Control', 'elementor' ),
				'solid' => _x( 'Solid', 'Border Control', 'elementor' ),
				'double' => _x( 'Double', 'Border Control', 'elementor' ),
				'dotted' => _x( 'Dotted', 'Border Control', 'elementor' ),
				'dashed' => _x( 'Dashed', 'Border Control', 'elementor' ),
				'groove' => _x( 'Groove', 'Border Control', 'elementor' ),
			],
			'default' => 'solid',
		]
	);
	// update "border color" control, set default value to "#000"
	$element->update_control(
		'border_color',
		[
			'default' => '#000',
		]
	);
}
Langage du code : PHP (php)

Ensuite, il faut ajouter la fonction à la fin de la section où se situe le contrôle sur lequel on se positionne.
Ici, c’est la section de style qui a pour identifiant section_style, on peut donc utiliser le hook elementor/element/{$section_name}/{$section_id}/after_section_end (documentation) comme ceci :

add_action( 'elementor/element/button/section_style/after_section_end', 'prefix_update_controls', 10, 2 );
Langage du code : JavaScript (javascript)

---

Créer une catégorie de widget personnalisée

Dans Elementor, les widgets sont classés par catégories dans la barre latérale. Nativement on retrouve par exemple les catégories suivantes :

• Basique
• Pro
• Général

Mais saviez-vous qu’il est possible de créer ses propres catégories, afin de mieux organiser ses propres widgets ? Elementor le permet grâce au hook elementor/elements/categories_registered (documentation), voici un exemple de fonction qui ajoute une catégorie « Thème » :

function prefix_add_elementor_widget_categories( $elements_manager ) {
	$elements_manager->add_category(
		'my-theme', // category ID (unique)
		[
			'title' => __( 'My Theme', 'textdomain' ), // Category public name
			'icon' => 'eicon-plus', // category icon
		]
	);
}
add_action( 'elementor/elements/categories_registered', 'prefix_add_elementor_widget_categories' );
Langage du code : PHP (php)

Avec cette fonction, vous verrez votre nouvelle catégorie apparaître dans la barre latérale qui regroupe les widgets, vous pouvez même ajouter une icône (choisie parmi la librairie d’icônes d’Elementor).

Ensuite, lorsque vous créez vos widgets, il suffit d’y utiliser la méthode native get_categories (héritée de la classe Widget_Base) et d’y préciser votre identifiant de catégorie (notez que vous pouvez attribuer plusieurs catégories à un même widget) :

public function get_categories() {
	return [ 'my-theme, 'basic' ];
}
Langage du code : PHP (php)