A Custom “View” of Custom Posts

The next step in my quest of duplicating Drupal functionality in WordPress is to populate a widget with a series of excerpts of events (this would be accomplished by making a view that displays event content types in a block in Drupal–it is more complicated in WordPress).

I expect it to be an iterative process; I had initially wanted three widgets in a row, all using widget functionality, to display on the front page. However, widgets are not the simplest objects. They rely on a class in core, that can be overridden.

For now, I’m just going to hack it out on the front-page.php template file. I can refactor later.

The Goal

Here is an image of my Drupal site. See the three boxes under the image? Those are blocks with views within them–the views pull data from the database and display it as I wish. I am going to do the same thing in WordPress, using WordPress tech.

The one on the right is displaying a content type called ‘Event.’ In my WordPress install, I have already created a custom post type called ‘event,’ which will have a parallel function. Right now, the event post type is just dummy content.

The mechanism for outputting a custom post type would be WP-Query.

Everyone knows about the WordPress Loop; this is a kind of baby loop that we’ll use for special purposes. Since this is just stage one of an iterative process, I’m going to write it directly onto the front page.

Here is the code:

<div class="col">
        <?php dynamic_sidebar( 'upcoming-events-view' ); ?>
        <h2>Upcoming Events</h2>
        <?php
            /**
             * WP-Query for events custom post type
             */
            $args = array(
                'post_type'      =>  'events',
                'post_status'    =>  'publish',
                'posts_per_page' => 3,
                'orderby'        => 'title',
                'order'          => 'ASC',
            );
            $loop = new WP_Query( $args );

            while ($loop->have_posts() ) : $loop->the_post();
                echo '<a href="'. get_permalink( get_the_ID() ) . '">';
                echo '<h3>' . get_the_title() . '</h3>';
                echo '<p>' . substr(get_the_excerpt(), 0, 100) . '...</p>';
                echo '</a>';
            endwhile;

            wp_reset_postdata();
        ?>
        </div>

You may be wondering what the dynamic_sidebar( ‘upcoming-events-view’ ); call is. Right now, it is non-functional. It is a widget area. Eventually, I intend for it to contain the WP-Query code that follows it.

In the second php section, I declare the arguments for the WP-Query, then instantiate the class.

That gives me an object with methods I can use in a similar way to the normal WordPress loop.

Here, I am just echoing out the title, permalink, and the excerpt, along with a bit of HTML to make it look nice in the div.

Notice that the excerpt part is a bit hacky–I wasn’t able to use WordPress functions to control the excerpt length very well. There is a filter for this, but it seems to only work for automatically generated excerpts, and I have some here that are user-generated (that is, manually created excerpts). This method simply cuts it off at 100 characters and adds the ellipses.

The result needs a bit of css to clean it up, but you get the idea–I now have a section that draws three custom posts of type event and outputs them automatically.

A Custom “View” of Custom Posts

The Goal

Cancel reply