|
Jimmy Cho
|
May 1, 2017 at 10:25 am
I dont really understand the PHP code EE’s events template files. Could someone help me break down a custom HTML file full of HTML5 elements so that I can fit it into Event Espresso’s events template PHP file?
I’ve got an Accordion table using radio buttons containing data tables in each accordion class. These classes use HTML5 elements like inputs and labels to make the table function (along with CSS transitions connected to them). The table also has Registration/RSVP links on the front-end of it. Below is a piece of HTML code of one accordion.
So, a little backdrop on this topic: This is our events calendar. My boss wanted to do away with the look of an actual calendar and have something more simple and direct. I know EE has an Accordion template as well, but there are just some specific things we want our Accordion to look, which is all written in just HTML5 and CSS3.
This is an example of one accordion class containing a table:
<body>
<center>
<div class=”top”>2016-2017 COURSE SCHEDULE</div>
<div class=”akkord”>
<div class=”accordion”>
<input type=”radio” id=”radio-option-2″ name=”accordion-radios”>
<div class=”baffle”>
<label for=”radio-option-2″>
<span style=”font-weight:bold;float:right;margin-right:40px”>PSC</span>
Practical SCIF Construction (ICD 705 Based)
<span class=”arrow”>▽</span>
</label>
<div class=”baffle-inner”>
<table class=”table” border=”1″>
<tr>
<th>Date</th>
<th>Time</th>
<th>Site</th>
</tr>
<tr>
<td>
<time datetime=”2016-08-22″ class=”iconcal”>
MON-FRI
August
<span>22-26</span>
</time>
</td>
<td>
8:00 AM-5:00 PM<br>Monday-Thursday
<br>➕<br>
8:00 AM-12:30 PM<br>Friday
</td>
<td>
<i class=”material-icons”>location_on</i>
<br>Colorado<br><br>
(Register)
(Add to Cart)
</td>
</tr>
</table>
</div>
</div>
|
|
Josh
|
May 2, 2017 at 8:30 am
Hi Jimmy,
Instead of wrapping an events PHP template around the table, you can look into making a PHP page template that’s based on the page.php template of your WordPress theme. Here’s a link to a tutorial that shows how to create a page template in WordPress:
http://www.wpbeginner.com/wp-themes/how-to-create-a-custom-page-in-wordpress/
When you are working with a PHP file you can inject html code after closing PHP tag. Then after the html code you add an opening PHP tag. Repeat as needed.
Example follows:
<?php /* Template Name: Event Accordion */ ?>
<?php get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="top">2016-2017 COURSE SCHEDULE</div>
<?php // php code goes here ?>
<!-- more html code here -->
<?php // php code goes here ?>
<!-- more html code here -->
</main><!-- .site-main -->
</div><!-- .content-area -->
<?php get_footer(); ?>
|
|
Jimmy Cho
|
May 2, 2017 at 9:40 am
Hi Josh,
I appreciate your response. Wouldn’t it be a little counter-intuitive to be creating a page template instead of just editing EE’s PHP template? I still want my table to be referencing the events that’s being entered from the WP admin panel and vice versa, and as well as updating registrations, rsvp, payments, etc in real-time. Basically, keep the table connected to the EE system that we use to manage all our events and settings.
I’ve taken a look at the index.php file thats located in wp-content > uploads > espresso > templates > events-table folder directory and I see where you can insert table classes and categories. Could I do just that?… insert my own classes and tables into the index.php file? And how would I reference my CSS file in the index file?
Also, is there anything that needs to be done to the 3 php files in the templates directory? They are the event_list, event_list_display and payment_page PHP files.
|
|
Josh
|
May 2, 2017 at 9:49 am
Wouldn’t it be a little counter-intuitive to be creating a page template instead of just editing EE’s PHP template?
No. It wouldn’t be counter intuitive because you can use your custom page template to display your events instead of a page with a shortcode on it.
Those other templates you’re asking about use shortcodes to display the content on the pages. So instead of wrangling existing code that gets output from a shortcode, then maintaining the code, you’re starting with clean page template that’s better integrated into your theme.
So in short, you don’t need to hack up the event_list, event_list_display, and payment_page php files.
I’ve taken a look at the index.php file thats located in wp-content > uploads > espresso > templates > events-table folder directory and I see where you can insert table classes and categories
If you’re using the shortcode that’s registered by an events table add-on, then sure go for it.
|
|
Jimmy Cho
|
May 2, 2017 at 10:22 am
If a separate custom page template were to be made then how would it be connected to the events and registration/ticketing system?
I still want my table to be referencing the events that’s being entered from the WP admin panel and vice versa, and as well as updating registrations, rsvp, payments, etc in real-time. Basically, keep the table connected to the EE system that we use to manage all our events and settings.
|
|
Josh
|
May 2, 2017 at 10:28 am
That’s where adding the PHP code comes in. You can review the built in templates and copy the PHP code from the built in templates into your custom template.
|
|
Jimmy Cho
|
May 8, 2017 at 11:05 am
Josh, much appreciate the advice you gave me on creating a custom page. However, I am still having a hard time understanding EE template files.
How can I extract my current existing event listings php file? The only files I have in my uploads > espresso > template directory are the template files. I’ve also tried looking in the home1 directory and there isnt even an espresso directory in there.
|
|
Josh
|
May 8, 2017 at 12:24 pm
I can advise against using any files in uploads > espresso > templates. If you want to build out a new view for event lists for Event Espresso 3, you can copy the PHP code from these two files:
https://github.com/eventespresso/event-espresso-legacy/blob/master/templates/event_list.php
and
https://github.com/eventespresso/event-espresso-legacy/blob/master/templates/event_list_display.php
|
