[Resolved] Recreating page template (or equivalent functionality) from former Genesis site

[Teresa]

Hello 🙂

I’m working on a site I pulled out of Genesis & into GP. I have GP Premium, WP Show Posts Pro & Generate Blocks installed.

The site has a shop page/functionality that uses a CPT created with a code snippet to pull in ACF fields and scripts from SendOwl, where the client’s e-commerce processing/fulfillment actually take place.

(it’s a lightweight, easy-to-manage solution for the client, despite all the duct tape)

I rebuilt/reformatted the shop code so that it now uses GP structure and classes. It’s all in code snippets, except for what was once a single page Genesis template.

That template outputs the images, product title, price, SendOwl stuff, etc. into the page. The code is below this message in case it would be helpful.

Q: With GB’s inbuilt functionality, Elements, hooks, etc., would I need a page template to output the content? Or can I do it via an Element of some kind? Or a code snippet that uses an action or filter?

I have tried a few ways, but I’m super basic with PHP and the loop (copy/paste is my jam, tho) so failing with all of it right now.

Thanks for any insight/assistance.

remove_action('genesis_loop', 'genesis_do_loop');
remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );
remove_action('genesis_before_post_content', 'genesis_post_info');

remove_action('genesis_entry_content', 'genesis_do_post_content');

add_action('genesis_loop', 'custom_loop');

function custom_loop() {

	if ( have_posts() ) :

	    do_action( 'genesis_before_while' );
	    while ( have_posts() ) : the_post();

	$images = get_field('image_gallery');
	$size = 'thumbnail'; ?>

    <div class="section-product">
	    <div class="section-image">
	    	<img id="main-image" src="<?php the_field('main_image'); ?>" />
	    	<?php
				if( $images ): ?>
				    <ul>
				        <?php foreach( $images as $image ): ?>
				            <li>
				            	<a class="thumb" rel="group" href="<?php echo $image['url']; ?>"><?php echo wp_get_attachment_image( $image['ID'], $size ); ?></a>
				            </li>
				        <?php endforeach; ?>
				    </ul>
				<?php endif; ?>
	    </div>
	    <div class="section-details">
		    <h1 class="entry-title"><?php the_title(); ?></h1>
		    <div class="price">US$<?php the_field('price'); ?></div>
		    <div class="the-content"><?php the_content(); ?></div>
		    <?php do_action( 'genesis_entry_content' ); ?>
			<div class="cart-buttons">
				<a class="button button-small" href="<?php the_field('buy_now_link'); ?>">Buy Now</a>
				<a class="button" href="<?php the_field('add_to_cart_link'); ?>">Add to Cart</a>
			</div>
		</div>
	</div>
<?php
    endwhile; // End of one post.
    do_action( 'genesis_after_endwhile' );

else : // If no posts exist.
    do_action( 'genesis_loop_else' );
endif; // End loop.

}

genesis(); 

[Tom]

Hi there,

That template looks like you’re supplying 100% of the data on that page – it’s not using the_content() to output anything else. In that case, it would probably be cleaner just to build a simple custom template in the child theme.

You could do it without the custom template/child theme if that’s an issue. Let me know if you want to go that route 🙂

[Teresa]

Thanks for that input, Tom.

I’m all for cleaner, and I’m not opposed to a custom template. Just clueless. Also not using a child theme. Is a child theme a necessary prerequisite for a custom template?

[Leo]

Is a child theme a necessary prerequisite for a custom template?

Yes – you can download a blank one here:
https://docs.generatepress.com/article/using-child-theme/

[Teresa]

Thank you for the link to the child theme page and file, Leo. It was helpful.

Somewhere in the support forum I saw Tom tell someone to start with the GP index.php file, so that’s what I copied over for a starter template.

Would there have been a better file to copy to the child theme, given this comment from Tom?:

That template looks like you’re supplying 100% of the data on that page – it’s not using the_content() to output anything else.

The index.php file works, but is confusing because there’s a lot of stuff in it I don’t need. I’m not sure what I can safely delete, so if there’s something even more pared down that’d be great.

[Teresa]

I read through several more forum posts related to custom templates, and it seemed more like I needed to start with the single template.

The page needs to display content entered into ACF fields, e.g., item name, description price, an image gallery.

I’m struggling because, despite reading numerous posts on GP templates, I don’t have a good understanding of how they’re working. I’m trying >_<

Also confusing is that the loop and actions in the original Genesis template are different from the GP templates. I’ve tried several ways to bring in the custom loop function that displays the ACF variables, and I either get no field content or I make WP die.

Here’s the heart of the single template, which I assume is where I need to focus:

do_action( 'generate_before_main_content' );

			if ( generate_has_default_loop() ) {
				while ( have_posts() ) :

					the_post();

					generate_do_template_part( 'single' );

				endwhile;
			}

			/**
			 * generate_after_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_after_main_content' );

generate_do_template_part( ‘single’ ) – If I delete this I don’t get the content from the post. Is this another thing I have to create a template for? Or can I use something else? If I have to create another template, can you point me to an example?

Here is a somewhat abbreviated version (deleted some HTML) of the custom loop function that works on the live/Genesis site:

function custom_loop(){

    if (have_posts()):

        do_action('genesis_before_while');
        while (have_posts()):
            the_post();

            $images = get_field('image_gallery');
            $size = 'thumbnail'; ?>
	    <img id="main-image" src="<?php the_field('main_image'); ?>" />
	    	<?php
            if ($images): ?>
		<ul>
	        <?php foreach ($images as $image): ?>
			<li>
				<a class="thumb" rel="group" href="<?php echo $image['url']; ?>"><?php echo wp_get_attachment_image($image['ID'], $size); ?></a>
			</li>
			<?php
                endforeach; ?>
		</ul>
		<?php
            endif; ?>
	    </div>
	    <div class="section-details">
		    <h1 class="entry-title"><?php the_title(); ?></h1>
		    <div class="price">US$<?php the_field('price'); ?></div>
		    <div class="the-content"><?php the_content(); ?></div>
		    <?php do_action('genesis_entry_content'); ?>
			<div class="cart-buttons">
				<a class="button button-small" href="<?php the_field('buy_now_link'); ?>">Buy Now</a>
				<a class="button" href="<?php the_field('add_to_cart_link'); ?>">Add to Cart</a>
			</div>
		</div>
	</div>
<?php
        endwhile; // End of one post.
        do_action('genesis_after_endwhile');

    else: // If no posts exist.
        do_action('genesis_loop_else');
    endif; // End loop.
    
}

Do you have suggestions or examples for using the ACF fields in that loop in the GP loop?

You could do it without the custom template/child theme if that’s an issue. Let me know if you want to go that route 🙂

Is this a more workable option all things considered?

Thanks for any assistance/insight you can provide.

[Tom]

If I delete this I don’t get the content from the post

Do you want the content from the post? I thought this was a completely custom template with data from custom fields and nothing else? If you do need the post content, where are the custom fields going to be output? You may be able to use Hook Elements in this case.

Let me know 🙂

[Teresa]

I finally got it going with the child theme/template (thank heavens); bit of presentational CSS is all that’s left.

The maddening thing about this stuff (loop, actions, hooks) is that complete failure often looks identical to being almost there.

The first issue was not really understanding the different parts that needed to come together to create ‘a’ template. If anyone runs across this later, to answer my own question from earlier in the thread – yes, you often do need a couple of templates. This WP Shout article was helpful in getting my head (kind of…LOL) around template parts.

This post where Tom helped someone with a similar challenge led to one piece of the puzzle, which was understanding both file naming and correctly referencing those files in the templates.

I also wasn’t sure what parts of the content loop needed to be in the files. Not zero parts, I learned pretty quickly.

Finally, there was the issue of leftover Genesis hooks/actions that didn’t seem to have a GP equivalent, or at least not one that was documented. Once I got the template set up correctly and started messing around with the HTML/PHP, deleting the Genesis stuff turned out to be less of an issue than I feared.

What I did that worked:

• Copied GP single.php to the child theme & renamed it single-quilt_patterns.php (quilt_patterns is the name of the CPT).
• Changed generate_do_template_part( ‘single’ ) to get_template_part( ‘content-single’, ‘quilt_patterns’ ).
• Copied GP content-single.php to the child theme & renamed it content-single-quilt_patterns.php.
• Iteratively added elements of the former Genesis template until I got what I needed.

Do you want the content from the post?

Most of the content was in ACF, but the person who helped the client set up the current version of her shop left the post content/editor in place, so that’s where all the client’s product copy is.

I thought this was a completely custom template with data from custom fields and nothing else? If you do need the post content, where are the custom fields going to be output? You may be able to use Hook Elements in this case.

As long as I’m not doing anything that’s not forward-compatible or that would have a negative impact on performance I think I’ll continue on with the child theme. But if there are drawbacks to what I’ve done that would affect the client, then Hook Elements would be better and I’ll do it over.

My changes to single.php:

if ( generate_has_default_loop() ) {
   while ( have_posts() ) :
      the_post();
   get_template_part( 'content-single', 'quilt_patterns' );				
   endwhile;
}

This is what I wound up with that brings in the ACF and post content:

<div class="section-product">
   <div class="section-image">
      <img id="main-image" src="<?php the_field('main_image'); ?>" />
   </div>
   <?php
      $images = get_field('image_gallery');
             $size = 'thumbnail'; ?>
   <div class="gallery_container">
      <?php if ($images): ?>
      <?php foreach ($images as $image): ?>
      <div class="gallery_item">
         <a class="thumb" rel="group" href="<?php echo $image['url']; ?>">
         <?php echo wp_get_attachment_image($image['ID'], $size); ?>
         </a>
      </div>
      <?php
         endforeach; ?>
   </div>
</div>
<?php
   endif; ?>
</div>
<div class="section-details">
   <div class="price">US $<?php the_field('price'); ?></div>
   <div class="cart-buttons">
      <a class="button button-small" href="<?php the_field('buy_now_link'); ?>">Buy Now</a>
      <a class="button" href="<?php the_field('add_to_cart_link'); ?>">Add to Cart</a>
   </div>
   <div class="the-content"><?php the_content(); ?></div>
</div>

[Tom]

That all looks good to me – you shouldn’t run into any update/performance issues. Thanks for sharing your process – I’m sure others will find it helpful 🙂

[Teresa]

YW, and thanks for confirming it’s good now.

[Author]

Posts