Storefront homepage template

Hi @mirquintilianus,

Welcome to WordPress! A lot of us got our starts like you; digging into a theme’s code to figure out how everything works. Let’s take a quick tour of the Storefront theme’s home page.

To understand which template file is loaded, I would suggest taking a look at this guide. I’m going to skip over this section and just look at what happens once the template-homepage.php file is loaded.

https://developer.wordpress.org/themes/basics/template-hierarchy/

Let’s see what happens inside the file when it loads.

		<main id="main" class="site-main" role="main">

			<?php
			/**
			 * Functions hooked in to homepage action
			 *
			 * @hooked storefront_homepage_content      - 10
			 * @hooked storefront_product_categories    - 20
			 * @hooked storefront_recent_products       - 30
			 * @hooked storefront_featured_products     - 40
			 * @hooked storefront_popular_products      - 50
			 * @hooked storefront_on_sale_products      - 60
			 * @hooked storefront_best_selling_products - 70
			 */
			do_action( 'homepage' );
			?>

		</main><!-- #main -->

What’s happening is we have an action firing called “homepage.” The developers have added notes to let us know what functions are being called here. Take the first one, storefront_homepage_content for example. If we search the code in the theme, we find this function is located inside the storefront-template-functions.php file. Here’s what it looks like:

if ( ! function_exists( 'storefront_homepage_content' ) ) {
	/**
	 * Display homepage content
	 * Hooked into the <code>homepage</code> action in the homepage template
	 *
	 * @since  1.0.0
	 * @return  void
	 */
	function storefront_homepage_content() {
		while ( have_posts() ) {
			the_post();

			get_template_part( 'content', 'homepage' );

		} // end of the loop.
	}
}

This starts a WordPress loop that will ultimately display the content that’s been entered into the page editor for the home page. If you keep following these functions by searching them out, you’ll finally end up here:

if ( ! function_exists( 'storefront_page_content' ) ) {
	/**
	 * Display the post content
	 *
	 * @since 1.0.0
	 */
	function storefront_page_content() {
		?>
		<div class="entry-content">
			<?php the_content(); ?>
			<?php
				wp_link_pages(
					array(
						'before' => '<div class="page-links">' . __( 'Pages:', 'storefront' ),
						'after'  => '</div>',
					)
				);
			?>
		</div><!-- .entry-content -->
		<?php
	}
}
<code></code>

This will display the content on the home page as well as pagination links if the home page content is set to be on more than one page.

There are lots of nested functions/actions here, but you can search for each one in your code editor to find the next. They all do eventually have an end where content is ultimately added.

I hope that points you in the right direction. Let us know if you have any questions.

Thanks!

Hi @mirquintilianus,

One point I forgot to mention. Once Gutenberg blocks were introduced the developers recreated the layout of the home page template using blocks. They made this available for new installations of Storefront.

That makes it much easier to rearrange and add content to the home pages. Now instead of using a plugin or writing custom code, you can simply use the block editor to make the changes. It’s a better experience for everyone.

Cheers!

Hey @mirquintilianus,

I totally agree that it’s best to focus on something specific when trying to learn a new concept. Gutenberg blocks are quite a bit different from the PHP code that’s made up most of WordPress’s code for years. It’s largely JavaScript based.

The developers do have some documentation you can use to figure out how it all fits together. Here’s the URL to it on GitHub

https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/docs

You may also find it helpful to read some general posts about Gutenberg Blocks, how they are made and work. That would also be a helpful starting point.

https://developer.wordpress.org/block-editor/packages/packages-create-block/