How to Install the QR Code Plugin for Your Directory Posts

Introduction

QR codes are widely used and have become an essential tool for easy sharing and quick access to digital content. By adding QR codes to your directory posts, you can help your members share their content more effectively.

They can print the QR code and display it, allowing visitors to scan and be instantly redirected to the posts. In this tutorial, we’ll show you how to install and use the QR Code plugin for your directory posts.

How it works

Customizing the "Bootstrap Theme - Account - Photo Albums datatable" widget

This widget is responsible for managing the feature types in BD, such as those that allow you to upload multiple images, like photo albums, classifieds, properties, etc.

Let’s get started!

1. Visit managemydirectory.com and navigate to Toolbox > Widget Manager in the left sidebar.

2. Search for: Bootstrap Theme - Account - Photo Albums datatable.

3. If the widget is the default one, go to Actions > Customize.

4. Paste this code at the beginning of the widget.

class QRGenerator {
  private $qrServerUrl = '<https://api.qrserver.com/v1/create-qr-code/>';
  
  public function generateQRUrl($fullUrl, $size = 300) {

      $qrUrl = $this->qrServerUrl . '?' . http_build_query([
          'size' => $size . 'x' . $size,
          'data' => $fullUrl,
          'format' => 'png',
          'qzone' => 1
      ]);
      
      return $qrUrl;
  }
  
  public function displayQRImage($fullUrl, $size = 300) {
      $qrUrl = $this->generateQRUrl($fullUrl, $size);
      return '<img src="' . htmlspecialchars($qrUrl) . '" alt="QR Code" />';
  }
}

$qrGenerator = new QRGenerator();

5. It will look like this:

6. Now, this part can be tricky, but we need to scroll down and paste this other code. It’s hard to specify the exact line because, depending on how you pasted the code from the previous step, it could be between lines 257 and 261. Check the image for more reference.

$td4 .= "<div class='text-center'>";
$td4 .= $qrGenerator->displayQRImage("//" . $w['website_url'] . "/" . $group['group_filename'], 100);
$td4 .= "</div>";

Customizing the "Bootstrap Theme - Account - Feature Body datatable" widget

This widget is responsible for managing the feature types in BD that allow you to upload only one image, such as coupons, events, job listings, etc.

Let’s get started!

1. Visit managemydirectory.com and navigate to Toolbox > Widget Manager in the left sidebar.

2. Search for: Bootstrap Theme - Account - Feature Body datatable.

3. If the widget is the default one, go to Actions > Customize.

4. Paste this code at the beginning of the widget.

class QRGenerator {
  private $qrServerUrl = '<https://api.qrserver.com/v1/create-qr-code/>';
  
  public function generateQRUrl($fullUrl, $size = 300) {

      $qrUrl = $this->qrServerUrl . '?' . http_build_query([
          'size' => $size . 'x' . $size,
          'data' => $fullUrl,
          'format' => 'png',
          'qzone' => 1
      ]);
      
      return $qrUrl;
  }
  
  public function displayQRImage($fullUrl, $size = 300) {
      $qrUrl = $this->generateQRUrl($fullUrl, $size);
      return '<img src="' . htmlspecialchars($qrUrl) . '" alt="QR Code" />';
  }
}

$qrGenerator = new QRGenerator();

5. It will look like this:

6. Now, just like in the previous step, this part can be tricky. We need to scroll down and paste this other code. It’s hard to specify the exact line because, depending on how you pasted the code from the previous step, it could be around lines 766 and 770. Check the image for more reference.

$td4 .= "<div class='text-center'>";
$td4 .= $qrGenerator->displayQRImage("//" . $w['website_url'] . "/" . $post['post_filename'], 100);
$td4 .= "</div>";

QA

Yeah, it was that simple! Now, let’s move on to the best part of the tutorial—testing it and seeing the final result.

1. Log in with one of your members.

2. If you already have posts, you’ll see the QR code. If you don’t have any posts, create one and then return to the page where you manage them.

3. It will look like this:

That’s it! If you find any bugs or have suggestions, just let me know, and I’ll be happy to help you.

Conclusion

Congratulations! You’ve now implemented QR For Posts in your directory.

Now, you and your members can share posts easily using the QR code. I hope this feature proves useful for you and your community.

I sincerely hope you enjoyed this tutorial as much as I enjoyed creating it. I put a lot of effort into it, and I’d love for you to consider signing up! 🙌

If you successfully completed the process, please let us know in the comment section below.

That's all for now. Thanks for reading!