Share on facebook
Share on twitter
Share on linkedin
Share on email

If you are like, you might want to keep things together in same page when you are editing a page/post. But most of the time, as a developer we face common problem when using Elementor together with custom fields plugins like Advanced Custom Fields, CarbonFields, which leads to going back and forth from WP Edit mode and Elementor Editor which can sometimes be inconvenient or clients.

BUT, there is a limited setting availabe by default (gear icon on bottom left) which lets you edit some things like Page Title, Post status, Featured Image.

But there is a way to add settings to Page/Post settings panel.

Adding Extra Fields to Page settings and mirror them with page/post custom fields 1

In my case, I had Video post type with video for each posts which could be either from external source like YouTube or hosted locally.

add_action('carbon_fields_register_fields',function(){
Container::make('post_meta', 'Video')
            ->where('post_type', '=', 'video')
            ->add_fields([
                Field::make('checkbox', 'is_external_video', 'Is External Video'),

                Field::make('oembed', 'video_url', 'Video URL')->set_conditional_logic([
                    [
                        'field'   => 'is_external_video',
                        'value'   => true,
                        'compare' => '=',
                    ],
                ]),
                Field::make('file', 'self_hosted_video_mp4', 'Video File MP4')
                    ->set_type('video')
                    ->set_value_type('id')
                    ->set_conditional_logic([
                        'relation' => 'AND', // Optional, defaults to "AND"
                        [
                            'field'   => 'is_external_video',
                            'value'   => true,
                            'compare' => '!=',
                        ],
                    ]),

            ]);
 });

This was my CarbonField container setup.

add_action('elementor/documents/register_controls', function ($instance) {
    if ($instance->get_post()->post_type === "video") {
        $instance->start_controls_section(
            'theme-video_section',
            [
                'label' => __('Video Setting', 'elementor'),
                'tab'   => \Elementor\Controls_Manager::TAB_SETTINGS,
            ]
        );
        $instance->add_control(
            'is_external_video',
            [
                'type'         => \Elementor\Controls_Manager::SWITCHER,
                'label'        => __('Is External Video', 'elementor'),

                'label_block'  => true,
                'label_on'     => 'YES',
                'label_off'    => 'NO',
                'return_value' => 'yes',
                'default'      => '',
            ]
        );
        $instance->add_control(
            'video_url',
            [
                'type'        => \Elementor\Controls_Manager::TEXT,
                'label'       => __('Video Url', 'elementor'),
                'label_block' => true,
                'default'     => '',
                'placeholder' => __('Enter video URL', 'elementor'),

                'condition'   => [
                    'is_external_video' => 'yes',
                ],
            ]
        );
        $instance->add_control(
            'hosted_video',
            [
                'label'      => __('Choose File', 'elementor'),
                'type'       => \Elementor\Controls_Manager::MEDIA,
                'media_type' => 'video',
                'condition'  => [
                    'is_external_video!' => 'yes',
                ],
            ]
        );
        $instance->end_controls_section();
    }

}, 99);

This code will add some extra setting fields to Page/Post settings panel.

add_action('elementor/document/after_save', function ($instance, $data) {

    if ($instance->get_post()->post_type == "video" && isset($data['settings'])) {
    	$post_id=$instance->get_post()->ID;
    	$settings=$data['settings'];
    	// update carbonfields according to elementor page settings
    	carbon_set_post_meta($post_id,'is_external_video',$settings['is_external_video']=="yes"?true:false);
    	carbon_set_post_meta($post_id,'video_url',$settings['video_url']);
    	carbon_set_post_meta($post_id,'self_hosted_video_mp4',$settings['hosted_video']['id']);
    }

}, 99, 2);

As I am using CarbonFields in most of my theme development, the hook above should miror save the data from elementor settings to my CarbonFields.

add_action('carbon_fields_post_meta_container_saved',function($post_id,$instance){

	$elementor_settings=get_post_meta($post_id,'_elementor_page_settings',true);

	// Modify elementor page settings according to carbon fields data
	$elementor_settings['video_url']=carbon_get_post_meta($post_id,'video_url');
	$elementor_settings['is_external_video']=carbon_get_post_meta($post_id,'is_external_video')==true?"yes":"no";
	$hosted_video_id=carbon_get_post_meta($post_id,'self_hosted_video_mp4');
	$elementor_settings['hosted_video']=['url'=>wp_get_attachment_url($hosted_video_id),'id'=>$hosted_video_id];

	// Finally save data from carbon fields to Elementor page settings
	update_post_meta($post_id,'_elementor_page_settings',$elementor_settings);

},99,2);

Again, I want my data from Carbon Fields to be mirrored with Elementor Page/Post settings so that the data are good even if I edit them from either Elementor editor or WP Editor.

Share on facebook
Share on twitter
Share on linkedin
Share on email