[Bill KParticipant]

hi guys,

I’m diving into Custom Post Types and custom page templates for the first time and I’m hoping you can point me in the right direction.

I understand that I need to create child theme, copy over and edit the applicable PHP files.

But what I’m still not clear about after digging around for hours, is how to translate the perfect page layout that I’ve created in Cornerstone to the PHP file, and insert the right data placeholders for the custom fields within that custom post type.

Here’s the use case: client is a school, they have dozens of classes. I created the layout for the class page I like using Cornerstone. But instead of just cloning each page and editing/changing the data using CS, I think it would be smarter to just use a CPT so that it is faster and easier to input the data (text, button links, photos, embedded video, gallery) and a custom page template to output that data. (it will also make it much easier for school admins to make small changes in the future by just editing the CPT and not the page).

I would use both an archive page to show excerpts of each class, then a single full page for each class (also accessed via the nav menu).

Since I’m not well-versed in PHP, I was hoping there was a way to look at the code output by Cornerstone, cut and paste that into the PHP file– maybe using “do-shortcode”?? But then replace the text, images, and links with data placeholders that pull in the CPT data.

I understand this may be beyond normal support, so just pointing me in the right direction would be great. Like I said, I know about copying/renaming all the applicable PHP files, I just don’t know where to start to actually edit those PHP files to replicate the layout I’ve created with Cornerstone.

Thanks!

PS– this sure seems like it would be a killer feature to have built-in — that is, the ability to create page templates using Cornerstone that hook to CPTs. The ultimate customizing machine!!

[RadModerator]

Hi there,

Thanks for posting in.

I’m not really sure if I’m able to help, so Ill give you some recommendation.

1. Install a 3rd party plugin that will let you create custom post type, taxonomy. Example plugin should be like this https://wordpress.org/plugins/custom-post-type-ui/screenshots/

2. Duplicate X’s templates to your child theme of same folder structure,

/x/single.php
/x/framework/views/{CURRENT_STACK}/wp-single.php
/x/framework/views/{CURRENT_STACK}/content.php

3. Simply rename your copied templates to match your custom post type, let’s say class post type.

A complete example,

/x-child/single-class.php
/x-child/framework/views/integrity/wp-single-class.php
/x-child/framework/views/integrity/content-class.php

4. Then edit those templates to change the coding to properly point the templates.

Like, from single-class.php, change this code :

<?php x_get_view( x_get_stack(), 'wp', 'single' ); ?>

to this,

<?php x_get_view( x_get_stack(), 'wp', 'single-class' ); ?>

then proceed to other template codes, they should reflect the new filenames. Like these,

<?php x_get_view( 'integrity', 'content', 'class' ); ?> or <?php x_get_view( 'integrity', 'content-class' ); ?>

5. (Optional) Repeat same process if you wish to use other templates for your post type, like duplicate, rename, and re-code.

Example, you wish to extend the template change up to /x/framework/views/global/_content.php based from existing code <?php x_get_view( 'global', '_content' ); ?>

6. Assuming you’re familiar with wordpress custom fields, then you can start editing your template to add your custom fields. It can be added like this,

<?php echo get_post_meta( get_the_ID() , 'YOUR_FIELD_NAME', true ); ?>

Just change the field name according to your added custom fields.

7. And if you wish to replicate the layout, then you can simply copy the text content generated by cornerstone from your existing page and execute it at your template like this,

<?php echo do_shortcode('[CONTENT THAT IS COPIED FROM YOUR EXISTING CORNERSTONE ENABLED PAGE]'); ?>

8. The question will be how do you add custom fields automatically inside cornerstone? Simply edit your content and do it something like this.

<?php echo do_shortcode('[X_SECTION][X_TEXT]'.get_post_meta( get_the_ID() , 'YOUR_FIELD_NAME', true ).'[/X_TEXT][/X_SECTION]'); ?>

There, your custom field value should appear within your copied layout.

That’s all what I can provide and thanks for understanding 🙂

[Bill KParticipant]

That is awesome. Just what I needed! Super sweet, can’t wait to try it out. Should be a sticky post or KB article, IMO.

Thanks!

(and I still think it would be a fantastic feature to do this all through a UI)

[Paul RModerator]

You’re welcome! 🙂

[Bill KParticipant]

Ok, I’m _so_ close. I think these questions may still fall under the realm of your support (I hope).

I’ve edited my wp-single-class.php to include my layout and custom fields, and it’s brilliant. But here is my issue: I don’t know how to get rid of the blog title at the top of the page (post).

It is showing the main blog title as designated in the Customizer (“news & Events”), but there should be no title on these custom posts.

Here is a post sample: http://8d6.098.myftpupload.com/class/animation/

And here is my wp-single PHP code:

<?php

// =============================================================================
// VIEWS/RENEW/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Renew.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

?>

<?php get_header(); ?>
  
  <div class="x-container max width offset">
    <div class="<?php x_main_content_class(); ?>" role="main">

      <?php while ( have_posts() ) : the_post(); ?>
        <?php x_get_view( 'renew', 'content', 'class' ); ?>
        <?php x_get_view( 'global', '_comments-template' ); ?>
        <?php echo do_shortcode('

[x_section style="margin: 0px 0px 0px 0px; padding: 0px 0px 45px 0px; "][x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/1" style="padding: 0px 0px 0px 0px; "][x_custom_headline level="h1" looks_like="h2" accent="true" class="center-text myaccent, h-responsive"]'.get_post_meta(get_the_ID() , 'class_name', true ).' [/x_custom_headline][/x_column][/x_row][/x_section][x_section bg_color="" style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; "][x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/1" style="padding: 0px 0px 0px 0px; "][x_text]'.get_post_meta(get_the_ID() , 'class_description', true ).'[/x_text][x_gap size="30px"][/x_column][/x_row][x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/1" style="padding: 0px 0px 0px 0px; "][x_video_embed no_container="true" type="16:9"]'.get_post_meta(get_the_ID() , 'class_video', true ).'[/x_video_embed][x_line][/x_column][/x_row][/x_section][x_section style="margin: 0px 0px 0px 0px; padding: 0px 0px 45px 0px; "][x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/1" style="padding: 0px 0px 0px 0px; "][x_custom_headline level="h2" looks_like="h3" accent="false" class="left-text mtn"]Meet the Instructor[/x_custom_headline][/x_column][/x_row][x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/4" style="padding: 0px 0px 0px 0px; "][x_gap size="8px"][x_image type="none" src='.get_post_meta(get_the_ID() , 'instructor_image', true ).' alt="" link="false" href="#" title="" target="" info="none" info_place="top" info_trigger="hover" info_content=""][x_text]<h5 class="mtn">'.get_post_meta(get_the_ID() , 'instructor_name', true ).'</h5>[/x_text][x_text][icon type="phone"] <a href="callto:'.get_post_meta(get_the_ID() , 'instructor_phone', true ).'" target="_blank">'.get_post_meta(get_the_ID() , 'instructor_phone', true ).'</a>
[icon type="envelope"] <a href="mailto:'.get_post_meta(get_the_ID() , 'instructor_email', true ).'" target="_blank">Email</a>
[icon type="globe"] <a href="'.get_post_meta(get_the_ID() , 'instructor_website', true ).'" target="_blank">Instructor Website</a>[/x_text][/x_column][x_column bg_color="" type="3/4" style="padding: 0px 0px 0px 0px; "][x_text]'.get_post_meta(get_the_ID() , 'instructor_greeting', true ).'[/x_text][/x_column][/x_row][/x_section][x_section parallax="false" bg_image="http://8d6.098.myftpupload.com/wp-content/uploads/2015/10/background-blue.jpg" bg_color="" style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; "][x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/1" style="padding: 0px 0px 0px 0px; "][x_callout title="Join the Team" message="Apply for the '.get_post_meta(get_the_ID() , 'class_name', true ).' Class Today!" type="center" button_text="Apply Now" circle="false" button_icon="thumbs-o-up" href="https://snoisletechtest.com/SIReg/" href_title="" target="blank"][/x_column][/x_row][/x_section][x_section style="margin: 0px 0px 0px 0px; padding: 0px 0px 45px 0px; "][x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/1" style="padding: 0px 0px 0px 0px; "][x_custom_headline level="h2" looks_like="h4" accent="false" class="center-text "]Class Photo Gallery[/x_custom_headline][x_text]

[foogallery id="'.get_post_meta(get_the_ID() , 'gallery_id', true ).'"]

[/x_text][/x_column][/x_row][/x_section][x_responsive_text selector=".h-responsive" compression="1.4" min_size="30" max_size="46"]'); ?>
      <?php endwhile; ?>

    </div>

    <?php if ( $fullwidth != 'on' ) : ?>
      <?php get_sidebar(); ?>
    <?php endif; ?>

  </div>

<?php get_footer(); ?>

And here is my content-class PHP:

<?php

// =============================================================================
// VIEWS/RENEW/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Renew.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <?php x_get_view( 'renew', '_content' ); ?>
    <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php x_featured_image(); ?>
      </div>
    <?php endif; ?>
    <?php x_get_view( 'global', '_content' ); ?>
  </div>
</article>

and here is my single-class.php:

<?php

// =============================================================================
// SINGLE.PHP
// -----------------------------------------------------------------------------
// Handles output of individual posts.
//
// Content is output based on which Stack has been selected in the Customizer.
// To view and/or edit the markup of your Stack's posts, first go to "views"
// inside the "framework" subdirectory. Once inside, find your Stack's folder
// and look for a file called "wp-single.php," where you'll be able to find the
// appropriate output.
// =============================================================================

?>

<?php x_get_view( x_get_stack(), 'wp', 'single-class' ); ?>

OH- and one more thing I just remembered– the background behind my JOIN THE TEAM call to action should be full-width– in fact everything should be full-width, but it doesn’t seem to quite be so.

What am I doing wrong?

Mahalo!

[Paul RModerator]

Hi,

To remove title, you can add this under Custom > CSS in the Customizer.

.single-class .x-header-landmark {
    display:none;
}

Then to make it full width, change the code in wp-single with this.

<?php

// =============================================================================
// VIEWS/RENEW/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Renew.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

?>

<?php get_header(); ?>
  
  <div class="single-container">
    <div class="<?php x_main_content_class(); ?>" role="main">

      <?php while ( have_posts() ) : the_post(); ?>
        <?php x_get_view( 'renew', 'content', 'class' ); ?>
        <?php x_get_view( 'global', '_comments-template' ); ?>
        <?php echo do_shortcode('

[x_section style="margin: 0px 0px 0px 0px; padding: 0px 0px 45px 0px; "][x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/1" style="padding: 0px 0px 0px 0px; "][x_custom_headline level="h1" looks_like="h2" accent="true" class="center-text myaccent, h-responsive"]'.get_post_meta(get_the_ID() , 'class_name', true ).' [/x_custom_headline][/x_column][/x_row][/x_section][x_section bg_color="" style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; "][x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/1" style="padding: 0px 0px 0px 0px; "][x_text]'.get_post_meta(get_the_ID() , 'class_description', true ).'[/x_text][x_gap size="30px"][/x_column][/x_row][x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/1" style="padding: 0px 0px 0px 0px; "][x_video_embed no_container="true" type="16:9"]'.get_post_meta(get_the_ID() , 'class_video', true ).'[/x_video_embed][x_line][/x_column][/x_row][/x_section][x_section style="margin: 0px 0px 0px 0px; padding: 0px 0px 45px 0px; "][x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/1" style="padding: 0px 0px 0px 0px; "][x_custom_headline level="h2" looks_like="h3" accent="false" class="left-text mtn"]Meet the Instructor[/x_custom_headline][/x_column][/x_row][x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/4" style="padding: 0px 0px 0px 0px; "][x_gap size="8px"][x_image type="none" src='.get_post_meta(get_the_ID() , 'instructor_image', true ).' alt="" link="false" href="#" title="" target="" info="none" info_place="top" info_trigger="hover" info_content=""][x_text]<h5 class="mtn">'.get_post_meta(get_the_ID() , 'instructor_name', true ).'</h5>[/x_text][x_text][icon type="phone"] <a href="callto:'.get_post_meta(get_the_ID() , 'instructor_phone', true ).'" target="_blank">'.get_post_meta(get_the_ID() , 'instructor_phone', true ).'</a>
[icon type="envelope"] <a href="mailto:'.get_post_meta(get_the_ID() , 'instructor_email', true ).'" target="_blank">Email</a>
[icon type="globe"] <a href="'.get_post_meta(get_the_ID() , 'instructor_website', true ).'" target="_blank">Instructor Website</a>[/x_text][/x_column][x_column bg_color="" type="3/4" style="padding: 0px 0px 0px 0px; "][x_text]'.get_post_meta(get_the_ID() , 'instructor_greeting', true ).'[/x_text][/x_column][/x_row][/x_section][x_section parallax="false" bg_image="http://8d6.098.myftpupload.com/wp-content/uploads/2015/10/background-blue.jpg" bg_color="" style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; "][x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/1" style="padding: 0px 0px 0px 0px; "][x_callout title="Join the Team" message="Apply for the '.get_post_meta(get_the_ID() , 'class_name', true ).' Class Today!" type="center" button_text="Apply Now" circle="false" button_icon="thumbs-o-up" href="https://snoisletechtest.com/SIReg/" href_title="" target="blank"][/x_column][/x_row][/x_section][x_section style="margin: 0px 0px 0px 0px; padding: 0px 0px 45px 0px; "][x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/1" style="padding: 0px 0px 0px 0px; "][x_custom_headline level="h2" looks_like="h4" accent="false" class="center-text "]Class Photo Gallery[/x_custom_headline][x_text]

[foogallery id="'.get_post_meta(get_the_ID() , 'gallery_id', true ).'"]

[/x_text][/x_column][/x_row][/x_section][x_responsive_text selector=".h-responsive" compression="1.4" min_size="30" max_size="46"]'); ?>
      <?php endwhile; ?>

    </div>

    <?php if ( $fullwidth != 'on' ) : ?>
      <?php get_sidebar(); ?>
    <?php endif; ?>

  </div>

<?php get_footer(); ?>

Hope that helps.

[Bill KParticipant]

Ahh– “Single container” vs. “x-container max width”. Who knew?

Anyway, a new customization world has just opened up to me!!

http://giphy.com/gifs/zyin7TYoGmLAs/html5

[Paul RModerator]

Hi Bill,

Just so you know single-container doesn’t do anything.

I just added it as a class to your div for future reference.

To make it full width, you just need to remove x-container max width class as it constrains the width of your div.

Hope that makes sense.

[Bill KParticipant]

Hello again guys,

I successfully implemented your prior instructions, and everything is brilliant with the “Class” CPT.

So I tried duplicating things for another CPT, this one named “Job” but something isn’t quite right, as I just get 404s when I try to view the post.

So I’ve two related questions around this.

#1– need a quick debug of my PHP files to see if I’ve done something wrong (it may be that somewhere in those files I mistook my custom post type “class” for the php-based term “class”).

#2– I still haven’t figured out how to create or view an Index page for either of these post types.

Ok, so #1, here is my code, in child/framework/views/renew: content-job.php (this is one where I wasn’t sure if post_class was supposed to be replaced with post_job)

<?php

// =============================================================================
// VIEWS/RENEW/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Renew.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <?php x_get_view( 'renew', '_content' ); ?>
    <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php x_featured_image(); ?>
      </div>
    <?php endif; ?>
    <?php x_get_view( 'global', '_content' ); ?>
  </div>
</article>

wp-single-job.php

<?php

// =============================================================================
// VIEWS/RENEW/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Renew.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

?>

<?php get_header(); ?>
  
  <div class="single-container">
    <div class="<?php x_main_content_job(); ?>" role="main">

      <?php while ( have_posts() ) : the_post(); ?>
        <?php x_get_view( 'renew', 'content', 'job' ); ?>
        <?php x_get_view( 'global', '_comments-template' ); ?>
        <?php echo do_shortcode('

[x_section bg_color="#eeeeee" style="margin: 0px 0px 0px 0px; padding: 45px 0px 45px 0px; "][x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/1"  style="padding: 0px 0px 0px 0px; "][x_custom_headline level="h1" looks_like="h2" accent="false" class="left-text mtn"]'.get_post_meta(get_the_ID() , 'job_title', true ).'[/x_custom_headline]

[x_text]<h6>Job Description</h6>'.get_post_meta(get_the_ID() , 'job_description', true ).'[/x_text][/x_column][/x_row]

[x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/2"  style="padding: 0px 0px 0px 0px; "][x_text]<h6>Company:</h6>'.get_post_meta(get_the_ID() , 'company_name', true ).'[/x_text]

[x_text]<h6>Location</h6>'.get_post_meta(get_the_ID() , 'company_location', true ).'[/x_text]

[x_text]<h6>Website</h6>'.get_post_meta(get_the_ID() , 'company_website', true ).'[/x_text]

[x_text]<h6>Job Title</h6>'.get_post_meta(get_the_ID() , 'job_title', true ).'[/x_text][/x_column]

[x_column bg_color="" type="1/2"  style="padding: 0px 0px 0px 0px; "][x_text]<h6>Contact Name</h6>'.get_post_meta(get_the_ID() , 'contact_name', true ).'[/x_text]

[x_text]<h6>Contact Email</h6>'.get_post_meta(get_the_ID() , 'contact_email', true ).'[/x_text]

[x_text]<h6>Contact Phone</h6>'.get_post_meta(get_the_ID() , 'contact_phone', true ).'[/x_text]

[x_text]<h6>Link to Application</h6>'.get_post_meta(get_the_ID() , 'application_link', true ).'[/x_text][/x_column][/x_row]

[x_row inner_container="true" marginless_columns="false" bg_color="" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "][x_column bg_color="" type="1/1"  style="padding: 0px 0px 0px 0px; "][x_line][/x_column][/x_row][/x_section]

[x_responsive_text selector=".h-responsive" compression="1.4" min_size="30" max_size="60"]'); ?>
      <?php endwhile; ?>

    </div>

    <?php if ( $fullwidth != 'on' ) : ?>
      <?php get_sidebar(); ?>
    <?php endif; ?>

  </div>

<?php get_footer(); ?>

And in child root: single-job.php

<?php

// =============================================================================
// SINGLE.PHP
// -----------------------------------------------------------------------------
// Handles output of individual posts.
//
// Content is output based on which Stack has been selected in the Customizer.
// To view and/or edit the markup of your Stack's posts, first go to "views"
// inside the "framework" subdirectory. Once inside, find your Stack's folder
// and look for a file called "wp-single.php," where you'll be able to find the
// appropriate output.
// =============================================================================

?>

<?php x_get_view( x_get_stack(), 'wp', 'single-job' ); ?>

Thx guys!

[RadModerator]

Hi there,

1. 404 means that your job post type’s permalink structure aren’t generated yet. Please go to Admin > Settings > Permalinks and save it again.

2. That’s quite tricky, but try this easy step. Duplicate this file /themes/x/index.php into your child theme with these names.

/themes/x-child/archive-class.php
/themes/x-child/archive-job.php

Again, you may follow similar step above for duplicating index.php’s template parts (chained templates). This way, you can just customize duplicated templates that are related to index.php.

3. Do not change post_class, in fact, do not change anything. Just change the codes mentioned here in our discussion 🙂 (eg. template file name and template name used for x_get_view(), and other custom codes not belong to original template)

Thanks!

[atseng3Participant]

Hi,

I’m trying to create a custom post type as well, I’ve followed the steps to install CPT UI, but don’t know what to do with that plugin…

for steps 2 – 5 I’ve duplicated “single.php”, “content.php”, and “wp-single.php” to my child theme integrity folder and changed the name to “single-events.php” etc. but do not see any changes on my posts.

What am I doing wrong?

Thanks in advance!

[Rue NelModerator]

Hello There,

Thanks for updating this thread! To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[Author]

Posts