How to Create Image & Button Shortcode in WordPress

WordPress Development

You can create a WordPress shortcode for image or button by just creating a custom shortcode and passing required parameters and attributes in it.

I have written a detailed article about creating custom WordPress shortcodes, where I have outlined how to pass parameters and attributes in shortcodes.

Here I am sharing the code snippets to create an image & button shortcode in WordPress.

Create Image Shortcode in WordPress

To create image shortcode, all you need to do is just add this code into the functions.php file.

//==============================================================
// Dive in WP - Shortcode For Image
//==============================================================

function diwp_image_shortcode($attr){

	$args = shortcode_atts(

			array(
				'src'   => '#',
				'title' => '',
				'alt'   => '',
				'class' => ''	
					  
		     ), $attr);
   
   $image = '<img src="'.$args['src'].'" title="'.$args['title'].'" alt="'.$args['alt'].'" class="'.$args['class'].'" />';

   return $image;

}

add_shortcode('diwp-image', 'diwp_image_shortcode');

This code will create a shortcode called [diwp-image] in your WordPress theme.

Now you can use this [diwp-image src=”link_to_your_image”] shortcode to display an image.

[diwp-image] shortcode accepts some parameters as given below. Where src is required to display image and others are optional.

  • src = source url of your image. this is required.
  • title = you can set the title for the image.
  • alt = you can set alt text for image.
  • class = you can set class for image.

Create Button Shortcode In WordPress

To create button shortcodes, all you need to do is just add this code into the functions.php file.


//==============================================================
// Dive in WP - Shortcode For Button
//==============================================================

function diwp_button_shortcode($attr){

	$args = shortcode_atts(

				array(
						'link'   => '#',
						'bgcolor' => '#1a73e8',
						'textcolor' => '#FFF',
						'text' => 'Button',
					  
					  ), $attr);

	$button = '<a href="'.$args['link'].'" style="background:'.$args['bgcolor'].'; color:'.$args['textcolor'].'; padding: 8px 20px; display: inline-block; border-radius: 4px; font-size: inherit;margin: 15px 0px;">'.$args['text'].'</a>';

	return $button;
}

add_shortcode('diwp-button', 'diwp_button_shortcode');

This code will create a shortcode called [diwp-button] in your WordPress theme.

Now you can use this [diwp-button link=”link_to_page”] shortcode in to create a button.

[diwp-button] shortcode accepts some parameters as given below.

  • link = link or URL on which it should go when clicking on the button.
  • text = to set the text of the button.
  • bgcolor = to set the background color of the button.
  • textcolor = to set the font color of the button.

I have also written a separate article on creating menu shortcodes in WordPress, where I have outlined creating shortcodes for WordPress menu and displaying them anywhere in wordpress.

I hope these snippets will help you to create images and buttons so easily by using shortcodes and their attributes.

Bhuvnesh Shrivastava
Owner of diveinwp.com, solely responsible for creating helpful, informative content about WordPress, a fulltime WordPress developer with 8+ years of hands-on experience in WordPress design and development.

Related Articles