[Gelöst] Layouts integration with The Events Calendar

[Author]

Artikel

[daveG-7]

Hello. I haven't heard anything back on this ticket in a few weeks. Is it still being worked on? The site is almost ready to go live. Layouts and the Event Calendar are both integral to its functioning, but if this can't be made to work soon I'll have to find a different solution for one, which would cost me a significant amount of time and money. Thank you!

[Beda]

I have been working on this and I cannot show you a proper solution.

The problem is not on the Toolset end.

1. I can show you how to call the Layout, this is not the problem.
You have to change something in the plugins code but that would not be the big problem here.

2. The Big problem is, you cannot display the Plugins data with Toolset because that plugin mainly relies on:
- hidden custom fields
- hidden (non-public) post types.

Some of this data can be handled by Toolset, but there is no way for us (from Toolset) to explain to you what each field is for.
That would require a lot of testing on your End.

I, therefore, asked our Support Leader to contact them and offer some co-work.

But this is nothing we can solve in the next few days, and it is not related to our code.
It's the complexity of both plugins, using specific methods and data kind.

[daveG-7]

Hrm, that's disappointing, but thanks for reaching out to Modern Tribe to see if you can get your two plugins working well together - the Event Calendar, especially the free version, if a very popular plugin.

Looking at their template file, the following code calls everything I need to display the data from their plugins.

<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 -->

So all I need to do is call the layout's headers and footers, and I'd have what I need. Is there some php I could add to their template above and below that part that would call my Parent Layout's headers and footers?

[daveG-7]

I'm getting closer. If look at one of the Events Calendar pages (hidden link), I've called the Layout content, and the Events Calendar content twice, but neither time in the correct place.

To get the Event Calendar content at the bottom of the page, below the Layout content, I'm using this code for the Event Calendar template:

<?php
if ( ! defined( 'ABSPATH' ) ) {
	die( '-1' );
}

if ( defined( 'WPDDL_VERSION' ) ) :
    get_header( 'layouts', 'events-default');
    the_ddlayout( 'events-detault' );
    ?>
        <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( 'layouts' ); 
   endif; ?>

And to get it at the top, above the Layout content, I created a shortcode using the following code, which I then placed in a Visual Editor cell in the layout, below the cell creating the title "Calendar" - however, like I said, it places that content, not there, but at the top of the page.

add_shortcode('events_shortcode', 'events_shortcode');
function events_shortcode() {
?>
<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();
}

Any suggestions for modifying either of those to get the Events Calendar content to fall where I want it, below the Layout header and above the Layout footer?

[Beda]

We decided to start an integration process.

I cannot state ETA, how, if, and what we will do, but I can say that our Developers agreed that this Plugin is a good match to finally bring something long requested to Toolset:
Event management.

Please acknowledge that this will require lots of time and co-work also of the other plugins authors, and i cannot promise what will be the outcome.
It is just to let you know that we look at this from a wide point of view and want to provide something powerful at the end.

For your current issue, therefore, the current solution is Custom Code only, and it will not be as nice and perfect as an integration.

Your first solution is putting the Calendar on bottom because you call the whole layout before the calendar.
The second solution is putting it at the top because that Plugin echoes instead of returns the contents and ShortCodes should never echo content.
They should always return the content, then that solution is the best way to go.

As I elaborated it is not possible to use the actual design of the Calendar/events anywhere outside their own templates currently because you would need to recreate it with ShortCodes displaying its fields.
As such you cannot call its contents in a layout or content Template with native ShortCodes.
Or, only very limitedly.

You have 2 possibilites:
- use Layouts only (not your goal, you want to display the event)
- Create a folder in your Theme called "tribe-events" and in it, a PHP file called "default-template.php"
Then in Dashboard > Events > Settings choose the Plugin's default template to be displayed.
After, you need to code the header and footer in 2 new PHP files, called header-custom.php and footer-custom.php.
In the PHP file default-template.php you insert the basic Events code and call those headers and footers:

<?php
if ( ! defined( 'ABSPATH' ) ) {
	die( '-1' );
}

get_header('custom');

?>
<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('custom');

[daveG-7]

Thank you - a full integration is an exciting development, and I look forward to it!

As for my more immediate Custom Code needs, I have a few questions on what you wrote. To be clear, I don't really know PHP other than at a very rudimentary level - hence using Toolset 🙂

