Insertion Before, Inside or After any HTML element

Insertion positions Before, Inside and After HTML element can be used to insert any code anywhere on the page. Ad Inserter supports client-side and server-side insertion. Client-side insertion uses Javascript code to insert code block during or after the page is loaded in the browser, while server-side insertion means insertion when the plugin is called and the page is created. However, server-side insertion requires enabled output buffering (tab ⚙ / tab General).

If you need to insert before or after specific HTML tag (for example, h2) inside post or static page content you can also use insertion before/after paragraph and configure paragraph counting for this specific tag. This approach will give you more control over insertion positions.

Check How Ad Inserter works to understand how ads are displayed and how code is inserted.

Check glossary for terms used here.

Check How to insert ads at specific position for some practical examples of CSS selectors.

Client-side insertion can’t be used on AMP pages as Javascript code is not allowed on AMP pages. You should use Server-side insertion.

Server-side insertion at HTML elements is done after the page is generated and output buffer is processed. Javascript code for client-side insertion is normally inserted in the footer and runs as soon as the page is loaded and the DOM is ready. Of course, configured insertion delays are taken into account. To insert at HTML elements at some later stage configure wait for HTML element to define the element that appears only when the insertion shoud be triggered.

HTML element(s)

Here you define CSS selector (or comma separated list of selectors) of the HTML element(s) where you want to insert the code block (#id, .class). To get right CSS selector you can use web inspector in the browser or built-in HTML Element Selection tool. To open it click on the small button before the field.

In most cases the initial selector of most elements will be the complete path of that element which will be valid only on the page where you have selected that element.

This is because most posts or pages contain element IDs (#id) that are unique to this post or page. You need to edit and shorten the selector to be universal and still valid for all wanted posts or pages. Try to make the selector universal and as short as possible.

Of course, not all IDs are wrong or unwanted – you need to know what ID means and where it is used. To check your selector on different pages simply navigate the website to see if the right element is selected on all wanted posts or pages.

Use lower case letters for HTML elements.

Insertion

Client-side insertion inserts the code using Javascript in the browser after the page is loaded and DOM is ready (all page elements are available). However, it can’t work on AMP pages as Javascript code is not allowed there.

Server-side insertion is the best approach, however, it requires output buffering which is by default disabled as it may not work with all themes. To enable it go to plugin settings (tab ⚙ / tab General) and set Output buffering to enabled. After you save settings you will be able to select server-side for insertion before/after HTML element. For server-side insertion you can use most common CSS selectors (pseudo selectors like :nth-of-type(n) can’t be used, the same applies to jQuery pseudo selector :eq(n)).

Code position: Page position where the HTML code used for client-side insertion will be inserted. In most cases this is not important – footer is the best place for such code.

Client-side insertion needs error-free Javascript page – in case of issues check browser’s console for errors or messages.

Filter and Max insertions setting can work only server-side – when the page is created and Ad Inserter is called. Therefore, if you would like to use filter or define max insertions with insertion Before/After HTML element you need to use server-side insertion. If you are using client-side insertion you need to specify valid CSS selector that will limit your insertions.

Insertion Before, Inside or After HTML element may have undesired effects when using with Ajax calls (infinite scroll). Use other server-side insertions instead.

Insertion inside HTML element

When you select automatic insertion Inside HTML element additional setting becomes visible: Action. This action defines how the code block is inserted (or HTML element replaced):

• Prepend content – the block is added as the first child inside target element
• Append content – the block is added as the last child inside target element
• Replace content – the block replaces the content inside target element – if the block is empty it will clear the content of the target element
• Replace element – the block replaces the target element – if the block is empty it will remove the target element from the DOM

<before-element>
<element>
  <inside-element-prepend>
  <first-child>
  <second-child>
  <third-child>
  <fourth-child>
  <...>
  <last-child>
  <inside-element-append>
</element>
<after-element>

When you are inserting HTML tags inside HTML element make sure you set Alignment and Style to No wrapping to prevent inserting <div> wrapper around the code (tag) you are inserting. This way you can, for example, insert <li> element inside <ul>.

Waiting for an HTML element to be loaded

Sometimes the element where you would like to insert is not available immediately after the page is loaded. For example, comments loaded using Ajax requests, posts loaded in infinite scroll, or any other content loaded asynchronously. In such cases you can wait for an element to be loaded. This can be a different HTML element than the one where the insertion will take place:

Make sure you select an element that is loaded only once. Otherwise you may get multiple insertions – one for each element found.

Delaying insertion

Optionally you can delay insertion Before/After/Inside HTML element. This setting is independent of other settings.

Insertion into lists

Some themes use HTML lists to display post excerpts on blog pages. In such case each post is a list item (<li>) element. For example:

<ul class="wp-block-posts wp-block-post-template">
  <li class="wp-block-post post type-post status-publish">
    ...
  </li>
  <li class="wp-block-post post type-post status-publish">
    ...
  </li>
  <li class="wp-block-post post type-post status-publish">
    ...
  </li>
  <li class="wp-block-post post type-post status-publish">
    ...
  </li>
  <li class="wp-block-post post type-post status-publish">
    ...
  </li>
</ul>

Ad Inserter can insert between such list elements, however, care must be taken in order not to break the HTML code or page layout. For the block to be inserted into the list you need to configure at least the following:

• Set Alignment to No wrapping – the block should not be wrapped with a div element as the lists expects a li element. Please note that many client-side functions like tracking, client-side device detection, client-side GEO targeting can’t work without a wrapping div.
• Set Insertion to Before (or After) HTML element – target li elements in the list, for the example above you would use li.wp-block-post
• Wrap the ad code with a li tag using the same classes as used in the list – test which classes are needed, some may have no impact on the layout and you may also need to add custom classes to fix layout issues.
• Make sure the ad size will match the post excerpt size – many page layouts are responsive so make sure the ads will follow post excerpts – test on different devices.

Block code to be inserted in the list example above would look something like this:

<li class="wp-block-post post type-post status-publish">
  ad code
</li>

Define insertion positions

The settings above would insert Ad Inserter block before (or after) each li element in the list. In most cases this is not what we want. There are two solutions to define insertion positions:

• If the insertion at HTML element is configured to use client-side insertion (default setting) then you need to write element selectors that will match wanted insertion positions. This can be achieved using the :nth-child(n) selector. For example, to insert before the second and fourth post you need to use the following element selectors li.wp-block-post:nth-child(2), li.wp-block-post:nth-child(4). Please note that for each position for which you create an element selector, you may need to take into account also Ad Inserter blocks inserted as list elements above.
• If the insertion at HTML element is configured to use server-side insertion then you can use Filter to define insertion positions. This approach needs Output buffering enabled and may not work if the theme creates the list client-side – after the page is loaded.