Advertisement
Creative Coding

Quick Tip: Display Excerpts of Child Pages with a Shortcode

by

Sometimes we have a page just for the sake of making it a parent of other pages. I've even seen these pages left blank! You should at least have a small paragraph for the sake of search engines and visitors alike, but what about also offering a snippet of the subpages to read similar to how your blog page does posts?

In this quick tip, we'll create a little function that will query the page for child pages, display titles, excerpts and links if it finds any, and add it to a shortcode for use from the WordPress page editor.


Create the Function

function subpage_peek() {
	global $post;
	
	//query subpages
	$args = array(
		'post_parent' => $post->ID,
		'post_type' => 'page'
	);
	$subpages = new WP_query($args);
	
	// create output
	if ($subpages->have_posts()) :
		$output = '<ul>';
		while ($subpages->have_posts()) : $subpages->the_post();
			$output .= '<li><strong><a href="'.get_permalink().'">'.get_the_title().'</a></strong>
						<p>'.get_the_excerpt().'<br />
						<a href="'.get_permalink().'">Continue Reading →</a></p></li>';
		endwhile;
		$output .= '</ul>';
	else :
		$output = '<p>No subpages found.</p>';
	endif;
	
	// reset the query
	wp_reset_postdata();
	
	// return something
	return $output;
}

This code performs a simple query for the current page's children.

  • Query the child pages
  • If the query returns pages, loop through them and create an output with an unordered list that includes the linked title, the excerpt, and a "Continue Reading" link
  • If the query doesn't return anything, set the output to say that nothing was found. You could set this to whatever would be the most useful for your application.
  • Don't forget to reset the post data!
  • Return the results rather than echo them so that it can be used as a shortcode

Create the Shortcode

add_shortcode('subpage_peek', 'subpage_peek');

Creating shortcodes out of functions is pretty simple with the built in WordPress function. You could also simply echo the function from within a template. If you really wanted to get creative, you could add it to a custom widget!


Conclusion

That's all, folks! This is a pretty handy way of handling subpages and offering a preview to readers. Your output should look something like this:

Custom Meta Box
Related Posts
  • Code
    Creative Coding
    Using a Custom Post Type to Create a Home Page BannerUsing a custom post type to create a home page banner
    Sometimes it's useful to have a nice obvious banner on your site's home page—for announcements, snippets that aren't long enough to merit a blog post, or links to new content within the site. But you don't want to be editing your homepage content every time you add a new piece of content, nor do you want to be delving into the code to add content.Read More…
  • Code
    WordPress
    Mastering WordPress Meta Data: Querying Posts and Users by Meta DataMetadata
    So far in this series you've learned how to access WordPress meta data, and work with the arrays in which they are returned. We don't just add custom fields to WordPress posts so we can display this information, but it also so we can sort by it. Now that you know how to retrieve and display meta data, it's time to learn how to customize the WordPress loop to return only posts with specific meta values.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Plugins
    Communicating With the WordPress.org Plugin APIWordpressdotorg plugin api border 400
    Over the last few weeks I have been wondering on how to possibly pull data about my plugins hosted on WordPress.org and display it on my website. The first thing that came to mind was "Web Scrapping" but quite frankly this is a lot of work, feels like going back in time, and is not something a good web citizen should do. In some cases, it could be illegal.Read More…
  • Code
    Plugins
    Create a Shortcode to List Posts With Multiple ParametersPost listing shortcode main image400
    On many of the client sites I build, I find there are times when I need to include a post listing on a page. I'm not talking about archive pages here, but adding a custom listing to an existing static page. For example, I might want to list some posts on the 'About' page, or the site may require an in-depth page for a topic, with a list of posts and custom post types related to that topic. One way to do this is by creating a custom page template to include the current page content plus the results of a second custom query, but if you want more flexibility over how you list posts, or just want to do it a few times, a shortcode will be a simpler solution. In this tutorial, I'll show you how to create a simple shortcode to list all posts of a custom post type, and then I'll expand on that to create a shortcode with various parameters that users can specify to list posts however they want.Read More…
  • Code
    Theme Development
    How to Create a Homepage With Multiple Listings Using Custom QueriesFrontpage custom queries preview 400
    WordPress gives you a couple of built-in options for your website's front page: a display of your most recent blog posts or a static page of your choice. But what if you want to create something a bit more interesting than that? If your site has a lot of data using categories, taxonomies or custom post types to organize it, you might want to display data of more than one kind on your homepage. The good news is that you can do this using a custom template for the homepage. In this template you write a number of custom queries to list the data in the way you want to. In this tutorial you'll learn how to do the following: Create a custom homepage template for use by your theme Include four queries in that template to display different kinds of data, including three custom queries The queries will list standard posts plus one custom post type registered for this project, called 'animal'. You can find the template file with the four queries in the code bundle.Read More…