I recently encountered a WordPress project where I needed to add some specific PHP code to a certain part of a page template. Obviously this is relatively straight forward, depending on the code, with usual WordPress theme files; this build however, was using the page builder plugin “Visual Composer” to construct all of it’s pages.

What’s a Page Builder? And What’s Visual Composer?

Page builder plugins are majorly popular in the WordPress community right now, especially with non-development minded users. In short they enable users with little or no coding experience to create more complicated layouts. Visual Composer is, at the time of writing, probably the most popular.

How to Insert Custom PHP into the Visual Composer Flow

I explored a few options. It’s not the best idea to add PHP directly into text editors for security reasons, so that was out. I couldn’t go into the page template files themselves and start dropping PHP/HTML in there as it wouldn’t appear in the Visual Composer layout order.

I thought about using the built in Visual Composer API to create a custom layout block, but my output was so simple I considered this to be overkill; plus I like to prevent “lock-in” if at all possible. For instance, if it were decided that the project wouldn’t use the Visual Composer plugin anymore, I’d like my code to still work using standard WordPress features.

Eventually I settled on building a custom shortcode to output my PHP code, meaning that anywhere you can use a shortcode in WordPress (including a Visual Composer Text Block) you can output custom PHP and HTML. Here’s a step by step guide for getting lines of PHP to output where you want them in any Visual Composer page layout:

Build a Custom Shortcode to Output the PHP

Using the WordPress shortcode API guidelines, in your functions.php file (or other include depending on your theme setup) add the following:

Be sure to name the function and the shortcode something relevant to what you’re trying to output on the page, this is only a simple example.

Insert Into the Page using Visual Composer

Now that your shortcode is registered it can be called into Visual Composer using a “text block“. In the WordPress admin area, go to Pages and find the one you’d like to drop your custom PHP in to.

From here, add a Visual Composer text block with your newly created shortcode called within it. For this guide the shortcode is [my_vc_php_output]:

Visual Composer pop up to add Text Block

Visual Composer pop up to add Text Block

Then drag and drop this text block to the specific area you’d like the custom PHP from your shortcode to be displayed:

Custom shortcode displaying in full width Visual Composer column

Custom shortcode displaying in full width Visual Composer column

The above shows the shortcode in position using a full width Visual Composer column. It’s also possible to place the shortcode in more complicated layout types, like within one of the four adjacent columns:

Custom shortcode displaying within the four adjacent Visual Composer columns

Custom shortcode displaying within the four adjacent Visual Composer columns

Check PHP/HTML Output on the Page

Now that the shortcode is in your Visual Composer page layout, check the results of this on the page to ensure the output is as expected:

Custom PHP output positioned in full width column

Custom PHP output positioned in full width column

Custom PHP output positioned within four adjacent columns

Custom PHP output positioned within four adjacent columns

In Summary

Obviously, there are more possibilities than returning a header tag using this solution; it can be expanded to serve any functionality possible with the WordPress shortcode API, such as shortcodes that handle attributes.

I hope this quick guide helps other people facing the same issue; trying to add your own PHP into a page laid out with Visual Composer can be tricky, especially if you’re used to building bespoke WordPress templates as I am.

Buy Visual Composer Page Builder for just $34!

Posted by Tom Hirst

Freelance WordPress developer, front-end developer and clothing line owner available for hire.

4 Comments

  1. grate thank you so much

    Reply

  2. Hi Tom, nice tutorial. How about putting an order number in a shortcode. We use custom thankyou pages and would like to output the order number. The code for the ordernumber is get_order_number(); ?>

    Is it possible to create a shortcode for this using your method?

    Thanks!

    Reply

    1. Hi Anne,

      Thanks for the kind words. Yep this should be possible as long as the get_order_number function works on the page it’s being called on via the shortcode.

      Cheers,
      Tom

      Reply

Leave a reply

Your email address will not be published. Required fields are marked *