--- title: Page Building with Brizy in Wordpress date: '2020-05-26' bigimg: brizy.jpg subtitle: Shortcodes and custom hacks incoming... tags: - php - wordpress - brizy categories: - webdesign --- As you may have read, I'm quite the [Hugo.io fan](/post/hugo-extended) and I build all my websites using this static website generator. As cool and tech-savvy it is, projects like [forestry.io](https://forestry.io/) exist to leverage Hugo's powers into the world of teams an non-technical bloggers. However, it still requires things like _committing_ and does not come with a lot of custom design options. My wife has been blogging on and off for more than five years now, and she's been using things like Blogspot, Webnode, Wix and Wordpress. Not content with any of those, about a month ago she started creating yet another blog, calling in my help with the code portions. She's never content with the design options the free templates offer, and would like to design things herself, without having a lot of knowledge of CSS/HTML. That's where things like Webnode and Wix come in: a lot of illustrators and designers create their own website using **blocks**: they are **page builders**, where drag and dropping is possible and (ugly) CSS/HTML is scaffolded. Since both Webnode and Wix are paid solutions, and both do not enable you to host it yourself, we decided to go for the Wordpress option again, more specifically with a page builder plugin: _[Brizy](https://brizy.io)_. > The most user-friendly website builder in town According to the Brizy website See for yourself: {{< youtube KUv-NqDR-8s >}} Amazing, right? Not quite. It's all good as long as you are creating _pages_. Pages are static webpages in Wordpress. But when it comes to designing the layout of your blog posts, or _posts_, things get ugly. Brizy of course also offers a paid version which comes with premium page blocks and more options, but we contented with the free version. I have to admit that creating pages with the free version was surprisingly easy (and maybe even a bit fun too). In Brizy, you can create a 'page' that acts as a template for blog detail pages, but it 'forgets' to add the actual blog content. I'm sure there's another way in the paid version, but I solved that by using a lot of shortcodes: enter [Shortcode Ultimate](https://getshortcodes.com). Adding `[su_post field="post_content"]` in a block does generate an error in Brizy's preview mode, but works outside of that. Actually, injecting post content using that shortcode comes with a big shortcoming: it does not parse shortcodes inside posts themselves (`[caption]`, `[embed]`, ..). Solution? A custom filter: ```php function su_post_content_filter($value) { return apply_shortcodes($value); } ``` The `apply_shortcodes()` [function](https://make.wordpress.org/core/2020/02/13/wordpress-5-4-introduces-apply-shortcodes-as-an-alias-for-do-shortcode/) in Wordpress parses the shotcodes in the argument for us. I have found the Wordpress function reference to be quite complete and useful. However, it is quite a mess: there are `do_` functions, `apply_` ones, lots of methods `echo` stuff, resulting in me having to capture `stdout` to return it: ```php function blog_detail_comments_shortcode() { ob_start(); comments_template(); $html = ob_get_contents(); ob_end_clean(); return $html; } add_shortcode('blog_detail_comments', 'blog_detail_comments_shortcode'); ``` Yuck. What a mess. But now I can use `[blog_detail_comments]` inside a Brizy template to render the Wordpress blog comments partial - yay! I had to create the following shortcodes myself to get the job done: - `blog_detail_comments` - comments form - `blog_detail_footer` - a span with blog detail date and categories - `show_categories` - a list of all categories, used in the sidebar - `show_current_category` - a list of current categories #### The Blog Overview page This page usually contains a list of latest blog entries. Shortcodes Ultimate does not support pagination - great. I grew tired of reinventing the wheel and installed yet another plugin to do the work for me: ``` [display-posts pagination="true" image_size="thumbnail" include_excerpt="true" excerpt_length ="30" include_date="true" category_display="true" category_label="" include_excerpt_dash="false" image_size="medium" date_format="d/m/Y"] ``` The result is not great. Instead of utilizing URLs such as `/page/2/`, as the default Wordpress templates do, now we're stuck with `/blog/?dps_paged=3` - that is, unless I intervene and rewrite things. Yet. Again. Yuck. #### The Blog Detail page !["Invalid brizy content"](../brizy_invalid.png "Did I do something wrong?") A lot of shortcodes are needed here. Blog title, blog contents, blog metadata (the detail footer), blog comment forms, showing a list of categories, a list of most popular or recent posts in the sidebar, ... The problem for my wife is that while designing this page, there are no placeholders available, so it's a bit of a guess how it will turn out to be. Oh, did I mention that I had to style these things myself? Since you can't use the Brizy Editor to apply a font? That means duplication. And that means more shit when my wife decides to use another font on all pages: the shortcodes won't budge. #### The Category page Right, "terms" in Wordpress. Are you using tags or categories? Or did you create your own taxonomy? What's with all the complexity when I just want a simple way to sort and organize my blog posts? Here, I used another self-made shortcode, `[show_current_category]`, that is a wrapper around `[display-posts]` to apply the category filter scraped from the request URL (usually something like `/category/blabla`): ```php $show_current_category_in = FALSE; function show_current_category_shortcode() { global $show_current_category_in; if($show_current_category_in == TRUE) return ''; $show_current_category_in = TRUE; $cat = str_replace('/', '', str_replace('category', '', $_SERVER['REQUEST_URI'])); ob_start(); echo "