Format page template for event organizer plugin

Resolved

(@isqs)

I’ve installed a event organizer plugin the creates it’s own page to list event excerpts but the template needs to be modified to fit with certain themes. I tried to use the page.php file as a template but the display is not looking correct. I think maybe I’ve but the code in the wrong place?
-The “Events” title is pushed to the edge on the left.
-Posts titles/categories/tags/links are all yellow. (I use that color for some links but it should not be the title color.)
I don’t have a link because it’s still local but I can send screen shots if it would help at all.

This is the code from the plugin:

<?php
/**
 * The template for displaying lists of events
 *
 * Queries to do with events will default to this template if a more appropriate template cannot be found
 *
 ***************** NOTICE: *****************
 *  Do not make changes to this file. Any changes made to this file
 * will be overwritten if the plug-in is updated.
 *
 * To overwrite this template with your own, make a copy of it (with the same name)
 * in your theme directory.
 *
 * WordPress will automatically prioritise the template in your theme directory.
 ***************** NOTICE: *****************
 *
 * @package Event Organiser (plug-in)
 * @since 1.0.0
 */

//Call the template header
get_header(); ?>

<!-- This template follows the TwentyTwelve theme-->
<div id="primary" class="site-content">
	<div id="content" role="main">

		<!-- Page header-->
		<header class="page-header">
		<h1 class="page-title">
			<?php
				if( eo_is_event_archive('day') )
					//Viewing date archive
					echo __('Events: ','eventorganiser').' '.eo_get_event_archive_date('jS F Y');
				elseif( eo_is_event_archive('month') )
					//Viewing month archive
					echo __('Events: ','eventorganiser').' '.eo_get_event_archive_date('F Y');
				elseif( eo_is_event_archive('year') )
					//Viewing year archive
					echo __('Events: ','eventorganiser').' '.eo_get_event_archive_date('Y');
				else
					_e('Events','eventorganiser');
			?>
			</h1>
		</header>

		<?php if ( have_posts() ) : ?>

			<!-- Navigate between pages-->
			<!-- In TwentyEleven theme this is done by twentyeleven_content_nav-->
			<?php
			global $wp_query;
			if ( $wp_query->max_num_pages > 1 ) : ?>
				<nav id="nav-above">
					<div class="nav-next events-nav-newer"><?php next_posts_link( __( 'Later events <span class="meta-nav">&rarr;</span>' , 'eventorganiser' ) ); ?></div>
					<div class="nav-previous events-nav-newer"><?php previous_posts_link( __( ' <span class="meta-nav">&larr;</span> Newer events', 'eventorganiser' ) ); ?></div>
				</nav><!-- #nav-above -->
			<?php endif; ?>

			<?php /* Start the Loop */ ?>

			<?php while ( have_posts() ) : the_post(); ?>

			<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<header class="entry-header">

				<h1 class="entry-title" style="display: inline;">
				<?php
					//If it has one, display the thumbnail
					the_post_thumbnail('thumbnail', array('style'=>'float:left;margin-right:20px;'));
				?>
				<a href="<?php the_permalink(); ?>"><?php the_title();?></a>
				</h1>

				<div class="event-entry-meta">

					<!-- Output the date of the occurrence-->
					<?php
						//Format date/time according to whether its an all day event.
						//Use microdata http://support.google.com/webmasters/bin/answer.py?hl=en&answer=176035
 						if( eo_is_all_day() ){
							$format = 'd F Y';
							$microformat = 'Y-m-d';
						}else{
							$format = 'd F Y '.get_option('time_format');
							$microformat = 'c';
						}?>
						<time itemprop="startDate" datetime="<?php eo_the_start($microformat); ?>"><?php eo_the_start($format); ?></time>

					<!-- Display event meta list -->
					<?php echo eo_get_event_meta_list(); ?>

					<!-- Show Event text as 'the_excerpt' or 'the_content' -->
					<?php the_excerpt(); ?>

				</div><!-- .event-entry-meta -->			

				<div style="clear:both;"></div>
				</header><!-- .entry-header -->

			</article><!-- #post-<?php the_ID(); ?> -->

    		<?php endwhile; ?><!--The Loop ends-->

		<!-- Navigate between pages-->
		<?php
			if ( $wp_query->max_num_pages > 1 ) : ?>
				<nav id="nav-below">
					<div class="nav-next events-nav-newer"><?php next_posts_link( __( 'Later events <span class="meta-nav">&rarr;</span>' , 'eventorganiser' ) ); ?></div>
					<div class="nav-previous events-nav-newer"><?php previous_posts_link( __( ' <span class="meta-nav">&larr;</span> Newer events', 'eventorganiser' ) ); ?></div>
				</nav><!-- #nav-below -->
			<?php endif; ?>

		<?php else : ?>
			<!-- If there are no events -->
			<article id="post-0" class="post no-results not-found">
				<header class="entry-header">
					<h1 class="entry-title"><?php _e( 'Nothing Found', 'eventorganiser' ); ?></h1>
				</header><!-- .entry-header -->

				<div class="entry-content">
					<p><?php _e( 'Apologies, but no results were found for the requested archive. ', 'eventorganiser' ); ?></p>
				</div><!-- .entry-content -->
			</article><!-- #post-0 -->

			<?php endif; ?>

			</div><!-- #content -->
		</div><!-- #primary -->

<!-- Call template sidebar and footer -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

This is Virtue theme’s page.php which I thought would be the correct file to use as a template but maybe I’m wrong:

<div id="pageheader" class="titleclass">
		<div class="container">
			<?php get_template_part('templates/page', 'header'); ?>
		</div><!--container-->
	</div><!--titleclass-->

    <div id="content" class="container">
   		<div class="row">
      <div class="main <?php echo kadence_main_class(); ?>" role="main">

<?php get_template_part('templates/content', 'page'); ?>
</div><!-- /.main -->

This is what I’ve done before putting it in Virtue theme’s template folder but is not working quite properly:

<?php
/**
 * The template for displaying lists of events
 *
 * Queries to do with events will default to this template if a more appropriate template cannot be found
 *
 ***************** NOTICE: *****************
 *  Do not make changes to this file. Any changes made to this file
 * will be overwritten if the plug-in is updated.
 *
 * To overwrite this template with your own, make a copy of it (with the same name)
 * in your theme directory.
 *
 * WordPress will automatically prioritise the template in your theme directory.
 ***************** NOTICE: *****************
 *
 * @package Event Organiser (plug-in)
 * @since 1.0.0
 */
//Call the template header
get_header(); ?>

	<div id="pageheader" class="titleclass">
		<div class="container">
			<?php get_template_part('templates/page', 'header'); ?>
		</div><!--container-->
	</div><!--titleclass-->

    <div id="content" class="container">
   		<div class="row">
      <div class="main <?php echo kadence_main_class(); ?>" role="main">
			<?php
				if( eo_is_event_archive('day') )
					//Viewing date archive
					echo __('Events: ','eventorganiser').' '.eo_get_event_archive_date('jS F Y');
				elseif( eo_is_event_archive('month') )
					//Viewing month archive
					echo __('Events: ','eventorganiser').' '.eo_get_event_archive_date('F Y');
				elseif( eo_is_event_archive('year') )
					//Viewing year archive
					echo __('Events: ','eventorganiser').' '.eo_get_event_archive_date('Y');
				else
					_e('Events','eventorganiser');
			?>
			</h1>
		</header>

		<?php if ( have_posts() ) : ?>

			<!-- Navigate between pages-->
			<!-- In TwentyEleven theme this is done by twentyeleven_content_nav-->
			<?php
			global $wp_query;
			if ( $wp_query->max_num_pages > 1 ) : ?>
				<nav id="nav-above">
					<div class="nav-next events-nav-newer"><?php next_posts_link( __( 'Later events <span class="meta-nav">&rarr;</span>' , 'eventorganiser' ) ); ?></div>
					<div class="nav-previous events-nav-newer"><?php previous_posts_link( __( ' <span class="meta-nav">&larr;</span> Newer events', 'eventorganiser' ) ); ?></div>
				</nav><!-- #nav-above -->
			<?php endif; ?>

			<?php /* Start the Loop */ ?>

			<?php while ( have_posts() ) : the_post(); ?>

			<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<header class="entry-header">

				<h1 class="entry-title" style="display: inline;">
				<?php
					//If it has one, display the thumbnail
					the_post_thumbnail('thumbnail', array('style'=>'float:left;margin-right:20px;'));
				?>
				<a href="<?php the_permalink(); ?>"><?php the_title();?></a>
				</h1>

				<div class="event-entry-meta">

					<!-- Output the date of the occurrence-->
					<?php
						//Format date/time according to whether its an all day event.
						//Use microdata http://support.google.com/webmasters/bin/answer.py?hl=en&answer=176035
 						if( eo_is_all_day() ){
							$format = 'd F Y';
							$microformat = 'Y-m-d';
						}else{
							$format = 'd F Y '.get_option('time_format');
							$microformat = 'c';
						}?>
						<time itemprop="startDate" datetime="<?php eo_the_start($microformat); ?>"><?php eo_the_start($format); ?></time>

					<!-- Display event meta list -->
					<?php echo eo_get_event_meta_list(); ?>

					<!-- Show Event text as 'the_excerpt' or 'the_content' -->
					<?php the_excerpt(); ?>

				</div><!-- .event-entry-meta -->			

				<div style="clear:both;"></div>
				</header><!-- .entry-header -->

			</article><!-- #post-<?php the_ID(); ?> -->

    		<?php endwhile; ?><!--The Loop ends-->

		<!-- Navigate between pages-->
		<?php
			if ( $wp_query->max_num_pages > 1 ) : ?>
				<nav id="nav-below">
					<div class="nav-next events-nav-newer"><?php next_posts_link( __( 'Later events <span class="meta-nav">&rarr;</span>' , 'eventorganiser' ) ); ?></div>
					<div class="nav-previous events-nav-newer"><?php previous_posts_link( __( ' <span class="meta-nav">&larr;</span> Newer events', 'eventorganiser' ) ); ?></div>
				</nav><!-- #nav-below -->
			<?php endif; ?>

		<?php else : ?>
			<!-- If there are no events -->
			<article id="post-0" class="post no-results not-found">
				<header class="entry-header">
					<h1 class="entry-title"><?php _e( 'Nothing Found', 'eventorganiser' ); ?></h1>
				</header><!-- .entry-header -->

				<div class="entry-content">
					<p><?php _e( 'Apologies, but no results were found for the requested archive. ', 'eventorganiser' ); ?></p>
				</div><!-- .entry-content -->
			</article><!-- #post-0 -->

			<?php endif; ?>

<?php get_template_part('templates/content', 'page'); ?>
</div><!-- /.main -->

I hope that is not too much code for one post. Any help would be greatly appreciated!

Viewing 6 replies - 1 through 6 (of 6 total)

Ben Ritner – Kadence WP

(@britner)

12 years, 2 months ago

Use this, let me know if it doesn’t work:

<?php
/**
 * The template for displaying lists of events
 *
 * Queries to do with events will default to this template if a more appropriate template cannot be found
 *
 ***************** NOTICE: *****************
 *  Do not make changes to this file. Any changes made to this file
 * will be overwritten if the plug-in is updated.
 *
 * To overwrite this template with your own, make a copy of it (with the same name)
 * in your theme directory.
 *
 * WordPress will automatically prioritise the template in your theme directory.
 ***************** NOTICE: *****************
 *
 * @package Event Organiser (plug-in)
 * @since 1.0.0
 */

//Call the template header
?>

<!-- This template follows the TwentyTwelve theme-->
<div id="pageheader" class="titleclass">
		<div class="container">
			<div class="page-header">
	  			<h1>
				<?php
					if( eo_is_event_archive('day') )
						//Viewing date archive
						echo __('Events: ','eventorganiser').' '.eo_get_event_archive_date('jS F Y');
					elseif( eo_is_event_archive('month') )
						//Viewing month archive
						echo __('Events: ','eventorganiser').' '.eo_get_event_archive_date('F Y');
					elseif( eo_is_event_archive('year') )
						//Viewing year archive
						echo __('Events: ','eventorganiser').' '.eo_get_event_archive_date('Y');
					else
						_e('Events','eventorganiser');
				?>
				</h1>
			</div>
		</div><!--container-->
	</div><!--titleclass-->

    <div id="content" class="container">
   		<div class="row">
      <div class="main <?php echo kadence_main_class(); ?>" role="main">

		<?php if ( have_posts() ) : ?>

			<!-- Navigate between pages-->
			<!-- In TwentyEleven theme this is done by twentyeleven_content_nav-->
			<?php
			global $wp_query;
			if ( $wp_query->max_num_pages > 1 ) : ?>
				<nav id="nav-above">
					<div class="nav-next events-nav-newer"><?php next_posts_link( __( 'Later events <span class="meta-nav">&rarr;</span>' , 'eventorganiser' ) ); ?></div>
					<div class="nav-previous events-nav-newer"><?php previous_posts_link( __( ' <span class="meta-nav">&larr;</span> Newer events', 'eventorganiser' ) ); ?></div>
				</nav><!-- #nav-above -->
			<?php endif; ?>

			<?php /* Start the Loop */ ?>

			<?php while ( have_posts() ) : the_post(); ?>

			<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<header class="entry-header">

				<h1 class="entry-title" style="display: inline;">
				<?php
					//If it has one, display the thumbnail
					the_post_thumbnail('thumbnail', array('style'=>'float:left;margin-right:20px;'));
				?>
				<a href="<?php the_permalink(); ?>"><?php the_title();?></a>
				</h1>

				<div class="event-entry-meta">

					<!-- Output the date of the occurrence-->
					<?php
						//Format date/time according to whether its an all day event.
						//Use microdata http://support.google.com/webmasters/bin/answer.py?hl=en&answer=176035
 						if( eo_is_all_day() ){
							$format = 'd F Y';
							$microformat = 'Y-m-d';
						}else{
							$format = 'd F Y '.get_option('time_format');
							$microformat = 'c';
						}?>
						<time itemprop="startDate" datetime="<?php eo_the_start($microformat); ?>"><?php eo_the_start($format); ?></time>

					<!-- Display event meta list -->
					<?php echo eo_get_event_meta_list(); ?>

					<!-- Show Event text as 'the_excerpt' or 'the_content' -->
					<?php the_excerpt(); ?>

				</div><!-- .event-entry-meta -->			

				<div style="clear:both;"></div>
				</header><!-- .entry-header -->

			</article><!-- #post-<?php the_ID(); ?> -->

    		<?php endwhile; ?><!--The Loop ends-->

		<!-- Navigate between pages-->
		<?php
			if ( $wp_query->max_num_pages > 1 ) : ?>
				<nav id="nav-below">
					<div class="nav-next events-nav-newer"><?php next_posts_link( __( 'Later events <span class="meta-nav">&rarr;</span>' , 'eventorganiser' ) ); ?></div>
					<div class="nav-previous events-nav-newer"><?php previous_posts_link( __( ' <span class="meta-nav">&larr;</span> Newer events', 'eventorganiser' ) ); ?></div>
				</nav><!-- #nav-below -->
			<?php endif; ?>

		<?php else : ?>
			<!-- If there are no events -->
			<article id="post-0" class="post no-results not-found">
				<header class="entry-header">
					<h1 class="entry-title"><?php _e( 'Nothing Found', 'eventorganiser' ); ?></h1>
				</header><!-- .entry-header -->

				<div class="entry-content">
					<p><?php _e( 'Apologies, but no results were found for the requested archive. ', 'eventorganiser' ); ?></p>
				</div><!-- .entry-content -->
			</article><!-- #post-0 -->

			<?php endif; ?>

</div><!-- /.main -->

Kadence Themes

Thread Starter

ISqs

(@isqs)

12 years, 2 months ago

That worked perfectly to line things up correctly!

Two more issues though. I tried entering a hex code to change the color of the title and meta (venue, category, tags, etc) but nothing changed. Also, I would like a little more padding between entries. Maybe 20px?

Ben Ritner – Kadence WP

(@britner)

12 years, 2 months ago

You will have to post a link, the theme doesn’t have css for the plugin so you will need to override the plugin css, i’ve never used the plugin so I don’t know what you mean by entries.

Kadence Themes

Thread Starter

ISqs

(@isqs)

12 years, 2 months ago

The site isn’t live yet but would a screenshot help at all?
http://imgur.com/ecOOURd

Ben Ritner – Kadence WP

(@britner)

12 years, 2 months ago

It’s hard to write the css without seeing the page and being able to inspect it, I can tell you that these changes should help but for specifics you will need to either inspect yourself and write the css or upload and make it live:

.entry-title a, .event-entry-meta a {
color:#444;
}
article.event {
margin-bottom:20px
}

Kadence Themes

Thread Starter

ISqs

(@isqs)

12 years, 1 month ago

Thank you! That helped a lot. As you said I had to tweek it a bit more to get it to look just right. This is what I used if anyone else has this problem.

.entry-title a, .eo-event-meta a {
color:#444;
}
article.event {
margin-bottom:30px
}

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Format page template for event organizer plugin’ is closed to new replies.

Tags