1
\$\begingroup\$

The following code works fine, however, I'm trying to simplify it. I wrote it but I'm a beginner PHP coder. I can see that most probably the use of a function or class would be better... or anything to make it more concise in terms of PHP.

This is WordPress PHP code. I can't do it in a loop. You see how repetitive it is. The first three elements just have different variables to be fed via PHP. The last two have slightly different HTML markup.

<div class="row mb-3">
  <!-- beginning of TOP row -->

  <div class="col-xs-12 col-sm-6 col-md-4 tile pr-0 mb-3">
    <?php
                    $post_object = get_field('top_left_tile');
                    if( $post_object ): 
                     // override $post
                      $post = $post_object;
                      setup_postdata( $post ); 
                      $img = get_the_post_thumbnail_url($post_id, 'frontTile');
                    ?>
    <a class="tile-text" href="<?php the_field('tile_url'); ?>">
      <div class="img-overlay h-100">
        <?php
                        if ( $img ) { ?>
        <img src="<?php echo $img; ?>" />
        <?php } else { ?>
        <img src="https://via.placeholder.com/500x500" />
        <?php } ?>
      </div>
      <div class="d-flex align-items-start flex-column tile-overlay">
        <div class="mb-auto p-2">
          <h5><span class="tag pr-2 pl-2">
              <?php the_field('tile_category'); ?> </span></h5>
        </div>
        <div class="p-2 bg-secondary">
          <h3 class="p-2">
            <?php the_title(); ?>
          </h3>
          <p class="p-2">
            <?php echo $post->post_content; ?>
          </p>
        </div>
      </div>
    </a>
    <?php wp_reset_postdata(); // IMPORTANT - reset the $post™™£ object so the rest of the page works correctly ?>
    <?php endif; ?>
  </div> <!-- end of top left -->



  <div class="col-xs-12 col-sm-6 col-md-4 tile pr-0 mb-3">
    <!-- beginning of top centre -->
    <?php
                    $post_object = get_field('top_centre_tile');
                    if( $post_object ): 
                     // override $post
                      $post = $post_object;
                      setup_postdata( $post ); 
                      $img = get_the_post_thumbnail_url($post_id, 'frontTile');
                    ?>
    <a class="tile-text" href="<?php the_field('tile_link'); ?>">
      <div class="img-overlay h-100">
        <?php
        if ( $img ) { ?>
        <img src="<?php echo $img; ?>" />
        <?php } else { ?>
        <img src="https://via.placeholder.com/500x500" />
        <?php } ?>
      </div>
      <div class="d-flex align-items-start flex-column tile-overlay">
        <div class="mb-auto p-2">
          <h5><span class="tag pr-2 pl-2">
              <?php the_field('tile_category'); ?> </span></h5>
        </div>
        <div class="p-2 bg-secondary">
          <h3 class="p-2">
            <?php the_title(); ?>
          </h3>
          <p class="p-2">
            <?php echo $post->post_content; ?>
          </p>
        </div>
      </div>
    </a>
    <?php wp_reset_postdata(); // IMPORTANT - reset the $post™™£ object so the rest of the page works correctly ?>
    <?php endif; ?>
  </div> <!-- end of top centre -->



  <div class="col-xs-12 col-sm-6 col-md-4 tile pr-0 mb-3">
    <!-- beginning of top right -->
    <?php
                    $post_object = get_field('top_right_tile');
                    if( $post_object ): 
                     // override $post
                      $post = $post_object;
                      setup_postdata( $post ); 
                      $img = get_the_post_thumbnail_url($post_id, 'frontTile');
                    ?>
    <a class="tile-text" href="<?php the_field('tile_link'); ?>">
      <div class="img-overlay h-100">
        <?php
                        if ( $img ) { ?>
        <img src="<?php echo $img; ?>" />
        <?php } else { ?>
        <img src="https://via.placeholder.com/500x500" />
        <?php } ?>
      </div>
      <div class="d-flex align-items-start flex-column tile-overlay">
        <div class="mb-auto p-2">
          <h5><span class="tag pr-2 pl-2">
              <?php the_field('tile_category'); ?> </span></h5>
        </div>
        <div class="p-2 bg-secondary">
          <h3 class="p-2">
            <?php the_title(); ?>
          </h3>
          <p class="p-2">
            <?php echo $post->post_content; ?>
          </p>
        </div>
      </div>
    </a>
    <?php wp_reset_postdata(); // IMPORTANT - reset the $post™™£ object so the rest of the page works correctly ?>
    <?php endif; ?>
  </div> <!-- end of top right -->