First, you say "The second solution is putting it at the top because that Plugin echoes instead of returns the contents and ShortCodes should never echo content.
They should always return the content, then that solution is the best way to go." - is there a way to modify the plugin code I put together to return instead of echo the content?

Second, you say "After, you need to code the header and footer in 2 new PHP files, called header-custom.php and footer-custom.php." Is there a way I can find the code that my parent layout is already generating for the header and footer on other pages, or will I have to start from scratch here?

Thanks a lot for all your help on this.

[Beda]

1. Thank you - a full integration is an exciting development, and I look forward to it!

You are welcome. Please acknowledge that I cannot promise how, when and whether we integrate it all, partially or however we will implement this.
This is fully up to our Developers.

2. As for my more immediate Custom Code needs, I have a few questions on what you wrote. To be clear, I don't really know PHP other than at a very rudimentary level - hence using Toolset ????

That is fully understandable. It's exactly what we develop Toolset for.
I acknowledge that sometimes, even Toolset is at its end and PHP is the only fallback 🙁

3. First, you say "The second solution is putting it at the top because that Plugin echoes instead of returns the contents and ShortCodes should never echo content.
They should always return the content, then that solution is the best way to go." - is there a way to modify the plugin code I put together to return instead of echo the content?

This is not up to me to instruct. I cannot, because I would suggest altering 3rd Party Source Code and for obvious reasons, I cannot do that.
I do apologise this.

4. Second, you say "After, you need to code the header and footer in 2 new PHP files, called header-custom.php and footer-custom.php." Is there a way I can find the code that my parent layout is already generating for the header and footer on other pages, or will I have to start from scratch here?

What you can do is analyse the Front End (built with a Layout) and then use the HTML generated to at least have a "starting" pattern.
But the PHP, which populates all this HTML with data, must be coded with WordPress API and PHP.
Usually, you will probably just call the menu, and a footer wich often is hard coded:
https://developer.wordpress.org/reference/functions/wp_nav_menu/

I am sorry to say that this, for now, requires full custom code, which we cannot fully assist.

I deeply apologise this inconvenience.

[daveG-7]

Thanks again. I look forward to the results of your integration efforts, but, actually, with the help of a friend who knows more PHP than I do, we got the shortcode method working perfectly, though it took a lot of steps to get there. You can see it working here: hidden link.

In case it helps with your integration or if anyone else who has similar problems finds this thread, I'll recount my solution here. This is working with the Toolset Starter theme - I'm not sure how well it would work with any other theme, or anyone else's setup. I'm also not sure all the steps are necessary, but it's what's working for me. Here it goes

1.) Add the following to your theme's functions.php - this will create a shortcode with which we will call the Events Calendar content later.

add_shortcode('events_shortcode', 'events_shortcode');
function events_shortcode() {
?>
<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
}

2.) Create a folder in your theme's folder called tribe-events (so, at /wp-content/themes/your-theme/tribe-events), and copy default-template.php into it from /wp-content/plugins/the-events-calendar/src/views/. In the newly copied default-template.php, replace the code with the following:

<?php
if ( ! defined( 'ABSPATH' ) ) {
	die( '-1' );
}

if ( defined( 'WPDDL_VERSION' ) ) :
    get_header( 'layouts', 'events-default');
    the_ddlayout( 'events-detault' );
    ?>
   <?php get_footer( 'layouts' ); 
   endif; ?>

3.) Make sure that in Events -> Settings -> Display, you've chosen "Default Events Template" for your Events template

4.) Create two layouts and assign one to the Events post type and one to Events archives loop. The Events post type layout should have the slug "events-default"

5.) Download and activate this plugin: https://wordpress.org/plugins/shortcode-widget/ - putting the shortcode in a widget as opposed to a Visual Editor content block in layouts was the key insight to make this work.

6.) In Appearance -> Widgets, add the Shortcode Widget to a Widget Area, and add the shortcode you created earlier, [events_shortcode] to it

7.) In both the Layouts you created, add a Widget Area block that calls the specific Widget Area in which you placed the shortcode.

That's what worked for me - hopefully it will work and be helpful for someone else.

[daveG-7]

Thanks again. I look forward to the results of your integration efforts, but, actually, with the help of a friend who knows more PHP than I do, we got the shortcode method working perfectly, though it took a lot of steps to get there. You can see it working here: hidden link.

