So I need to add a title and content from a custom post type in my WordPress site I am added the posts loop to this archive-work.php file:

<?php
/**
 * Work template file.
 *
 * This is the most generic template file in a WordPress theme and one of the
 * two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * For example, it puts together the home page when no home.php file exists.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package   CMMS
 * @author    Creative MMS
* 
 * 
 * @since     1.0.0
 */

get_header(); ?>


    <div class="cmms-house">

        <div class="content-area cmms-clr">

            <main class="site-main cmms-clr">

                <?php
                // Display page header
                //get_template_part( 'partials/archives/header' ); ?>

                <?php
                // Check if posts exist
                if ( have_posts() ) : ?>

                    <div class="work-entry cmms-clr">   
                        <div class="work-col work-left">

                            <?php
                                // Get query
                                global $wp_query;

                                // Count
                                $count = 1;

                                // Loop through posts
                                while ( have_posts() ) : the_post(); 

                                //Vars
                                $tileImageRow = get_field('hovered_image_large');



                                ?>

                                <div id="<?= $count; ?>" class="item <?php if ($count == 1) : ?>active<?php endif; ?>" style="background-image: url('<?= $tileImageRow['url']; ?>');">




                                </div>


                            <?php
                                // End loop
                                $count++; endwhile;
                            ?>
                            <?php wp_reset_postdata(); ?>

                        </div><!-- .left -->

                        <div class="work-col work-right">
                            <ul>
                            <?php
                                // Get query
                                global $wp_query;

                                //Counter
                                $counter = 1;

                                // Loop through posts
                                while ( have_posts() ) : the_post(); ?>

                                    <li class="list-right" data-trigger="#<?= $counter; ?>"><?= get_the_title(); ?></li>

                            <?php
                                // End loop
                                $counter++; endwhile;
                            ?>
                            <?php wp_reset_postdata(); ?>
                            </ul>
                        </div><!-- .right -->

                    </div><!-- .work-entry -->  

                    <?php
                    // Include pagination template part
                    cmms_include_template( 'partials/global/pagination.php' ); ?>

                <?php
                // Display no posts found message
                else : ?>

                    <?php get_template_part( 'partials/entry/none' ); ?>

                <?php endif; ?>

            </main><!-- .main -->

        </div><!-- .content-area -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

When I add this code:

<?php if (have_posts()) : ?>
  <?php while(have_posts()): the_post(); ?>
    <h3><?php the_title(); ?></h3>
       <?php the_content(); ?>
  <?php endwhile; ?>
<?php endif; ?>

in between the div with id of , the page breaks, as opposed to my desired intention of displaying the title and content of my custom post type. Why?

Read more here: why does my post loop break the page?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: