igloobob igloobob - 10 months ago 55
Javascript Question

Remove some auto generated text from a heading with javascript

I'm using uncode theme and I have a page heading that is showing 'Archive: Portfolio'

I want to remove the 'Archive:' bit from that heading.

In the source it looks like this:

<h1 class="header-title h1"><span>Archives: Projects</span></h1>

I have tried removing Archive from all the page titles with Yoast SEO plugin but it is still showing.

Is there a way to remove that word with javascript maybe does anyone know?


Answer Source

I'd be wary in removing it via javascript. It seems to me that adding a piece of text somewhere in the code's execution, and then removing it on the client-side smells like "contrived complexity".

Take a look at the wordpress template hierarchy, and manually search for the template file that's rendering the Archives: string of text.

I'd start with archive.php, and then fall my way up through other archive-*.php pages, then to taxonomy.php category.php, and so on.

WordPress Template Hierarchy

If you're comfy in the command line, you might also consider grepping for the string: grep -r /path/to/wp/theme "Archive:" and sifting through the results to find the template file(s) with that on one of their lines.

But if you insist on removing the string via javascript, you might try dropping something like this at the bottom of the <body>, via a function in functions.php:

function remove_archive_text_via_js() {
    if (is_archive()) { ?>
        <script type="text/javascript">
            var archiveHeaders = document.getElementsByClassName('header-title');
            for (i = 0, headerCount = archiveHeaders.length; i < headerCount; i++) {
                var replacedText = archiveHeaders[i].textContent.replace('Archives: ', '');
                archiveHeaders[i].textContent = replacedText;
    <?php }

add_action('wp_footer', 'remove_archive_text_via_js');