How to rename h1 text with javascript (on wordpress)

Question

I would like to rename a h1 text in the header for any single page, is it possible with a script?

The line of the title is:

Please post CODE, not PICTURES of code. Click edit, then the `[<>]` snippet editor, paste the HTML into the pane, click TIDY and save — mplungjan, May 08 '20 at 18:05

mplungjan · Accepted Answer · 2020-05-08T19:09:02.837

Like this

I wrap in a page load event and then use the closest known selector

If you have class="titoloheader" the code is even simpler than using

div[data-row=middle] h1

If you want to change only on pages with /articoli/ you can test pathname:

 const url = new URL(location.href); 
 if (url.pathname.split("/").indexOf("articoli") !=-1) {
   document.querySelector("h1.titoloheader").innerText = "Hello"
  }  
})

If you want to change on page-id-X, you can do this:

Vanilla JS

const pageTitles = {
  "41": "Hello",
  "44": "Goodbye",
  "47": "Ciao",
  "3": "Arriverderci",
  "313": "Hey",
  "316": " Bye",
  "318": " This is silly",
  "50": "The end"
};

const changeHeader = () => {
  let id = [...document.body.classList] // all the classes of the body tag
    .filter(classStr => classStr.startsWith("page-id")); // find the one that starts with page-id
  if (id.length)[, , id] = id[0].split("-") // if found (an array) grab the last part after last -
  if (id && Object.keys(pageTitles).includes(id)) { // do we find that ID in the list
    document.querySelector("h1.titoloheader").innerText = pageTitles[id]; // change the header
  }
};

window.addEventListener("load", changeHeader); // when the page loads

<body class="home page-template-default page page-id-47 logged-in admin-bar no-customize-support ct-loading" data-link="type-1" data-forms="classic">

  <div data-row="middle" data-columns="1">
    <div class="ct-container">
      <div data-column="middle">
        <div data-items="">
          <div class="ct-header-text " data-id="text">
            <div class="entry-content">
              <h1 class="titoloheader">Benvenuti</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

jQuery

const pageTitles = {
  "41": "Hello",
  "44": "Goodbye",
  "47": "Ciao",
  "3": "Arriverderci",
  "313": "Hey",
  "316": " Bye",
  "318": " This is silly",
  "50": "The end"
};

const changeHeader = () => {
  let id = [...document.body.classList] // all the classes of the body tag
    .filter(classStr => classStr.startsWith("page-id")); // find the one that starts with page-id
  if (id.length)[, , id] = id[0].split("-") // if found (an array) grab the last part after last -
  if (id && Object.keys(pageTitles).includes(id)) { // do we find that ID in the list
    $("h1.titoloheader").text(pageTitles[id]); // change the header
  }
};

$(document).ready(changeHeader);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <body class="home page-template-default page page-id-47 logged-in admin-bar no-customize-support ct-loading" data-link="type-1" data-forms="classic">
<div data-row="middle" data-columns="1">
  <div class="ct-container">
    <div data-column="middle">
      <div data-items="">
        <div class="ct-header-text " data-id="text">
          <div class="entry-content">
            <h1 class="titoloheader">Benvenuti</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

With jquery does not work, with Vanilla JS your code change my logo website, not the h1 header — Mario, May 08 '20 at 18:18
@Mario My code works on the HTML I put together. We could both save a LOT of time if you posted relevant HTML in your question. For example I have no idea if you have a duplicate id="header" where your logo is — mplungjan, May 08 '20 at 18:20
@Mario If there are more H1 tags in you header, add .entry-content to the selector: `"#header .entry-content h1"` — mplungjan, May 08 '20 at 18:25
@Mario Ok, I found the selector to use. Your picture was confusing everybody. Next time please post RELEVANT HTML and we could have finished 20 minutes ago :) — mplungjan, May 08 '20 at 18:32
You even have a class .titoloheader - so that makes it even simpler — mplungjan, May 08 '20 at 18:37
Ok now it works! But i would like to change this title NOT in all pages, but only in 2 or 3 pages... What is the correct syntax to choose the page to apply this script? — Mario, May 08 '20 at 18:40
Wow, you do not give much information away. So you want to change on page-id-18 for example? — mplungjan, May 08 '20 at 18:48
See update. You are aware that the pastebin you posted was page-id-18 ? — mplungjan, May 08 '20 at 19:00
Yes, thank you. I will create a script for every page because the text is different for each page. — Mario, May 08 '20 at 19:06
Haha. Little drips and drabs (prede e drappeggi?) We can COMBINE. Give me 3 minutes — mplungjan, May 08 '20 at 19:10

