Let’s Make Shortcode in Laravel Inspired from Wordpress

3 min readOct 23, 2024

Shortcodes are a powerful feature in content management systems that allow users to insert dynamic content into their pages and posts effortlessly. They are widely used in WordPress, but their usefulness isn’t limited to just one platform. In this blog, I’ll walk you through creating a shortcode feature in Laravel, leveraging the power and flexibility of this robust PHP framework.

What Are Shortcodes?

Shortcodes are small snippets of code enclosed in square brackets that get replaced with more complex content when the page is rendered. For example, a shortcode like [gallery] might be replaced with a photo gallery when the page is displayed to the user.

Why Use Shortcodes in Laravel?

Implementing shortcodes in Laravel allows for:

Reusable content components
Cleaner and more readable code
Simplified content management for non-technical users

We will make shortcode for making profile card. You can make according to your need

Step 1: Lets create a class ShortcodeService

<?php

namespace App\Service;

class ShortcodeService
{
    private array $shortcodes = [];

    public function register(string $name, $callback)
    {
        $this->shortcodes[$name] = $callback;
    }

    public function render($content)
    {
        return preg_replace_callback('/\[(\w+)([^\]]*)\]/', function ($matches) {
            $name = $matches[1];
            $params = $this->parseParams($matches[2]);

            return isset($this->shortcodes[$name]) ? call_user_func($this->shortcodes[$name], $params) : $matches[0];
        }, $content);
    }

    protected function parseParams($string)
    {
        $params = [];
        preg_match_all('/(\w+)="([^"]+)"/', $string, $matches, PREG_SET_ORDER);
        foreach ($matches as $match) {
            $params[$match[1]] = $match[2];
        }
        return $params;
    }
}

Step 2: Modify AppServiceProvider

<?php

namespace App\Providers;

use App\AppSetting;
use App\Service\ShortcodeService;
use Illuminate\Pagination\Paginator;
use Illuminate\Support\Facades\Schema;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    protected $shortCodeService;

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        $this->shortCodeService= new ShortcodeService();
        $this->shortCodeService->register('profile_card', function ($params) {
            return "<div class='col-md-3'> <div class='card'>
              <img src='https://png.pngtree.com/png-clipart/20190629/original/pngtree-vector-edit-profile-icon-png-image_4101351.jpg' alt='John' style='width:100%'>
              <h1>{$params['name']}</h1>
              <p class='title'>{$params['designation']}</p>
              <p>{$params['university']}</p>
              <div style='margin: 24px 0;'>
                <a href='#'><i class='fa fa-dribbble'></i></a>
                        <a href=''#'><i class='fa fa-twitter'></i></a>
                <a href='#'><i class='fa fa-linkedin'></i></a>
                <a href='#'><i class='fa fa-facebook'></i></a>
              </div>

            </div> </div>";
        });
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        $this->app->singleton('shortcode', function () {
            return $this->shortCodeService;
        });
    }
}

Step 3: Modify AppServiceProvider

See the textarea box where we have added a shortcode with params( name, designation, university)

Step 4: Render your blog content in blade

<div class="container">
    <div class="row">
        <div class="mx-auto col-md-10">
            {!!  app('shortcode')->render($blog->description); !!}
        </div>
    </div>
</div>

Final output in blade will be like below. You can generate any kind of html snippet using shortcode. Add necessary css in blade for rendering

Hope that, you have learnt a lot from this. Learn always and do explore the world of coding.

I am regularly writing in this blog https://programmingmindset.com . You enhance your skill and by visiting this website