What is the $w Selector

Learn how to use the $w selector to select Wix elements

Exploring $w

By now you should be familiar with the Wix Editor and its Code Panel feature which allows you to write and apply code to your website. When you open the Code Panel, you’ll see default boilerplate code in all the files of a website. Files under the Main Pages section and the Global section in the Page Code side panel will have the following code (after ignoring the comments):

$w.onReady(function () {
});

This code should be familiar, both reference the $w syntax, which is unique to Wix. This namespace, or logical grouping of functions, gives us access to all the various parts that make up a Wix website.

In this case, the $w and onReady(...) syntax seen in the default code of the Page Code files ensures that our code runs when the website has completely loaded in the browser.

In Dev Mode, you can use the Velo API, the Application Programming Interface of Wix’s open development platform, to make requests to Wix to do things with your website. This includes customizing the website’s appearance and functionality, such as changing the styling of the website, adding animations, or retrieving information about the functionality of the website, such as what device is being used to view it.

In this article, we’ll take a look at how to use $w to select different elements and manipulate them.

What is an element?

All websites are composed of HTML elements. These are all the parts of a website that a user interacts with: a body, headers, text, images, forms, buttons, etc.

Wix website with elements highlighted

With the Wix Editor, we can generate custom Wix elements for us rather than the traditional way of writing code ourselves. This can save us time and the effort of learning HTML or CSS or styling frameworks in-depth by providing default elements that are already styled and can be customized later.

Knowing that websites are composed of elements allows us to target specific parts of our website for customization through code we write in the Code Panel.

Selecting and Manipulating an Element

Let’s take a look at how to select a specific element of a website so we can manipulate it with code in the Code Panel.

Wix Editor showing heading element

In order to select a specific element, we need to look at one of two properties of an element, either its type or id.

A Wix element’s type describes the purpose of the element and is generated by Wix.

In addition to type, Wix elements are all assigned an id property at the time of their creation. id acts as a specific and unique name for each instance of an element on a webpage.

Hovering over an element in the Wix Editor or clicking on it will reveal its type highlighted in blue and its id prefixed with a #. We can also access the Properties and Events panel of an element to find its type or id.

Wix heading element with Properties and Events panel

The name of the id can be changed in the Wix Editor via the Properties and Events panel located in the bottom right corner. Remember, id s are unique and attempting to reuse an id name for another element will result in an error. An id is particularly useful when we have several elements of the same type but want to be specific and target only one of these elements with our code. For the rest of this article, we’ll focus on selecting elements with the id.

Once we know the id name of an element, we can use the $w selector to select it using this syntax inside the boilerplate code in the Code Panel:

Diagram showing the $w selector function selecting an element with an id

The $w namespace allows us to access any Wix element. The id of a specific element in between quotes is a string representing some identifier of a specific Wix element. The # in the string denotes that the string being passed is an id and not another property such as type. The id name of an element is after the #.

Let’s take a look at this website which has a heading element with some placeholder text:

Wix Editor with Code Panel open and code in it

With Dev Mode on, we can add code into the Code Panel. Inside the default code and under the // Write your JavaScript here comment add the following code:

$w('#text1').text = 'Welcome to my Wix website!';

This code selects a Wix element with the id of text1, which is the heading element. .text is a property of the element we’re manipulating and refers to text contained within the selected element.

While we’re in the Wix Editor, any code changes we make to a website won’t be applied until we click the Preview button and won’t change a live website until we click the Publish button. Viewing the website in Preview, we can see that the heading’s placeholder text of “Heading 1” has been replaced with the text “Welcome to my Wix website!”

Preview of Wix website

Recap

In this article, we covered:

  • What elements are
  • How Wix elements differ from traditional HTML elements
  • How to select and manipulate an element of a Wix website

As your websites grow in complexity with more elements, being able to easily specify which of these elements you want to change becomes important. The Wix Editor provides the $w selector function to quickly access the elements we want and use the Velo API) to manipulate the selected element. Later, we’ll learn how to change other Wix element properties to provide even more customization.

This is just one example and property of an element that can be accessed and manipulated after the selection of an element. While it might seem like a simple task, once you learn more about Wix and triggering events like clicking or scrolling, you’ll be able to create dynamic, captivating websites.

Author

Codecademy Team

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'

Meet the full team