In case it helps with your integration or if anyone else who has similar problems finds this thread, I'll recount my solution here. This is working with the Toolset Starter theme - I'm not sure how well it would work with any other theme, or anyone else's setup. I'm also not sure all the steps are necessary, but it's what's working for me. Here it goes

1.) Add the following to your theme's functions.php - this will create a shortcode with which we will call the Events Calendar content later.

add_shortcode('events_shortcode', 'events_shortcode');
function events_shortcode() {
?>
<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
}

2.) Create a folder in your theme's folder called tribe-events (so, at /wp-content/themes/your-theme/tribe-events), and copy default-template.php into it from /wp-content/plugins/the-events-calendar/src/views/. In the newly copied default-template.php, replace the code with the following:

<?php
if ( ! defined( 'ABSPATH' ) ) {
	die( '-1' );
}

if ( defined( 'WPDDL_VERSION' ) ) :
    get_header( 'layouts', 'events-default');
    the_ddlayout( 'events-detault' );
    ?>
   <?php get_footer( 'layouts' ); 
   endif; ?>

3.) Make sure that in Events -> Settings -> Display, you've chosen "Default Events Template" for your Events template

4.) Create two layouts and assign one to the Events post type and one to Events archives loop. The Events post type layout should have the slug "events-default"

5.) Download and activate this plugin: https://wordpress.org/plugins/shortcode-widget/ - putting the shortcode in a widget as opposed to a Visual Editor content block in layouts was the key insight to make this work.

6.) In Appearance -> Widgets, add the Shortcode Widget to a Widget Area, and add the shortcode you created earlier, [events_shortcode] to it

7.) In both the Layouts you created, add a Widget Area block that calls the specific Widget Area in which you placed the shortcode.

That's what worked for me - hopefully it will work and be helpful for someone else.

[Beda]

I reopen here for the sole reason to update you in future about the compatibility process (which by now has not given any results)

Thank you.

[MichaelR9215]

@daveg-7

Half of the code you provided is working for me.

To confirm, I have the calendar showing up, but when I click on a single event, it is still a blank page.

Did you have this issue? If so, I'd love to hear your thoughts.

Thanks!

[Beda]

In the past, I've had tickets with problems with Events Manager (like this one), but that was when Layouts was an all-or-nothing proposition.
(Either uses it everywhere or nowhere and edit only the WHOLE Template)
If you used it, you had to use it on every page.

You don't need to do this now, so you can use Layouts on a site and leave Events Manager to render the single event and event archive pages.

If you want to create custom single event and event archive pages (much like you would create custom WC product and shop pages) then, you're right, you can't use Layouts, still.
But it is not anymore the main purpose to let you edit the WHOLE template with Layouts.
Instead, it focuses on "Front End Edit" and that focuses on the_content() only.

So you can use the Event Manager on a site with Layouts, but you can't use Toolset to customise it. (Presumably, the plugin comes with some options for customising the output itself?)

The changes to Layouts mean this has gone from "you cannot use it at all when using Layouts" to "you can use it when using Layouts if not using a fully-integrated theme but cannot use Toolset to customise the plugin output".

I would say, hence, that an integration with it becomes obsolete.

[daveG-7]

Hi, Michael - sorry I didn't see this until now. Pretty much all of those steps were to make something show up when you clicked an individual event - getting the calendar itself to show up is the easy part, unfortunately. What theme are you using? I've only tested this with Toolset Starter. Other than that, my only advice without knowing more is to double check to make sure you've followed every step precisely - any small change will make the whole thing not work.

Dave

[daveG-7]

Beda - ok. For a site like mine, in which the header and footer are designed with Layouts, an integration is necessary, or the system I cobbled together if anyone else can get it to work. Being able to design the header and footer in the same system as the rest of the page instead of a mishmash of theme options and widgets was/is a very powerful feature of Layouts that I like a lot, but if you're letting your theme do that work and just focusing on the_content() with Layouts then it's true, you don't need an integration.

Dave

[nicolaT-2]

Hi Dave,
I'm trying your solution to make the Events Calendar work with Toolset - and, first of all, let me thank you for making it available - but I'd like to know if, after these months, you still recommend it. Events calendar plugins are quite complex and I fear my website could break irreparably someday.

Thank you,
Nicola