Custom Template

  • Resolved ABoooo

    (@aboooo)


    5 years, 1 month ago

    Hi,

    is it possible to create custom templates for a list or a single event page? I do not want to do it in BE as it is not really user friendly. For example: I have my template single-event.php and I want to place different information on different places, like this

    <div class="container">
 <div class="row">
 <div class="col col-md-9">
 <!-- title -->
 <h1><?php echo $EM_Event->output_single("#_EVENTNAME"); ?></h1>
 <!-- event description -->
 <?php echo $EM_Event->output_single("#_EVENTNOTES"); ?>
 </div>
 <div class="col col-md-3">
 <!-- date -->
 <ul class="date">
 <li><?php echo $EM_Event->output_single("#_24HSTARTTIME"); ?></li>
 <li><?php echo $EM_Event->output_single("#_24HENDTIME"); ?></li>
 </ul>
 <!-- add contact -->
 <!-- add form -->
 <!-- etc -->
 </div></div></div>

    But this isn’t working. I get an error

    Notice: Undefined variable: EM_Event

    I search in documentation but I found no information that would say how and if I can use shortcodes or placeholders like this.

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter ABoooo

    (@aboooo)

    I have done it now like this

    <?php global $EM_Event;
 echo $EM_Event->output_single("#_EVENTNAME");
?>

    But this doesn’t output just “Eventname” but again all information.
    I have also copied template file to mytheme/plugin/events-manager/templates/event-single.php but that file is being ignored.

    • This reply was modified 5 years, 1 month ago by ABoooo.
    Thread Starter ABoooo

    (@aboooo)

    I really need some further information on this, I am stuck and a litte bit under time pressure. Can someone please give me some hint. ??

    Thanks!

    Hi @aboooo

    I’m a none developer but good at manipulating things and copy and pasting. May be this will help you.

    I like Gutenberg, I can get it to do what I want (almost) most of the time. I designed my event page within using EM shortlinks (and others that I have on my site) and a combination of #_PLACEHOLDERS.

    I then switched to code view and copied this into the single event formatting, removing all the EM shortlinks. Now I just have to add the ‘Description’, ‘Details’ and any extra event images, videos etc.

    I have a test event so I can make changes if I need to add anything to all and copy and paste over. I’ve found with Gutenberg enabled a few features are lost (reuseable blocks) but at the moment it is best for me.

    I found the page classes from my template and copied those into the event classes under pages.

    Events are looking good if I do say so myself eg. https://www.pedalution.co.uk/events/chalke-cheese-200/

    I created custom lists within pages using the same principle as I wanted to sort by secondary categories for current, past, and those run at a time to suit the user. eg. https://www.pedalution.co.uk/gwraudax/calendar-events/

    I can’t for the life of me manipulate the main list to have full width like my theme but I have managed to include Stonehenge Creations carousel at the top. For some reason it repeats the list lower down over and over, but this page isn’t linked too so I’m not bothered at the mo. eg. https://www.pedalution.co.uk/home/events/

    My single event formatting:

    <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column">
<h6>BRIEF:</h6>
<strong>#_EVENTEXCERPT</strong>
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column has-text-align-center">
<h6>WHEN:</h6>
#_EVENTDATES</br>
#_EVENTTIMES

