Basic Custom Template

[Porter]

I'm trying to create a custom template that essentially looks exactly the same as a full width page on my site (modified Genesis Child Theme). The only difference, is that I'll be inserting divs / designing the content area to read in fields from the Advanced Custom Fields plugin. For instance:

//Normal Template

<div class ="something">
      the_field("bar_summary");
</div>

<div class ="something else">
      the_field("bar_images");
</div>

the_field is the ACF function to fetch information, and I'll have various custom fields to fill out on my actual pages in the Dashboard using this template, rather than the default writing area WordPress supplies. My issue, is that I don't know how to essentially replicate the basic "full width" template, then add my custom code. It needs to have everything, breadcrumbs, same CSS for content area, header, footer, etc, I just need to insert my few bits of ACF functions. Is there a location that I can grab the full width template from?

Any ideas how I can go about doing this?

Example "full-width" page - http://anightinburlington.com/about
Page I'm trying to make a template for - http://anightinburlington.com/bars/bar-test

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Brad Dalton]

Try this http://wpsites.net/web-design/make-custom-page-template/

---

Tutorials for StudioPress Themes & WooCommerce.

[Porter]

Thanks for the answer, Brad. I tried to follow what was going on in that tutorial, but ended up with a mess. Here's what I have:

<?php
 
/**
* Template Name: Bars Page Template
* Description: Used for pages of the "Bars" location type.
*/

// Force full width page layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

// Add custom body class to the head
add_filter( 'body_class', 'add_body_class' );
function add_body_class( $classes ) {
   $classes[] = 'site-container site-inner content entry-content';
   return $classes;
}

the_field("bar_summary");
 
genesis();

I'm shooting blindly as to which classes I need to add to the $classes array, but I figured they would be the classes I see when I inspect the page design I'm trying to make, which is why I used those. For whatever reason, that gave me non-full width page, with a right align, that was all sorts of broken.

Earlier I played with the code a bit, and tried this:

<?php
 
/**
* Template Name: Bars Page Template
* Description: Used for pages of the "Bars" location type.
*/

add_action( 'genesis_before_entry_content', 'homepge_content' );  
function homepge_content() { ?>  
  
<div class="one-third first">  
Lorem ipsum dolor sam.....</div>  
<div class="one-third">  
Lorem ipsum dolor sit amet......</div>  
<div class="one-third">  
Lorem ipsum dolor sit amet......</div>
<?php }

genesis();

That gave me the header and footer via the genesis() call, and my content area was there with the breadcrumbs up top, which I assume is from the default loop. This is essentially what I want, though the approach is far different from yours, and I'm far less experienced and assume there's a fault with it. The other minor setback to this, is that I have one giant "chunk" of a piece (the content area), where as I might want to go with a design like I did on my home page (combinations of two-thirds and one-third areas).

As I said, I'm just a bit lost as to what else is needed in your approach to properly achieve what my approach does - mostly pertaining to the classes array, but probably a few other tweaks as well.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Brad Dalton]

ACF have many code examples which work in template files so i suggest you try them first.

---

Tutorials for StudioPress Themes & WooCommerce.

[DTHkelly]

Have you seen this?
http://sridharkatakam.com/single-cpt-template-genesis-display-acf-custom-fields-including-gallery-field-slider/

A custom post type template including ACF.

[Porter]

Thanks a lot, Kelly. That template at the bottom gave me enough to work with. It was essentially what I was doing before when I used the after content hook, but with a more suited hook, and with the removal of various items that weren't needed.

I now get that I can use this setup to keep the breadcrumbs / have a full page width design:

<?php
 
/**
* Template Name: Bars Page Template
* Description: Used for pages of the "Bars" location type.
*/

//* Force full width content
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
 
//* Remove Post Info
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
 
//* Remove Post Meta
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 );
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 );
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
 
//* Display custom fields above entry content
add_action( 'genesis_entry_content', 'custom_do_post_content', 9 );

function custom_do_post_content() {
	the_field("bar_summary");
        //More code here
}

genesis();

Or I can not use a hook (or use a non-content hook) and then individually style areas with css as I did with my widgetized home page. That should definitely be enough to get me started, and hopefully finished. This weekend should be fun 😀 Thanks again, Brad / Kelly.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Author]

Posts