Add class to elements using php

[barryovb]

Hello Themeco.

Please I need guidance on how to add class to elements via the theme core files (child theme). I know the normal way of adding class which is via the builders but it’s quite stressful considering that I’ll have to do that all the time.

What I want is a class to be added to for example all Headline Elements, another class to all Text Elements, another for all Image Elements, etc so whenever I select any of the Elements in the builder, the class will be inserted automatically.

For example:

For Headline Elements
<div class="x-text x-text-headline e16-6 mg-3">
<div class="x-text-content-text">
<h2 class="x-text-content-text-primary custom-class-here">
THIS IS AN H2 HEADLINE
</h2>
</div>
</div>

For Text Elements
<div class="x-text e16-5 mg-4 custom-class-here">
<P>"Some texts here"</p>
<P>"More texts here"</p>
</div>

And more elements like images, etc…

Please help me. Thank you!

[ruenel]

Hello @Mrbiizy,

Thank for writing in! Regretfully what you are trying to do is not possible. it will require custom development or even creating your own custom elements to be able to insert those custom class. What I can recommend is this; you can set up, the Text or Headline element with all of your sting and then save it as a Preset.

Kindly check out my demo video here:

Presets as Elements: Using a Design System

Saving and applying presets

Hope this helps.

[barryovb]

Thanks for trying to help. I think I’ve seen this before but it doesn’t actually help out for what I’m trying to achieve. When I add a class to an headline, the class is not given directly to the h2 tag but rather the parent div after the col. So this doesn’t help at all.

I noticed that the class is always given to the parent div of the elements (p, h, etc). In the case of h, there are 3 div before the h tag itself. Quite difficult to handle…

[marc_a]

Hey @Mrbiizy,

You can add a class to an element using jQuery, please check these documentations.

• https://api.jquery.com/addclass/
• https://www.w3schools.com/jquery/html_addclass.asp

Please note that we don’t provide customization because it is outside the scope of our theme support. The documentation I sent above serves as guide on how you can add a custom class to an element.

Hope that helps and thank you for understanding.

[barryovb]

Thanks for sharing this.

I’m wondering, why are there too many <div> wrapping the <h> tags? It makes it really difficult to customise. I don’t know if something can be done about it in the upcoming coming updates.

Thanks.

[ruenel]

Hello @Mrbiizy,

The <div> wrappers are necessary to be able to have Flexbox options, overflow, typing, subheadline, graphic and even link options.

If you want something more custom, it is best that you create your own custom headline or text element instead. Please check out this documentation for more information:

• https://theme.co/docs/element-api-primer

Best Regards.

[barryovb]

Okay, thanks. I’ve been able to find a way around to get what I needed.

[prakash_s]

Hello @Mrbiizy,

Glad that you were able to get the solution. Please feel free to open a new thread if you have any more queries.

Thanks