Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by Dan Sutherland
Dan Sutherland
1,463 Points

Wordpress plugin shortcode is generating HTML at the top of the page? I think I have to return the loops contents!?

I am testing some of the principles in the Wordpress course, I have created a development site and I have created a plugin for that site. The plugin is to work alongside ACF to generate the post types of events, create a loop that gets the title, event date and event content and outputs it as individual html divs for each event, and then registers a shortcode so that this event info can be output anywhere on a page. However when I add the shortcode to a div on the page it doesn't output the html at that place in the page it outputs it at the start of the page instead? I think this is because I need to return the contents of the cpt loop as opposed to echoing them but after a few hours of formatting, trying to load the html from a separate plugin file and numerous other things I'll be darned if I can't get this to work!? Any help, suggestions or guidance on this would be excellent thanks.

This is my plugin code so far:

<?php /*

  • Plugin Name: Will to Win Events
  • Author: Highland Graphics
  • Description: To add events to the Will to Win website
  • Version: 1.0 */

// CREATE A NEW POST TYPE OF EVENTS

if (!function_exists('will_event_post') ) {

// Register Custom Post Type function will_event_post() {

$labels = array(
    'name'                  => _x( 'Events', 'Post Type General Name', 'text_domain' ),
    'singular_name'         => _x( 'Event', 'Post Type Singular Name', 'text_domain' ),
    'menu_name'             => __( 'Events', 'text_domain' ),
    'name_admin_bar'        => __( 'Events', 'text_domain' ),
    'archives'              => __( 'Event Archives', 'text_domain' ),
    'attributes'            => __( 'Event Attributes', 'text_domain' ),
    'parent_item_colon'     => __( 'Parent Event:', 'text_domain' ),
    'all_items'             => __( 'All Events', 'text_domain' ),
    'add_new_item'          => __( 'Add New Event', 'text_domain' ),
    'add_new'               => __( 'Add New Event', 'text_domain' ),
    'new_item'              => __( 'New Event', 'text_domain' ),
    'edit_item'             => __( 'Edit Event', 'text_domain' ),
    'update_item'           => __( 'Update Event', 'text_domain' ),
    'view_item'             => __( 'View Event', 'text_domain' ),
    'view_items'            => __( 'View Events', 'text_domain' ),
    'search_items'          => __( 'Search Event', 'text_domain' ),
    'not_found'             => __( 'Event Not found', 'text_domain' ),
    'not_found_in_trash'    => __( 'Not found in Trash', 'text_domain' ),
    'featured_image'        => __( 'Featured Image', 'text_domain' ),
    'set_featured_image'    => __( 'Set featured image', 'text_domain' ),
    'remove_featured_image' => __( 'Remove featured image', 'text_domain' ),
    'use_featured_image'    => __( 'Use as featured image', 'text_domain' ),
    'insert_into_item'      => __( 'Insert into Event', 'text_domain' ),
    'uploaded_to_this_item' => __( 'Uploaded to this Event', 'text_domain' ),
    'items_list'            => __( 'Events list', 'text_domain' ),
    'items_list_navigation' => __( 'Events list navigation', 'text_domain' ),
    'filter_items_list'     => __( 'Filter Events list', 'text_domain' ),
);
$args = array(
    'label'                 => __( 'Event', 'text_domain' ),
    'description'           => __( 'Events run by Will to Win', 'text_domain' ),
    'labels'                => $labels,
    'supports'              => array( 'title', 'editor', 'thumbnail' ),
    'taxonomies'            => array( 'category', 'post_tag' ),
    'hierarchical'          => false,
    'public'                => true,
    'show_ui'               => true,
    'show_in_menu'          => true,
    'menu_position'         => 5,
    'show_in_admin_bar'     => true,
    'show_in_nav_menus'     => true,
    'can_export'            => true,
    'has_archive'           => true,
    'exclude_from_search'   => false,
    'publicly_queryable'    => true,
    'capability_type'       => 'page',
    'menu_icon'             => 'dashicons-calendar-alt',
);
register_post_type( 'events', $args );

} add_action( 'init', 'will_event_post', 0 );

}

//GENERATE THE LOOP HTML

// CREATE A LOOP FOR SHOWING THE EVENT CONTENTS AND MAKE IT A SHORTCODE

// Add Shortcode function custom_event_shortcode() {

$willToWinEvents = new WP_Query(array(
'posts_per_page' => 3,
'post_type' => 'events'
));

while($willToWinEvents->have_posts()) :
    $willToWinEvents->the_post();?>

    <div class="event-feed">
<div class="event-title">
    <h2>
        <?php the_title(); ?>
    </h2>
</div>
<div class="event-date">
    <h3> <?php the_field("event_date"); ?></h3>
</div>
<div class="event-content">
    <p> insert event content here</p>
</div>

</div>

<?php endwhile; wp_reset_query();

} add_shortcode( 'event_list', 'custom_event_shortcode' ); ?>