WordPress.org

Forums

Trouble with formatting when modifying a shortcode (2 posts)

  1. realnamesjohn
    Member
    Posted 10 months ago #

    I'm working with a theme called "Clubber" and the shortcode I'm modifying is an event shortcode that pulls upcoming events in chronological order and displays them in an excerpt format on the front page. Here is the coding for that shortcode:

    function eventup_shortcode($atts, $content) {
    extract(shortcode_atts(array(
    "items" => 2,
    "cat" => null,
    "id" => null,
    "nav" => false,
    "order" => "asc",
    "events" => null
    ), $atts));
    $order = strtoupper($order);
    $items_count = 0;
    $items_src = null;
    if ($id == null) {
    $query = array(
    'post_type' => 'event',
    'orderby' => 'meta_value',
    'order' => $order,
    'meta_key' => 'event_date_interval',
    'meta_value' => strftime("%Y/%m/%d", time()- (60 * 60 * 24) ),
    'meta_compare' => '>',
    'posts_per_page' => $items,
    );
    if ($cat) {
    $query = array(
    'posts_per_page' => $items,
    'orderby' => 'meta_value',
    'meta_value' => strftime("%Y/%m/%d", time()- (60 * 60 * 24) ),
    'meta_key' => 'event_date_interval',
    'meta_compare' => '>',
    'order' => $order,
    'post_type' => 'event',
    'tax_query' => array(
    array(
    'taxonomy' => 'events',
    'field' => 'slug',
    'terms' => array($cat)
    )));
    }
    $wp_query_event = new WP_Query($query);
    }
    $items_src .= '
    <div class="home-post">';
    while ($wp_query_event->have_posts()):
    $wp_query_event->the_post();
    global $post;
    $image_id = get_post_thumbnail_id();
    $cover_event = wp_get_attachment_image_src($image_id, 'event-cover-arc');
    $image_large = wp_get_attachment_image_src($image_id, 'large');
    $data_event = get_post_meta($post->ID, 'event_date_interval', true);
    $time = strtotime($data_event);
    $tstart = get_post_meta($post->ID, 'event_tstart', true);
    $tend = get_post_meta($post->ID, 'event_tend', true);
    $venue = get_post_meta($post->ID, 'event_venue', true);
    $event_text = get_post_meta($post->ID, "ev_text", true);
    $custom = get_post_custom($post->ID);
    $event_ticket = $custom["event_ticket"][0];
    $pretty_date_yy = date('Y', $time);
    $pretty_date_d = date('d', $time);
    $theme = get_template_directory();
    require($theme.'/includes/language.php');
    $items_src .= '
    <div class="home-width fixed">
    <div class="event-archive">
    <div class="event-arc-data">
    <div class="event-arc-day">' . $pretty_date_d . '</div>
    <div class="event-arc-month">' . $pretty_date_M . '</div>
    </div><!-- end .event-arc-data -->
    <div class="event-arc-cover">';
    if ($image_id) {
    $items_src .= '

    <img src="' . $cover_event[0] . '" alt="' . get_the_title() . '" />
    ';
    } else {
    $items_src .= '

    <img src="' . get_template_directory_uri() . '/images/no-featured/event-single.png" alt="no image" />
    ';
    }
    $items_src .= '
    </div><!-- end .event-arc-cover -->
    <div class="event-arc-text">
    <h2 class="event-arc-title">' . get_the_title() . '</h2>
    <div class="event-arc-info">';
    if($venue) {
    $items_src .= '<p class="event-arc-venue">' . $venue . '</p>';
    }
    if (get_post_meta($post->ID, 'event_allday', true) == 'yes'){
    $items_src .= '<p class="event-arc-time">All Day</p>';
    } elseif ($tstart) {
    $items_src .= '<p class="event-arc-time">' . $tstart . '';
    } if ($tend) {
    $items_src .= ' – ' . $tend . '</p>';
    }
    $items_src .= '
    </div><!-- end .event-arc-info -->';
    $items_src .= '<p>' . the_excerpt_max(165) . '</p>';
    if (get_post_meta($post->ID, 'event_disable', true) == 'no') {
    if ($event_text) {
    $items_src .= '
    <div class="event-tickets">' . $event_text . '</div>';
    } else {
    if (get_post_meta($post->ID, 'event_out', true) == 'yes') {
    $items_src .= '
    <div class="event-cancel-out"><p>Sold Out</p></div>';
    } elseif (get_post_meta($post->ID, 'event_cancel', true) == 'yes') {
    $items_src .= '
    <div class="event-cancel-out"><p>Canceled</p></div>';
    } elseif (get_post_meta($post->ID, 'event_free', true) == 'yes') {
    $items_src .= '
    <div class="event-cancel-out"><p>Free Entry</p></div>';
    } else {
    $items_src .= '
    <div class="event-tickets">Buy Tickets</div>';
    }
    }
    }
    $items_src .= '
    </div><!-- end .event-arc-text -->
    </div><!-- end .event-archive -->
    </div><!-- end .home-width fixed -->';
    endwhile;
    $items_src .= '
    </div><!-- end .home-post -->';
    return $items_src;
    }

    The coding I would like to use to modify the shortcode comes from the 'single event' page which displays ALL the information AND does so nice and neatly. Here is the coding for that whole page:

    <?php
    get_header();
    ?>

    <div id="content">

    <div class="title-head"><h1><?php
    if (function_exists('cat_post_types'))
    cat_post_types();
    ?>
    </h1></div>

    <?php
    $page_layout = of_get_option('event_images');
    switch ($page_layout) {
    case "left-event-sidebar":
    echo '
    <div class="sidebar-left">';
    wz_setSection('zone-sidebar');
    if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-page'));
    echo '
    </div><!-- end .sidebar-left -->';
    break;
    case "right-event-sidebar":
    echo '
    <div class="sidebar-right">';
    wz_setSection('zone-sidebar');
    if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-page'));
    echo '
    </div><!-- end .sidebar-right -->';
    break;
    }
    ?>

    <div class="fixed">
    <div class="single-col">

    <?php
    if (have_posts())
    while (have_posts()):
    the_post();
    global $post;
    $results = $wp_query->post_count;
    $data_event = get_post_meta($post->ID, 'event_date_interval', true);
    $time = strtotime($data_event);
    $pretty_date_yy = date('Y', $time);
    $pretty_date_d = date('d', $time);
    require('includes/language.php');
    $image_id = get_post_thumbnail_id();
    $cover = wp_get_attachment_image_src($image_id, 'event-cover-arc');
    $image_id = get_post_thumbnail_id();
    $event_location = get_post_meta($post->ID, "event_location", true);
    $event_venue = get_post_meta($post->ID, "event_venue", true);
    $tstart = get_post_meta($post->ID, 'event_tstart', true);
    $tend = get_post_meta($post->ID, 'event_tend', true);
    $event_ticket = get_post_meta($post->ID, "event_ticket", true);
    $event_text = get_post_meta($post->ID, "ev_text", true);
    $event_out = get_post_meta($post->ID, "event_out", true);
    $event_cancel = get_post_meta($post->ID, "event_cancel", true);
    $event_zoom = get_post_meta($post->ID, "event_zoom", true);
    $coordinated = get_post_meta($post->ID, "event_coordinated", true);
    $club = get_post_meta($post->ID, "event_venue", true);
    $event_allday = get_post_meta($post->ID, "event_allday", true, true);
    echo '
    <div class="event-cover">';
    if ($image_id) {
    echo '
    <img src="' . $cover[0] . '" alt="' . get_the_title() . '" />';
    } else {
    echo '
    <img src="' . get_template_directory_uri() . '/images/no-featured/event-single.png" alt="no image" />';
    }
    if ($data_event != null) {
    echo '
    <div class="event-single-data">
    <div class="event-single-day">' . $pretty_date_d . '</div>
    <div class="event-single-month">' . $pretty_date_M . '</div>
    <div class="event-single-year">' . $pretty_date_yy . '</div>
    </div>
    </div><!-- end .event-cover -->';
    }
    echo '
    <div class="event-text">
    <h2 class="event-title">' . get_the_title($post->ID) . '</h2>
    <ul class="event-meta">';
    if ($event_location != null) {
    echo '

  2. <span>Location:</span>' . $event_location . '
  3. ';
    }
    if ($club != null) {
    echo '

  4. <span>Venue:</span>' . $club . '
  5. ';
    }
    if ($event_allday == 'yes'){
    echo '

  6. <span>Length:</span>All Day
  7. ';
    } elseif ($tstart) {
    echo '

  8. <span>Length:</span>' . $tstart . '';
    } if ($tend) {
    echo ' – ' . $tend . '
  9. ';
    }
    echo '

  10. ';
    if (get_post_meta($post->ID, 'event_disable', true) == 'no') {
    if ($event_text) {
    echo '
    <div class="event-tickets">' . $event_text . '</div>';
    } else {
    if (get_post_meta($post->ID, 'event_out', true) == 'yes') {
    echo '
    <div class="event-cancel-out"><p>Sold Out</p></div>';
    } elseif (get_post_meta($post->ID, 'event_cancel', true) == 'yes') {
    echo '
    <div class="event-cancel-out"><p>Canceled</p></div>';
    } elseif (get_post_meta($post->ID, 'event_free', true) == 'yes') {
    echo '
    <div class="event-cancel-out"><p>Free Entry</p></div>';
    } else {
    echo '
    <div class="event-tickets">Buy Tickets</div>';
    }
    }
    }
    echo '
  11. <!-- end ul.event-meta -->';
    echo '
    ' . the_content() . '
    </div><!-- end .event-text -->';
    if ($coordinated != null) {
    echo '
    <script type="text/javascript">
    jQuery(document).ready(function($){

    $("#event-map").gmap3({
    marker:{
    latLng: [' . $coordinated . '],
    options:{
    draggable:true
    },
    events:{
    dragend: function(marker){
    $(this).gmap3({
    getaddress:{
    latLng:marker.getPosition(),
    callback:function(results){
    var map = $(this).gmap3("get"),
    infowindow = $(this).gmap3({get:"infowindow"}),
    content = results && results[1] ? results && results[1].formatted_address : "no address";
    if (infowindow){
    infowindow.open(map, marker);
    infowindow.setContent(content);
    } else {
    $(this).gmap3({
    infowindow:{
    anchor:marker,
    options:{content: content}
    }
    });
    }
    }
    }
    });
    }
    }
    },
    map:{
    options:{
    zoom: ' . $event_zoom . '
    }
    }
    });

    });
    </script>

    <div id="event-map"></div>';
    }
    echo '
    </div><!-- end .single-col -->';
    endwhile;
    ?>

    </div><!-- end .fixed -->
    </div><!-- end #content -->

    <?php
    get_footer();
    ?>

    So far, I've tried things like changing the "get_the_excerpt()" in the shortcode to "get_the_content" And that partially does what I want. It no longer displays the excerpt but rather the whole event info which is nice but its unformatted and does not look like the event does on the "single event" page. Here are links to help you help me.

    Homepage that is using the event shortcode:
    http://www.tecshows.com

    Example of one of the single-event pages:
    http://www.tecshows.com/event/the-banneras-this-body-i-exist/

    I'm pretty lost and I've spent hours and hours and hours trying everything I can think of (echo, return, and class modification although know 100% how echo works). I figure at this point I could throw this on here and see if someone out there could help me out. I appreciate any thoughts or guidance, Thank you very much.

  • Jeffrey van Rossum
    Member
    Posted 10 months ago #

    Could you please use the code button? This is hardly readable and the page falls apart.

    You'll probably have to take a look at the custom fields (meta fields).

  • Reply

    You must log in to post.

    About this Topic

    Tags