Rename all Subscribe buttons. No theme modification

Themes
1

I use the “source” theme. My blog is not in English, and I would like to have my buttons translated. Despite the desired language chosen in settings, they are in English.

I wrote a script that helps me with this.

  1. Navigate to Code injection settings: https://<your blog name>.ghost.io/ghost/#/settings/code-injection;
  2. Paste the code from below after your already existing one. E.g., I have Plausible script.
  3. Change all texts "<Your ... button text>" to what you actually need. E.g., "Join Newsletter".
    3.1. If you would rather not rename something, just delete the line with its text.

Please write back if you have problems with the script.

<script type="module" >
  // Waiting for page to load.
  window.addEventListener("load", function whenWindowReady() {
    // Set texts for buttons here.
    const buttonsTexts = {
      topRightSignInButton: "<Your top right Sign in button text>",
      topRightSubscribeButton: "<Your top right Subscribe button text>",
      portalButton: "<Your potal Subscribe button text>",
      topEmailSubscribeButton: "<Your top right email Subscribe button text>",
      bottomEmailSubscribeButton:
        "<Your bottom right email Subscribe button text>",
      bottomSignUpButton: "<Your bottom Sign Up button text>",
    };
  
    // No need for changes after this line.
  
    // Discovering buttons.
    const buttons = { ...buttonsTexts };
    Object.keys(buttons).forEach((buttonName) => {
      buttons[buttonName] = null;
    });
  
    buttons.topRightSignInButton = document.querySelector(
      "[data-portal='signin']",
    );
  
    const topRightAndDataPortalButtons = Array.from(
      document.querySelectorAll("[data-portal='signup']"),
    );
  
    buttons.topRightSubscribeButton = topRightAndDataPortalButtons[0];
    buttons.portalButton = topRightAndDataPortalButtons[1];
  
    const emailSubscribeButtons = Array.from(
      document.querySelectorAll("[aria-label='Subscribe']"),
    ).map((button) => {
      try {
        return button.querySelector("span").querySelector("span");
      } catch (error) {
        return null;
      }
    });
  
    buttons.topEmailSubscribeButton = emailSubscribeButtons[0];
    buttons.bottomEmailSubscribeButton = emailSubscribeButtons[1];
  
    buttons.bottomSignUpButton = document.querySelector("[href='#/portal/']");
  
    // Filtering non-present buttons and renaming the present ones.
    Object.entries(buttons)
      .filter(([buttonName, button]) => buttonsTexts[buttonName] && button)
      .forEach(([buttonName, button]) => {
        const buttonText = buttonsTexts[buttonName];
  
        button.innerText = buttonText;
      });
  });
</script>

P.S. If you want to rename the fixed position right bottom Subscribe button, use the dedicated Portal settings: https://<your blog name>.ghost.io/ghost/#/settings/portal/edit. Choose the Look & feel tab and look for the Signup button text there.

2 Likes