People love pictures. They love looking at them, they love clicking on them. Therefore, it makes sense to use them in your website’s navigation.

You may already use featured images in your archive pages to give users a deeper understanding of the content of your posts and to make your archive pages look better. Beautiful, large clickable images also make the process of browsing a page or publishing a post more intuitive.

But elsewhere, you can use featured images to help navigate to certain parts of your WordPress site. In this two-part tutorial, we'll show you how to create a grid of images that links to a subpage of a given page in your website, or a subpage of the current page.

In this first part, I will demonstrate how to write PHP to take a page and output its title and featured image, internal links. In part two, Ian Yates shows you how to add CSS to turn your list into a beautiful grid.

What do you need

To follow this tutorial, you need the following:

• Development Installation of WordPress - Do not add it to your live site until testing.
• Themes that have action hooks for you to add content or edit. If it's a third-party theme without hooks, create a child theme and edit it.
• Code Editor.

Decide on your approach

The first thing to do is decide which pages to output. In this tutorial I will demonstrate two options:

• List of subpages of the current page, including images.
• List of subpages for a specific page, containing images. It can appear anywhere on your site, not just the parent page.

start using

The starting point of the two methods is the same.

First create a plugin in the wp-content/plugins folder. You need to create a folder for the plugin because in the second part of this tutorial you will add the stylesheet as well as the main plugin file.

Once you have the folder, create a PHP file for your code. I'm calling my tutsplus-child-pages.php.

Now set up your plugin file and add the commented out text at the top:

/**
 * Plugin Name:  Tutsplus List Child Pages
 * Plugin URI:   https://github.com/rachelmccollin/tutsplus-list-child-pages
 * Description:  Output a list of children of the current page or a specific page with featured images.
 * Author:       Rachel McCollin
 * Author URI:   https://rachelmccollin.com
 * Version:      1.0
 * Text Domain:  tutsplus
 * License:      GPLv2.0+
 */

This tells WordPress what your plugin is and what it is used for.

Now, go ahead and create some pages if you haven't already. I'm going to create some pages with subpages, including a location page as the parent page for my specific list of pages.

This is my page in management:

Now it’s time to write the function that outputs the list.

Output the child list of the current page

Let's start with this option. This will output a list of all subpages of the current page, including images, links, and titles.

This is a useful approach if your site has a hierarchical page structure and you want to encourage people visiting the top-level pages (or mid-level pages, if any) to visit the pages below them in the structure .

First create a function in the plug-in file:

function tutpslus_list_current_child_pages() {

}

Now, inside the function, check if we are on the page. Everything else will be placed inside this conditional tag:

if ( is_page() ) {

}

Next, set the $post global variable and define the parent page:

global $post;

// define the page they need to be children of
$parentpage = get_the_ID();

After that, define the parameters of get_pages() function:

// define args
$args = array(
    'parent' => $parentpage,
	'sort_order' => 'ASC',
	'sort_column' => 'menu_order',
);

$children = get_pages( $args );

You may want to change some of these parameters. I'm using menu_order for sorting so I can adjust it manually, but you can use date, title, or any other sortable parameter.

The next task is to set the result using the get_pages() function foreach Loop:

if ( $children ) { ?>

    <div class="child-page-listing">
		
		<h2><?php _e( 'Learn More', 'tutsplus' ); ?></h2>
	
		<?php //foreach loop to output
		foreach ( $children as $post ) {
			
			setup_postdata( $post ); ?>
			
			<article id="<?php the_ID(); ?>" class="child-listing" <?php post_class(); ?>>
				
				<?php if ( has_post_thumbnail() ) { ?>
				
					<a class="child-post-title" href="<?php the_permalink(); ?>">
						<?php the_title(); ?>
					</a>
					
					<div class="child-post-image">	
						<a href="<?php the_permalink(); ?>">
							<?php the_post_thumbnail( 'medium' ); ?>
						</a>
					</div>	
			
				<?php }	?>
			
			</article>	
			
		<?php } ?>
		
	</div>
	
<?php }

Let’s run this code:

1. First, we check if the get_pages() function returns any results, i.e. if $children is populated.
2. Then we start a foreach loop for each subpage as the $post variable.
3. In this loop, we open an article element.
4. We check if there is a featured image (or post thumbnail) and output it within a link to the page.
5. Then we output the title of the page into the link of the page.
6. Finally, we turn off the element and condition checks as well as the foreach loop itself.

I've added CSS classes to each element so that we can style them in the second part of this tutorial.

Add code to theme

Now you have your function. The next step is to add this to your theme so it can be output in the correct location.

如果您的主題有動(dòng)作掛鉤，您可以將您的函數(shù)掛鉤到其中之一。因此，如果我的有一個(gè) after_content 掛鉤，我可以在我的插件中的函數(shù)外部添加此代碼：

add_action( 'after_content', 'tutpslus_list_current_child_pages' );

但是，我在這個(gè)演示中使用了“二十十六”主題，它沒(méi)有這樣的動(dòng)作掛鉤。因此，我需要直接在模板文件中添加函數(shù)。

如果您使用自己的主題，則可以將其添加到 page.php 文件中您希望顯示列表的位置。

