How to edit H2 title to H4 title in Front Page

To transform the <h2 class="entry-title"> to <h4 class="entry-title"> dynamically in WordPress, you can use a WordPress filter hook and modify the output. Here’s how you can achieve this without directly editing theme files:

Steps to Transform <h2 class=”entry-title”> to <h4 class=”entry-title”>

1. Add Custom Code to functions.php

You can add custom code to your theme’s functions.php file or a custom plugin.

Here’s an example code snippet:

add_filter('the_title', 'modify_entry_title_tag', 10, 2);

function modify_entry_title_tag($title, $id) {
    // Check if we're on the front page and dealing with the entry title
    if (is_front_page() && in_the_loop() && get_post_type($id) === 'post') {
        // Adjust the title markup if needed
        remove_filter('the_title', 'modify_entry_title_tag', 10); // Avoid recursion
        $title = sprintf('<h4 class="entry-title">%s</h4>', $title);
        add_filter('the_title', 'modify_entry_title_tag', 10, 2);
    }
    return $title;
}

Explanation:

• Conditionals:
  • is_front_page(): Ensures changes are applied only on the front page.
  • in_the_loop(): Ensures the title is modified only in the main WordPress loop.
  • get_post_type($id) === 'post': Limits changes to posts only (you can adjust as needed).
• Filter Nesting: The function prevents recursion by temporarily removing and re-adding the filter.

2. Modify Output Using entry-title Class

If the heading structure is being hardcoded in your theme’s template (e.g., <h2 class="entry-title">), WordPress hooks like the_title won’t affect the HTML structure.

In such cases:

1. Identify the template file generating the <h2 class="entry-title">. This is likely in:
   • content.php
   • front-page.php
   • single.php
   • Or similar files in your theme.
2. Manually replace: <h2 class="entry-title"><?php the_title(); ?></h2> With: <h4 class="entry-title"><?php the_title(); ?></h4>

3. Use JavaScript (Optional)

If you cannot directly edit PHP files, you can transform the tags on the frontend using JavaScript.

Add this script to your theme’s footer.php or enqueue it in functions.php:

add_action('wp_footer', function () {
    ?>
    <script>
        document.querySelectorAll('h2.entry-title').forEach(function(el) {
            el.outerHTML = el.outerHTML.replace(/<h2/g, '<h4').replace(/<\/h2>/g, '</h4>');
        });
    </script>
    <?php
});

Notes:

• Preferred Method: Modifying PHP is the cleanest and most performance-friendly.
• Backup First: Always back up your site before making changes.
• Child Theme: If modifying template files, use a child theme to avoid losing changes during updates.

Let me know if you’d like further clarification!