Customize existing module

[elegantthemes]

Customize existing module

[lots0logs]

With Divi 3.1 now, do we have a proper way to customize existing modules or is it a bad practice?

Its possible to customize official modules, though what's involved highly depends on what exactly you are trying to do. Typically, what you want to do will require taking one of two routes:

Create a customized version of an official module as a separate module

This is the most common form of customizing official modules. It involves copy the module's PHP class and making it your own. In order to add Visual Builder support to this kind of module you have to create a React Component for it that renders the HTML so that it matches what the PHP render function.

Some modules require calling special functions in JavaScript to initialize them (like the sliders for example). We're working on documenting those cases.

Customize something in an official module without creating a separate module

You can use hooks to customize an official module. Here are some examples:

• et_pb_all_fields_unprocessed_$slug - Filters the module's settings definitions
• et_pb_module_shortcode_attributes - Filters module's props before its render() method is called.
• $slug_shortcode_output - Filters the module's HTML output.

We'll be adding official documentation regarding this in the future 😄

[xxtesaxx]

Awesome, I just gave it a try and it seems to work pretty straight forward. One thing to note though is that in $slug_shortcode_output you don't get the props of the module, or do you? Instead I could use et_module_shortcode_output and check for the slug before accessing the props:

[xxtesaxx]

Next version, right? ;P

[Paul-S-Taylor]

OK - Apologies for asking here and forgive the ineptitude - but I can't see anywhere else on ET to ask such things and I' really trying to grasp how to do this (appreciate it has been mentioned that docs will be updated in the future ) This is more a learning exercise than anything else - so if any unofficial guidance is available for a non developer - it is much appreciated.

In an effort to avoid creating whole modules I've created a Module Mod in a child theme Functions PHP with a few lines of code

I have my 2 mods to the Current Blurb Module - that

1. Modified a current option. Added an option in the icon placement - to Align Top Left
2. Added a new option. A New option to control the icon margin bottom

Seems to be working

Q1: Is there any way get an idea how the React.JSX should be formed i.e. do you need to match the whole blurb output?
Q2: How do I load the React.JSX from functions.php?

[thelanj]

Would love to see some simple documentation. I'm not a legit coder but do well enough and have struggled to build a module for displaying custom posts.

[PierreBichet]

So, finally, is it possible to hack an existing module, adding new options and render them in the Visual Builder? Your thoughts @lots0logs? 🙂

[lots0logs]

Yeah I actually noticed that earlier myself. We should pass the module instance to the callback for the shortcode_output. In the meantime looks like you found a workaround 😉

[fedeescalada]

In order to add Visual Builder support to this kind of module you have to create a React Component for it that renders the HTML so that it matches what the PHP render function.

Could you please briefly explain how to add a React Component in a child theme? I mean, without creating a Divi Extension?

Thanks in advance.

[xxtesaxx]

Can't you get the original setting form the fields_unprocessed or modify them like:

$fields_unprocessed['name_of_setting']['options']['new_value'] = 'My new Value';
return $fields_unprocessed;

[xxtesaxx]

Well, after all it was called the "developer" update and not the "everybody now can easily create modules on their own" update. For a long time there was no documentation at all and we had to dig through the code ourselves if we wanted to learn how something worked. Now we have at least a little documentation and the intention from ET to support and improve 3rd party modules.

Sure it's quiet complicated and hard to grasp at the beginning but if you keep learning you will eventually reach the point where you understand how things work together.

Take the slider you want to add for example. If you have no plan whatsoever, it looks like a unsolvable puzzle but I with my current knowledge know that there is a class in divi which is inside the file class-et-builer-element.php in which the font settings are created inside the function _add_font_fields().

I would then try to find out how the settings are created. Are they a composite field? Are they in subtoggles? Is the heading setting just a multi-button field and there are not multiple instances for each setting? Then I would create one or multiple sliders and add them to the same settings toggle/s as the other fields. To put the slider at the right position I could even splice the settings array and insert my slider in the middle.

If you know what you are doing it's not too hard. If you don't know what you are doing it seems unbearable. For me it's easy to say somthing like this since I have many years of experience as a developer.

I can give you one good advice: if you really want to become a Divi dev then never ever ever ever give up and keep going. You learn best by failing. The harder the better. Loog through the code. Try to understand why what is hapenning. Download free divi plugins from wordpress.org and look at their sourcecode as well. But if you don't want to become a dev, then spend your time doing something which you are good at to earn the money to pay a proper dev to take the job. A real dev will solve your problems a lot quicker and you can do what you are good at instead of half-harted spend weeks doing something which you don't enjoy. :)

[Paul-S-Taylor]

@xxtesaxx Thanks for reply.

Agreed... yes it was a Developer Update ;-)

Appreciate the feedback and yes, if I ever needed a complex Divi extension I would certainly be happy to hire a sub contractor rather than try to figure it all myself. I'm a designer and that's plenty enough work for me - this is more about personal improvement and learning something new. Running out of places to find information on this subject got a tad frustrating having set myself on that course.

Take Maxon / and its 3D app Cinema 4D - they have http://www.plugincafe.com/forum/default.asp. If you want to start from scratch - there is a discussion forum and a downloadable API with fully documented code descriptions. Yes the same rules apply - if you want a complex render plugin that does something special - you'd hire a developer that fully understands the API. If you want to do something simple like restrict the movement of an object in an animation - you can do it yourself with the information that has been made available. The important thing is - there is lots of information to work with plus somewhere to ask even the the dumb questions.

With ET - the information is limited but more importantly there's no where to officially discuss such things - and that's the biggest frustration.

Oddly enough, I was looking though the very same file - class-et-builer-element.php earlier - and spotted the relevant set of labels and sliders. The $options_settings and $additional_options arrays are getting a bit too deep for me to unravel - not impossible - but probably best to go back the the basic examples and take smaller steps from there.

(I'm not expecting it - but if anyone has the time of inclination to show me how to add a slider (for adding padding bottom) to every H type - it would make a very useful reference in making additions to that special collection of pre defined options)

I hope the ET team put a few more examples online and provide a few more notes on what each items does, as I'm sure there is a place between hiring a developer and a minor tweak.

[xxtesaxx]

I'm afraid this is still not implemented. :(

[mrkenng]

Hello guys! Is there a way to get the Font Advanced Fields to work on existing module? I know I can do those fields on my own and render them but to save time writing those again i'm wondering if anyone managed to get that done? Thanks!

$this->advanced_fields = array(
			'fonts'                 => array(
				'body' => array(
					'label'            => esc_html__( 'Body', 'et_builder' ),
					'css'              => array(
						'main' => "{$this->main_css_element} *",
					),
					'hide_text_shadow' => true,
					'block_elements'   => array(
						'tabbed_subtoggles' => true,
					),
				),
);

[xxtesaxx]

Yeah, a way to extend modules, rows and sections would be awesome. For example in Elementor you can add additional settings to each element by using a WordPress actions and filters. A similar technique for Divi would be awesome.

[richardginn]

Well web2033 this is like the first version of DIVI where I spotted that all the modules are in separate files instead of one massive 10,000 plus line code filled file.

This would make it easier to attempt it.

@richardginn I see in my archive that somewhere around Divi 3.0.84 (October 2017) modules were moved to separate PHP files. But these modules do not have WordPress filters/actions to tweak them safely.

[richardginn]

We'll be adding official documentation regarding this in the future

OH YEAH!!!

[xxtesaxx]

Will that work for sections and rows as well? If so, what would be the slug for a section/row?

[richardginn]

Code for the columns and rows was never a module.

[lots0logs]

Yes it works for sections and rows (columns are actually tied into rows under the hood so there is no column module). The slugs to use for sections and rows are what you'd expect: et_pb_section, et_pb_row, etc.

So, for example, I want to add more social links to Person module (or replace existing links)
Is it possible now to make it using these hooks and without rewriting the module from scratch?

[richardginn]

Well Web2033 you could edit the teammmeber.php module and then make a whole new bigger module with more social links in it.

[xxtesaxx]

Yes web2033, you can use the hooks and absolutely make that work with the default module 😀

I'm thinking about writing a GDPR extension for the email opt-in to display a GDPR checkbox if it does not get updated within the next weeks but I'm confident ET won't let us hang on this topic xD

[lots0logs]

Yes web2033, you can use the hooks and absolutely make that work with the default module

Indeed 👍

I'm thinking about writing a GDPR extension for the email opt-in to display a GDPR checkbox if it does not get updated within the next weeks but I'm confident ET won't let us hang on this topic xD

That's currently in the works. It'll be ready in time 😃

[dangub86]

Hi, i'm trying to customize an existing Divi module... following the example by xxtesaxx all is working fine in the default Divi builder and in the final rendering while i don't see the changes in the Visual Builder...

Obviously i think it is because i'm not adding the rendering code in the React component (as we would do it instead if we were creating a new custom module)... so my question is: there is any way to add the React code in order to make it work also in the VB?

[Paul-S-Taylor]

Designer (not developer) would really like to learn more and see a very simple example of extending one of the current modules using a Child theme and the method above (rather than try to understand a whole module). Just tried adding a margin-bottom value to the Blurb Icon using the above hooks. Got as far as the interface slider and being able to pick up the props value. Cant find a way to add a new custom CSS item (icon_margin_bottom) to the CSS array? (OK probably lack of knowledge) or a way to add VB rendering/React component to the Child theme. So definitely another request for more info when you guys have the time - this opens up so many opportunities for (potentially) simple mods - many thanks

[Paul-S-Taylor]

Would it be possible using the above hooks to add another option to the Blurb Image/Icon Alignment array ('icon_placement' => array('options' => $image_icon_placement )). It currently has Top and Left options - wanted to Add Top Left. I can add new fields to the Builder Interface, but can't see how to append/push a new parameter without overwriting the original.

[Paul-S-Taylor]

Thanks - that was it

[Paul-S-Taylor]

Started going through the basic examples on the ET Dev area again. Making Progress. No problem adding a slider - but want to add a slider here (see attached). i.e.. so I get an extra control slider added to every H Tag.
How do I do that ?

[IvanChiurcci]

Paul-S-Taylor , haven't tried to add in between the existing options but you can add either before or after the options group by adding the 'sub_toggle' => 'H6' (assuming that the sub_toggle name is H6) to your range option and playing with the 'priority' key value.

[Paul-S-Taylor]

Thanks Ivan - I want to add another slider to to all H tags. The whole tab was added using the get_advanced_fields_config() from the ET Website Basic Fonts Field Configuration Example

[Paul-S-Taylor]

This is not a rant - just the result of many hours of trying to work out how to progress. Have to say, as a designer rather than a developer I'm completely frustrated - put in many hours trying to guess what I should be doing to take things further than the code published on the ET website. Yes I've managed to get a couple of minor things working and get the VB /React scripts functioning, but that's about it so far. I thought that publication of the developer info on the ET blog might enable me to learn how to create something useful or modify existing modules. Yes it most certainly does if you are a developer and know more about the code in the first place, but if not - it seems like a closed world. There isn't anywhere to ask questions or get feedback apart from here on GitHub - which for a non developer is inappropriate, intimidating and really not the right place to go to learn anything. Is there anywhere we can ask those dumb questions about the API that help you make the leap from code tinkering to something more useful?

[xxtesaxx]

Alright so here are some hints:

• The headings settings field of the advanced settings font field is of type 'multiple_buttons' so all the settings on there are actually the same. Switching the heading level does not show/hide different settings for each level. Instead the html element in the render function is changed. Here you would only add one slider (and maybe just set the default value based on the selected heading level).
• The settings in Divis core Text module are organised in sub-toggles. There you have multiple settings (e. g. Font) for each heading level. Here you would add 6 sliders, each in its own sub-toggle
• Divis Text module uses the toggle slug 'header' and sub-toggles 'h1' to 'h6' as seen in Text.php
• To put a setting in a sub toggle you need to set 'toggle_slug' => 'header' and 'sub_toggle' => 'h1'
• To apply the CSS you can use ET_Builder_Element::set_style as seen in other modules - have a look at the core modules

There might or might not be a unofficial Slack channel for Divi developers to ask questions and get help, to which one can get invited, I heard. But who knows if this is true, right @lots0logs? 😇

[Paul-S-Taylor]

@xxtesaxx Thanks again - appreciate the help. I've been getting my head around the sub toggles . Got the ET_Builder_Element::set_style working with a previous test - so its starting to fall into place.

[Paul-S-Taylor]

Curious - as it has been mentioned on several occasions - are we going to see any JSX examples from the main builder modules?

[burhandodhy]

Divi team should introduce more action/filters and obviously better "Developer" documentation. So we could extend the functionality easily.

[mortan66]

Great advice here. Adding fields and taking them into account for the output works well. I need to extend the modules with an UI that goes beyond the standard fields. Is there a way to register new advanced fields where I can define the HTML? Or any other elegant way to include fields with custom HTML? My current approach is to insert the HTML via JS when my custom tab is clicked, but that doesn't feel very clean and creates additional issues with saving and retrieving the entered values. Any advice would be highly appreciated.

[UmerCheema-WPD]

Hi
I have a question related to customize existing module.

Suppose i am customizing Text module and want to add custom field before Body how i can add priority ?
Mean First display my custom field then text module body field ?

[FeIix]

Hi,
Is it possible to use these hook to override the column_structure of a row module ?

I tried to do it with et_pb_all_fields_unprocessed_et_pb_row (not triggered) and et_pb_module_shortcode_attributes,
but nothing has effect.

add_filter( 'et_pb_module_shortcode_attributes', function( $props, $attrs, $render_slug, $_address, $content ) {
    if($render_slug !== 'et_pb_row') return $props;

    if($props['module_id'] !== 'my_test_slug') return $props;

    $props['column_structure'] = '4';
    return $props;
}, 10, 6);

Is the doc available somewhere ?