但如果您使用的是第三方主題，則不得對(duì)其進(jìn)行編輯，因?yàn)橄麓胃轮黝}時(shí)所有更改都將丟失。相反，創(chuàng)建一個(gè)子主題。在新的子主題中創(chuàng)建父主題的 page.php 文件的副本（或 page.php 的循環(huán)文件的副本），然后對(duì)其進(jìn)行編輯。

確定您希望在頁(yè)面中輸出列表的位置，并將其添加到主題模板文件中：

tutpslus_list_current_child_pages();

我已將其添加到子主題的 page.php 文件中的循環(huán)之后。

現(xiàn)在讓我們看一下該網(wǎng)站。這是我的關(guān)于我們頁(yè)面及其子頁(yè)面：

這就是添加指向當(dāng)前頁(yè)面子頁(yè)面的鏈接的方法。但是，如果您想添加指向某一特定頁(yè)面的子頁(yè)面的鏈接該怎么辦？接下來(lái)讓我們解決這個(gè)問(wèn)題。

輸出特定頁(yè)面的子級(jí)列表

此代碼與當(dāng)前頁(yè)面子頁(yè)面的代碼幾乎相同。區(qū)別在于定義運(yùn)行 get_pages() 時(shí)將使用的父頁(yè)面。

復(fù)制插件文件中的第一個(gè)函數(shù)并編輯函數(shù)名稱，使它們不同。

找到頁(yè)面上的條件檢查并將其刪除。不要忘記也刪除該檢查的右大括號(hào)。

現(xiàn)在找到如下行：

$parentpage = get_the_ID();

將其替換為：

$page = get_page_by_path( 'locations', OBJECT, 'page' );
    
$parentpage = $page->ID;

您會(huì)看到它使用 get_page_by_path() 函數(shù)，其第一個(gè)參數(shù)是目標(biāo)頁(yè)面的 slug。編輯此內(nèi)容，使其使用您想要在網(wǎng)站中定位的頁(yè)面的 slug。

在此函數(shù)中編輯 CSS 類也是一種很好的做法，以便它們與第一個(gè)函數(shù)中的 CSS 類不同。這樣，如果您同時(shí)使用兩者，則可以為每個(gè)使用不同的樣式。

這是進(jìn)行這些編輯后的完整功能：

function tutpslus_list_locations_child_pages() {
    			
	global $post;
	
	// define the page they need to be children of
	$page = get_page_by_path( 'locations', OBJECT, 'page' );
    
    $parentpage = $page->ID;
    
    // define args
	$args = array(
		'parent' => $parentpage,
		'sort_order' => 'ASC',
		'sort_column' => 'menu_order',
	);
	
	//run get_posts
	$children = get_pages( $args );
	
	if ( $children ) { ?>
	
		<div class="child-page-listing">
			
			<h2><?php _e( 'Our Locations', 'tutsplus' ); ?></h2>
		
			<?php //foreach loop to output
			foreach ( $children as $post ) {
				
				setup_postdata( $post ); ?>
				
				<article id="<?php the_ID(); ?>" class="location-listing" <?php post_class(); ?>>
					
					<?php if ( has_post_thumbnail() ) { ?>
					
						<a class="location-title" href="<?php the_permalink(); ?>">
							<?php the_title(); ?>
						</a>
						
						<div class="location-image">	
							<a href="<?php the_permalink(); ?>">
								<?php the_post_thumbnail( 'medium' ); ?>
							</a>
						</div>	
				
					<?php }	?>
				
				</article>	
				
			<?php } ?>
			
		</div>
		
	<?php }
			
}

將代碼添加到主題

您需要再次將代碼添加到主題中。在這種情況下，您不僅希望列表在靜態(tài)頁(yè)面中輸出，而且可能希望將其放在不同的位置。

如果您的主題有操作掛鉤，您可以在插件文件中使用其中之一，方式與之前類似：

add_action( 'before_footer', 'tutpslus_list_locations_child_pages' );

我將把它添加到我的主題的頁(yè)腳中，再次在我的子主題中創(chuàng)建 footer.php 的副本并對(duì)其進(jìn)行編輯。

這是我的 footer.php 文件中的代碼，位于 footer 元素的開(kāi)頭：

<?php tutpslus_list_locations_child_pages(); // list locations pages ?>

這是我的頁(yè)腳中的列表輸出。這是在單個(gè)帖子的底部：

提示：如果出現(xiàn)以下情況，您可能希望避免在位置頁(yè)面中輸出此列表：您同時(shí)運(yùn)行這兩個(gè)函數(shù)，以避免重復(fù)。嘗試使用頁(yè)面 ID 添加條件標(biāo)記來(lái)實(shí)現(xiàn)此目的。

后續(xù)步驟

您現(xiàn)在有兩個(gè)頁(yè)面列表：一個(gè)是當(dāng)前頁(yè)面的子頁(yè)面，另一個(gè)是特定頁(yè)面的子頁(yè)面。

現(xiàn)在，圖像都被推到頁(yè)面的一側(cè)，標(biāo)題看起來(lái)不太好。在這個(gè)由兩部分組成的教程的下一部分（鏈接如下）中，您將學(xué)習(xí)如何設(shè)置圖像樣式以創(chuàng)建具有 CSS 網(wǎng)格布局的網(wǎng)格，以及如何將標(biāo)題文本集成到該網(wǎng)格中。