Developers Corner:
Theming in Event Espresso 4

What is the best way to customize EE4?

We think the BEST way to theme EE4 really depends on a few factors with the biggest factor being what you want to change. Sometimes all that is needed is a few CSS edits and other times customizations are done via a child theme, or even editing the PHP, HTML, and/or CSS files.

Basically, this means that existing WP theme developers will have an easier time developing customizable event designs for EE4, which in turn can benefit the end user. Developers are encouraged to view the list of currently available theme templates and tags.

Depending on what you want to change and your skill level, here are some options:

Child Themes
We want to make things as simple as we can for the end user, but with all the possible themes in use, there is a limit to how simple we can make it to customize things. The best solution (which is what we’ve taken IMO), is to integrate EE4 in “proper” WP ways that the majority of WP developers will understand. This ultimately benefits the end users who hire theme developers, or theme shops, that support EE4 templates in their themes.

Get Noticed!
Developers submit your add-ons to our Third-party Add-ons Directory.

Reassembly of the EE4 templates
Oh wait! Your theme doesn’t support child themes? No problem, simply reassemble all of the EE4 template parts and combine them with your theme’s templates to make one cohesive archive-espresso_events.php (or single-espresso_events.php, etc) file, that integrates perfectly with your theme. The files that contain the template tags that should be loaded automagically, anytime an incoming request is for one of EE’s CPTs (otherwise they can be found in the /core/helpers/ folder).

The Event Espresso specific template parts include:

  • Event Details (description)
  • Event Datetimes
  • Event Tickets
  • Event Venues
  • Event Venue Location
  • Event Venue Detail (excerpt)

Custom Post Types
We think theming Event Espresso will be easier using Custom Post Types (CPTs), because we are now following the WordPress (WP) Theme Development Standards. This makes it easy for WP developers and theme shops to build integrations with their themes and plugins in EE4.

EE4 CPT data includes normal post data including:

  • Title
  • Description
  • Tags
  • Categories
  • Featured Image
  • Commenting
  • Excerpt
  • Custom Fields
  • Slug
  • Author

This data can be queried and displayed in themes along with other post data.

View a list of currently available theme templates and tags.

What option is right for me?

We don’t know the specifics of your website, so it’s up to you to decide where to go from here. We are happy to recommend a few helpful tips:

  1. If your goal is along the lines of “I want the events page to match my theme better” then the answer is usually a CSS solution. Sometimes a few CSS edits are all that are needed, and if you don’t have a child theme set up (or don’t want to) you can install a CSS builder plugin like this one and customize with CSS (it turns out that you can do a lot with CSS changes only).
  2. Just want to change the wording of a few phrases? If so, no need to hack templates, just use Josh’s WP gettext filter.
  3. If you need to add/remove content that’s not already in the event template, then setting up a child theme and working through the templates and using Event Espresso’s WordPress hooks and filters may be the way forward.
  4. Sometimes, if it’s a PHP, HTML, or CSS based solution, you may need to contact a developer familiar with PHP, HTML, and/or CSS to help out. Our support team is also available in the support forums and will recommend the best solution for what you are trying to accomplish.
Are you a WordPress theme developer? Want to see how Event Espresso 4 integrates with your theme? Request access to the Event Espresso Core (4.0+) GitHub repository and get acquainted with the premier event registration system for WordPress.

We also have additional Event Espresso developer documentation at http://developer.eventespresso.com/.


Related Articles

Share a Reply or Comment

Your email address will not be published.

Need help with Event Espresso? Create a support post in our support forums

Event Espresso
[gravityform id=116 title=false description=false]
<script type="text/javascript">var gform;gform||(document.addEventListener("gform_main_scripts_loaded",function(){gform.scriptsLoaded=!0}),window.addEventListener("DOMContentLoaded",function(){gform.domLoaded=!0}),gform={domLoaded:!1,scriptsLoaded:!1,initializeOnLoaded:function(o){gform.domLoaded&&gform.scriptsLoaded?o():!gform.domLoaded&&gform.scriptsLoaded?window.addEventListener("DOMContentLoaded",o):document.addEventListener("gform_main_scripts_loaded",o)},hooks:{action:{},filter:{}},addAction:function(o,n,r,t){gform.addHook("action",o,n,r,t)},addFilter:function(o,n,r,t){gform.addHook("filter",o,n,r,t)},doAction:function(o){gform.doHook("action",o,arguments)},applyFilters:function(o){return gform.doHook("filter",o,arguments)},removeAction:function(o,n){gform.removeHook("action",o,n)},removeFilter:function(o,n,r){gform.removeHook("filter",o,n,r)},addHook:function(o,n,r,t,i){null==gform.hooks[o][n]&&(gform.hooks[o][n]=[]);var e=gform.hooks[o][n];null==i&&(i=n+"_"+e.length),gform.hooks[o][n].push({tag:i,callable:r,priority:t=null==t?10:t})},doHook:function(n,o,r){var t;if(r=Array.prototype.slice.call(r,1),null!=gform.hooks[n][o]&&((o=gform.hooks[n][o]).sort(function(o,n){return o.priority-n.priority}),o.forEach(function(o){"function"!=typeof(t=o.callable)&&(t=window[t]),"action"==n?t.apply(null,r):r[0]=t.apply(null,r)})),"filter"==n)return r[0]},removeHook:function(o,n,t,i){var r;null!=gform.hooks[o][n]&&(r=(r=gform.hooks[o][n]).filter(function(o,n,r){return!!(null!=i&&i!=o.tag||null!=t&&t!=o.priority)}),gform.hooks[o][n]=r)}});</script> <div class='gf_browser_unknown gform_wrapper gform_legacy_markup_wrapper' id='gform_wrapper_116' ><form method='post' enctype='multipart/form-data' id='gform_116' action='/2014/02/developers-corner-theming-event-espresso-4/' novalidate> <div class='gform_body gform-body'><ul id='gform_fields_116' class='gform_fields top_label form_sublabel_below description_below'><li id="field_116_5" class="gfield gfield_contains_required field_sublabel_hidden_label field_description_below gfield_visibility_visible" ><label class='gfield_label gfield_label_before_complex' >What is your first name?<span class="gfield_required"><span class="gfield_required gfield_required_asterisk">*</span></span></label><div class='ginput_complex ginput_container no_prefix has_first_name no_middle_name no_last_name no_suffix gf_name_has_1 ginput_container_name' id='input_116_5'> <span id='input_116_5_3_container' class='name_first' > <input type='text' name='input_5.3' id='input_116_5_3' value='' aria-required='true' placeholder='First name' /> <label for='input_116_5_3' class='hidden_sub_label screen-reader-text'>First name</label> </span> </div></li><li id="field_116_1" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label' for='input_116_1' >What is your email address so we can follow up with you?<span class="gfield_required"><span class="gfield_required gfield_required_asterisk">*</span></span></label><div class='ginput_container ginput_container_text'><input name='input_1' id='input_116_1' type='text' value='' class='medium' placeholder='hello@example.com' aria-required="true" aria-invalid="false" /> </div></li><li id="field_116_2" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label' for='input_116_2' >Tell us about your concerns below<span class="gfield_required"><span class="gfield_required gfield_required_asterisk">*</span></span></label><div class='ginput_container ginput_container_textarea'><textarea name='input_2' id='input_116_2' class='textarea medium' placeholder='What kind of events are you planning?' aria-required="true" aria-invalid="false" rows='10' cols='50'></textarea></div></li><li id="field_116_6" class="gfield field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label gfield_label_before_complex' >GDPR Agreement</label><div class='ginput_container ginput_container_checkbox'><ul class='gfield_checkbox' id='input_116_6'><li class='gchoice gchoice_116_6_1'> <input class='gfield-choice-input' name='input_6.1' type='checkbox' value='I consent to have this website store my submitted information so they can respond to my inquiry.' id='choice_116_6_1' /> <label for='choice_116_6_1' id='label_116_6_1'>I consent to have this website store my submitted information so they can respond to my inquiry.</label> </li></ul></div></li><li id="field_116_3" class="gfield gform_hidden field_sublabel_below field_description_below gfield_visibility_visible" ><div class='ginput_container ginput_container_text'><input name='input_3' id='input_116_3' type='hidden' class='gform_hidden' aria-invalid="false" value='' /></div></li><li id="field_116_4" class="gfield gform_hidden field_sublabel_below field_description_below gfield_visibility_visible" ><div class='ginput_container ginput_container_text'><input name='input_4' id='input_116_4' type='hidden' class='gform_hidden' aria-invalid="false" value='https://eventespresso.com/2014/02/developers-corner-theming-event-espresso-4/' /></div></li><li id="field_116_7" class="gfield gform_validation_container field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label' for='input_116_7' >Comments</label><div class='ginput_container'><input name='input_7' id='input_116_7' type='text' value='' autocomplete='new-password'/></div><div class='gfield_description' id='gfield_description_116_7'>This field is for validation purposes and should be left unchanged.</div></li></ul></div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_116' class='gform_button button' value='Send my message' onclick='if(window["gf_submitting_116"]){return false;} if( !jQuery("#gform_116")[0].checkValidity || jQuery("#gform_116")[0].checkValidity()){window["gf_submitting_116"]=true;} ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_116"]){return false;} if( !jQuery("#gform_116")[0].checkValidity || jQuery("#gform_116")[0].checkValidity()){window["gf_submitting_116"]=true;} jQuery("#gform_116").trigger("submit",[true]); }' /> <input type='hidden' class='gform_hidden' name='is_submit_116' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='116' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_116' value='WyJbXSIsIjBiNjdjZjkyMDUzOWUxOWY5Y2NiZjIwMzM4YjA1Mjk4Il0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_116' id='gform_target_page_number_116' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_116' id='gform_source_page_number_116' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> <p style="display: none !important;"><label>&#916;<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_2" name="ak_js" value="41"/><script>document.getElementById( "ak_js_2" ).setAttribute( "value", ( new Date() ).getTime() );</script></p></form> </div>