How to set the content of an element to the current page's title

Problem

There is no element or setting in the designer to display the current page’s title in an element

Workaround

Current workaround is to use JavaScript to get and use the page title using the custom code document.title.

The page title (also called window/tab title), is set via the “Meta Title” field in the page settings:

Screenshot_2017-10-24_111055

Example of tab title:

Screenshot_2017-10-24_111023

Custom code example and output:

Screenshot_2017-10-24_111003


Example

An example of this can be found in my sandbox:
http://sandbox-903b9c.webflow.io/half-size-background-color-on-title

Designer view (use placeholder element)

Default placeholder (in this case an h1 element)

Set title in page settings

Screenshot_2017-10-24_121014

Published view

Code used in site footer

(or you can place in page footer code if you only want this on a certain page)

<script>
Webflow.push(function() {
  
  // Set the text of the first "h1" tag on the page
  $('h1').first().text(function() {

    // Set it to the page(document) title if the text of the element is exactly the default text ("Heading"),
    //   otherwise, set the text content to whatever it currently contains (i.e.: do nothing)
    return $(this).text() !== "Heading" ? $(this).text() : document.title;
  });
  
});
</script>

Alternatively, you can target the element using a class or ID selector:

<script>
Webflow.push(function() {
  
  // Set the text of the element with class "myelement" to the page title
  $('.myelement').text(document.title);
  
});
</script>

Do note that Webflow changes the class name set in the designer, to lowercase + replace spaces with hyphens when published.


Also, feel free to contact me for further code help and/or customization of third-party plugins

2 Likes

This is great! Thanks @samliew