Weird WordPress One: Outputting pagebuilder contents on PHP templates

TricaExMachina — Sun, 30 Jul 2023 14:28:28 +0000

Documenting non-standard WordPress work that I come across.

I've just completed a job for a client that required a custom Woocommerce Archive. The problems were:

They had a sitewide footer that needed to appear on archive pages that had to remain editable via Wpbakery for updates by non-programmers
Wpbakery page builder was not available on woocommerce archive pages

I moan about pagebuilders all the time to anyone who will listen but even I know that sometimes they are a requirement for end users that want to manage their own pages. In this case we had to output wpbakery content onto an archive page which is generated by Woocommerce depending on the category query and any attribute or tag parameters. This theme they used did not have an affordance to use wpbakery to build out a woocommerce archive page, nor did they want to add bloat to the theme by using an auxiliary plugin like WCbuilder.

At this point you may want to know why they didn't just build their own page and use the builder's built in woocommerce product loop 'Product Category'? This is because the sidebar widget for woocommerce, 'Filter product by attribute', simply does not work on non-woocommerce pages, this is a known issue since 2020 and remains unfixed to this day (https://github.com/woocommerce/woocommerce/issues/27419).

After complaining quietly to myself about how a major plugin still hasn't managed to fix this common issue in 3 years, I came up with a solution that resulted in the following:

Create a page in the backend that would contain the archive footer and allow them to edit it via standard Wpbakery editing
Write a shortcode that wrapped a function to output the page content of the 'footer page' into the archive page.

At this point my plugin code looked like this:

<?php
// Adds Shortcode
add_shortcode( 'footer-loop', 'footerloop_shortcode' );
function footerloop_shortcode() {

    // queries the footer page
    $scamp_query = new WP_Query( 'pagename=footerblock' );

    while ( $scamp_query->have_posts() ) : $scamp_query->the_post();
        the_content();
    endwhile;

    wp_reset_postdata(); 
}?>

and in the template file:

<?php echo do_shortcode('[footer-loop]'); ?>

Now this worked just fine to begin with and it output the pagebuilder content cleanly and preserved the columns, images and subscription boxes. On closer inspection though it did not output any of the builder's block-level CSS.

Curses.

Then I recalled that the css for these blocks is stored in the post meta and that I'd have to echo that out in a style tag to properly render the builder content. The code was then updated to:

<?php
add_shortcode( 'footer-loop', 'footerloop_shortcode' );
function footerloop_shortcode() {

    // queries the footer page
    $scamp_query = new WP_Query( 'pagename=footerblock' );

    while ( $scamp_query->have_posts() ) : $scamp_query->the_post();
        the_content();
    endwhile;
    echo '<style type="text/css" data-type="vc_shortcodes-custom-css">';
       echo get_post_meta( 1840, '_wpb_shortcodes_custom_css', true );
  echo '</style>';
    wp_reset_postdata();

}?>

This now resulted in the block rendering properly but it is not the cleanest method as it now outputs a style tag below the footer. Yes its only about four lines but its not optimal for it to deploy outside the head.

To fix this, I renamed my style.css file in my plugin to style.css.php and below the other rules I put in there for basic styling I wrote in the:

<?php
echo get_post_meta( 1840, '_wpb_shortcodes_custom_css', true );
?>

without the encapsulating style tags from the plugin. If you do something like this yourself make sure you register and enqueue the file so that it deploys in your head tag also.

And that's that. Weird use case for WordPress done.

You owe it to yourself to ditch page-builders and learn to code.

TricaExMachina — Thu, 17 Mar 2022 20:24:19 +0000

Image by: Alexis Diaz - Artwork in Shoreditch, England
I don't mean for this post to be denigrating or diminishing in any way, the mere fact that you are entering this space with the intention to build useful, beautiful sites with the skills currently available to you is laudable, and you should be proud of any work you do that pays you and results in your client, and you, being satisfied with the result.

What I'm hoping to convey is a desire to see you take your work to its logical next step, learning to code. To ditch the confines of Divi, Elementor, WPBakery etc and allow yourself to create freely. Making sites and web applications that conform to your imagination and not the dictates of these pagebuilders.

My reason for this is that I see, almost daily, requests from pagebuilder users, on various social media and message boards, seeking to extend the functionality of their systems or becoming desperate at the inability to apply basic layout patterns because the system simply won't do it short of littering an auxiliary stylesheet with overrides. Personally, my work has an increasing amount of requests for conversion of elementor etc sites to PHP templates coupled with custom post types and fields. Ostensibly because clients simply do not have the time to learn a pagebuilder and its simpler for them to fill a field that says 'industry type' or click on 'upload banner image' without worrying about knocking a row / column / grid item out of place. Further, removing the bloat of elementor or similar can increase your pagespeed score by huge amounts, super important with the Core Web Vitals update.

I'm not about to say that code is simple, it takes time to get used to it, it requires a large amount of practice and a willingness to create, break, fix, repeat.

When I shifted from editing paid themes with basic pagebuilders I broke everything, all the time until I didn't. The first time I was able to build a WordPress site from scratch as per a supplied PSD, I experienced a professional satisfaction like none before, as simplistic as the design was.

Further, the possibilities for increased remuneration for the increased skills is excellent and a chief motivator, the ability to now create projects that are useful, highly functional and beautiful, is an immensely validating achievement and is in within the reach of anyone willing to put in the time.

If anyone is interested I will be posting bite-size and longer form tutorials on how to get into this, with a focus on WordPress customization. Please bear with me as I make them, as my will is strong but my time is limited, so I will make them as fast as I can.

I really hope to be of use in the coming months and share the bits and pieces that I've learned through failure and success.

Til then, good luck and keep at it. :)

DEV Community: TricaExMachina

Weird WordPress One: Outputting pagebuilder contents on PHP templates

You owe it to yourself to ditch page-builders and learn to code.