Insertion Before, Inside or After any HTML element
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.
Here you define CSS selector (or comma separated list of selectors) of the HTML element(s) where you want to insert the code block (
.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.
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 can’t be used).
Filter and Max insertions setting works only when the page is created and Ad Inserter 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.
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