WP Query Optimization Tips
February 21, 2025 Β· AI Conversations
'post_type' => 'location',
'posts_per_page' => 3,
'orderby' => 'date',
'order' => 'DESC',
'paged' => 1,
]);
?>
### Suggested Improvements:
1. **Ensure Pagination Works Properly:**
The `'paged' => 1` is hardcoded, which means pagination wonβt dynamically work. Instead, use `get_query_var('paged')`:
'paged' => get_query_var('paged') ? get_query_var('paged') : 1,
2. **Check if Query has Results Before Outputting the Container:**
You can wrap “ inside the `if` condition to avoid rendering an empty div.
3. **Use `get_template_part` More Effectively:**
Since you're passing `$query` using `set_query_var()`, ensure that `location-post.php` is retrieving it properly using `get_query_var('query')`.
### Optimized Code:
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$query = new WP_Query([
'post_type' => 'location',
'posts_per_page' => 3,
'orderby' => 'date',
'order' => 'DESC',
'paged' => $paged,
]);
if( $query->have_posts() ): ?>
<div class="location_container">
<?php while( $query->have_posts() ): $query->the_post();
set_query_var( 'query', $query );
get_template_part('app/custom/partials/location', 'post');
endwhile; ?>
</div>
<?php
endif;
wp_reset_postdata();
?>
Let me know if you need pagination or AJAX-based loading! π
### **Syntax**
get_template_part( $slug, $name = null );
– **`$slug`** (Required): The base file name without the file extension.
– **`$name`** (Optional): Adds a suffix to the template file.
### **Example Usage**
#### 1. **Basic Usage**
Loads `content.php` from the theme directory.
get_template_part('content');
#### 2. **With a Second Parameter (`$name`)**
Loads `content-single.php` if it exists. Otherwise, falls back to `content.php`.
get_template_part('content', 'single');
This looks for:
– `content-single.php`
– If not found, it falls back to `content.php`
#### 3. **Using It in a Loop**
If you have a custom post type `location`, and you want to load a separate template for each post:
while ( have_posts() ) : the_post();
get_template_part('template-parts/content', get_post_type());
endwhile;
This will look for:
– `template-parts/content-location.php` (if post type is `location`)
– Falls back to `template-parts/content.php` if not found.
—
### **How It Works in Your Code**
Your code:
get_template_part('app/custom/partials/location', 'post');
Will look for:
1. `app/custom/partials/location-post.php`
2. If not found, it will check `app/custom/partials/location.php`
If you need to pass additional data to the template, use `set_query_var()`:
set_query_var( 'query', $query );
get_template_part('app/custom/partials/location', 'post');
Then, inside `location-post.php`, you can retrieve it using:
$query = get_query_var('query');
Would you like help with dynamic loading or passing data differently? π
### **Steps to Show Featured Image if Available**
1. Check if the post has a featured image using `has_post_thumbnail()`.
2. If available, display it using `the_post_thumbnail()`.
3. If not, you can show a placeholder or fallback image.
—
### **Updated Code for `location-post.php`**
<div class="location-post">
<?php if ( has_post_thumbnail() ): ?>
<div class="location-thumbnail">
<?php the_post_thumbnail('medium'); // You can change 'medium' to 'full', 'large', or custom sizes ?>
</div>
<?php else: ?>
<div class="location-thumbnail">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/placeholder.jpg" alt="No Image Available">
</div>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<a href="<?php the_permalink(); ?>">Read More</a>
</div>
—
### **Explanation**
– **`has_post_thumbnail()`** β Checks if the post has a featured image.
– **`the_post_thumbnail('medium')`** β Displays the post's featured image at a medium size.
– **Fallback Image** β Uses a placeholder image if no featured image is set.
– Ensure you have a fallback image (`placeholder.jpg`) inside `assets/images/`.
Would you like to modify the image size or add a custom class for styling? π
### **Get Full Featured Image URL**
<?php if ( has_post_thumbnail() ):
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
?>
<div class="location-thumbnail">
<img src="<?php echo esc_url( $image_url[0] ); ?>" alt="<?php the_title_attribute(); ?>">
</div>
<?php else: ?>
<div class="location-thumbnail">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/placeholder.jpg" alt="No Image Available">
</div>
<?php endif; ?>
### **Explanation**
– **`wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' )`**
– Fetches the **full-size** featured image URL.
– Returns an **array** with:
– `[0]` β Image URL
– `[1]` β Width
– `[2]` β Height
– **`esc_url( $image_url[0] )`** β Escapes the image URL for security.
– **`the_title_attribute()`** β Uses the post title as the `alt` attribute.
—
Would you like to add a `lazy loading` feature or `responsive images`? π