Filters added for full customization in latest update

The portal is now more customizable with filters! Version 1.2.0 on the WordPress repository now creates filters throughout all Duzz Portal pages including the table lists, message lists, and project pages have filters so you can fully customize the layout. The filters can also be used as hooks. This allows coders to customize for their client’s websites. This is a good stepping stone for full customization before we add Guttenberg blocks for non-coders.

So this is how it works. All HTML is constructed with Duzz_Return_HTML within the plugin. There is very little hard coded HTML. So everything you see is built with the Duzz_Return_HTML constructor PHP class. So it didn’t take much to update Duzz_Return_HTML so that it also adds a filter every time Duzz_Return_HTML is called. The filter names are based on the first CSS class called in the HTML.

For example. This PHP code here:

$this->addMessage = new Duzz_Return_HTML('div', array('class' => 'top-updates side-margins-account project-page-error-message'));

Constructs this HTML here:

<div class="top-updates side-margins-account project-page-error-message"></div>

And so a filter then is created every time Duzz_Return_HTML is called and a class is created. It will name the filter after the CSS class. If there are multiple CSS classes created, it will only use the first one. So in the example above which has 3 CSS classes, the filter will only be named after the first class which is ’top-updates’. So the filter name here will be 'duzz_filter_top_updates'.

Now it wasn’t possible to create both hooks and filters within this system, so I decided to only create filters and you can use the filters to hook in content.


Using Filters to Hook in Content

So let’s start off with an example of hooking with the filter. And when I say you can hook with the filter with this system, technically what you are doing is modifying the content and then added content.

So lets take a look at this function you could use as an example:

PHP

    function custom_pagination_filter($pagination_html) {
        // Modify the pagination HTML as needed
        $modified_pagination_html = '<div class="custom-top-updates-test">' . $pagination_html . '</div>';
        return $modified_pagination_html;
    }

    // Hook the filter callback function to the pagination output filter
    add_filter('duzz_filter_top_updates', 'DuzzAddon\custom_pagination_filter');
    

Within this code, $pagination_html is the existing content for that instance of Duzz_Return_HTML. So in this example, we just wrapped the content with a new div and CSS class. This will replace the 'top_updates' class in this case. But what you could do instead is keep the existing CSS class and add in new content before or after the existing content too like this:

PHP

    function custom_pagination_filter($pagination_html) {
        // Modify the pagination HTML as needed
        $modified_pagination_html = '<div class="custom-top-updates-test"><div class="progress-bar-container-again"></div>' . $pagination_html . '</div><div class="progress-bar-again"></div>';
        return $modified_pagination_html;
    }

    // Hook the filter callback function to the pagination output filter
    add_filter('duzz_filter_top_updates', 'DuzzAddon\custom_pagination_filter');
    

And as you can see, we added <div class="progress-bar-container-again"></div> before the content and <div class="progress-bar-again"></div> after the content. So it works as a de facto hook.


Using Filters to Replace Content

Now, if you want to completely filter out content and replace existing content, you can do that too like this:

PHP

    // Define a function to create a progress bar for top updates
    function create_top_updates_progress_bar($content) {
        // Create the progress bar HTML
        $progress_bar_html = '<div class="progress-bar-container-again">';
        $progress_bar_html .= '<div class="progress-bar-again"></div>';
        $progress_bar_html .= '</div>';

        // Return the progress bar HTML
        return $progress_bar_html;
    }

    // Hook the function to the 'duzz_filter_top_updates' filter
    add_filter('duzz_filter_top_updates', 'DuzzAddon\create_top_updates_progress_bar');
    

In this example you are completely replacing all content in ’top_updates’ with a progress bar. It will not keep any of the default Duzz Portal content for that block of Duzz_Return_HTML code. Just add what you want to $progress_bar_html. And be sure to change the filter name for the location of your new content.


Conclusion

I will update the documentation more thoroughly to go into more details on this. For now, all you need to do is inspect element on any divs to find your CSS classes to change to filters. Or look through the core Duzz Portal code in the Layout folder for the instance of Duzz_Return_HTML you need.

This should tide everyone over until the Guttenberg blocks are release. Feel free to reach to me with any questions. Your questions will help me update the documentation so I can best explain how to do this for everyone.