Learn how to create a WordPress Button Shortcode - Digital Marketing

Create Custom CSS Short Codes in WordPress

Have you ever wanted to spruce up the content in your WordPress blog post or page with a few fancy buttons and needed to create a WordPress button shortcode? The built-in post editor allows you to customise the way your text looks by including inline CSS. But this practice is counter-productive especially when you need to reuse the same CSS effect regularly. The developers at WordPress realised this and have provided something called ‘shortcodes’.
Shortcodes are small pieces of code that you can insert into a post or a page that return a piece of content that they have been programmed to show, to the end user.

In this guide, we are going to create shortcodes that will convert any piece of text in a post or a page into a fancy looking call-to-action button without the hassle of including inline CSS.

[easyazon_image align=”center” height=”200″ identifier=”B071S3H5ZC” locale=”UK” src=”https://www.simonmuckle.com/wp-content/uploads/2017/06/51T5YY3n2L.SL160-1.jpg” tag=”persowebsi0c-21″ width=”125″]

[easyazon_cta align=”center” identifier=”B071S3H5ZC” key=”wide-orange” locale=”UK” tag=”persowebsi0c-21″]

Download button plugin

Preparing the shortcode

The first step is to create the shortcode. To do this, either access your theme’s functions.php (wp-content -> themes) file and place the following code in it or create a custom plugin for WordPress.

Building a Custom Plugin

NOTE: If you are likely to change your theme in the future, it is recommended going through the following steps first to ensure your plugin will not be overwritten by creating a custom plugin for WordPress (e.g. when updating the theme):

Navigate to *Wordpress Installation Directory* -> wp-content -> plugins
Create a folder called “my-custom-plugins”
Inside the new folder, create a file called “my-custom-shortcodes.php”. This file will contain the code of your custom plugin, which in this case will be the code for the
shortcode

Paste the following code in the file:

	/---------------------CODE TO BE PLACED IN FUNCTIONS/PLUGIN FILE---------------------/
	<?php
	/*
	Plugin Name: Custom CSS Shortcodes
	Plugin URI: http://www.mysite.com/
	Description: Custom CSS for styling content in posts
	Author: J Doe
	Version: 1.0
	Author URI: http://www.jdoe.com
	License: GPL2
	*/
	?>

view raw gistfile1.txt hosted with ❤ by GitHub

The above code snippet contains the name of your custom plugin and other important information that needs to be provided for WordPress to recognise it as a plugin
Navigate to Plugins from your WordPress dashboard and locate your custom plugin:
Click on ‘Activate’ to activate the plugin.

For this demonstration, we are going to create a shortcode which accepts text and a URL.

Edit functions.php

Paste the following code at the end of your WordPress installation’s functions.php file or custom plugins file.

	function call_to_action_shortcode( $atts ) {
	extract( shortcode_atts(
	array(
	'title' => 'Title',
	'url' => ''
	),
	$atts
	));
	return '<a href="' . $url . '" class="custom-button">' . $title . '</a>';
	}
	add_shortcode( 'call-to-action-shortcode', 'call_to_action_shortcode' );

view raw gistfile1.txt hosted with ❤ by GitHub

(Click here for the complete WP Custom Plugin Code)

In the above code snippet, we have created a function called ‘call_to_action_shortcode’.

add_shortcode( ‘call-to-action-shortcode’, ‘call_to_action_shortcode’ );

This piece of code tells WordPress to create a

[call-to-action-shortcode]

shortcode (the first parameter passed in the add_shortcode function). The second parameter designates the function that will be called when this shortcode is called in any post or page.

Preparing the CSS

Now that WordPress knows what to return when our shortcode is called, we need to style the text that is being passed. The CSS used for this example is shown below:

	/----------------------------CSS FOR CUSTOM-BUTTON---------------------------------/

	a.custom-button{
	font-family: 'Raleway', sans-serif;
	font-size: 28px;
	color: #fff;
	display: inline-block;
	text-decoration: none;
	padding: -1em;
	background: #83BCC5;
	overflow: hidden;
	padding-left: 1em;
	}
	a.custom-button:after {
	display: inline-block;
	background: #659EA7;
	content: "»";
	position: relative;
	margin-left: 1em;
	padding: .6em 1em;


	}
	a.custom-button: hover {
	background-color: #659EA7;

	}

view raw gistfile1.txt hosted with ❤ by GitHub

Place this piece of code at the bottom of your theme’s style.css file and save it. You can access this file by navigating to Appearance -> Editor -> Style.css in your WordPress installation’s dashboard.

Using the shortcode

We are going to use the shortcode we just created to style a piece of text “Learn More” in a blog post. Place the following shortcode in your post:

[call-to-action-shortcode title="Learn More" url="http://www.mytargetlink.com"]

view raw gistfile1.txt hosted with ❤ by GitHub

Go ahead and preview the post and you should be able to see the following result with the help of the WordPress button shortcode you just created:

That certainly looks better than a Spartan text link, and it catches the attention of every reader on your website! Have you tried to click it? The button below is the real deal.

Become a WordPress Hero!

[easyazon_image align=”center” height=”160″ identifier=”B00RZDEKVA” locale=”UK” src=”https://www.simonmuckle.com/wp-content/uploads/2017/06/516QvqIwuL.SL160.jpg” tag=”persowebsi0c-21″ width=”128″]

[easyazon_cta align=”center” identifier=”B00RZDEKVA” key=”wide-orange” locale=”UK” tag=”persowebsi0c-21″]

That was easy. Wasn’t it?

via GIPHY

WordPress runs on PHP too.

[easyazon_image align=”center” height=”160″ identifier=”1449392776″ locale=”UK” src=”https://www.simonmuckle.com/wp-content/uploads/2017/06/51RMQ1jIcPL.SL160.jpg” tag=”persowebsi0c-21″ width=”123″]

[easyazon_cta align=”center” identifier=”1449392776″ key=”wide-orange” locale=”UK” tag=”persowebsi0c-21″]

Go to beginning

Still too much work? Then download a plugin.

Download button plugin