Blog posts template defaults to index.php file and overrides page content and unable to add masonry

[paxaeterna]

I am having a few issues with a website I am building. The first issue is that I want to have a blog page that takes content from "posts" section in WP, I also want the layout of the blog posts to be a grid, so I downloaded masonry, followed the instructions, enqueued masonry.php from functions.php but was unable to get the layout to populate on the Blog template.

I realized that when a page becomes the "posts page" in WP it takes the index.php template, while the other pages take the page.php template - including the homepage. I changed the index.php file to become the archive.php file for masonry but now the issue I have is that it overrides the page content and adapting the template to be evergreen with masonry, for example, pulling in the page title for the h1 tag, actually pulls in the latest pulished blog post name.

Any thoughts on how I can:

1. Take the Blog template out of index.php without altering it
2. Enable masonry on the blog

I am a beginner, thank you for your patience.

[crftwrk]

Hello,

I do not understand exactly what do you want to do and having no links to your project where you want to change something. Sharing links is always very useful clarifying things.

What I understood is that you want to change the index.php to masonry layout, correct? If so:

• Install and activate the masonry plugin
• Copy index.php to your child's root folder
• Open index.php and replace entire content
• See it in action here https://dev.bootscore.me

<?php

/**
 * The main 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.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package Bootscore
 */

get_header();
?>
  <div id="content" class="site-content <?= bootscore_container_class(); ?> py-5 mt-4">
    <div id="primary" class="content-area">

      <!-- Hook to add something nice -->
      <?php bs_after_primary(); ?>

      <main id="main" class="site-main">

        <!-- Header -->
        <div class="py-3 py-md-5 text-center">
          <h1 class="display-1"><?php bloginfo('name'); ?></h1>
          <p class="lead"><?php bloginfo('description'); ?></p>
        </div>

        <!-- Sticky Post -->
        <?php if (is_sticky() && is_home() && !is_paged()) : ?>
          <div class="row">
            <div class="col">
              <?php
              $args      = array(
                'posts_per_page'      => 2,
                'post__in'            => get_option('sticky_posts'),
                'ignore_sticky_posts' => 2
              );
              $the_query = new WP_Query($args);
              if ($the_query->have_posts()) :
                while ($the_query->have_posts()) : $the_query->the_post(); ?>
                  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                    <div class="card horizontal mb-4">
                      <div class="row g-0">

                        <?php if (has_post_thumbnail()) : ?>
                          <div class="col-lg-6 col-xl-5 col-xxl-4">
                            <a href="<?php the_permalink(); ?>">
                              <?php the_post_thumbnail('medium', array('class' => 'card-img-lg-start')); ?>
                            </a>
                          </div>
                        <?php endif; ?>

                        <div class="col">
                          <div class="card-body">

                            <div class="row">
                              <div class="col-10">
                                <?php bootscore_category_badge(); ?>
                              </div>
                              <div class="col-2 text-end">
                                <span class="badge text-bg-danger"><i class="fa-solid fa-star"></i></span>
                              </div>
                            </div>

                            <a class="text-body text-decoration-none" href="<?php the_permalink(); ?>">
                              <?php the_title('<h2 class="blog-post-title h5">', '</h2>'); ?>
                            </a>

                            <?php if ('post' === get_post_type()) : ?>
                              <p class="meta small mb-2 text-body-tertiary">
                                <?php
                                bootscore_date();
                                bootscore_author();
                                bootscore_comments();
                                bootscore_edit();
                                ?>
                              </p>
                            <?php endif; ?>

                            <p class="card-text">
                              <a class="text-body text-decoration-none" href="<?php the_permalink(); ?>">
                                <?= strip_tags(get_the_excerpt()); ?>
                              </a>
                            </p>

                            <p class="card-text">
                              <a class="read-more" href="<?php the_permalink(); ?>">
                                <?php _e('Read more »', 'bootscore'); ?>
                              </a>
                            </p>

                            <?php bootscore_tags(); ?>

                          </div>
                        </div>
                      </div>
                    </div>

                  </article>
                <?php
                endwhile;
              endif;
              wp_reset_postdata();
              ?>
            </div>

            <!-- col -->
          </div>
          <!-- row -->
        <?php endif; ?>
        <!-- Post List -->
        <div class="row">
          <div class="<?= bootscore_main_col_class(); ?>">
            
            <div class="row" data-masonry='{"percentPosition": true }'>
              
              <!-- Grid Layout -->
              <?php if (have_posts()) : ?>
                <?php while (have_posts()) : the_post(); ?>
                  <?php if (is_sticky()) continue; //ignore sticky posts
                  ?>

                  <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">

                      <div class="card">

                        <?php if ( has_post_thumbnail() ) : ?>
                          <a href="<?php the_permalink(); ?>">
                            <?php the_post_thumbnail('medium', array('class' => 'card-img-top')); ?>
                          </a>
                        <?php endif; ?>

                        <div class="card-body d-flex flex-column">

                          <?php bootscore_category_badge(); ?>

                          <a class="text-body text-decoration-none" href="<?php the_permalink(); ?>">
                            <?php the_title('<h2 class="blog-post-title h5">', '</h2>'); ?>
                          </a>

                          <?php if ('post' === get_post_type()) : ?>
                            <p class="meta small mb-2 text-body-tertiary">
                              <?php
                                bootscore_date();
                                bootscore_author();
                                bootscore_comments();
                                bootscore_edit();
                              ?>
                            </p>
                          <?php endif; ?>

                          <p class="card-text">
                            <a class="text-body text-decoration-none" href="<?php the_permalink(); ?>">
                              <?= strip_tags(get_the_excerpt()); ?>
                            </a>
                          </p>

                          <p class="card-text mt-auto">
                            <a class="read-more" href="<?php the_permalink(); ?>">
                              <?php _e('Read more »', 'bootscore'); ?>
                            </a>
                          </p>

                          <?php bootscore_tags(); ?>

                        </div>

                      </div>

                    </div>

                <?php endwhile; ?>
              <?php endif; ?>
              
            </div><!-- row -->

            <footer class="entry-footer">
              <?php bootscore_pagination(); ?>
            </footer>

          </div>
          <!-- col -->
          <?php get_sidebar(); ?>
        </div>
        <!-- row -->
      </main><!-- #main -->

    </div><!-- #primary -->
  </div><!-- #content -->
<?php
get_footer();

[paxaeterna]

Thank you for the help! Sorry for the confusion. I replaced the index.php file with this code you provided, however it does not pull in any posts to the blog. I ended up just copying the masontry category php and pasting in my index.php file. I forgot that the index.php file in WP is for the Blog/Posts page. For some reason I thought it would impact the websites default formatting, which I did not want to be masonry.

[crftwrk]

No, index.php lists only the latest posts on the frontpage if no other frontpage is set in the backend. If you want to show your blog in masonry, copy archive-masonry.php to your child's root folder and rename it to archive.php, that's it.

https://github.com/bootscore/bs-loop-templates

If you want to go in more detail, do the same with category-masonry.php and author-masonry.php. Just copy them to your child and rename them into category.php and author.php.

Take a look to https://developer.wordpress.org/themes/basics/template-hierarchy/. Here it's well explained how templating in WordPress works.

Solved?