customising imported facebook layout

[Matt]

Hi there,

I have bought the Facebook Importer plugin, and love how easy it is to setup. I am, however, wanting to include the start date, end date, and the venue details in the post itself.

I had a look at the following file and started following the instructions to create a new custom view:

https://theeventscalendar.com/knowledgebase/themers-guide/

I wasn’t able to see instructions relating directly to the Facebook add-on, but saw the following line: “You can also modify the selected template’s markup to adjust things as well.”

So I copied default-template.php to a folder in my theme called tribe-events, but when I import a single event nothing is happening. So I have a couple of questions:

1. Am I heading in the right direction by adding lines to default-template.php?
2. Are different template files used for the importing single Facebook events versus automatically importing a page’s events?
3. Are there any more pointers you can give me to know where to head next?

Thanks a lot,

Matt

[George]

Hey Matt,

Thanks for reaching out!

You’re definitely on the right track by using that Themer’s Guide, but a template file better suited to what you’re trying to do is this file within The Events Calendar:

single-event.php

So, I would actually recommend ditching the attempted modifications to default-template.php and instead proceeding with making a custom theme template with this file path:

[your-theme]/tribe-events/single-event.php

Duplicate the original single-event.php file, and then tinker from there—you should be able to start piecing something together nicely! 😀

Cheers,
George

[Matt]

Thanks a lot George, I appreciate the reply.

So I have removed default-template.php. I then made a copy of single-event.php from wp-content/plugins/the-events-calendar/single-event.php. I then put the copy into [my-theme]/tribe-events.

I started adding html markup after the function the_content() but nothing came through into the post.
I then commented out the_content() entirely so the file just had my markup in its place, but the post was still being created as per normal. That lead me to believe that perhaps the original file was still being referenced. So I renamed the original file in wp-content/plugins/the-events-calendar, but the event still loaded as it did originally.

I feel like I’m missing a step or two. Have I got the right single-event.php file? And once I’ve copied it into the new folder under my theme, what do I do with the original file?

Thanks a lot,

Matt

[George]

Hey Matt,

Thanks for your follow-up. I am not sure if this is just a typo, but in your reply you do mention making a copy of this file, which does not actually exist in our plugins:

wp-content/plugins/the-events-calendar/single-event.php

The full path is:

wp-content/plugins/the-events-calendar/src/views/single-event.php

I’m sure that is what you meant, but just wanted to touch on this in case you duplicated the wrong file.

Anyways, I’m wondering if you can take a screenshot of a screen on your site that shows what layout are you trying to alter? Maybe I am making the mistake here by not understanding what exact layout you are trying to change.

To help with that, can you share screenshots of the existing layout on your site that you want to change? You can do so by uploading the screenshots to this thread. If you have issues with that, you can upload to Imgur.com, Flickr.com, CloudUp.com, or any similar image-hosting site; then just share the links to those images here and I’ll take a look.

Thank you!
George

[Matt]

Hi George

Yes, sorry, you are right. That was a bad typo of mine, the file did indeed come from

wp-content/plugins/the-events-calendar/src/views/single-event.php

I’m sorry about that.

So with that mistake out of the way, let’s take an event that is currently on Facebook. The event we imported was from this link:

https://www.facebook.com/events/1576216962671876/

Once it has been published, it is now here:

http://www.aroundtown.co.nz/event/that-sugar-film-free-community-screening/

We are wanting to edit the content that shows between the featured image, and the + Google Calendar // + iCal Export buttons. This would be the info you can see in the following image: https://www.flickr.com/photos/144296472@N05/28121610253/in/dateposted-public/

When we did some trial and error, we added the following Facebook event:

https://www.facebook.com/events/1060477440673807/

Which then was published to our site as:

http://www.aroundtown.co.nz/event/the-gruffalo/

You can see that we removed the_content and replaced it with “This is a test”, as you would expect from the following screenshots:

https://www.flickr.com/photos/144296472@N05/28659739901/in/dateposted-public/
https://www.flickr.com/photos/144296472@N05/28452701780/in/dateposted-public/

However, when editing the event we still see all the content, which makes sense, because all we did was remove it from being echo’d to the site.

https://www.flickr.com/photos/144296472@N05/28659814811/in/dateposted-public/

What we are wanting to do is one step before this process. We actually want the details like the start date, start time, venue name and location etc, to be added to the content box, not to their own meta boxes.

Kind of like this:

https://www.flickr.com/photos/144296472@N05/28121723483/in/dateposted-public/