<h6>WHERE:</h6>
#_LOCATIONLINK<br> #_LOCATIONTOWN, #_LOCATIONPOSTCODE
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column has-text-align-right"><!-- wp:shortcode -->
<h6>Ride review summary:</h6>[site_reviews_summary category="#_ATT{Review}"]
<!-- /wp:shortcode --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:ugb/button {"design":"fullwidth","button1Size":"normal","button1BackgroundColor":"#ed8b00","button1NoFollow":false,"uniqueClass":"ugb-e71b932","align":"wide"} -->
<div class="alignwide wp-block-ugb-button ugb-button-wrapper ugb-e71b932 ugb-button--design-fullwidth ugb-main-block" id=""><style>.ugb-e71b932 .ugb-button1{background-color:#ed8b00}.ugb-e71b932 .ugb-button1 .ugb-button--inner,.ugb-e71b932 .ugb-button1 svg{color:#222222}</style><div class="ugb-inner-block"><div class="ugb-block-content"><div class="ugb-button-container"><a class="ugb-button1 ugb-button ugb-button--size-normal" href="https://www.aukweb.net/events/detail/#_ATT{AUK}/" target="_blank" rel="noopener noreferrer"><span class="ugb-button--inner">ENTER VIA AUK</span></a></div></div></div></div>
<!-- /wp:ugb/button -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:heading {"align":"left","level":6} -->
<h6 class="has-text-align-left"><strong>Route:</strong></h6>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Extensive route notes and a variety of files will be distributed to entrants via email a week or two before the event. In the mean time use the interactive map for an overview of what lies ahead (subject to change); toggle the elevation & grade on/off by clicking the key. *Please note plugin's 'grade' is experimental so take it with a pinch of salt, especially where rocky outcrops may be present.</p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
[table id=1 /]
<!-- /wp:shortcode --></div>
<!-- /wp:column -->

<!-- wp:column {"width":66.66} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:shortcode -->
[sgpx gpx="/wp-content/uploads/gpx/#_ATT{Code}.gpx"]
<!-- /wp:shortcode --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><div class="wp-block-group__inner-container">
#_EVENTNOTES</div></div>
<!-- /wp:group -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:heading -->
<h2>Like or loath it? Let others know.</h2>
<!-- /wp:heading -->

<!-- wp:shortcode -->
[site_reviews_form category="#_ATT{Review}"]
<!-- /wp:shortcode --></div>
<!-- /wp:column -->

<!-- wp:column {"width":66.66} -->
<div class="wp-block-column has-text-align-right" style="flex-basis:66.66%"><!-- wp:heading -->
<h2>What others think.</h2>
<!-- /wp:heading -->

<!-- wp:shortcode -->
[site_reviews category="#_ATT{Review}" display="3" pagination="ajax"]
<!-- /wp:shortcode --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:ugb/button {"design":"fullwidth","button1Size":"normal","button1BackgroundColor":"#ed8b00","button1NoFollow":false,"uniqueClass":"ugb-329060c","align":"wide"} -->
<div class="alignwide wp-block-ugb-button ugb-button-wrapper ugb-329060c ugb-button--design-fullwidth ugb-main-block" id=""><style>.ugb-329060c .ugb-button1{background-color:#ed8b00}.ugb-329060c .ugb-button1 .ugb-button--inner,.ugb-329060c .ugb-button1 svg{color:#222222}</style><div class="ugb-inner-block"><div class="ugb-block-content"><div class="ugb-button-container"><a class="ugb-button1 ugb-button ugb-button--size-normal" href="https://www.aukweb.net/events/detail/#_ATT{AUK}/" target="_blank" rel="noopener noreferrer"><span class="ugb-button--inner">ENTER VIA AUK</span></a></div></div></div></div>
<!-- /wp:ugb/button --><br style="clear:both" />
{has_bookings}
<h3>Bookings</h3>
#_BOOKINGFORM
{/has_bookings}
</body>
[event-navigation]

    It’s a hack but maybe will help with ideas in the meantime if you have a deadline.

    • This reply was modified 5 years, 1 month ago by Will Pom.
    Thread Starter ABoooo

    (@aboooo)

    Hi @wi77p0m,

    thank you very much for your reply! I am using WP Bakery and not Gutenberg directly. And I would really like to build individual templates as it is obviously possible but there is no information or complete example on how to do this for someone who is new to Event Manager. ??

    Cheers

    Try doing similar in WP Bakery. Set up a test event. Build the page layout you want using the #_PLACEHOLDERS. Copy the code into the single event formatting; it’ll give you something to go with whilst you figure out the actual template.php

    Gutenberg was just my example of how I’ve done it.

    You need to find the correct classes of your theme page/post to copy into the page – event – classes.

    I too found the documentation lacking, probably because I don’t have a clue as to how to code.

    Good luck

    Thread Starter ABoooo

    (@aboooo)

    Thanks @wi77p0m I’ll try it.

    • This reply was modified 5 years, 1 month ago by ABoooo.
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Custom Template’ is closed to new replies.