|
qianglu
|
September 12, 2018 at 8:35 pm
Dear Event Espresso expert,
I found this sample website using event espresso: https://psg.ca/events/
They put month on top of date and on top of week day and on top of status in a small card. I wander what kind of format this is? Is it single date format? I am trying to recreate a template like this and want to search online for this kind of event espresso template first, but even don’t know how to search for it, because I don’t know the name of this format. Please help me.
Best regards
Qiang Lu
-
This topic was modified 5 years, 6 months ago by
 qianglu.
-
This topic was modified 4 years, 1 month ago by
 Garth.
|
|
Tony
|
September 13, 2018 at 3:59 am
Hi there,
To be honest, I don’t know if there is a name for that format, it’s a custom format built from piecing the dates together. I don’t think you will find an example template.
If you are building your own, may I ask which part you are having problems with?
If you have a DateTime object you call each of those details individually and build the combined output from that, I can provide some more details on how you would pull each specific details if that will help?
|
|
qianglu
|
September 13, 2018 at 3:29 pm
I want to change the events list page. If you could provide some more details on how to pull each specific details, that would be my big help. Thank you in advance!
|
|
qianglu
|
September 13, 2018 at 3:38 pm
Do I need to change just php code or just css code or both? Any hint and help would be great.
|
|
Josh
|
September 13, 2018 at 8:58 pm
Hi,
Generally we recommend tostart with copying some templates over to your WordPress theme, then start changing code. Within the template you’ll add/change PHP code and HTML. Then you’ll add CSS to the theme where needed.
If you’re using a child theme, you’ve got a great head start.
Then, 1) Make a copy of the theme’s archive.php or the index.php template and put the copy into the active WordPress child theme
2) Rename the copy to be archive-espresso_events.php
3) At that point the list of events will be very simple to allow for adding custom code. For example the following PHP/html code example will pull & print the date in the specific formats used in the example:
<?php $date = espresso_next_upcoming_datetime_obj(get_the_ID());
if($date instanceof EE_Datetime) {
?>
<div class="dater">
<div class="month"><?php $date->e_start_date('M'); ?></div>
<div class="day-num"><?php $date->e_start_date('j'); ?></div>
<div><span><?php $date->e_start_date('D'); ?></span></div>
</div>
<?php
} ?>
|
|
qianglu
|
September 14, 2018 at 10:18 am
I found achieve-espresso_events.php under Espresso_Arabica_2014, it provide me a link from the achieve.php to espresso event through the following code:
<section id=”primary” class=”content-area”>
18 <div id=”content” class=”site-content” role=”main”>
19 <?php espresso_get_template_part( ‘loop’, ‘espresso_events’ ); ?>
20 </div><!– #content –>
21 </section><!– #primary –>
Is this on the right direction?
Also I already have astra child them activated, which means I cannot activate another theme, then how to use the Event Espresso Arabica Theme?
__________________________________________________________________
== Installing your Event Espresso Arabica Theme ==
2
3 1. Download a copy of the Espresso_Arabica_2014 folder to your computer using your FTP or SFTP client.
4 2. Browse to the WordPress themes folder in your WordPress site. It will be located here wp-content/themes.
5 3. Upload the Espresso_Arabica_2014 folder to the location above.
6 4. Login to your WordPress admin.
7 5. Go to Appearance & Themes.
8 6. Locate your Event Espresso Arabic theme and click on the Activate button.
~
|
|
Josh
|
September 14, 2018 at 10:29 am
In this case, you actually do not use the Event Espresso Arabica theme. That’s a child theme for the twentyfourteen theme. So if you happened to be using twentyfourteen, you could use Arabica a child theme.
Instead, you follow the directions I wrote earlier. Since you’re using the Astra theme, you’ll copy the archive.php file into your child theme, then rename it to be archive-espresso_events.php.
|
|
qianglu
|
September 14, 2018 at 10:44 am
Should I copy the following section to the astra achieve-espresso_events.php?
<section id=”primary” class=”content-area”>
<div id=”content” class=”site-content” role=”main”>
<?php espresso_get_template_part( ‘loop’, ‘espresso_events’ ); ?>
</div><!– #content –>
</section><!– #primary –>
|
|
qianglu
|
September 14, 2018 at 10:47 am
The astra achieve.php has the following:
19 <div id=”primary” <?php astra_primary_class(); ?>>
20
21 <?php astra_primary_content_top(); ?>
22
23 <?php astra_archive_header(); ?>
24
25 <?php astra_content_loop(); ?>
26
27 <?php astra_pagination(); ?>
28
29 <?php astra_primary_content_bottom(); ?>
30
31 </div><!– #primary –>
|
|
Josh
|
September 14, 2018 at 11:02 am
No. You do not copy the code from the Event Espresso Arabica theme’s archive-espresso_events.php template file.
Again, the steps to follow are:
1) Make a copy of the Astra’s archive.php
2) Put the copy into your child theme
3) Rename the copy to be archive-espresso_events.php
4) Add custom code similar to the above example from my earlier reply
|
|
qianglu
|
September 14, 2018 at 11:09 am
The code you provided is for the information of a single event. I still need a list or loop of all events before customize the details of the single event. Should I add the loop of events right into new copied archive-espresso_events.php? Or should I call a function to do the loop?
|
|
Josh
|
September 14, 2018 at 11:20 am
You could replace Astra’s loop (<?php astra_content_loop(); ?>) with your own. You’ll do well to follow Astra’s markup to make sure your new markup fits within the theme.
|
|
qianglu
|
September 15, 2018 at 12:15 pm
In order to activate archive-espresso_events.php, should I add a line to the function.php?
require get_template_directory() . ‘/archive-espresso_events.php’;
I found the following guidance online?
https://www.smashingmagazine.com/2015/04/building-custom-wordpress-archive-page/
|
|
Tony
|
September 17, 2018 at 5:03 am
In order to activate archive-espresso_events.php, should I add a line to the function.php?
No, you usually don’t need to add anything to functions.php, unless the theme is doing some unexpected.
require get_template_directory() . ‘/archive-espresso_events.php’;
I found the following guidance online?
https://www.smashingmagazine.com/2015/04/building-custom-wordpress-archive-page/
The function mentioned in that post is used to include a file they have included functions they have used in the archive template, that’s not what you are doing.
If you follow the WordPress template hierarchy:
https://developer.wordpress.org/themes/basics/template-hierarchy/#visual-overview
You’ll see that archive-$posttype.php should load before archive.php
So as it stands is the template not loading?
|
|
qianglu
|
September 17, 2018 at 6:52 am
Thank you for your patient reply. I can load it now by choosing the template at the event page. The archive.php calls the function astra_content_loop(). I found where that function is at and copied the it’s file, astra/template-parts/class-astra-loop.php to the child theme folder and rename it class-astra-event-loop.php. I rename all the function in the new file from astra_ to astra_theme. However, when I call astra_event_content_loop(), it cannot be found. Also astra_event_content_loop() will call get_template_part( ‘template-parts/content’, astra_get_post_format() ); It actually will call astra/template-parts/blog/blog-layout.php. I realize blog-layout.php is what I can modify for each event. I wander, may I make a folder template-parts in the child theme and call the function in it, event= a subfolder “blog” under template-parts.
May be that’s what mentioned in the previous link you explained.
|
|
Josh
|
September 17, 2018 at 9:40 am
Hi,
I’m not quite sure I follow, especially the part about renaming functions. Typically though, yes, whenever a template calls get_template_part() it will first look in the child theme at the specified location, then if not found, it will look in the parent theme. There’s more information in this WordPress Developer documentation article:
https://developer.wordpress.org/reference/functions/get_template_part/
|
|
qianglu
|
September 17, 2018 at 7:53 pm
Josh, I am using hooks to add a new function loop_markup_event to astra_content_loop by add_action(‘astra_content_loop’, ‘loop_markup_event’);
There was a function, loop_markup already added to astra_content_loop though,
so now if I do astra_content_loop(), it will call both loop_markup_event and loop_markup. My question is how to just call the loop_markup_event?
I am new to hooks, please be patient with me.
|
|
Josh
|
September 18, 2018 at 6:22 am
Hi,
In that case you could use the remove_action() function to remove the loop_markup function.
https://developer.wordpress.org/reference/functions/remove_action/
Here’s an example from your question:
add_action(
'astra_content_before',
'my_custom_archive_hook_function',
10
);
function my_custom_archive_hook_function() {
if(is_post_type_archive('espresso_events')){
add_action('astra_content_loop', 'loop_markup_event');
remove_action(
'astra_content_loop',
array(
\Astra_Loop::get_instance(), 'loop_markup'
)
);
}
}
One thing to note about the above example is it includes a conditional that checks if the current request is the post type archive for Event Espresso events. If it’s just a regular page using a page template, you’ll need to change the conditional to match that page.
|
|
qianglu
|
September 18, 2018 at 8:04 pm
Josh, that’s neat. Also I realize there’s a shortcut also works:
Add the following code to the functions.php in child theme of Astra,
https://gist.github.com/lorenzocaum/6eb0daad8ce58cfd83f6c6fc327d1e6a
And then, makedir template-parts/blog under child theme folder.
Copy astra/template-parts/blog/blog-layout.php to astra-child/template-parts/blog/event-layout.php
And just using the default template and customize the event-layout.php.
|
