Connect with us

Tutorials

How to Create Custom Shortcode in WordPress

Published

on

How to Create Custom Shortcode in WordPress

In WordPress, a custom shortcode can be used to place dynamic content or possibly advertising inside each of your Posts or Pages. WordPress Custom Shortcode is widely used in the majority of WordPress Plugins and Themes to add extra features.

It is not a complicated feature to add to your own blog if you happen to want to add something special in your post that your Theme does not come with.

The purpose of this post is simply to show you how you can utilise the power of shortcodes to display, for example, ads in certain parts of your articles. Thus for example, if you are using Google Adsense and you want to display ads after a certain number of paragraphs in your article, you can simply trigger your ads shortcode in that paragraph and the ads will be displayed. So you don’t need to manually always copy-paste your Adsense codes in your articles.

Of course, you can do more with your shortcode once you get the idea of how the feature works. The format of the code looks like this:

[myshortcode]

The reason why you are seeing the text in the square brackets above is that I haven’t created the function for this. But once you create the function in your theme, whatever code or data you want the shortcode to output is what will be displayed to the reader.

How to create your own shortcode

The function to create the shortcode looks like the below:

//Function to display Adsense
function wp_googleAds_responsive() {

//Past adsense code inside variable
$string .= ' PASTE GOOGLE ADSENSE CODE HERE ';

//Return the Ads code
return $string;

}
// Make shortcode custom
add_shortcode('ads_responsive', 'wp_googleAds_responsive');

You can copy and paste this code in the function.php file of your WordPress Theme. You will need a code editor to edit any php file in your theme. Remember to paste your Adsense code in the quotes ‘ ‘ of the $string.

After pasting your AdSense code in the $string variable, your code should look like the one below

//Function to display Adsense
function googleAds_responsive() {

//Past adsense code inside variable
$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block;"
data-ad-format="auto"
data-full-width-responsive="true"
data-ad-layout="in-article"
data-ad-client="ca-pub-0012345678910119"
data-ad-slot="5665443222"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>';

//Return the Ads code
return $string;
}
// Make shortcode custom
add_shortcode('ads_responsive', 'googleAds_responsive');

Now to display your ads in your WordPress posts, you will need to add [ads_responsive] inside wherever you want the ads to display. You can reuse this same shortcode over and over on pages and sidebar widgets as well. Wherever the shortcode is pasted will automatically run the function and display your AdSense code

add custom shortcode into post

You can go ahead and play around this code.

Leave a comment below let me know how you manage to implement this in your theme.

Follow us

Advertisement

Trending