Displaying advertisements via shortcodes

Displaying advertisements via shortcodes

Ah, I lied :). There won’t be a post about shortcodes and weather. The issue is, quite some time has passed since I wrote that shortcode, and the method for detecting cities on the weather site has changed. So now, it's unclear how to get the city ID and pass it to the shortcode to display the weather widget. And without that, as you understand, the development becomes meaningless.

I’m sure you’ve seen AdSense banners (or similar) on many WordPress blogs. In this post, I’ll explain how to do that — or at least how I would do it.

First, we need to create a folder in the root of the site to store our ad files (later they could be stored in the DB). Let’s call it adv and place inside it a few files with clear names — 200x200.txt, 180x150.txt, 125x125.txt, etc. These filenames match the banner dimensions, which is more intuitive than assigning them IDs like “3”, “7” or “22”.

Second, we’ll create a shortcode (you can learn where to put it here) that will read the file content and display it in the post. Here’s the code:

function wp2fl_adv($atts, $content = null)
{
	//Sets
	$atts = shortcode_atts(array(
		'id' => '',
		'align' => '',
	),$atts);

	//Filter
	$id = trim($atts['id']);

	//Check format
	if(preg_match('/^d+xd+$/i', $id) == FALSE)
	{
		return "";
	}

	$file = ABSPATH.'adv/'.$id.'.txt';
	if(is_file($file) == TRUE)
	{
		$c = file_get_contents($file);
	}
	else
	{
		return "";
	}

	switch ($atts['align'])
	{
		case 'center':
			preg_match('/^(d+)xd+$/i', $id, $a);

			$c = '<div style="width:'.$a[1].'px; margin:10px auto;">'.$c.'</div>';
		break;
		case 'left':
			$c = '<div style="float:left; margin:10px 10px 10px 0;">'.$c.'</div>';
		break;
		case 'right':
			$c = '<div style="float:right; margin:10px 0 10px 10px;">'.$c.'</div>';
		break;
	}

	return $c;
}

add_shortcode("adv", "wp2fl_adv");

Let’s go through it:

//Sets
$atts = shortcode_atts(array(
	'id' => '',
	'align' => '',
),$atts);

Sets default attributes — the ad ID and alignment (left, center, right).

//Filter
$id = trim($atts['id']);

Trims whitespace from the ID, in case someone uses a shortcode like [adv id="200x200 "].

//Check format
if(preg_match('/^d+xd+$/i', $id) == FALSE)
{
	return "";
}

Ensures the ID is in the format of numbers x numbers, e.g., 200x200.

$file = ABSPATH.'adv/'.$id.'.txt';
if(is_file($file) == TRUE)
{
	$c = file_get_contents($file);
}
else
{
	return "";
}

If the file exists, read its content.

switch ($atts['align'])
{
	case 'center':
		preg_match('/^(d+)xd+$/i', $id, $a);

		$c = '<div style="width:'.$a[1].'px; margin:10px auto;">'.$c.'</div>';
	break;
	case 'left':
		$c = '<div style="float:left; margin:10px 10px 10px 0;">'.$c.'</div>';
	break;
	case 'right':
		$c = '<div style="float:right; margin:10px 0 10px 10px;">'.$c.'</div>';
	break;
}

Wraps the content in a <div> with styles depending on the alignment: center, left, or right.

To use this shortcode, simply write:

[adv id="200x200" align="left"]

Save the post and check the result. Here's how it looked for me:

Ad banner displayed via shortcode

That’s all. Thanks for reading!

Posts on similar topics

Are you having problems with your WordPress site? Do you need additional functionality? A custom plugin or a new page?
Then write to me via the feedback form, and I will try to help you.

Write a comment

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