Wrap the hole tribe-events div in custom HTML code for design purposes

[Baggio]

Hi I would like to ask how I procede to wrap the <div class=”tribe-events”>some code…</div> with some custom code (a div and a section with custom classes for examples) without modifying core files! I already tried modifying the file main.php in the tribe folder, it worked as I expected but I can’t leave it like that because it will prevent me from doing updates. Right now I’m using the events calendar on a test site! Then I’ll move to my event calendar pro version. Thank you very much!

[George]

Hey @Baggio!

You should be able to pull off this customizations by using the methods outlined on this guide ? https://theeventscalendar.com/knowledgebase/themers-guide/

Please read that guide and follow its methods, and tinker a bit, because we unfortunately cannot help with custom coding here. 🙁

I will mention, however, that if you use those methods, what you can do is use those methods to make a theme version of this file found in The Events Calendar:

/the-events-calendar/src/views/default-template.php

You should find code there like this:

get_header();
?>
<div id="tribe-events-pg-template">
<?php tribe_events_before_html(); ?>
<?php tribe_get_view(); ?>
<?php tribe_events_after_html(); ?>
</div> <!-- #tribe-events-pg-template -->
<?php
get_footer();


In your custom theme version (see that guide above to learn what “custom theme version” even means), you can wrap the above content in whatever HTML you want and it should wrap the #tribe-events div too.

I hope this helps!

— George

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts