Please, for the love of God, can someone give me precise directions on how to create a custom post archive page

Support
#1

Some background 1st… I’ve been trying to achieve a client-side create/edit/post custom post set up for 7 weeks now. I have read various posts and tutorials, but I can’t make the final page that shows all the custom posts to work. Something is missing in my process.

I’m hugely frustrated by this, and even more so because the tutorials keep telling me that this is a simple process.

This is the example of how I want the custom posts page to look - https://staging5.wellesleystudios.co.nz/wstutors/

The following are my steps and process…

  1. Staging site set up at https://staging5.wellesleystudios.co.nz/
  2. ThemeCo Pro theme and Child theme installed
  3. Advanced Custom Fields PRO plugin to add custom fields
  4. CPT UI plugin to add custom post type with Post Type Slug ‘tutor’
  5. Global Block called tutors with ACF fields entered to create a single tutor post (https://staging5.wellesleystudios.co.nz/tutor/katherine-avery/)
  6. Create .PHP page in Child theme as per recommended tutorials @ https://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-post-types-archive-page-in-wordpress/ and Custom Post Type - Archive - jQuery is not defined
  7. Create a page to show ‘tutor’ custom posts using Template Layout - Tutor
    https://staging5.wellesleystudios.co.nz/testing-tutors-layout-tutor/

I suspect that I’m close, but because I’ve been chasing my tail and going around in circles there is something that I’ve missed. If someone could just help me to make the above connect, I’m sure I can work it out from there.

Any help or suggestions will be greatly appreciated. This is doing my head in.

WP Dashboard and FTP access is in the secure note.

#2

Hello Paul,

Thanks for writing in! The given credentials do no work for us. Please double-check it so we can log in and check out your child theme’s template files for the custom post.

Best Regards.

#3

Hi @ruenel. Sorry, I updated the username. Updated credentials have been posted.

#4

b.t.w this is the page that I’m trying to get the tutor posts to shown on.

https://staging5.wellesleystudios.co.nz/testing-tutors-layout-tutor/

Many thanks.

#5

Hello Paul,

I can see that you based your custom post type on the theme’s portfolio custom post type. Be advised that the theme is using x-portfolio as the slug. In your case, you are using tutor:
Screen Shot 2020-12-12 at 8.43.19 AM

Screen Shot 2020-12-12 at 8.43.29 AM

which means that your filename should only be single-tutor. You should also take a look at the WordPress Template hierarchy here:

According to the default template hierarchy, it will look for the following files:
single-{custom-post-type}.php --> single.php --> index.php

This means that if there is no single-tutor.php, it will automatically use the single.php to display the contents of your “Tutor” custom post type. I would highly recommend that you removed all your custom files in the child theme for a fresh start. You should focus on displaying the Tutor post type on its own custom template with the single-tutor.php file.

You will have to do this step by step. Single Tutor page first then the Tutor Archive later.

Please let us know how it goes.

#6

Ok… I’ve deleted everything and ready to start. Is this the code that I write in the single-tutor.php file. to show the content in the Global Block?

<?php

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

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

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', get_post_format() ); ?>
        <?php echo do_shortcode( '[cs_gb id=14309]' ); ?>
        <?php x_get_view( 'global', '_comments-template' ); ?>
      <?php endwhile; ?>

    </div>

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

  </div>

<?php get_footer(); ?>
#7

@ruenel Please help me. I don’t understand and this is frustrating.
I need to know ‘What code’ to put into ‘What file’, ‘What name’ to give it and where to place the file. For instance, how do I get my custom Tutor posts to use the single-tutor.php?

#8

Hello Paul,

With the single-tutor.php file, you can check out the single.php as your base reference. You can then add some of your customizations to display on the single tutor page. At the moment, you are on the right track. Once you have created the single-tutor.php correctly, all your single Tutor custom post type will be using that single-tutor.php file.

Hint: To make sure that you are on the right track, you can add a my-custom-post class in one of the div containers in the code. For example, <div class="x-container max width offset my-custom-post"> so that when you are viewing a single tutor page and check the source code of the page (usually done by right-clicking on the page and then “View Source”) if you seeing the custom class then you are on the right track.

Screen Shot 2020-12-12 at 9.48.46 AM

And if you are going to use the custom post template solution, please properly name your template:

/*
 Template Name: Tutor
 Template Post Type: post, tutor
 */
#9

I’m defeated @ruenel. I don’t understand this. I’m so confused by it. I can’t work out what I’ve done and not done. I can’t see how it is all connected to one another.

Where do I put the single-tutor.php file? What code should be in it?

#10

Hello Paul,

I have made some changes to your child theme. Your single Tutor page is now using the single-tutor.php template now.

Screen Shot 2020-12-12 at 10.46.42 AM

And if you view the source code of the page, it is now displaying the custom class which I mentioned in my previous response.
Screen Shot 2020-12-12 at 10.49.07 AM

Kindly take note of the files and how they were connected to each other.

#11

Hi @ruenel. I missed your email and deleted the Child Theme folder and started again. I think that I may have worked it out.

I’ve got a template-single-tutor.php that allows me to choose the Single Tutor profile layout which is ‘wp-single-tutor.php’ in Framework > View > Renew.

I’ve also got a template-layout-tutor.php that allows me to choose the Multiple Tutor profile layout which is ‘wp-layout-tutors.php’ in Framework > View > Renew.

So I’m close… I just don’t know which code to copy (from Pro > Framework > Global & Pro Framework > View > Renew) and edit to make it work.

https://staging5.wellesleystudios.co.nz/testing-tutors-layout-tutor/

Sorry, could I trouble you for the final piece of the puzzle, please?

#12

Hello Paul,

The template will still not appear in your page or post template selector because of your wrong template naming. Please have this code removed:

/*
 * Template Name: Tutor
 * Template Post Type: post, tutor
 */

And replaced it with this:

/*
 Template Name: Tutor
 Template Post Type: post, tutor
 */

This is the correct way of using a custom template:
Screen Shot 2020-12-12 at 12.14.26 PM

You also have a wrong filename reference:

Screen Shot 2020-12-12 at 12.17.19 PM
Screen Shot 2020-12-12 at 12.17.19 PM1049×475 62.3 KB

Hope this helps.

#13

Hi @ruenel… I did what you suggested and now I have a blank page at https://staging5.wellesleystudios.co.nz/testing-tutors-layout-tutor/

Also, what is the code that I need to add to wp-layout-tutor.php to show the tutor posts on that page.

#14

Hi @ruenel… I have https://staging5.wellesleystudios.co.nz/testing-tutors-layout-tutor/ showing again, but I still can’t figure out what code I need in wp-layout-tutor.php to show the tutor posts on that page.

#15

Hello Paul,

It the wp-layout-tutor.php, framework/views/renew/wp-layout-tutor.php, will content this:

<?php

// =============================================================================
// VIEWS/RENEW/WP-INDEX.PHP
// -----------------------------------------------------------------------------
// Index page output for Renew.
// =============================================================================

get_header();

?>

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

      <?php x_get_view( 'global', '_tutor' ); ?>

    </div>

 

  </div>

<?php get_footer(); ?>

And in the tutor.php file, (framework/global/_tutor.php), will container similar code like in the portfolio _portfolio.php file. And then you also need to add another file named _script-isotope-tutor.php which also has the same code as the _script-isotope-portfolio.php file.

Kindly let us know how it goes.

#16

Hi @ruenel. I’ve actioned your requests above, but there is still something not working/not connecting. I’ve updated all occurrence of _script-isotope-portfolio.php to _script-isotope-tutor.php and portfolio to tutor, but again, I appear to have missed something. Can you please have a look and advise.

#17

Hi @ruenel. I’ve found this ThemeCo tutorial which is exactly what I trying to achieve - Layout Builder: Archive Templates. But my version of Pro doesn’t seem to have the same features i.e. the Looper Provider and Looper Container? Do I need to update?

#18

Hello Paul,

The Layout Builder, Looper Provider, and Looper Container features will be available in the upcoming release of Pro theme 4.0 which will be rolling out in the next few days. If you can wait a little longer, this will make your life easier without having to code anything to display a custom layout for your archive pages on your site.

Please watch out for it. You can actually test it by installing the beta on your staging site. You should be able to download it on your Themeco account license page.

See the secure note.

Thanks.

#19

Hi @ruenel. I did download the beta and have had a play with it. It is SO GOOD!. This will be a game-changer.

1 Like
#20

In the meantime @ruenel … are you able to have a quick look at my code and PHP files to see if you can see my mistake or why it’s not working, please?