To add a column block to all your site pages in WordPress with a module that lists clickable recent post titles, you can follow these steps. This approach involves using a combination of WordPress’s block editor and some custom code to ensure the column appears on all pages.
Step 1: Create the Column Block with Recent Posts
1. Open any page in the WordPress editor.
2. Add a new block: Click the “+” icon to add a new block.
3. Select Columns Block: Choose the “Columns” block from the list.
4. Configure Columns: Decide how many columns you want. For this example, let’s use two columns. Adjust the layout as needed.
5. Add Recent Posts Block: In one of the columns, add a “Latest Posts” block. You can find this under “Widgets” or by searching for “Latest Posts”.
6. Configure Latest Posts Block:
– Set the number of posts to display.
– Ensure the “Display Post Date” and “Display Post Excerpt” are unchecked if you only want titles.
– Make sure the titles are clickable by default.
Step 2: Save the Column as a Reusable Block
1. Select the entire Columns block you just created.
2. Convert to Reusable Block: Click on the three dots (⋯) in the block toolbar and select “Add to Reusable blocks”.
3. Name the Reusable Block: Give it a name like “Recent Posts Column”.
Step 3: Add the Reusable Block to a Site-Wide Template
To add this block to all pages, you’ll need to modify your theme’s template. This can be done using a child theme or a plugin like “Code Snippets” to add custom code.
1. Create a Child Theme (if you haven’t already): This ensures your changes are safe from theme updates.
2. Add Custom Code: You can add the following code to your child theme’s `functions.php` file or use a plugin like “Code Snippets”.
Code :
function add_recent_posts_column_to_content($content) {
// Assuming the reusable block ID is 123. You need to find the actual ID of your reusable block.
$reusable_block_id = 123;
$reusable_block = get_post($reusable_block_id);
if ($reusable_block && $reusable_block->post_type == 'wp_block') {
$reusable_block_content = apply_filters('the_content', $reusable_block->post_content);
$content = $reusable_block_content . $content; // Add the reusable block before the main content
}
return $content;
}
add_filter('the_content', 'add_recent_posts_column_to_content');
Note: To find the ID of your reusable block, go to the WordPress admin area, navigate to “Reusable blocks” under the “Appearance” menu, and hover over the block you created. The ID will appear in the URL.
Step 4: Test and Adjust
1. Visit different pages on your site to ensure the column appears on all of them.
2. Adjust the layout and styling as needed through your theme’s customizer or additional CSS.
By following these steps, you’ll have a column block with clickable recent post titles added to all your site’s pages. Remember to test thoroughly and make adjustments as necessary to fit your site’s design and functionality.
To add a column block to all your site pages using the Divi theme in WordPress, with a module that lists clickable recent post titles, you can follow these steps. This approach involves using Divi’s builder and some custom code to ensure the column appears on all pages.
Step 1: Create the Column with Recent Posts
1. Open any page in the WordPress editor.
2. Switch to Divi Builder: Click on “Use Divi Builder” if you haven’t already.
3. Add a New Section: Click the “+” icon to add a new section.
4. Configure the Section: Choose a one-column layout for the section.
5. Add a Row: Inside the section, add a new row.
6. Configure the Row: Choose a two-column layout for the row.
7. Add Recent Posts Module:
– In one of the columns, click the “+” icon to add a module.
– Select the “Blog” module from the list.
– Configure the Blog module:
– Set “Post Type” to “Post”.
– Set “Posts Number” to the desired number of recent posts.
– Under “Elements”, uncheck “Show Featured Image”, “Show Excerpt”, and “Show More Button” if you only want titles.
– Ensure “Show Title” is checked and clickable.
Step 2: Save the Section as a Global Module
1. Select the entire Section you just created.
2. Convert to Global Module: Click on the settings icon (gear icon) for the section, then click on the global icon (globe icon) to make it a global module.
3. Name the Global Module: Give it a name like “Recent Posts Column”.
Step 3: Add the Global Module to a Site-Wide Template
To add this global module to all pages, you’ll need to modify your theme’s template. This can be done using a child theme or a plugin like “Code Snippets” to add custom code.
1. Create a Child Theme (if you haven’t already): This ensures your changes are safe from theme updates.
2. Add Custom Code: You can add the following code to your child theme’s `functions.php` file or use a plugin like “Code Snippets”.
Code :
function add_recent_posts_column_to_content($content) {
// Assuming the global module ID is 123. You need to find the actual ID of your global module.
$global_module_id = 123;
$global_module = get_post($global_module_id);
if ($global_module && $global_module->post_type == 'et_pb_layout') {
$global_module_content = apply_filters('the_content', $global_module->post_content);
$content = $global_module_content . $content; // Add the global module before the main content
}
return $content;
}
add_filter('the_content', 'add_recent_posts_column_to_content');
Note: To find the ID of your global module, go to the WordPress admin area, navigate to “Divi Library” under the “Divi” menu, and hover over the module you created. The ID will appear in the URL.
Step 4: Test and Adjust
1. Visit different pages on your site to ensure the column appears on all of them.
2. Adjust the layout and styling as needed through Divi’s builder or additional CSS.
By following these steps, you’ll have a column block with clickable recent post titles added to all your site’s pages using the Divi theme. Remember to test thoroughly and make adjustments as necessary to fit your site’s design and functionality.
Leave a Reply