---
title: "View Settings: Custom Code"
date: 2026-04-23
author: "GravityKit"
link: "https://www.gravitykit.com/docs/gravityview/view-settings/view-settings-custom-code/"
---

The **Custom Code** tab in the View Settings metabox lets you add custom CSS and JavaScript that loads only when that specific View is displayed. This keeps your customizations organized inside the View itself, rather than scattered across theme files, the WordPress Customizer, or separate plugins.

**Note:** The Custom Code tab requires GravityView 2.19 or later.

## Where to find it

- Edit your View in WordPress.
- Scroll down to the **Settings** metabox.
- Click the **Custom Code** tab (the code icon).

The tab contains two fields: **Custom CSS** and **Custom JavaScript**. Both fields include a code editor with syntax highlighting.

## Available placeholders

Since GravityView 2.50, both fields support placeholders that are automatically replaced with View-specific values when the page loads.

| Placeholder | Replaced with | Example output |
|---|---|---|
| `VIEW_SELECTOR` | A CSS selector targeting only this View | `.gv-container.gv-container-123` |
| `VIEW_ID` | The View's ID number | `123` |
| `GF_FORM_ID` | The connected Gravity Forms form ID | `5` |

Placeholders are case-sensitive, must be uppercase, and are replaced everywhere in your code (including comments). If the View has no connected form, `GF_FORM_ID` is left as-is.

## How it works

### Custom CSS

- Output inside `` tags in the page's ``
- Loads after GravityView's default stylesheet (`gravityview_default_style`), so your styles take priority
- Uses WordPress's `wp_add_inline_style()` function

### Custom JavaScript

- Output inside `` tags in the page's footer
- Loads after GravityView's frontend script (`gravityview-fe-view`), so jQuery and GravityView's library are available
- Uses WordPress's `wp_add_inline_script()` function

Both CSS and JavaScript are output only once per View, even if the same View is embedded multiple times on a page.

## Developer notes

You can register additional placeholders using the [`gk/gravityview/custom-code/placeholders`](https://www.gravitykit.dev/docs/gravityview/filters/gk-gravityview-custom-code-placeholders/) filter (available since 2.50):

```
/**
 * Add a custom SITE_NAME placeholder for use in Custom CSS and JavaScript.
 *
 * @since 2.50.0
 *
 * @param array    $placeholders Associative array of placeholder => replacement value pairs.
 * @param \GV\View $view         The View object.
 * @param string   $content      The original content before replacement.
 *
 * @return array Modified placeholders array.
 */
add_filter( 'gk/gravityview/custom-code/placeholders', function( $placeholders, $view, $content ) {
    $placeholders['SITE_NAME'] = get_bloginfo( 'name' );
    return $placeholders;
}, 10, 3 );
```

```
/**
 * Add a custom SITE_NAME placeholder for use in Custom CSS and JavaScript.
 *
 * @since 2.50.0
 *
 * @param array    $placeholders Associative array of placeholder => replacement value pairs.
 * @param \GV\View $view         The View object.
 * @param string   $content      The original content before replacement.
 *
 * @return array Modified placeholders array.
 */
add_filter( 'gk/gravityview/custom-code/placeholders', function( $placeholders, $view, $content ) {
    $placeholders['SITE_NAME'] = get_bloginfo( 'name' );
    return $placeholders;
}, 10, 3 );
```

**Note:** If you have removed the default container classes using the `gravityview/render/container/class` filter, the `VIEW_SELECTOR` placeholder will not match your View's container. Use `VIEW_ID` instead.

## Detailed guides

- [Adding custom CSS to your Views](https://www.gravitykit.com/docs/gravityview/customizing-your-views/adding-custom-css-to-your-website/) — includes placeholder examples, `VIEW_SELECTOR` usage, and tips for targeting multiple View instances
- [Adding custom JavaScript to your Views](https://www.gravitykit.com/docs/gravityview/customizing-your-views/adding-custom-javascript-or-jquery-code-snippets-to-your-views/) — includes placeholder examples and practical code snippets
- [Adding custom PHP code snippets to your website](https://www.gravitykit.com/docs/gravityview/customizing-your-views/where-to-put-code-samples/)