Wrap WYSIWYG content using custom HTML

This article will show you how to set up custom HTML wrapping element around “content” reference (but can be applied to any other reference in any other module). Let’s get started.

First of all, you need to set up the following folder structure:


Inside the layout folder, 3 XML files should be created:

  • catalogsearch_advanced_index.xml – this file represents any module/controller/action route mapping (so in this case, this will be loaded when user visits /catalogsearch/advanced route in browser)
  • cms_page_view.xml – this file will be loaded when any CMS page is opened, (for example, Homepage, About us, Customer Service…)
  • cms_page_view_id_enable-cookies.xml – this file will be loaded only when specific page is opened in browser (in this case, “Enable Cookies” page). As a rule of thumb, the XML file should be named according to the following: cms_page_view_id_{{page-identifier}}.xml

Wrap using route-specific update

Paste the following code within body node in catalogsearch_advanced_index.xml:

<referenceContainer name="content" htmlTag="div" htmlClass="advancedsearch-class" htmlId="advancedsearch-id" />


Wrap using page-global update

Paste the following code within body node in cms_page_view.xml:

<referenceContainer name="content" htmlTag="div" htmlClass="wysiwyg-general-class" htmlId="wysiwyg-general-id" />


Wrap using page-specific update

Paste the following code within body node in cms_page_view_id_enable-cookies.xml:

<referenceContainer name="content" htmlTag="div" htmlClass="wysiwyg-specific-class" htmlId="wysiwyg-specific-id" />


Wrap using static-block-specific update

All that needs to be done is create your custom block as a child node of the content reference, as shown in the following snippet:

<block class="Magento\Framework\View\Element\Text\ListText"
    <block class="Magento\Cms\Block\Block" name="cms_test_block">
            <argument name="block_id" xsi:type="string">test-block</argument>


There are two important things to mention about this article:

  1. Be careful if you are setting up custom wrapping on both Page-global and Page-specific level, Page-specific values will override Page-global values
  2. The list of allowed HTML tags is as follows: dd, div, dl, fieldset, main, header, footer, ol, p, section, table, tfoot, ul, nav

There is also a zip file containing the files used here, in case you need some help. If you have any questions, leave a comment below. Happy M2 coding! =)

You made it all the way down here so you must have enjoyed this post! You may also like:

Add Pagination to Custom Collection in Magento Dario Trbovic
Dario Trbovic, | 6

Add Pagination to Custom Collection in Magento

Minify your CSS and JavaScript code! Mladen Ristic
, | 4

Minify your CSS and JavaScript code!

Adding custom credit card type to your payment method in Magento Toni Peric
Toni Peric, | 2

Adding custom credit card type to your payment method in Magento

1 comment

  1. Amazing blog!!! I had been doing social media on my own for my business but i realized there were many things which i was missing out and i am looking for a social media marketing

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.