logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$20
Display Events month by month (Event Calendar Pro)

Hi all,

Final task for the site I'm developing is to create a loop of Events created by The Events Calendar Pro plugin that displays the events in the same way of the Eventure theme.

Here is what I'm trying to achieve:

http://themeforest.net/item/eventure-responsive-events-wp-theme/full_screen_preview/1529155

Christianto has already created a loop for me here which may help with the loop:
wpquestions.com/question/showChrono?id=7849

The code that the Eventure theme uses is this:

<!--FILTER-->
<div id="filter" class="blackBar">
<?php
$terms = get_terms("tribe_events_cat");
$count = count($terms);
if ( $count > 0 ){
echo '<ul class="events-cat-menu">';
foreach ( $terms as $term ) {
echo '<li class="cat_'. $term->slug .'"><a href="'. get_term_link($term->slug, 'tribe_events_cat') .'">' . $term->name . '</a></li>';
}
echo '</ul>';
}
?>
</div>

<!--UL DATE LIST-->
<ul id="dateList">
<?php
$prev_month = '';
$prev_year = '';
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('post_type=tribe_events&showposts=200'.'&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post();
if(get_the_time('M') != $prev_month || get_the_time('Y') != $prev_year){
?>

<li class="box monthYear" id="<?php echo get_the_time('M'); echo get_the_time('y'); ?>">
<a class="dateLink" href="<?php echo home_url(); ?>/<?php echo get_the_time('Y/m'); ?>">
<span><?php echo get_the_time('M'); ?></span><br />
<?php echo get_the_time('Y'); ?>
</a>
</li>

<?php } ?>

<li class="box postEvent<?php foreach((get_the_category()) as $category) {echo ' '.$category->category_nicename.'';}?>">
<a href="<?php the_permalink(); ?>">
<span class="theDay"><?php echo get_the_time('d'); ?></span><br />
<p class="theTitle">
<span><?php echo get_the_time('D @ g:i a'); ?></span><br />
<?php echo the_title(); ?>
</p>
</a>
</li>

<?php
$prev_month = get_the_time('M');
$prev_year = get_the_time('Y');
endwhile;
$wp_query = null;
$wp_query = $temp;?>

<li class="box" id="theEnd"><?php _e("The End.");?></li>
</ul><!--END DATE LIST-->


Documentation for the plugin:
http://tri.be/support/documentation/

Any help would be hugely appreciated!

Many thanks,

Adam.

This question has been answered.

flint_and_tinder | 01/19/13 at 9:14pm Edit
Tutorial: How to assign prize money


(11) Responses

See a threaded view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    01/19/13
    9:51pm
    Arnav Joy says:

    <div class="archives">

    <?php
    global $wpdb;
    $months = $wpdb->get_results("SELECT DISTINCT MONTH(post_date) AS month , YEAR(post_date) AS year FROM $wpdb->posts WHERE post_status = 'future' and post_type = 'tribe_events' GROUP BY month, year ORDER BY post_date DESC");

    $posts = $wpdb->get_results("SELECT id, post_title, DAY(post_date) AS post_day , MONTH(post_date) AS month , YEAR(post_date) AS year FROM $wpdb->posts WHERE post_status = 'future' and post_type = 'tribe_events' ORDER BY post_date DESC");

    foreach($months as $this_month){ ?>

    <div class="month">

    <h2><?php echo date("F", mktime(0, 0, 0, $this_month->month, 1, $this_month->year)); ?> <?php // echo $this_month->year; ?></h2>


    <?php for ($i = 0; $i <= count($posts); $i++){?>
    <div><?php echo $posts[$i]->post_day;?></div>
    <?php if(($this_month->year == $posts[$i]->year)&&($this_month->month == $posts[$i]->month)){?>

    <p><a href="<?php echo get_permalink($posts[$i]->id); ?>"><?php echo $posts[$i]->post_title; ?></a></p>

    <?php } ?>

    <?php } ?>

    </div><!-- month -->

    <?php } ?>

    </div><!-- archives -->

    Previous versions of this answer: 01/19/13 at 9:51pm | 01/19/13 at 9:51pm

  • avatar
    Last edited:
    01/20/13
    1:17pm
    Christianto says:

    Hi Adam,

    With current code you have from Eventure theme, I think its already show all events by month,
    Could you use it inside one of your template file? is there any error appear?

    You still need to style it, for example in eventure theme:


    /* -----CALENDAR POST STUFF----- */
    .blackBar {width: 100%; text-align: center; line-height: 48px; background: #000; height: 48px; font-size: 10px; line-height: 48px; color: #aaa; letter-spacing: .7px;}
    #loadMore {margin-top: -3px; border-top:3px solid #000; line-height: 45px; height: 45px;
    display: none;
    }
    #loadMore a {color: #f8f8f8; line-height: 45px;}
    #loadMore a:hover {color: #f8f8f8;}

    #filter ul {list-style: none;}
    #filter li {display: inline; font-size: 10px; line-height: 48px; margin: 0 8px 0 0; }
    #filter li a {color: #aaa; text-transform: uppercase; line-height: 48px; display: inline-block;}
    #filter li a:hover,
    #filter li a.active {color: #fff;}

    #filter.sticky {z-index: 2000; width: 100%}
    #filterStickyWrapper,
    #filterStickyWrapper #filter {width: 100% !important; left: 0 !important;}

    li.box {display: block; float: left; height: 150px; width: 150px; position: relative; overflow: hidden; text-align: center; border-bottom: 3px solid #000; font-weight: bold;}
    li.box a {display: block; height: 96px; width: 116px; padding: 27px 17px; color: #000;}
    li.box .theDay {font-size:45px; line-height: 50px; }
    li.box .theTitle {font-size: 11px; line-height: 14px; font-family: sans-serif; letter-spacing: .5px;font-family: serif;font-style: italic;}
    li.box .theTitle span {text-transform: uppercase; display: inline-block; padding: 2px 8px 0; margin-bottom: 8px; background: #000; color: #f8f8f8; font-size: 9px; font-family: sans-serif; font-style: normal; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;}
    li#theEnd {background: #000; color: #f8f8f8; line-height: 160px;}
    li.monthYear {background-color: #000; color: #f8f8f8; text-transform: uppercase; font-size: 24px; line-height: 24px; cursor: default;background-image: none;}
    li.monthYear a.dateLink {padding: 0; color: #f8f8f8; padding-top: 40px; height: 110px; width: 100%;}
    li.monthYear a.dateLink:hover {color: #000;}
    li.monthYear span {letter-spacing: 2.5px;}


    and the filter effect function I found:

    //FILTER EFFECTS & APPEARANCE
    var filterLink = jQuery('#filter a');
    filterLink.click(function(){

    jQuery('li.box').removeClass('hideMe');

    filterLink.not(this).removeClass('active');
    jQuery(this).addClass('active');

    var activeCat = jQuery(this).html().toLowerCase().replace(/ /g,'');

    jQuery('li.postEvent').not('li.'+ activeCat).addClass('hideMe').children().stop(true,true).animate({opacity:".1"},350);
    jQuery('li.'+ activeCat).children().stop(true,true).animate({opacity:"1"},350);

    return false;
    });
    jQuery('#filter li').not(':first').prepend("/ &nbsp;&nbsp;&nbsp;");

  • avatar
    Last edited:
    01/19/13
    9:55pm
    flint_and_tinder says:

    That's not displaying anything I'm afraid.

  • avatar
    Last edited:
    01/19/13
    9:58pm
    Arnav Joy says:

    your post is sheduled ?

    if not then change

    post_status = 'future'

    to

    post_status = 'publish'

    or

    post_status = 'draft'

    as per your post status of "tribe_events" posts

  • avatar
    Last edited:
    01/19/13
    10:04pm
    flint_and_tinder says:

    Just to clarify, unlike the Eventure theme, events created by The Event Calendar do not use the post creation date as the event date. Therefore the post date is irrelevant.

    I need the loop to get the start date field of the post and display them based on those.

    Please see Christianto's code here:
    wpquestions.com/question/showChrono?id=7849

  • avatar
    Last edited:
    01/19/13
    10:14pm
    Arnav Joy says:

    in this question , you have attached a screenshot ,
    http://wpquestions.com/question/showChrono?id=7849

    at bottom right corner which list the events , do you want something like that ?
    how did you disply that ?

  • avatar
    Last edited:
    01/19/13
    10:23pm
    flint_and_tinder says:

    It's the section under 'Calendar' I want.

    You will see the design mimics that of the theme I am trying to emulate:
    http://themeforest.net/item/eventure-responsive-events-wp-theme/full_screen_preview/1529155

    Code used by Eventure is posted above.

  • avatar
    Last edited:
    01/20/13
    1:34pm
    flint_and_tinder says:

    I have tried it, attached is a screenshot of the results.

    As described to Arnav, it's not a styling issue. Eventure arranges the posts (events) by date/month by using the post creation date. So event date = post date. However, The Events Calendar uses specific meta data for the event date and not the post date.

    As a result using the code directly from Eventure, displays the Events on the day the event posts were created, not the day the event is due to occur.


  • avatar
    Last edited:
    01/20/13
    1:35pm
    flint_and_tinder says:

    I have tried it, attached is a screenshot of the results.

    As described to Arnav, it's not a styling issue. Eventure arranges the posts (events) by date/month by using the post creation date. So event date = post date. However, The Events Calendar uses specific meta data for the event date and not the post date.

    As a result using the code directly from Eventure, displays the Events on the day the event posts were created, not the day the event is due to occur.


  • avatar
    Last edited:
    01/20/13
    3:45pm
    Christianto says:

    Ok,

    Please try this code:
    http://pastebin.com/4Vwqc2PL

    its already include css and js function, so you could remove it if you want.

  • avatar
    Last edited:
    01/22/13
    5:10am
    flint_and_tinder says:

    Yes, Yes, Yes!

    Good man Christianto. :-)

This question has expired.



John Cotton, Arnav Joy, Daniel Yoen, Dbranes, flint_and_tinder voted on this question.



Current status of this question: Completed



Please log in to add additional discourse to this page.





Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.