That is, we would rather that the details weren’t published in their own meta boxes, but rather in the content box itself, and then the_content is published to the site with all the details contained inside it (as in, single-event.php would probably just have the_content, and not all the calls after it).

Obviously, each of these lines in the screenshot would actually be populated with the relevant content from the facebook event.

Does that make more sense? Sorry, I hope it’s not more confusing 🙂

Thanks a lot,

Matt

ps. I added images to flickr just so that I could guarantee the images staying connected and inline with the conversation. Hope it wasn’t annoying 🙂

[Matt]

Oh, and just to clarify, in that last screenshot (https://www.flickr.com/photos/144296472@N05/28121723483/in/dateposted-public/) I realise that I have written “the_content” inside what would effectively be published as the_content to the site, but what I am referring to by “the_content” is the main “Details” box from the Facebook event.

Thanks,

Matt

[George]

Hey Matt,

Thanks for the thorough clarification of things here. I am a bit confused as to why the single-event template override isn’t working here; I can confirm now with your clarification and screenshots that the single-event.php template is the right tool for the job here.

I know that the Divi theme does break some WordPress Coding Standards and has a whole ton of functionality included within it. That’s a lot of surface area for potential problems here, and so perhaps there is just some theme-level issue with the loading of the template overrides?

---

Question #1

1. Also, do you happen to be using a Divi Child Theme on your site, by any chance? Or are you just using the main Divi theme, and no child theme?

Question #2

2. Are you willing to forego a template override, and use a combination of action hooks and CSS instead?

---

If #2 is “Yes”

If you say “yes” to Question #2, then while we cannot help with customizations and you’d have to take the reins on truly fleshing this out, here is a basic process for achieving the customizations you want that is both safe (i.e., it won’t be erased every time you update The Events Calendar plugin or its add-ons!) and flexible. (In my personal opinion, these methods are even better than a template override and what I would personally use, because you can put all of the following custom code into a custom plugin and never have to worry about a theme update or plugin update erasing it!)

• Step One: Hide the default stuff with CSS — The first step is to hide the default venue, date, and organizer info metabox that you mention wanting to hide, because you are going to show it in the content directly. This is easiest to do with just some simple css, like the following:

  
.tribe-events-event-meta.tribe-events-single-section {
display: none !important;
}


• Step Two: Use Action Hooks to Add Content Before or After the_content — Now that the default stuff is hidden, let’s add the new stuff where you want. To do this, use the action hook tribe_events_single_event_before_the_content to add stuff before the content, and tribe_events_single_event_after_the_content to add stuff after.

Here are two example snippets using these hooks. This first example adds the venue name above the post content:


function tribe_add_venue_name_above_single_content() {
$event_id = get_the_ID();

printf( 'Venue name: %s', tribe_get_venue( $event_id ) );
}

add_action( 'tribe_events_single_event_before_the_content', 'tribe_add_venue_name_above_single_content' );


This second example adds the organizer name below the event content:


function tribe_add_organizer_name_below_single_content() {
$event_id = get_the_ID();

printf( 'Organizer name: %s', tribe_get_organizer( $event_id ) );
}

add_action( 'tribe_events_single_event_after_the_content', 'tribe_add_organizer_name_below_single_content' );

Here’s the outcome when both actions are in place:

☝️ But wait! The “Organizer name” field is below the iCal and gCal links, which is not what we want. What gives?

No worries—the iCal and gCal links actually use this same tribe_events_single_event_after_the_content action with a priority of 10, so to ensure that your custom additions display ABOVE those links, just make sure your action calls have a priority higher than 10 (which is represented by number lower than 10. So, a priority of 1 is highest-priority, followed by priority 2, 3, and so on…).

So you would just change this:

add_action( 'tribe_events_single_event_after_the_content', 'tribe_add_organizer_name_below_single_content' );

To this:

add_action( 'tribe_events_single_event_after_the_content', 'tribe_add_organizer_name_below_single_content', 5 );

☝️This sets our custom action call’s priority to 5, so it will now show earlier than the iCal and gCal links. Here’s a screenshot proving this in action:

I hope this all helps!

Cheers,
George

[Matt]

George, that is a huge help! You are a legend, we will be fine from here. Thank you so much for your help, I love that you not only gave us pointers but also some examples. That made it a lot easier and we will be able to take it from here. Thanks so much, we really appreciate it.

Matt

• This reply was modified 7 years, 8 months ago by Matt.

[George]

Sure thing, Matt! Cheers and best of luck with your project.

— George

[Author]

Posts