Support » Developing with WordPress » Page not found on custom post type

  • how are you?

    I’m following a tutorial from GTCoding [How to Make a Custom Website from Scratch using WordPress (Theme Development)][1] and I’m on the part of creating the projects page, that is starting at time 3:11:46.

    The custom post type is working and I can see it as an option in the dashboard of the page and in the Home page all the post are shown, blogs and projects but, when I’m clicking in the projects page the title of the page shows “Page not found”, then ad the body of the page it shows the title for the blogs but not any blog o project. Is important so say that the author created the theme in the way that the blogs page and the projects page loads the content of index.php whose content is the following

    
    <?php get_header(); ?>
        <main>
            <a>">
                <h2 class="page-heading">Todos los Blogs</h2>
            </a>
            <section>
                <?php
                    while(have_posts()) {
                        the_post();
                ?>
                <div class="card">
                    <div class="card-image">
                        <a>">
                            <img  />" alt="Card Image">
                        </a>
                    </div>
                    <div class="card-description">
                        <a>">
                            <h3><?php the_title(); ?></h3>
                        </a>
                        <div class="card-meta">
                            Posted by <?php the_author(); ?> a las <?php the_time('F j, Y') ?> el
                            <a href="#"><?php echo get_the_category_list(', ') ?></a>
                        </div>
                        <p><?php echo wp_trim_words(get_the_excerpt(), 30); ?></p>
                        <a>" class="btn-readmore">Leer más</a>
                    </div>
                </div>
                <?php 
                    }
                    wp_reset_query(); 
                ?>
            </section>
            <div class="pagination">
                <?php echo paginate_links(); ?>
            </div>
            <?php get_footer(); ?>
    
    the code for creating the custom post type is in functions.php and is the following
    
    <code><?php</code>
    
        // Adicionando los archivos CSS y JS
    
        function gt_setup() {
            wp_enqueue_style('google-fonts','//fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&family=Roboto+Slab:wght@100&family=Roboto:wght@100&display=swap');
            wp_enqueue_style('fontawesome','https://kit.fontawesome.com/5d4742da19.js');
            wp_enqueue_style('style',get_stylesheet_uri(), NULL, microtime(), 'all');
            wp_enqueue_script("main",get_theme_file_uri('/js/main.js'), NULL, microtime(), true);
        }
    
        add_action('wp_enqueue_scripts','gt_setup');
    
        // Adding Theme Support
    
        function gt_init() {
            add_theme_support('post-thumbnails');
            add_theme_support('title-tag');
            add_theme_support('html5',
                array('commen-list','comment-form','search-form')
            );
        }
    
        add_action('after_setup_theme','gt_init');
    
        // Project Post Type
    
        function gt_custom_post_type() {
            register_post_type('project',
                array(
                    'rewrite' => array('slug' => 'projects'),
                    'labels' => array(
                    'name' => 'Projects',
                    'singular-name' => 'Project',
                    'add_new_item' => 'Add New Project',
                    'edit_item' => 'Edit Project'
                ),
                'menu-icon' => 'dashicons-clipboard',
                'public' => true,
                'has-archive' => true,
                'supports' => array(
                    'title', 'thumbnail', 'editor', 'excerpt', 'comments'
                    )
                )
            );
        }
        add_action('init', 'gt_custom_post_type');
    

    the only way I managed to see the projects in the projects page is if I specifically put a while for printing the projects posts, something like the following

    
        <?php
            $args = array(
                        'post_type' => 'project',
                        'post_per_page' => 2
                    );
                    $projects = new WP_Query($args);
                    while($projects->have_posts()) {
                        $projects->the_post();
                ?>
                <div class="card">
                    <div class="card-image">
                        <a>">
                            <img  />" alt="Card Image">
                        </a>
                    </div>
                    <div class="card-description">
                        <a>">
                            <h3><?php the_title(); ?></h3>
                        </a>
                        <div class="card-meta">
                            Posted by <?php the_author(); ?> a las <?php the_time('F j, Y') ?> el
                            <a href="#"><?php echo get_the_category_list(', ') ?></a>
                        </div>
                        <p><?php echo wp_trim_words(get_the_excerpt(), 30); ?></p>
                        <a>" class="btn-readmore">Leer más</a>
                    </div>
                </div>
                <?php 
                    }
                    wp_reset_query(); 
                ?>
    

    but then is bad printed because it prints the title of the blogs and the title of the projects in the same page.

    The permalinks are working good apparently because if the permalink is clicked or written in the web explorer then the specific project page are loaded, just don’t work by loading the projects page.

    Update 18/07/21, 14:28:

    If a new “Page” is added then when I press the link Porjects in the nav then the page “Projects” loads but without nothing because nothing is configure for that kind of page since the objective is to load the page as a custom post type

    How can this be solved?.

    Thanks in advance for the help.

    [1]: https://www.youtube.com/watch?v=KibbYf9avko&t=38s

    • This topic was modified 11 months, 2 weeks ago by vram.
    • This topic was modified 11 months, 2 weeks ago by vram. Reason: Bad code formatting
    • This topic was modified 11 months, 2 weeks ago by Yui. Reason: formatting
Viewing 4 replies - 1 through 4 (of 4 total)
  • Hi there,

    When you are working with Custom Post Types, remember the content is always rendered by one of the default templates used for inbuilt post types. In order to control their html, you need to override them by providing your own which would be chosen by WordPress to render content.

    If you are using a custom theme, it’s ok to add template files to that theme, otherwise creating a child theme is recommended.

    Here is the link to the guide on template hierarchy in our handbook – https://developer.wordpress.org/themes/basics/template-hierarchy/ It has a visual representation of how a template is chosen to render content for that particular page.

    For eg: To view archive page of your custom post type, where all posts for that custom post type will be displayed, WordPress will look for templates in this order:

    archive-project.php then archive.php and then index.php

    Similarly for its detail page.

    So a template will always have some sort of query loop to fetch the data and show it on page. And whatever template is chosen, it will have the query loop in Often its the case that you want to modify its html & change what data is shown inside of the loop.

    If the archive page (yoursite.com/projects) for your custom post types is 404, make sure you have visited the Permalinks page once under Settings in your admin dashboard. Just visiting that page is enough, it flushes the rewrite rules.

    Also please note that templates have the condition to show a message when no posts are found. It won’t be 404 in that case.

    have_posts() will return false and it will go to else part of the main loop.

    Thread Starter vram

    (@vram)

    Thanks @ashfame, look, I know from the template hierarchy that wordpress calls archive-project.php, archive.php and finally index.php but in my case although I have the files archive-project.php and archive.php the page allways calls index.php so I don’t know what is happening, in the front page it calls the projects if the WP_Query() is created but it didn’t call the projects in the Projects page. Even I updated the permalinks settings and nothing different happens

    @vram How are you adding these archive-project.php file? In the active theme? In a child theme? Are you sure you are placing them in the right directory, the one which is running the install? And the right theme is indeed active?

    A quick way to verify that would be to place a where.txt file in the same directory with some content in it like “right place”. Then try to access the file via its URL – yoursite.com/wp-content/themes/themename/where.txt. If you see the “right place” content in your browser for the above URL, that confirms you are indeed at the right path.

    An additional helpful tip is to install a plugin called “Query Monitor” which would add some data to admin bar on the frontend page you are trying to debug. Click on it and it will open up a panel, under which you can see what template hierarchy is for the current page.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Page not found on custom post type’ is closed to new replies.