Help! My Website Needs a Feature

Do you have a WordPress site for your business, and are you using one of the many page builders out there like Elementor, WP Bakery, or Beaver Builder, or have you converted to the Gutenberg editor? Do you find yourself needing additional functionality, but are limited by time – you have a business to run after all – or know-how? While these tools can be great, sometimes you need a little more than what’s inside the box.

If you feel like it’s hopeless, and feel that your website is hamstringing your business efforts, but you don’t have the budget for a massive overhaul, there are options. One option for achieving functionality is to partner with a Denver web development company. A more DIY option is a shortcode, which is a short string of code that allows webmasters to easily improve their site’s functionality.

By default, WordPress offers you the ability to develop your own shortcodes. Perhaps you’ve even used them with one of the many 1000’s of plugins available. A shortcode is enclosed in square brackets, and it generally looks something like this:

[do_something]

Often, the shortcode will do something like pull in 3 posts tagged with a certain category or display a list of events. They can really do any number of things. However, they aren’t limited to plugins — we can write our own. So, let’s just do that!

Writing Our Own Custom Shortcode

Writing our custom shortcode is easy. Within your theme’s function.php, we can write the following to register our shortcode:

function our_featured_case_study( $atts = array() ) {
    return 'Success!';
}
add_shortcode( 'our_featured_case_study_shortcode', 'our_featured_case_study'); 

The our_featured_case_study_shortcode will be our shortcode, and the our_feautured_case_study is our callback function. In this case, it’ll simply display “Success!” if we were to use the shortcode. Pretty basic, and useless at this point. Let’s take it a step further.

If you’ve used WordPress, you might be familiar with Custom Post Types. Our site currently uses them for a multitude of purposes. One such purpose is our Case Studies. Generally, they feature an image, quote, and some stats. For example:

What if we wanted to display a link to the Case Study with the title and the quote associated with the Case Study? Could we do that? With shortcodes, absolutely! Let’s get started.

Overview of shortcodes

We’ve identified what we’d like to do. So, let’s break down what we need to do to get it done. We need to do the following:

1. Display the title of the our Case Study.
2. Get the link to our Case Study and display a link for it.
3. Get the associated quote, if available.

Okay, so let’s get to coding. Back in our our_featured_case_study callback function, let’s add some updates.

function our_featured_case_study(
 $atts = [
  'id' => false,
  'quote => false, 
 ];
)
...

In the above, we’ve defined some function arguments in an array, with default values. By default, we are saying id is defined (so we’ll have to provide one) and to not return the quote.

Okay, in the next steps let’s set up our function to retrieve the data.

...
 $id = $atts['id'];
 $quote = $atts['quote'];
 if ($id == false) {
   return false;
 } else {
   $title = get_the_title($id);
   $link = get_the_permalink($id);

   $html = '<div class="shortcode-case-study">';
   $html .= '<h4>' . $title .  '</h4>';
   $html .= '<div class="wp-block-button is-style-grey-box">';
   $html .= '<a href="' . $link . '" class="wp-block-button__link">Learn More</a>';
   $html .= '</div>';
   $html .= '</div>';

   return $html;
 }

This code is checking to see if we’ve provided an id in our shortcode. If so, it gets the title associated with the id, and the link associated. Here is our code in action so far:

[our_featured_case_study_shortcode id="7161"]

And it displays the following:

Okay, that’s a bit better, but isn’t quite compelling enough yet. Let’s set it up to return the quote associated with the Case Study. Back in our function, let’s add the following:

   $html .= '<h4>' . $title .  '</h4>';
   if ($quote == true) {
      $content = get_post_field('post_content', $id);
      $blocks = parse_blocks($content);
      foreach($blocks as $key => $block){
	$name = $block['blockName'];
	if ($name == 'red-egg-blocks/review') {
	   $inner_html = render_block($block);
	   $html .= $inner_html;
	}
      }
   }

It’s a fair amount to unpack.

Our first new line if ($quote == true) { is checking to see if we want to display the quote, if true we will display it.

Our next line $content = get_post_field('post_content', $id); gets the content associated with our Case Study.

Since we are using the Gutenberg editor, our next line $blocks = parse_blocks($content); will return our content string as an array of block objects. The following loops through the array of objects, and checks to see if a block named ‘red-egg-blocks/review’ is available:

foreach($blocks as $key => $block){
	$name = $block['blockName'];
	if ($name == 'red-egg-blocks/review') {
	   $inner_html = render_block($block);
	   $html .= $inner_html;
	}
}

If so, it renders the block and appends it to our html that we will display. Here is our shortcode now:

[our_featured_case_study_shortcode id="7161" quote="true"]

Which displays the following:

Wrapping it up

So much better! But not quite what I want. The title feels a bit off, and doesn’t really explain the following quote. So, let’s add some additional features. Back in our callback function, let’s add some additional function arguments:

function our_featured_case_study(
 $atts = [
  'id' => false,
  'quote => false,
  'pre_title' => '',
  'post_title' => '' 
 ];
) 

Here I’ve added 'pre_title' and 'post_title' arguments to our argument array. We will use these to prepend and append additional words to the Case Study Title. Back in our function, let’s add the following:

...
 $id = $atts['id'];
 $quote = $atts['quote'];
 $pre_title = $atts['pre_title'];
 $post_title = $atts['post_title'];
...
 $html .= '<h4>' . $pre_title . $title . $post_title . '</h4>';

The above updates our title to display something before and after the title, if we want. Okay, so let’s update our shortcode to add the pre and post title words. It’ll now look like the following:

[our_featured_case_study_shortcode id="7161" quote="true" pre_title="See What Our Friends at " post_title=" Had to Say About Us."]

Which displays the following:

That’s much better! It now adds a little context to the quote provided. Here’s the complete code:

function our_featured_case_study_events( 
 $atts = [
  'id' => false,
  'quote => false,
  'pre_title' => '',
  'post_title' => ''
 ]
) {
	$id = $atts['id'];
	$quote = $atts['quote'];
	$pre_title = $atts['pre_title'];
	$post_title = $atts['post_title'];

	if ($id == false) {
	  return false;
	} else {
	    $title = get_the_title($id);
	    $link = get_the_permalink($id);

	    $html = '<div class="shortcode-case-study">';
	    $html .= '<h4>' . $pre_title . $title . $post_title . '</h4>';
	    if ($quote == true) {
	       $content = get_post_field('post_content', $id);
	       $blocks = parse_blocks($content);
	       foreach($blocks as $key => $block){
	          $name = $block['blockName'];
		  if ($name == 'red-egg-blocks/review') {
			$inner_html = render_block($block);
			$html .= $inner_html;
		   }
	       }
	    }

	    $html .= '<div class="wp-block-button is-style-grey-box">';
	    $html .= '<a href="' . $link . '" class="wp-block-button__link">Learn More</a>';
	    $html .= '</div>';
	    $html .= '</div>';

	    return $html;		
	}

}
add_shortcode( 'our_featured_case_study_shortcode', 'our_featured_case_study_events'); 

Help From a Denver Web Development Company

The preceding is just one example of the many things a shortcode can do to add functionality to your website. While this example was specific for our site, which uses the Gutenberg editor, shortcodes can be built to work with any number of page builders, or older versions of WordPress, pre-Gutenberg. So don’t let the age or build of your site dissuade you from trying out shortcodes.

If all this sounds outside of your technical ability, or if you just don’t have the time, getting help from a Denver web development company can improve the look and feel of your website. We are happy to assist you in your web development needs. We cater to all budgets and business sizes, and we would love to work with you. Contact us, if this sounds like you!