Andriy Petrusha · Answer 2 · 2020-05-08T18:24:40.223

0

jQuery:

$('#main-container div[data-row="middle"] .entry-content h1').html('Your New Title');

Vanila JS:

var el = document.querySelector("#main-container div[data-row="middle"] .entry-content h1");
el.innerHTML= "Your New Title";

edited May 08 '20 at 18:24

answered May 08 '20 at 17:59

Andriy Petrusha

129
1
1
8

I used jQuery, but it does not work... the title do not changing – Mario May 08 '20 at 18:03
Place your code into `$(document).ready(function() { ... });` – Andriy Petrusha May 08 '20 at 18:06
Like that? $(document).ready(function() { $('#main-container .entry-content h1').html('Your New Title'); }); but it does not work – Mario May 08 '20 at 18:11
I update my code - added more specific selector. Are you sure your code run properly? Put `console.log('!!!')` before. Do you see this '!!!' in browser console? – Andriy Petrusha May 08 '20 at 18:27

benihana21 · Answer 3 · 2020-05-08T18:20:00.997

To change the text of the h1 element in your example when the page loads, you can use:

window.addEventListener('load', event => {
  const h1Element = document.querySelector("#main-container .entry-content h1");
  h1Element.innerText = 'New H1 Text';
});

If you don't make the change to the H1 in the window load event callback, the element you're targeting likely won't be available in the DOM when you try to access it with document.querySelector.

Ievgen · Answer 4 · 2021-10-19T22:46:04.010

0

Sometimes text can be replaced using pure CSS

See the collection of answers here:

How can I replace text with CSS?

Cons:

Doesn't supported by all browsers, check your requirements and browser compatibility list.
Old text will remain hidden, can be problem for some screen reader.

Pros:

Sometimes you cannot inject your JavaScript directly.

edited Oct 19 '21 at 22:46

answered Oct 19 '21 at 22:36

Ievgen

4,261
7
75
124

score -1 · Answer 5 · answered May 08 '20 at 18:13

-1

Here is a simple example from W3 schools

<!DOCTYPE HTML>
<html>
<body>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

</body>
</html>

If you notice, they add a unique id to the h1 tag. This way way you can access the tag directly.

https://www.w3schools.com/tags/att_id.asp

answered May 08 '20 at 18:13

CJ Broersma

179
1
11

This is not what OP asked for. He asked how to change the h1 nested deep in his HTML structure. And there was no mentioning of a click of anything – mplungjan May 08 '20 at 18:14
Also please have a look a [MDN](https://developer.mozilla.org/en-US/) instead of the often poor w3schools resource – mplungjan May 08 '20 at 18:17
"rename a h1 text in the header for any single page" it sounds like he wants to have the ability to change h1 text for any page. I didn't read anything about nesting. Either way, we have given him a solution. peace. – CJ Broersma May 08 '20 at 18:26
I feel your solution, although correct, is too complicated for him to understand. He seems to be a beginner. Which is why I showed him a simple way to change the h1 text. Whether it is in the header or not, makes no difference. Maybe I should have mentioned that. Yeah, I'm Dutch, but live in Canada. – CJ Broersma May 08 '20 at 18:43
Yes i'm a beginner, i already checked that page yesterday, but it was difficult for me to implement the script in an html page (in wordpress) – Mario May 08 '20 at 18:56
@CJBroersma The code Mario wants is not simple. I give him working code that does what was specified. Too bad I had to rewrite it 4 times to work with the changing specifications. Your example is a simple way to change innerHTML on click. That is not actually remotely what Mario actually wants – mplungjan May 08 '20 at 19:07
Did you get it working @Mario? Are you trying to change all the h1 tags text on page load? Or are you trying to change specific pages? Sorry, I didn't get the full extent of your question. – CJ Broersma May 08 '20 at 19:19

How to rename h1 text with javascript (on wordpress)

5 Answers5