[ show_post post_type='post' category='' tag='' post_pp='4' button_text='View Post' load_more='true' ]
This code copy and past it in functions.php file.
or create a new file and put this code in this file and include in functions.php file.
//custom code here
function custom_enqueue_styles() {
wp_enqueue_script('jquery');
wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css');
wp_enqueue_script('custom-load-more', get_template_directory_uri() . 'load-more.js', array('jquery'), null, true);
wp_localize_script('custom-load-more', 'ajax_params', array(
'ajax_url' => admin_url('admin-ajax.php')
));
}
add_action('wp_enqueue_scripts', 'custom_enqueue_styles');
function custom_show_post_shortcode($atts) {
// Define default attributes
$atts = shortcode_atts(
array(
'post_type' => 'post',
'category' => '',
'tag' => '',
'post_pp' => '4', // Default posts per page
'button_text' => 'Read more',
'load_more'=>true
),
$atts,
'show_post'
);
$show_loadmore = $atts['load_more'];
// Arguments for WP_Query
$args = array(
'post_type' => $atts['post_type'],
'posts_per_page' => $atts['post_pp'],
'category_name' => $atts['category'],
'tag' => $atts['tag'],
'post_status' => 'publish',
'paged' => 1
);
// Custom WP_Query
$query = new WP_Query($args);
// Start output buffering
ob_start();
if ($query->have_posts()) {
echo '<div class="row" id="post-grid">';// Start Bootstrap row
while ($query->have_posts()) : $query->the_post();
?>
<div class="col-md-6 col-lg-3 mb-4">
<div class="card" style='min-height: 100%;'>
<?php if (has_post_thumbnail()) : ?>
<img src="<?php the_post_thumbnail_url('medium'); ?>" class="card-img-top" alt="<?php the_title(); ?>">
<?php else:
echo "<img src='https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png' class='card-img-top' alt=''/>";
endif; ?>
<div class="card-body">
<h5 class="card-title"><?php the_title(); ?></h5>
<div class="card-meta">
<small class="text-muted"><?php the_time('F j, Y'); ?> | <?php the_author(); ?></small>
</div>
<p class="card-text"><?php echo wp_trim_words(get_the_excerpt(),15); ?></p>
<a href="<?php the_permalink(); ?>" class="btn btn-primary"><?php echo esc_html($atts['button_text']); ?></a>
</div>
</div>
</div>
<?php
endwhile;
echo '</div>'; // End Bootstrap row
if ($query->max_num_pages > 1 && $show_loadmore) {
echo '<div class="text-center"><button id="load-more" class="btn btn-secondary" data-page="1" data-max="' . $query->max_num_pages . '" data-atts=\'' . json_encode($atts) . '\'>Load More</button> </div>';
}
wp_reset_postdata();
} else {
echo '<p>No posts found.</p>';
}
// Return the output
return ob_get_clean();
}
// Register the shortcode
add_shortcode('show_post', 'custom_show_post_shortcode');
function custom_load_more_posts() {
// Get current page
$paged = isset($_POST['page']) ? $_POST['page'] : 1;
$atts = isset($_POST['atts']) ?$_POST['atts']: array();
$args = array(
'post_type' => $atts['post_type'],
'posts_per_page' => $atts['post_pp'],
'category_name' => $atts['category'],
'tag' => $atts['tag'],
'post_status' => 'publish',
'paged' => $paged
);
// Decode shortcode attributes from data-atts
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) : $query->the_post();
?>
<div class="col-md-6 col-lg-3 mb-4 post-item">
<div class="card">
<?php if (has_post_thumbnail()) : ?>
<img src="<?php the_post_thumbnail_url('medium'); ?>" class="card-img-top" alt="<?php the_title(); ?>">
<?php endif; ?>
<div class="card-body">
<h5 class="card-title"><?php the_title(); ?></h5>
<p class="card-meta">
<small class="text-muted"><?php the_time('F j, Y'); ?> | <?php the_author(); ?></small>
</p>
<p class="card-text"><?php echo wp_trim_words(get_the_excerpt(), 20); ?></p>
<a href="<?php the_permalink(); ?>" class="btn btn-primary"><?php echo esc_html($atts['button_text']); ?></a>
</div>
</div>
</div>
<?php
endwhile;
}
wp_reset_postdata();
die(); // Stop execution
}
add_action('wp_ajax_load_more', 'custom_load_more_posts');
add_action('wp_ajax_nopriv_load_more', 'custom_load_more_posts');
JavaScript and shortcode
You can put your shortcode and javascript in template or on html widget.
like this --
[show_post post_type='post' category='' tag='' post_pp='4' button_text='View Post' load_more='true']
< script>
jQuery(document).ready(function($) {
$('#load-more').on('click', function() {
var button = $(this);
var page = button.data('page');
var maxPages = button.data('max');
var atts = button.data('atts');
page++;
// Make AJAX request
$.ajax({
url: ajax_params.ajax_url,
type: 'POST',
data: {
action: 'load_more',
page: page,
atts: atts
},
beforeSend: function() {
button.text('Loading...'); // Change button text
},
success: function(response) {
$('#post-grid').append(response); // Append new posts
button.data('page', page);
// Check if we've reached max number of pages
if (page >= maxPages) {
button.remove(); // Remove button if no more pages
} else {
button.text('Load More');
}
}
});
});
});
</script>
Output somthing like this -
0 Comments