Flatsome Blog Table Archive
New old
—
### **Step 1: Create a Page for Blog Table View**
1. Go to **Pages > Add New**
2. Title it: `Blog Archive` or similar
3. In the right panel, **disable the default page title** (using Flatsome options)
4. **Publish the page**
—
### **Step 2: Create a Custom Blog Layout
New newste old all by dedfuakr show all the add pagination and load the result when click tab in ajax
– **New** (Latest posts)
– **Old** (Oldest posts)
– **All** (Default all posts)
**With:**
– Pagination
– AJAX load on tab click (no full page reload)
—
### Here's the Full Setup Guide:
—
### **Step 1: Create a New Page**
1. Go to **Pages > Add New**
2. Title it: `Blog Archive`
3. Disable default title (using Flatsome Page Options)
4. Add a shortcode block: `[blog_tab_archive]`
5. Publish the page.
—
### **Step 2: Add Shortcode in `functions.php`**
Paste this in your child theme's `functions.php`:
function blog_tab_archive_shortcode() {
ob_start();
?>
<div id="blog-tabs">
<ul class="blog-tab-buttons">
<li data-sort="new" class="active">New</li>
<li data-sort="old">Old</li>
<li data-sort="all">All</li>
</ul>
<div id="blog-tab-content">
<div class="blog-posts-wrapper">Loading...</div>
<div class="pagination-wrapper"></div>
</div>
</div>
<style>
.blog-tab-buttons { display: flex; gap: 10px; cursor: pointer; list-style: none; }
.blog-tab-buttons li.active { font-weight: bold; text-decoration: underline; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
function loadPosts(sort = 'new', page = 1) {
const wrapper = document.querySelector('.blog-posts-wrapper');
const pagination = document.querySelector('.pagination-wrapper');
wrapper.innerHTML = 'Loading...';
fetch(`/wp-admin/admin-ajax.php?action=load_blog_posts&sort=${sort}&paged=${page}`)
.then(res => res.text())
.then(html => {
wrapper.innerHTML = html;
pagination.innerHTML = document.querySelector('#temp-pagination').innerHTML;
});
}
loadPosts(); // initial load
document.querySelectorAll('.blog-tab-buttons li').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.blog-tab-buttons li').forEach(li => li.classList.remove('active'));
tab.classList.add('active');
loadPosts(tab.dataset.sort);
});
});
document.addEventListener('click', function (e) {
if (e.target.matches('.ajax-pagination a')) {
e.preventDefault();
const page = e.target.getAttribute('data-page');
const activeTab = document.querySelector('.blog-tab-buttons li.active').dataset.sort;
loadPosts(activeTab, page);
}
});
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('blog_tab_archive', 'blog_tab_archive_shortcode');—
### **Step 3: Create AJAX Handler**
Add this below the previous code in `functions.php`:
add_action('wp_ajax_load_blog_posts', 'load_blog_posts_callback');
add_action('wp_ajax_nopriv_load_blog_posts', 'load_blog_posts_callback');
function load_blog_posts_callback() {
$sort = $_GET['sort'] ?? 'new';
$paged = $_GET['paged'] ?? 1;
$args = [
'post_type' => 'post',
'posts_per_page' => 5,
'paged' => $paged,
];
if ($sort === 'old') {
$args['order'] = 'ASC';
$args['orderby'] = 'date';
} elseif ($sort === 'new') {
$args['order'] = 'DESC';
$args['orderby'] = 'date';
}
$query = new WP_Query($args);
if ($query->have_posts()) :
echo '<table><thead><tr><th>Title</th><th>Date</th></tr></thead><tbody>';
while ($query->have_posts()) : $query->the_post();
echo '<tr>';
echo '<td><a href="' . get_permalink() . '">' . get_the_title() . '</a></td>';
echo '<td>' . get_the_date() . '</td>';
echo '</tr>';
endwhile;
echo '</tbody></table>';
echo '<div id="temp-pagination">';
echo '<div class="ajax-pagination">';
for ($i = 1; $i <= $query->max_num_pages; $i++) {
echo '<a href="#" data-page="' . $i . '">' . $i . '</a> ';
}
echo '</div></div>';
else :
echo '<p>No posts found.</p>';
endif;
wp_die();
}—
### That’s It!
Now visit the `Blog Archive` page. You’ll see 3 tabs (New, Old, All) with posts shown in a table format, updated via AJAX when clicking tabs or paginating.
Would you like a version styled like Flatsome cards instead of a table?