</div> <!-- end of TOP row -->


<div class="row mb-3">
  <!-- beginning of middle row -->

  <div class="col-xs-12 col-sm-6 col-md-6 mb-3">
    <!-- beginning of middle left -->
    <?php
                    $post_object = get_field('middle_left_tile');
                    if( $post_object ): 
                     // override $post
                      $post = $post_object;
                      setup_postdata( $post ); 
                      $img = get_the_post_thumbnail_url($post_id, 'frontTilePort');
    ?>

    <a class="tile-text" href="<?php the_field('tile_link'); ?>">
      <div class="row text-white">
        <div class="col-5 mr-0 pr-0 d-none d-md-block">
          <img class="" src="<?php echo $img; ?>" />
        </div>
        <div class="col ml-0 bg-secondary">
          <h5 class="py-2"><span class="tag px-2">
              <?php the_field('tile_category'); ?> </span></h5>
          <div class="p-1">
            <h5>
              <?php the_title(); ?>
            </h5>
            <p>
              <?php echo $post->post_content; ?>
            </p>
          </div>
        </div>
      </div>
    </a>
    <?php wp_reset_postdata(); // IMPORTANT - reset the $post™™£ object so the rest of the page works correctly ?>
    <?php endif; ?>
  </div> <!-- end of middle left -->




  <div class="col-xs-12 col-sm-6 col-md-6 mb-3">
    <!-- beginning of middle right -->
    <?php
                    $post_object = get_field('middle_right_tile');
                    if( $post_object ): 
                     // override $post
                      $post = $post_object;
                      setup_postdata( $post ); 
                      $img = get_the_post_thumbnail_url($post_id, 'frontTilePort');
    ?>

    <a class="tile-text" href="<?php the_field('tile_link'); ?>">
      <div class="row text-white">
        <div class="col-5 mr-0 pr-0 d-none d-md-block">
          <img class="" src="<?php echo $img; ?>" />
        </div>
        <div class="col ml-0 bg-secondary">
          <h5 class="py-2"><span class="tag px-2">
              <?php the_field('tile_category'); ?> </span></h5>
          <div class="p-1">
            <h5>
              <?php the_title(); ?>
            </h5>
            <p>
              <?php echo $post->post_content; ?>
            </p>
          </div>
        </div>
      </div>
    </a>
    <?php wp_reset_postdata(); // IMPORTANT - reset the $post™™£ object so the rest of the page works correctly ?>
    <?php endif; ?>
  </div> <!-- end of middle right -->

</div> <!-- end of middle row -->
\$\endgroup\$
1
\$\begingroup\$

There are a few ways you could handle this. One of the simpler ways would be to split it up into 2 loops - the first one handles the first 3 HTML structures and the 2nd loop handles the final 2 HTML structures.

> $post_object = get_field('top_centre_tile');
>     if( $post_object ): 
>         // override $post
>         $post = $post_object;

Why are you clobbering the $post_object? You can simply name the variable $post and then continue using it.

I omitted the HTML structure here for clarity.

<!-- Handles the first 3 common HTML structures. -->
<div class="row mb-3">
    <?php
    $posts = [
        'top_left_tile',
        'top_centre_tile',
        'top_right_tile'
    ];

    foreach ($posts as $title): ?>
        <div class="col-xs-12 col-sm-6 col-md-4 tile pr-0 mb-3">
            <?php
            $post = get_field($title);

            if ($post): ?>
                <!-- common HTML structure -->
            <?php endif; ?>
        </div>
    <?php endforeach; ?>
</div>

<!-- Handles the final 2 common HTML structures. -->
<div class="row mb-3">
    <?php
    $posts = [
        'middle_left_tile',
        'middle_right_tile'
    ];

    foreach ($posts as $title): ?>
        <div class="col-xs-12 col-sm-6 col-md-6 mb-3">
            <?php
            $post = get_field($title);

            if ($post): ?>
                <!-- common HTML structure -->
            <?php endif; ?>
        </div>
    <?php endforeach; ?>
</div>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.