How to add an advertisement when viewing your posts using the Visual Editor

This tutorial applies when editing the layout for viewing single posts, not the Blog Index or any other archive layout.

If your site or blog relies on advertisements, you want a way to add an advertisement somewhere within the post, without having to enter it manually, right? Assuming you want the same ad on every post or you are using a plugin or service that randomizes the ads, this tutorial will help you do that.

For this particular tutorial, I’m going to add an advertisement after the title of the post.

Step 1

In Grid mode, open up Single » Post to customize your layout.

hw-ad-single-post-1

I’m going to choose a preset layout from the Grid Wizard to get me started but you can choose a preset, clone or build from scratch.

hw-single-post-ad-2

Now, notice the preset I chose only has one content block. I’m going to make some changes to prepare my layout.

Step 2

Add a custom code block and a second content block. Make sure you save.

hw-single-post-ad-3

Step 3

Open the block options for the original content block (the top one). Click on the display tab. We are going to turn off some of the options here.

Where it says “Entry Content Display” change that to “Hide Entry content”. Where it says “Comment Visibility”, change that to “Always hide comments”. You also need to uncheck “Show Single Post Navigation” otherwise you will have pagination underneath your Post Title and meta.

hw-single-post-ad-4

You could also click on the Meta tab and remove the meta from displaying before the advertisement by clicking on the pencil next to “Meta Content Above” and “Meta Content Below” and erasing everything in the boxes.

Step 4

Open up the block options for the custom code block and paste in the code for your advertisement. This could be HTML, PHP,javascript or a shortcode.

hw-single-post-ad-5

The code in the screenshot is an example only! Your code can be HTML, javascript, PHP or a shortcode. It can be a text ad or an image.

Step 5

Open the block options for the second (bottom) content block. Click on the display tab and uncheck “Show Titles”.

hw-single-post-ad-6

Now, assuming you left the meta alone in the first (top) content block, then you also need to makes changes in the Meta Tab. Click on the pencils next to “Meta Above Content” and “Meta Below Content” and erase everything int the boxes.

hw-single-post-ad-7

The Result

The result is your Post Title and meta, then your advertisement, then your post content and comments.

hw-single-post-ad-8

This is just an example to show you the result. Your result may look very different from this depending on what type of advertisement you are using.

Spread the word!

3 Responses

    • Hi Evan,

      We wanted to provide a nearly 100% Headway solution for those that don’t want to bother with a plugin. Not to mention, I would argue that this definitely could be faster than searching for, installing, and configuring the right plugin.

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress