archive-listings.php

<?php get_header(); ?> 

<h1 style="font-size: 24px; text-align: center; margin: 40px 0;">Property Listings</h1>

<style>

  .listing-archive {

    display: grid;

    grid-template-columns: repeat(8, 1fr);

    gap: 20px;

    justify-items: center;

    padding: 40px 20px;

    width: 100%; 

    max-width: 1000px;

    margin: 0 auto;

  }

  .listing-card {

    width: 100%;

    background: #fff;

    border: 1px solid #ddd;

    border-radius: 10px;

    padding: 15px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.1);

    font-family: inherit;

    position: relative;

    transition: transform 0.3s;

  }

  .listing-card:hover {

    transform: translateY(-5px);

  }

  .listing-card img {

    width: 100%;

    height: 180px;

    object-fit: cover;

    border-radius: 6px;

  }

  .listing-card h2 {

    font-size: 16px;

    margin: 12px 0 8px;

  }

  .listing-card a {

    text-decoration: none !important;

    color: inherit !important;

  }

  .listing-meta {

    font-size: 14px;

    line-height: 1.8;

    color: #333;

  }

  .listing-line {

    display: flex;

    gap: 4px;

  }

  .label {

    display: inline-block;

    width: 100px;

    font-weight: bold;

  }

  .favorite-toggle {

    font-size: 22px;

    background: none;

    border: none;

    cursor: pointer;

    color: #e63946;

    padding: 0;

    position: absolute;

    top: 10px;

    right: 10px;

    line-height: 1;

  }

  .favorite-toggle.favorited {

    color: #e63946;

  }

  .favorite-toggle:hover {

    color: #e63946;

  }

  @media screen and (max-width: 768px) {

    .listing-archive {

      grid-template-columns: 1fr;

    }

  }

</style>

<div class="listing-archive">

  <?php

    $args = array(

      'post_type' => 'listings',

      'posts_per_page' => -1,

      'orderby' => 'date',

      'order' => 'DESC'

    );

    $listings = new WP_Query($args);

    if ($listings->have_posts()) :

      while ($listings->have_posts()) : $listings->the_post();

        $post_id = get_the_ID();

        $user_id = get_current_user_id();

        $favorites = is_user_logged_in() ? get_user_meta($user_id, 'favorite_listings', true) : array();

        $is_favorited = is_array($favorites) && in_array($post_id, $favorites);

  ?>

    <div class="listing-card">

      <button class="favorite-toggle<?php if ($is_favorited) echo ' favorited'; ?>" data-post-id="<?php echo esc_attr($post_id); ?>">

        <?php echo $is_favorited ? '❤️' : '♡'; ?>

      </button>

      <a href="<?php the_permalink(); ?>">

        <h2><?php the_title(); ?></h2>

      </a>

      <a href="<?php the_permalink(); ?>">

        <?php

          if (has_post_thumbnail()) {

            the_post_thumbnail('medium');

          } else {

            $gallery = get_post_meta($post_id, 'gallery_images', true);

            if (is_array($gallery) && !empty($gallery)) {

              $image_url = wp_get_attachment_url($gallery[0]);

              echo '<img src="' . esc_url($image_url) . '" alt="Gallery Image">';

            } else {

              echo '<img src="https://via.placeholder.com/300x200?text=No+Image" alt="No Image">';

            }

          }

        ?>

      </a>

      <div class="listing-meta">

        <div class="listing-line"><span class="label">Price:</span> ¥<?php echo number_format((int)get_post_meta($post_id, 'price', true)); ?></div>

        <div class="listing-line"><span class="label">Area:</span> <?php echo esc_html(get_post_meta($post_id, 'area', true)); ?>m2</div>

        <div class="listing-line"><span class="label">Year Built:</span> <?php echo esc_html(get_post_meta($post_id, 'built', true)); ?></div>

        <div class="listing-line"><span class="label">Location:</span> <?php echo esc_html(get_post_meta($post_id, 'location', true)); ?></div>

        <div class="listing-line" style="font-size:13px; color:#777;">

          <span class="label">Posted:</span> <?php echo get_the_date('d/M/Y'); ?>

        </div>

      </div>

    </div>

  <?php endwhile; wp_reset_postdata(); endif; ?>

</div>

<?php get_footer(); ?>