# Is possible to customize a Custom Code?

**URL:** <https://forum.pinegrow.com/t/is-possible-to-customize-a-custom-code/10037>\
**Category:** WordPress\
**Created:** [November 26, 2024, 4:55pm UTC](https://forum.pinegrow.com/t/is-possible-to-customize-a-custom-code/10037 "2024-11-26T16:55:43Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![fabioto](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/fabioto/32/6485_2.png) [@fabioto](https://forum.pinegrow.com/u/fabioto)\
**Post date:** [November 26, 2024, 4:55pm UTC](https://forum.pinegrow.com/t/is-possible-to-customize-a-custom-code/10037/1 "2024-11-26T16:55:43Z")

</div>

Hello, I would like to know if is possible to customize (Customizer Field), a custom code. The idea is to change just the part inside tab 2:

```auto
$content = file_get_contents(get_template_directory() . '/template-parts/app.php');
                $escaped_content = htmlentities($content);
                echo '<div style="white-space: pre; font-family: monospace;">' . $escaped_content . '</div>';

```

Here we have the complete section:

```auto
<section class="container mx-auto mt-20" cms-section="tab" cms-section-title="tabs">
    <!-- nomes dos componentes -->
    <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
      <ul class="flex flex-wrap justify-center -mb-px text-xl font-normal text-center" id="custom-tabs-2" data-tabs-toggle="#custom-tabs-content-2" data-tabs-active-classes="text-purple-600 hover:text-purple-600 dark:text-purple-500 dark:hover:text-purple-500 border-purple-600 dark:border-purple-500" data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300" role="tablist">
        <li class="me-2" role="presentation">
          <button class="inline-block p-4 border-b-2 rounded-t-lg" id="tab-2-1" data-tabs-target="#tab-content-2-1" type="button" role="tab" aria-controls="tab-content-2-1" aria-selected="true">
            Componente
          </button>
        </li>
        <li class="me-2" role="presentation">
          <button class="inline-block p-4 border-b-2 rounded-t-lg" id="tab-2-2" data-tabs-target="#tab-content-2-2" type="button" role="tab" aria-controls="tab-content-2-2" aria-selected="false">
            Tailwind
          </button>
        </li>
        <li class="me-2" role="presentation">
          <button class="inline-block p-4 border-b-2 rounded-t-lg" id="tab-2-3" data-tabs-target="#tab-content-2-3" type="button" role="tab" aria-controls="tab-content-2-3" aria-selected="false">
            Tailwind.config
          </button>
        </li>
      </ul>
    </div>
  
    <!-- conteudos dos componentes -->
    <div id="custom-tabs-content-2">
      <!-- Conteúdo da aba 1 -->
      <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="tab-content-2-1" role="tabpanel" aria-labelledby="tab-2-1" data-pg-name="tab-content-1">    
        <div data-empty-placeholder cms-editable="compo" cms-editable-type="content" cms-editable-label="compo" cms-editable-section="tab">
        </div>
    </div>
  
      <!-- Conteúdo da aba 2 -->
      <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="tab-content-2-2" role="tabpanel" aria-labelledby="tab-2-2" data-pg-name="tab-content-2">
        <div class="max-h-[420px] bg-gray-900 text-green-400 p-4 rounded-lg text-sm overflow-auto">
          <div>
            <pre cms-editable="cod" cms-editable-type="content" cms-editable-label="cod" cms-editable-section="tab">
              <code cms-function="code" cms-function-type="content" cms-function-code="$content = file_get_contents(get_template_directory() . '/template-parts/app.php');
                $escaped_content = htmlentities($content);
                echo '<div style=&quot;white-space: pre; font-family: monospace;&quot;>' . $escaped_content . '</div>';">
                
              </code>
            </pre>
          </div>
        </div>
      </div>
  
      <!-- Conteúdo da aba 3 -->
      <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="tab-content-2-3" role="tabpanel" aria-labelledby="tab-2-3" data-pg-name="tab-content-3"><div data-empty-placeholder cms-template-part="template-parts/crypto"></div>
        
      </div>
    </div>
  </section>

```

 ![Captura de tela 2024-11-26 135229](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f560298488018ca75abc3a6678223f5b20087eb3.png)