title: How to replace HTML in WordPress outside Contents?
body: <p>I'd like to insert barba.js wrapper to enable barba around main tag.</p>
  
  <p>Current code is like below.</p>
  
  <pre><code>&lt;main&gt;
      &lt;article&gt;
          ........
      &lt;/article&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>And what I desire is like below.</p>
  
  <pre><code>&lt;div id="barba-wrapper"&gt;
      &lt;div class="barba-container"&gt;
          &lt;main&gt;
              &lt;article&gt;
                  ........
              &lt;/article&gt;
          &lt;/main&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If main tag is inside 'the_content' filter, I could code like below.</p>
  
  <pre><code>add_filter('the_content', function($content) {
      $content = str_replace('&lt;div id="barba-wrapper"&gt;&lt;div 
      class="barba-container"&gt;&lt;main&gt;', '&lt;main&gt;', $content);
      $content = str_replace('&lt;/main&gt;', '&lt;/main&gt;&lt;/div&gt;&lt;/div&gt;', $content);
      return $content;
  });
  </code></pre>
  
  <p>However, <code>&lt;main&gt;</code> is not inside <code>the_content</code> filter, above function is not working.</p>
  
  <p>Is there anyway to replace it? and is there any warning about this?</p>